/* shopforfood.com — base components (Milestone 0) + the living receipt
   (Milestone 2). Derives entirely from tokens.css; introduces no new colors,
   fonts, radii or shadows (DESIGN.md). The two literal hexes that appear are in
   SVG/QR contexts only, where presentation attributes can't reference CSS vars.
   No inline styles anywhere (PROJECT.md §7 / DESIGN.md). */

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

body { display: flex; flex-direction: column; min-height: 100vh; }

a { color: var(--leaf); text-decoration: none; }
a:hover { color: var(--leaf-deep); text-decoration: underline; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0 0 var(--sp-3);
}
h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }
p  { margin: 0 0 var(--sp-4); }

.muted { color: color-mix(in srgb, var(--ink) 62%, var(--paper)); }
.small { font-size: var(--fs-sm); }
.mono  { font-family: var(--font-mono); }

/* ---------------------------------------------------------------- layout */

.container { width: 100%; margin-inline: auto; padding-inline: var(--sp-4); }
.container--app   { max-width: var(--w-app); }
.container--read  { max-width: var(--w-read); }
.container--admin { max-width: var(--w-admin); }

.main { flex: 1 0 auto; padding-block: var(--sp-8); }

/* ------------------------------------------------------------ header/footer */

.site-header { border-bottom: var(--border); background: var(--paper); }
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  padding-block: var(--sp-3);
}
.brand {
  font-family: var(--font-display); font-weight: 800; font-size: var(--fs-lg);
  letter-spacing: -0.02em; color: var(--ink);
}
.brand:hover { text-decoration: none; color: var(--ink); }
.site-nav { display: flex; gap: var(--sp-4); }

.site-footer {
  flex-shrink: 0; border-top: var(--border); background: var(--tape);
  padding-block: var(--sp-6);
}
.legal-nav { display: flex; gap: var(--sp-4); margin-block: var(--sp-2); }

/* ---------------------------------------------------------------- buttons */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 var(--sp-4);
  font-family: var(--font-body); font-size: var(--fs-md); font-weight: 600;
  border: 1px solid transparent; border-radius: var(--radius-ctl);
  cursor: pointer; transition: background var(--t-fast), color var(--t-fast);
}
.btn--lg { min-height: 52px; padding: 0 var(--sp-6); font-size: var(--fs-lg); }
.btn--primary { background: var(--leaf); color: var(--paper); }
.btn--primary:hover { background: var(--leaf-deep); text-decoration: none; }
.btn--secondary { background: transparent; color: var(--ink); border-color: var(--mist); }
.btn--secondary:hover { background: var(--tape); text-decoration: none; }
.btn--danger {
  background: transparent; color: var(--radish); border-color: transparent;
  min-height: auto; padding: var(--sp-1) var(--sp-2);
}
.btn--danger:hover { text-decoration: underline; }

/* ---------------------------------------------------------------- inputs */

.input, input[type="text"], input[type="email"], input[type="password"], textarea {
  width: 100%; min-height: 44px; padding: var(--sp-2) var(--sp-3);
  font-family: var(--font-body); font-size: var(--fs-md); color: var(--ink);
  background: var(--paper); border: var(--border); border-radius: var(--radius-ctl);
}
textarea { min-height: 8rem; resize: vertical; line-height: 1.5; }

/* ------------------------------------------------------------- card & chip */

.card {
  background: var(--paper); border: var(--border); border-radius: var(--radius-card);
  box-shadow: var(--shadow); padding: var(--sp-6);
}
.chip {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  padding: var(--sp-1) var(--sp-3); border-radius: var(--radius-chip);
  background: var(--tape); border: var(--border);
  font-size: var(--fs-sm); cursor: pointer;
}
.badge-pro {
  display: inline-block; padding: 0 var(--sp-2); border-radius: var(--radius-chip);
  background: var(--butter); color: var(--ink);
  font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 500;
}

/* ---------------------------------------------------------------- prose */

.prose { max-width: 42rem; line-height: 1.55; }
.prose--center { text-align: center; margin-inline: auto; padding-block: var(--sp-12); }
.prose h2 { margin-top: var(--sp-6); }
.prose ul, .prose ol { padding-left: var(--sp-6); margin-bottom: var(--sp-4); }
.prose li { margin-bottom: var(--sp-1); }
.prose code {
  font-family: var(--font-mono); font-size: 0.9em;
  background: var(--tape); padding: 0.1em 0.35em; border-radius: 6px;
}

/* ---------------------------------------------------------------- hero */

.hero {
  display: grid; grid-template-columns: 1fr; gap: var(--sp-8);
  align-items: center; padding-block: var(--sp-6);
}
@media (min-width: 820px) {
  .hero { grid-template-columns: 1fr minmax(280px, 360px); }
}
.hero__title { font-size: var(--fs-hero); }
.lede { font-size: var(--fs-lg); }
.hero__cta { margin-block: var(--sp-4); }

.trio {
  display: grid; grid-template-columns: 1fr; gap: var(--sp-6);
  padding-block: var(--sp-8); border-top: var(--border); margin-top: var(--sp-8);
}
@media (min-width: 720px) { .trio { grid-template-columns: repeat(3, 1fr); } }
.trio__item h2 { font-size: var(--fs-lg); }

/* =========================================================================
   THE LIVING RECEIPT (DESIGN.md "Signature element")
   The list IS a till receipt: category tear-lines, dot-leaders to tabular mono
   prices, a perforated total strip with a count-up total, an animated strike on
   check. Everything else on the page stays quiet.
   ========================================================================= */

.receipt {
  background: var(--paper); border: var(--border); border-radius: var(--radius-card);
  box-shadow: var(--shadow); padding: var(--sp-4) var(--sp-4) 0;
  font-family: var(--font-body);
}
.receipt__head {
  font-family: var(--font-mono); font-size: var(--fs-sm);
  text-transform: uppercase; letter-spacing: 0.08em;
  text-align: center; padding-block: var(--sp-2) var(--sp-3);
}

/* Dashed tear-line between category sections, with a tiny mono label. */
.items { list-style: none; margin: 0; padding: 0; }
.tear-line--row {
  position: relative; height: 1px; margin: var(--sp-4) 0 var(--sp-3);
  background: repeating-linear-gradient(
    to right, var(--mist) 0 6px, transparent 6px 12px);
}
.tear-line--row:first-child { margin-top: var(--sp-1); }
.tear-line__label {
  position: absolute; top: -0.62em; left: 0; padding-right: var(--sp-2);
  background: var(--paper);
  font-family: var(--font-mono); font-size: var(--fs-xs);
  text-transform: uppercase; letter-spacing: 0.08em;
  color: color-mix(in srgb, var(--ink) 60%, var(--paper));
}

/* Item row: a check, the receipt line (name … price), and quiet sub-controls. */
.item {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "check line" "check sub";
  align-items: center; column-gap: var(--sp-2); row-gap: 2px;
  padding: var(--sp-1) 0;
}

.item__check {
  grid-area: check; align-self: center;
  width: 24px; height: 24px; padding: 0;
  border: 2px solid var(--mist); border-radius: 6px; background: var(--paper);
  cursor: pointer; position: relative;
}
.item__check[aria-checked="true"] { background: var(--leaf); border-color: var(--leaf); }
.item__check[aria-checked="true"]::after {
  content: ""; position: absolute; left: 7px; top: 3px; width: 6px; height: 11px;
  border: solid var(--paper); border-width: 0 2px 2px 0; transform: rotate(45deg);
}

.item__line {
  grid-area: line; position: relative;
  display: flex; align-items: baseline; gap: var(--sp-2); min-width: 0;
}
.item__name {
  flex: 1 1 auto; min-width: 0; min-height: 32px;
  border: 1px solid transparent; background: transparent;
  padding: 2px var(--sp-1); font-size: var(--fs-md); color: var(--ink);
}
.item__name:hover { border-color: var(--mist); }
.item__name:focus-visible { border-color: var(--leaf); background: var(--paper); }
.item__qty {
  flex: 0 0 auto; width: 3.25rem; min-height: 32px; text-align: right;
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: var(--fs-xs); color: color-mix(in srgb, var(--ink) 62%, var(--paper));
  border: 1px solid transparent; background: transparent; padding: 2px var(--sp-1);
}
.item__qty:focus-visible { border-color: var(--leaf); background: var(--paper); }
.item__dots {
  flex: 0 0 1.5rem; align-self: stretch;
  border-bottom: 1px dotted var(--mist); margin-bottom: 7px;
}
.item__price {
  flex: 0 0 auto; width: 4.75rem; min-height: 32px; text-align: right;
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: var(--fs-md); color: var(--ink);
  border: 1px solid transparent; background: transparent; padding: 2px var(--sp-1);
}
.item__price:hover { border-color: var(--mist); }
.item__price:focus-visible { border-color: var(--leaf); background: var(--paper); }

/* Quiet secondary controls — present but dimmed until the row is touched. */
.item__sub {
  grid-area: sub; display: flex; align-items: center; gap: var(--sp-2);
  opacity: 0.4; transition: opacity var(--t-fast);
}
.item:hover .item__sub, .item:focus-within .item__sub { opacity: 1; }
.item__category {
  min-height: 30px; padding: 2px var(--sp-2); font-size: var(--fs-xs);
  font-family: var(--font-mono); color: var(--ink);
  background: var(--paper); border: var(--border); border-radius: var(--radius-ctl);
}
.item__drag {
  cursor: grab; touch-action: none; background: none; border: none;
  color: var(--mist); font-size: var(--fs-lg); padding: 0 var(--sp-1); line-height: 1;
}
.item__drag:active { cursor: grabbing; }
.item__delete {
  background: none; border: none; color: var(--radish);
  font-size: var(--fs-lg); line-height: 1; padding: 0 var(--sp-1); cursor: pointer;
}

/* Drag-reorder affordances. */
.item--dragging { opacity: 0.5; }
.item--drop-before { box-shadow: inset 0 2px 0 var(--leaf); }
.item--drop-after  { box-shadow: inset 0 -2px 0 var(--leaf); }

/* Strike on check: a left→right line (180 ms) + fade to 45 % (DESIGN.md). The
   line persists via --checked; --striking only re-runs the animation. */
.item__line::after {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px;
  background: var(--ink); opacity: 0.55; pointer-events: none;
  transform: scaleX(0); transform-origin: left center;
}
.item--checked .item__line::after { transform: scaleX(1); }
.item--striking .item__line::after { animation: strike 180ms ease-out; }
.item--checked .item__name,
.item--checked .item__qty,
.item--checked .item__price { opacity: 0.45; }
@keyframes strike { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* The perforated total strip with the running count-up total. */
.receipt__total {
  position: relative; display: flex; align-items: baseline; gap: var(--sp-2);
  margin: var(--sp-4) calc(-1 * var(--sp-4)) 0;
  padding: var(--sp-4); border-top: 1px dashed var(--mist);
}
.receipt__total::before { /* CSS-only scallop perforation along the top edge */
  content: ""; position: absolute; top: -6px; left: 0; right: 0; height: 6px;
  background: radial-gradient(circle at 6px 0, transparent 0 5px, var(--paper) 5px) repeat-x;
  background-size: 12px 6px;
}
.receipt__total-label {
  font-family: var(--font-mono); font-size: var(--fs-sm);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.receipt__dots { flex: 1; align-self: center; border-bottom: 1px dotted var(--mist); }
.receipt__total-value {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: var(--fs-xl); font-weight: 500; white-space: nowrap;
}
.receipt__total--empty .receipt__dots,
.receipt__total--empty .receipt__total-value { display: none; }

/* The demo receipt on the homepage: read-only spans, true dot-leaders. */
.item--demo { cursor: pointer; grid-template-areas: "check line"; }
.item--demo .item__name { flex: 0 1 auto; }
.item--demo .item__dots { flex: 1 1 auto; }
.item--demo .item__name,
.item--demo .item__qty,
.item--demo .item__price { border-color: transparent; background: transparent; }

/* ----------------------------------------------- list page scaffolding */

.list { display: flex; flex-direction: column; gap: var(--sp-3); }

.list__title-input {
  font-family: var(--font-display); font-weight: 800; font-size: var(--fs-xl);
  letter-spacing: -0.02em; border: 1px solid transparent; background: transparent;
  padding: var(--sp-1) var(--sp-2); min-height: auto;
}
.list__title-input:hover { border-color: var(--mist); }
.list__title-input:focus-visible { border-color: var(--leaf); background: var(--paper); }

.list__tools { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.list__tool { min-height: 40px; }

.quick-add { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.chip--add { animation: chip-pop var(--t-fast) ease-out; }
.chip--add:hover { background: var(--mist); }
@keyframes chip-pop {
  from { transform: scale(0.82); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

.add-item { display: flex; gap: var(--sp-2); }
.add-item__input { flex: 1; }
.add-item__btn { flex-shrink: 0; }

.items__empty { color: color-mix(in srgb, var(--ink) 62%, var(--paper)); padding: var(--sp-4) 0; }

.list__net { color: var(--radish); margin: 0; }
.list__error { color: var(--radish); margin: 0; }

.list__share { margin-top: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-1); }
.list__share-label { font-size: var(--fs-sm); color: color-mix(in srgb, var(--ink) 62%, var(--paper)); }
.list__share-url { font-family: var(--font-mono); font-size: var(--fs-sm); }

/* =========================================================================
   STORE MODE (DESIGN.md): same tokens, scaled up — 56 px rows, max contrast,
   sticky total, aisle order, "IN THE CART", zero decoration.
   ========================================================================= */

.page-store .site-header, .page-store .site-footer { display: none; }
.page-store .main { padding-block: 0 var(--sp-8); }

.store { display: flex; flex-direction: column; }

.store__bar {
  position: sticky; top: 0; z-index: 5; background: var(--paper);
  border-bottom: 2px solid var(--ink);
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) 0;
}
.store__exit { font-weight: 600; flex: 0 0 auto; }
.store__title {
  flex: 1 1 auto; min-width: 0; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.store__wake { flex: 0 0 auto; font-size: var(--fs-xs); color: color-mix(in srgb, var(--ink) 55%, var(--paper)); white-space: nowrap; }
.store__wake--on { color: var(--leaf); }
.store__total { flex: 0 0 auto; display: flex; align-items: baseline; gap: var(--sp-2); }
.store__total-label {
  font-family: var(--font-mono); font-size: var(--fs-xs);
  text-transform: uppercase; letter-spacing: 0.04em;
  color: color-mix(in srgb, var(--ink) 60%, var(--paper));
}
.store__total-value { font-size: var(--fs-lg); font-weight: 500; font-variant-numeric: tabular-nums; }
.store__total--empty .store__total-value { display: none; }

.store__list, .store__cart-list { list-style: none; margin: 0; padding: 0; }
.store__section {
  font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.08em;
  color: color-mix(in srgb, var(--ink) 55%, var(--paper));
  padding: var(--sp-4) 0 var(--sp-1);
}

.store__item {
  display: flex; align-items: center; gap: var(--sp-3);
  min-height: 56px; padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--mist); cursor: pointer;
}
.store__check {
  flex: 0 0 auto; width: 32px; height: 32px; padding: 0; position: relative;
  border: 2px solid var(--ink); border-radius: 8px; background: var(--paper); cursor: pointer;
}
.store__check[aria-checked="true"] { background: var(--leaf); border-color: var(--leaf); }
.store__check[aria-checked="true"]::after {
  content: ""; position: absolute; left: 10px; top: 4px; width: 8px; height: 15px;
  border: solid var(--paper); border-width: 0 3px 3px 0; transform: rotate(45deg);
}
.store__name { flex: 1 1 auto; min-width: 0; position: relative; font-size: var(--fs-lg); }
.store__qty { flex: 0 0 auto; font-size: var(--fs-sm); color: color-mix(in srgb, var(--ink) 60%, var(--paper)); }
.store__price { flex: 0 0 auto; font-size: var(--fs-lg); font-variant-numeric: tabular-nums; }

.store__name::after {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px;
  background: var(--ink); pointer-events: none;
  transform: scaleX(0); transform-origin: left center;
}
.store__item--checked .store__name::after { transform: scaleX(1); }
.store__item--striking .store__name::after { animation: strike 180ms ease-out; }
.store__item--checked { opacity: 0.5; }

.store__cart { margin-top: var(--sp-6); border-top: 2px dashed var(--mist); padding-top: var(--sp-2); }
.store__cart-head {
  font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.08em;
  color: color-mix(in srgb, var(--ink) 55%, var(--paper)); padding: var(--sp-2) 0;
}

/* =========================================================================
   QR MODAL (DESIGN.md QR handoff)
   ========================================================================= */

.modal {
  position: fixed; inset: 0; z-index: 50; display: flex;
  align-items: center; justify-content: center; padding: var(--sp-4);
  background: rgb(32 40 31 / 55%); animation: modal-fade var(--t-fast) ease-out;
}
.modal__card {
  background: var(--paper); border: var(--border); border-radius: var(--radius-card);
  box-shadow: var(--shadow); padding: var(--sp-6); width: 100%; max-width: 360px;
  text-align: center;
}
@keyframes modal-fade { from { opacity: 0; } to { opacity: 1; } }
.qr__title { font-size: var(--fs-lg); margin-bottom: var(--sp-1); }
.qr__svg {
  width: min(72vw, 248px); height: auto; display: block;
  margin: var(--sp-4) auto; image-rendering: pixelated;
}
.qr__url {
  font-family: var(--font-mono); word-break: break-all;
  background: var(--tape); padding: var(--sp-2); border-radius: var(--radius-ctl);
}
.qr__close { margin-top: var(--sp-4); }

/* ----------------------------------------------------------- my lists */

.my-lists { list-style: none; margin: 0; padding: 0; }
.my-lists__item {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  padding: var(--sp-3) 0; border-bottom: var(--border);
}
.my-lists__link { display: flex; flex-direction: column; gap: var(--sp-1); flex: 1; }
.my-lists__link:hover { text-decoration: none; }
.my-lists__title { font-weight: 600; color: var(--ink); }
.my-lists__delete { margin: 0; }

/* ------------------------------------------------------------ newsletter */

.newsletter { margin-top: var(--sp-8); }
.newsletter__title { font-size: var(--fs-xl); }
.newsletter__form {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2);
  margin-top: var(--sp-3);
}
.newsletter__email { flex: 1 1 16rem; }
/* Honeypot: kept in the layout for bots, pulled off-screen for humans and AT. */
.newsletter__hp {
  position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden;
}
.newsletter__msg { margin: var(--sp-2) 0 0; color: var(--leaf-deep); }

.newsletter-nudge {
  position: relative; margin-bottom: var(--sp-6); padding: var(--sp-4);
  background: var(--tape); border: var(--border); border-radius: var(--radius-card);
}
.newsletter-nudge__label { display: block; font-weight: 600; margin-bottom: var(--sp-2); }
.newsletter-nudge__row { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.newsletter-nudge__row .newsletter__email { flex: 1 1 14rem; }
.newsletter-nudge__close {
  position: absolute; top: var(--sp-1); right: var(--sp-2);
  min-height: auto; padding: var(--sp-1) var(--sp-2);
  background: none; border: none; cursor: pointer;
  font-size: var(--fs-lg); line-height: 1; color: var(--ink);
}

/* =========================================================================
   ADMIN PANEL (PROJECT.md §5) — same tokens, utilitarian density. A top bar,
   a horizontal nav, dense mono data tables, grouped settings forms. No new
   colors, fonts, radii or shadows; derives entirely from tokens.css.
   ========================================================================= */

.admin { background: var(--tape); }

.admin-bar { background: var(--paper); border-bottom: var(--border); }
.admin-bar__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); padding-block: var(--sp-3);
}
.admin-bar__tag {
  font-size: var(--fs-xs); color: var(--leaf);
  text-transform: uppercase; letter-spacing: 0.08em;
}
.admin-bar__right { display: flex; align-items: center; gap: var(--sp-3); }
.admin-bar__logout { margin: 0; }
.admin-bar__logout-btn { min-height: 36px; padding: 0 var(--sp-3); font-size: var(--fs-sm); }

.admin-nav { background: var(--paper); border-bottom: var(--border); }
.admin-nav__inner {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-2);
  padding-block: var(--sp-1);
}
.admin-nav__link {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-ctl);
  color: var(--ink); font-size: var(--fs-sm); font-weight: 600;
}
.admin-nav__link:hover { background: var(--tape); text-decoration: none; }
.admin-nav__link.is-active { background: var(--leaf); color: var(--paper); }
.admin-nav__link--soon { color: color-mix(in srgb, var(--ink) 55%, var(--paper)); font-weight: 500; }
.admin-nav__soon-tag { font-size: var(--fs-xs); color: var(--butter); }
.admin-nav__sep { flex: 0 0 1px; align-self: stretch; background: var(--mist); margin-inline: var(--sp-1); }

.admin-main { padding-block: var(--sp-6) var(--sp-12); }
.admin .main { padding-block: 0; }

.admin-flash {
  margin: 0 0 var(--sp-4); padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-ctl); border: var(--border); font-weight: 600;
}
.admin-flash--ok  { background: color-mix(in srgb, var(--leaf) 12%, var(--paper)); border-color: var(--leaf); }
.admin-flash--err { background: color-mix(in srgb, var(--radish) 12%, var(--paper)); border-color: var(--radish); color: var(--radish); }

/* ---------------------------------------------------------------- login */

.admin-login-body { display: flex; min-height: 100vh; }
.admin-login {
  margin: auto; width: 100%; max-width: 360px;
  display: flex; flex-direction: column; gap: var(--sp-4); padding: var(--sp-4);
}
.admin-login__card { display: flex; flex-direction: column; gap: var(--sp-4); }
.admin-login__title { margin: 0; }
.admin-login__submit { margin-top: var(--sp-2); }

/* ---------------------------------------------------------------- fields */

.admin-field { display: flex; flex-direction: column; gap: var(--sp-1); margin-bottom: var(--sp-4); }
.admin-field--inline { margin-bottom: 0; }
.admin-field--check { gap: var(--sp-1); }
.admin-field__label { font-weight: 600; font-size: var(--fs-sm); }
.admin-field__help { margin: var(--sp-1) 0 0; }

.admin-input--sm { width: 8rem; }
.admin-select { width: 100%; min-height: 44px; padding: var(--sp-2) var(--sp-3);
  font-family: var(--font-body); font-size: var(--fs-md); color: var(--ink);
  background: var(--paper); border: var(--border); border-radius: var(--radius-ctl); }
.admin-textarea { min-height: 9rem; font-size: var(--fs-sm); line-height: 1.5; }

.admin-check { display: inline-flex; align-items: center; gap: var(--sp-2); cursor: pointer; }
.admin-check input { width: auto; min-height: 0; }

.admin-secret { display: flex; gap: var(--sp-2); align-items: stretch; }
.admin-secret__input { flex: 1; }
.admin-secret__toggle { flex: 0 0 auto; min-height: 44px; padding: 0 var(--sp-3); font-size: var(--fs-sm); }

.admin-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-4); }
.admin-inline-form { display: flex; align-items: flex-end; gap: var(--sp-2); }

/* --------------------------------------------------------- sections/grid */

.admin-section { margin-top: var(--sp-6); }
.card.admin-section { margin-bottom: var(--sp-6); }
.admin-section__help { margin-top: calc(-1 * var(--sp-2)); }
.admin-subhead {
  font-family: var(--font-mono); font-size: var(--fs-sm); font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.06em;
  margin: var(--sp-4) 0 var(--sp-2); padding-top: var(--sp-2); border-top: var(--border);
}
.admin-notice {
  background: color-mix(in srgb, var(--butter) 22%, var(--paper));
  border: 1px solid var(--butter); border-radius: var(--radius-ctl);
  padding: var(--sp-2) var(--sp-3); font-size: var(--fs-sm); margin-bottom: var(--sp-4);
}

.admin-settings { display: flex; flex-direction: column; }

.admin-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-4); }
@media (min-width: 760px) { .admin-grid--2 { grid-template-columns: 1fr 1fr; } }

.admin-stat { display: flex; flex-direction: column; gap: var(--sp-3); }
.admin-stat__label { font-size: var(--fs-md); margin: 0; }
.admin-stat__rows { display: flex; flex-direction: column; gap: var(--sp-3); }
.admin-stat__row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); }
.admin-stat__num { font-size: var(--fs-xl); font-weight: 500; }
.admin-stat__span { display: block; }
.admin-stat__big { font-family: var(--font-mono); font-size: var(--fs-2xl); font-weight: 500; margin: 0; }

/* sparkline (inline SVG from App\Admin\Sparkline) */
.spark { width: 160px; max-width: 50%; height: 40px; overflow: visible; }
.spark__area { fill: color-mix(in srgb, var(--leaf) 12%, transparent); stroke: none; }
.spark__line { fill: none; stroke: var(--leaf); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }

/* ---------------------------------------------------------------- tables */

.admin-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.admin-table th, .admin-table td {
  text-align: left; padding: var(--sp-2) var(--sp-3);
  border-bottom: var(--border); vertical-align: middle;
}
.admin-table th {
  font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.04em;
  color: color-mix(in srgb, var(--ink) 60%, var(--paper));
}
.admin-table tbody tr:nth-child(even) { background: color-mix(in srgb, var(--tape) 50%, var(--paper)); }
.admin-table .num { text-align: right; }
.admin-table--tight th, .admin-table--tight td { padding: var(--sp-1) var(--sp-2); }
.admin-table--form td { padding: var(--sp-2) var(--sp-3); }

.admin-status {
  display: inline-block; padding: 0 var(--sp-2); border-radius: var(--radius-chip);
  font-family: var(--font-mono); font-size: var(--fs-xs);
  background: var(--tape); border: var(--border);
}
.admin-status--paid, .admin-status--confirmed { background: color-mix(in srgb, var(--leaf) 18%, var(--paper)); border-color: var(--leaf); }
.admin-status--pending { background: color-mix(in srgb, var(--butter) 30%, var(--paper)); border-color: var(--butter); }
.admin-status--refunded, .admin-status--canceled, .admin-status--past_due,
.admin-status--unsubscribed, .admin-status--revoked {
  background: color-mix(in srgb, var(--radish) 14%, var(--paper)); border-color: var(--radish); color: var(--radish);
}

.admin-rowactions { display: flex; gap: var(--sp-2); justify-content: flex-end; }
.admin-rowactions form { margin: 0; }
.admin-btn--xs { min-height: 30px; padding: 0 var(--sp-2); font-size: var(--fs-xs); }

/* ----------------------------------------------------- toolbars / forms */

.admin-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.admin-search { display: flex; gap: var(--sp-2); margin: 0; flex: 1 1 18rem; }
.admin-search input { flex: 1; }
.admin-search input[type="search"] { min-height: 40px; }

.admin-add-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sp-3); margin-bottom: var(--sp-6); }
.admin-add-form--wrap { row-gap: var(--sp-3); }
.admin-add-form .admin-field { flex: 1 1 12rem; }

.admin-price { display: inline-flex; align-items: center; gap: var(--sp-1); }
.admin-price__cur { color: color-mix(in srgb, var(--ink) 60%, var(--paper)); font-size: var(--fs-sm); }

.admin-dl { display: grid; grid-template-columns: max-content 1fr; gap: var(--sp-1) var(--sp-4); margin: 0; }
.admin-dl dt { font-weight: 600; color: color-mix(in srgb, var(--ink) 70%, var(--paper)); }
.admin-dl dd { margin: 0; }
.admin-back { margin-bottom: var(--sp-2); }

/* ---------------------------------------------------------------- Pro tier
   /pro pricing, /pro/restore, /pro/success and the download re-request page.
   Quiet by DESIGN.md: butter only on the Pro badge, no decorative gradients. */

.pro-hero { text-align: center; padding-block: var(--sp-8) var(--sp-6); }
.pro-eyebrow { margin-bottom: var(--sp-3); }
.pro-sub { max-width: 38rem; margin-inline: auto; }

.pro-already, .pro-canceled, .pro-success, .pro-result { margin-bottom: var(--sp-6); }
.pro-already { border-color: var(--leaf); }
.pro-result--ok { border-color: var(--leaf); }
.pro-result--err { border-color: var(--radish); }
.pro-result p:last-child, .pro-success p:last-child { margin-bottom: 0; }

.pro-features { margin-bottom: var(--sp-8); }
.pro-feature-list { list-style: none; margin: 0; padding: 0; }
.pro-feature-list li {
  position: relative; padding-left: var(--sp-6); margin-bottom: var(--sp-3);
}
.pro-feature-list li::before {
  content: "✓"; position: absolute; left: 0; top: 0;
  color: var(--leaf); font-weight: 700;
}

.pro-offers {
  display: grid; gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin-bottom: var(--sp-6);
}
.pro-offer { display: flex; flex-direction: column; gap: var(--sp-2); }
.pro-offer__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2);
}
.pro-offer__name { margin: 0; font-size: var(--fs-lg); }
.pro-offer__price { font-size: var(--fs-xl); font-weight: 500; }
.pro-offer__kind { margin: 0; }
.pro-offer__cta { width: 100%; margin-top: auto; }

.pro-trust { text-align: center; max-width: 32rem; margin-inline: auto; }
.pro-restore-link { text-align: center; margin-top: var(--sp-6); }
.pro-restore-form { max-width: 28rem; margin-inline: auto; }

.download-list { list-style: none; margin: var(--sp-3) 0 0; padding: 0; display: grid; gap: var(--sp-2); }

/* =========================================================================
   PRINT — the receipt prints beautifully on paper (DESIGN.md, a feature).
   Strip the chrome and all controls; keep names, sections, prices, the total.
   ========================================================================= */
@media print {
  .site-header, .site-footer, .hero__copy, .trio,
  .list__tools, .quick-add, .add-item, .list__share,
  .list__net, .list__error, .item__sub, .item__check,
  .newsletter-nudge, .modal { display: none !important; }

  body { background: #fff; }
  .receipt, .list { border: none; box-shadow: none; padding: 0; }

  .item { grid-template-areas: "line"; grid-template-columns: 1fr; }
  .item__name, .item__qty, .item__price, .list__title-input {
    border: none !important; background: transparent !important;
    -webkit-appearance: none; appearance: none; color: #000;
  }
  .item--checked .item__name,
  .item--checked .item__qty,
  .item--checked .item__price { opacity: 0.5; }
  .receipt__total { margin-inline: 0; }
  .receipt__total::before { display: none; }
}

/* ============================================================ Pro tools (§3.2)
   Recipe importer, review screen, meal-plan board and list history. Reuses the
   existing .card / .btn / .badge-pro system; only adds layout specifics. */

.btn--sm { min-height: 36px; padding: 0 var(--sp-3); font-size: var(--fs-sm); }

/* --- Importer tabs --------------------------------------------------------- */
.import { margin-top: var(--sp-6); }
.import__tabs { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.import__tab {
  background: none; border: var(--border); border-radius: var(--radius-chip);
  padding: var(--sp-2) var(--sp-4); font: inherit; font-size: var(--fs-sm);
  cursor: pointer; color: var(--ink); transition: background var(--t-fast);
}
.import__tab[aria-selected="true"] { background: var(--leaf); color: var(--paper); border-color: var(--leaf); }
.import__panel { display: block; }
.import__panel[hidden] { display: none; }
.import__panel input[type="url"], .import__panel textarea { width: 100%; }

/* --- Review screen --------------------------------------------------------- */
.import-review { margin-top: var(--sp-6); }
.import-review__tools { display: flex; justify-content: flex-end; margin-bottom: var(--sp-2); }
.import-review__rows { list-style: none; margin: 0 0 var(--sp-6); padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.import-review__row {
  display: grid; grid-template-columns: auto 1fr 5.5rem minmax(8rem, 10rem);
  gap: var(--sp-2); align-items: center;
  padding: var(--sp-2) var(--sp-3); border: var(--border); border-radius: var(--radius-ctl);
  background: var(--paper);
}
.import-review__keep { display: flex; align-items: center; }
.import-review__qty { font-family: var(--font-mono); }
.import-review__target { margin-top: var(--sp-4); }
.import-review__target legend { font-weight: 600; padding: 0 var(--sp-2); }
.import-review__target-row { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) 0; flex-wrap: wrap; }
.import-review__new-title { flex: 1; min-width: 10rem; }
@media (max-width: 540px) {
  .import-review__row { grid-template-columns: auto 1fr; grid-auto-rows: min-content; }
  .import-review__qty, .import-review__cat { grid-column: 2; }
}

/* --- Meal-plan board ------------------------------------------------------- */
.plan-board {
  display: grid; gap: var(--sp-3); margin: var(--sp-6) 0;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.plan-day { display: flex; flex-direction: column; gap: var(--sp-2); }
.plan-day--filled { border-color: var(--leaf); }
.plan-day__name { font-size: var(--fs-md); margin: 0; }
.plan-day__attached { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.plan-day__kind { background: var(--butter); color: var(--ink); }
.plan-day__title { font-weight: 600; }
.plan-day__add summary { display: inline-flex; width: fit-content; list-style: none; cursor: pointer; }
.plan-day__add summary::-webkit-details-marker { display: none; }
.plan-day__form { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-3); }
.plan-day__form select, .plan-day__form input, .plan-day__form textarea { width: 100%; }
.plan-generate { margin: var(--sp-8) 0; text-align: center; }

/* --- List history ---------------------------------------------------------- */
.history-list { list-style: none; margin: var(--sp-6) 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.history-list__item { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.history-list__meta { display: flex; align-items: baseline; gap: var(--sp-3); }
.history-list__date { font-size: var(--fs-md); font-weight: 600; }

/* ============================================================ Growth surface (§3.3)
   Blog, list templates, local directory and seasonal hints. Reuses the receipt,
   card, chip and prose systems; only adds layout. No new tokens. */

/* --- Blog ------------------------------------------------------------------ */
.article-list { list-style: none; margin: var(--sp-6) 0 0; padding: 0; }
.article-list__item { padding: var(--sp-4) 0; border-bottom: var(--border); }
.article-list__title { font-size: var(--fs-lg); margin: 0 0 var(--sp-1); }
.article-list__date { margin: 0 0 var(--sp-1); }
.article-list__excerpt { margin: 0; }
.article { max-width: 42rem; }
.article__title { margin-bottom: var(--sp-1); }
.article__date { margin-bottom: var(--sp-6); }
.article__body { margin-top: var(--sp-4); }
.article__body > :first-child { margin-top: 0; }
.article__back { margin-top: var(--sp-8); }

/* --- Templates ------------------------------------------------------------- */
.template-grid {
  list-style: none; margin: var(--sp-8) 0 0; padding: 0; display: grid; gap: var(--sp-4);
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.template-card { display: flex; flex-direction: column; gap: var(--sp-2); }
.template-card__title { font-size: var(--fs-lg); margin: 0; }
.template-card__desc { margin: 0; }
.template-card__meta { margin: 0; }
.template-card .btn { margin-top: auto; align-self: flex-start; }

.template-page { display: flex; flex-direction: column; gap: var(--sp-6); }
.template-page__intro > :first-child { margin-top: 0; }
.template-page__preview { max-width: var(--w-app); }
.template-page__copy {
  display: flex; flex-direction: column; gap: var(--sp-2); align-items: flex-start;
  margin: 0; padding-top: var(--sp-4); border-top: var(--border);
}
.template-page__copy-note { margin: 0; }
.template-page__back { margin: 0; }

/* Read-only receipt preview (templates + admin live preview). */
.receipt--preview { max-width: var(--w-app); }
.preview-item {
  display: flex; align-items: baseline; gap: var(--sp-2);
  padding: var(--sp-1) 0;
}
.preview-item__name { flex: 0 1 auto; }
.preview-item__qty {
  flex: 0 0 auto; font-variant-numeric: tabular-nums; font-size: var(--fs-xs);
  color: color-mix(in srgb, var(--ink) 62%, var(--paper));
}
.preview-item__dots { flex: 1 1 auto; align-self: stretch; border-bottom: 1px dotted var(--mist); margin-bottom: 7px; }
.preview-item__price { flex: 0 0 auto; font-variant-numeric: tabular-nums; }

/* --- Seasonal hints -------------------------------------------------------- */
.season-suggest {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) 0;
}
.season-suggest__label {
  font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.06em;
  color: color-mix(in srgb, var(--ink) 60%, var(--paper));
}
.chip--season { background: color-mix(in srgb, var(--leaf) 12%, var(--paper)); border-color: var(--leaf); }
.chip--season:hover { background: color-mix(in srgb, var(--leaf) 20%, var(--paper)); }

/* --- Directory ------------------------------------------------------------- */
.region-list { list-style: none; margin: var(--sp-6) 0 0; padding: 0; }
.region-list__item { border-bottom: var(--border); }
.region-list__link {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4);
  padding: var(--sp-3) 0; color: var(--ink);
}
.region-list__link:hover { text-decoration: none; background: var(--tape); }
.region-list__name { font-weight: 600; }

.directory-region { display: grid; grid-template-columns: 1fr; gap: var(--sp-6); }
@media (min-width: 760px) { .directory-region { grid-template-columns: 1fr 260px; } }
.directory-region__crumb { margin-bottom: var(--sp-2); }
.directory-group { margin-top: var(--sp-6); }
.directory-group__head { font-size: var(--fs-lg); padding-bottom: var(--sp-1); border-bottom: var(--border); }
.directory-entries { list-style: none; margin: var(--sp-3) 0 0; padding: 0; }
.directory-entry { padding: var(--sp-3) 0; border-bottom: 1px dashed var(--mist); }
.directory-entry__name { font-size: var(--fs-md); margin: 0 0 var(--sp-1); }
.directory-entry__line { margin: 0 0 var(--sp-1); }
.directory-entry__notes { margin: var(--sp-1) 0; }
.directory-entry__notes > :first-child { margin-top: 0; }
.directory-entry__notes > :last-child { margin-bottom: 0; }

.season-block { position: sticky; top: var(--sp-4); }
.season-block__head { font-size: var(--fs-md); margin: 0 0 var(--sp-1); }
.season-block__zone { margin: 0 0 var(--sp-3); }
.season-block__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.season-chip { cursor: default; }
.season-block__note { margin: var(--sp-3) 0 0; }

/* --- Admin: template editor + misc ----------------------------------------- */
.admin-field--full { flex: 1 1 100%; }
.tpl-editor { display: grid; grid-template-columns: 1fr; gap: var(--sp-6); }
@media (min-width: 900px) { .tpl-editor { grid-template-columns: 1fr 1fr; align-items: start; } }
.tpl-editor__preview { position: sticky; top: var(--sp-4); }
.tpl-editor__status { margin: var(--sp-1) 0 0; min-height: 1.2em; }