/* The design system (F-46, AX-CHECKOUT-00110).
 *
 * One stylesheet, one set of tokens. A tenant supplies values for the two
 * tokens it owns — the accent and the ink that sits on it — and picks a variant
 * class for the rest; it never supplies a rule. Everything here attaches to the
 * ids and classes the views already emit, so a shop can be dressed without a
 * view knowing it has been.
 *
 * The accent is never lettering on the page. It fills a primary action, draws
 * the focus ring and underlines a link. Two contrast rules close over exactly
 * that, in domain::theme; giving body text `var(--accent)` would open a third.
 */

/* ── Fixed tokens ───────────────────────────────────────────────────────── */

html {
  --font: "Inter", "Helvetica Neue", Arial, system-ui, sans-serif;

  /* 16px base, 1.25 modular scale. Nothing is sized off this ladder. */
  --t--1: 0.8rem;
  --t-0: 1rem;
  --t-1: 1.25rem;
  --t-2: 1.5625rem;
  --t-3: 1.9531rem;
  --lh: 1.5;
  --lh-tight: 1.2;

  /* 8px unit. Every gap, pad and margin is a multiple. */
  --s-1: 8px;
  --s-2: 16px;
  --s-3: 24px;
  --s-4: 32px;
  --s-5: 48px;
  --s-6: 64px;

  --tap: 44px;
  --measure: 72ch;

  --dur: 250ms;
  --dur-micro: 150ms;
  --dur-large: 350ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --travel: 16px;
  --ring: 2px;

  --danger: #b3261e;
  --notice: #8a5300;
  --good: #1d6f42;

  /* Supplied per shop, in the document head. Here so the page still reads if
   * the head block is ever missing. */
  --accent: #1f5fbf;
  --on-accent: #ffffff;

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

/* ── Bounded tokens: the shop picks the class, this owns the values ─────── */

.t-surface-light { --surface: #ffffff; --raised: #f6f7f9; --ink: #111827; --muted: #4b5563; --line: #e5e7eb; }
.t-surface-warm  { --surface: #faf9f6; --raised: #f2f0ea; --ink: #111827; --muted: #4b5563; --line: #e7e3da; }
.t-surface-cool  { --surface: #f6f7f9; --raised: #eceef2; --ink: #111827; --muted: #4b5563; --line: #dfe3e9; }

.t-radius-square { --radius: 0; }
.t-radius-soft   { --radius: 6px; }
.t-radius-round  { --radius: 14px; }

/* Density moves the room around a row. It never moves the 44px target. */
.t-density-comfortable { --pad: var(--s-2); --row: var(--s-2); --stack: var(--s-3); }
.t-density-compact     { --pad: var(--s-1); --row: var(--s-1); --stack: var(--s-2); }

/* ── Ground ─────────────────────────────────────────────────────────────── */

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

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font: var(--t-0)/var(--lh) var(--font);
}

img { max-width: 100%; height: auto; }

h1, h2, h3, p, ul, ol, table, form, section, article { margin: 0; }

h1 { font-size: var(--t-3); line-height: var(--lh-tight); letter-spacing: -0.01em; }
h2 { font-size: var(--t-2); line-height: var(--lh-tight); }
h3 { font-size: var(--t-1); line-height: var(--lh-tight); }

/* Single column, held to one left edge. Never centred: a shared edge is what
 * makes a scan down the page cheap. */
#main {
  max-width: var(--measure);
  margin: 0 auto 0 var(--s-5);
  padding: var(--s-4) var(--s-2) var(--s-6) 0;
  display: flex;
  flex-direction: column;
  gap: var(--stack);
  align-items: stretch;
}

@media (max-width: 40rem) {
  #main { margin-left: var(--s-2); padding-right: var(--s-2); }
}

/* ── Chrome ─────────────────────────────────────────────────────────────── */

#chrome {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-1) var(--s-5);
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

#chrome a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  color: var(--ink);
  text-decoration: none;
  font-size: var(--t--1);
}

#chrome a:hover { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 4px; }

#home { font-size: var(--t-1); font-weight: 600; margin-right: auto; letter-spacing: -0.01em; }
#home .logo { max-height: var(--s-4); width: auto; }

/* The active item, so a page always says where it is. */
#chrome a[aria-current="page"] { font-weight: 600; box-shadow: inset 0 -2px 0 var(--accent); }

#chrome.platform { background: var(--raised); }

/* The staff row: the same header, one more line, for staff of this shop only
   (AX-CHECKOUT-00151). It wraps under the shop's own links rather than
   replacing them, because the shop and its administration are one site. */
#chrome { flex-wrap: wrap; }
#staff-bar {
  flex-basis: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--s-2);
  margin: 0 calc(-1 * var(--s-5)) calc(-1 * var(--s-1));
  padding: 0 var(--s-5);
  border-top: 1px solid var(--line);
  background: var(--raised);
}
/* The sections under their groups, the group named small beside them. */
#staff-bar .staff-group { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0 var(--s-2); }
#staff-bar .staff-group-label {
  font-size: var(--t--1);
  color: var(--muted);
  padding-left: var(--s-1);
  border-left: 1px solid var(--line);
}
#staff-bar .staff-label {
  font-size: var(--t--1);
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
@media (max-width: 40rem) {
  #staff-bar { margin: 0 calc(-1 * var(--s-2)) calc(-1 * var(--s-1)); padding: 0 var(--s-2); }
}

/* Signing out is a form, because a link that ends a session can be fired by
   anything that prefetches. It still has to read as part of the navigation
   rather than as a form dropped into it: a session nobody can see is a session
   nobody thinks to end. */
#chrome #signed-in-as { color: var(--muted, var(--ink)); font-size: 0.875rem; }
#chrome #signed-in-as strong { color: var(--ink); font-weight: 600; }
#chrome .signed-in-role {
  margin-left: 0.25rem; padding: 0.05rem 0.4rem; border: 1px solid var(--accent);
  border-radius: 999px; color: var(--ink); font-size: 0.75rem;
}
#chrome #sign-out { flex-direction: row; align-items: center; margin: 0; }
#chrome #sign-out button {
  background: none;
  border: 0;
  padding: 0;
  min-height: var(--tap);
  color: var(--muted);
  font: inherit;
  font-size: var(--t--1);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 4px;
}
#chrome #sign-out button:hover { color: var(--ink); text-decoration-color: var(--accent); }
#chrome #sign-out button:focus-visible { outline: var(--ring) solid var(--accent); outline-offset: 2px; }

.t-header-stacked #chrome { flex-direction: column; align-items: flex-start; gap: var(--s-1); padding-bottom: var(--s-1); }
.t-header-stacked #home { margin-right: 0; }
.t-header-minimal #chrome { border-bottom: 0; }
.t-header-minimal #chrome a:not(#home) { font-size: var(--t--1); color: var(--muted); }

/* ── Products ───────────────────────────────────────────────────────────── */

#categories ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-1); }
#categories a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0 var(--s-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
  text-decoration: none;
}
#categories a:hover { border-color: var(--accent); }

.t-products-grid #products, .t-products-grid #featured {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: var(--s-2);
}
.t-products-list #products, .t-products-list #featured {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}

.product-card {
  padding: var(--pad);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.product-card:hover { border-color: var(--accent); box-shadow: 0 2px 8px rgb(17 24 39 / 8%); }
.product-card:focus-within { border-color: var(--accent); }
.product-card h3 { margin: 0; font-size: var(--t-0); }
.product-card a { color: var(--ink); text-decoration: none; display: inline-flex; align-items: center; min-height: var(--tap); }
.product-card a:hover { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }

#product .description { color: var(--muted); max-width: 60ch; }

#variants { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--row); }
.variant {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--s-1);
  padding: var(--pad) 0;
  border-top: 1px solid var(--line);
}
.variant .label { font-weight: 600; }
.price { font-size: var(--t-1); font-variant-numeric: tabular-nums; }
.mrp { color: var(--muted); }
.moq, .stock { font-size: var(--t--1); color: var(--muted); }

/* ── Money and counts read as columns, not as prose ─────────────────────── */

.total, .subtotal, .unit-price, .goods, .revenue, .tax, .amount, .on-hand,
.reserved, .free, .delta, .quantity, .lines, .count, .position, .attempts, .rating {
  font-variant-numeric: tabular-nums;
}

/* ── Cart, totals, checkout ─────────────────────────────────────────────── */

#cart-lines { width: 100%; border-collapse: collapse; }
#cart-lines td { padding: var(--pad) var(--s-1); border-bottom: 1px solid var(--line); vertical-align: middle; }
#cart-lines .name { font-weight: 600; }
#cart-lines .unit-price, #cart-lines .subtotal { text-align: right; }
/* The quantity cell holds a control, not a number, so it aligns with the other
   controls in the row rather than with the money columns. */
#cart-lines .quantity form { justify-content: flex-start; }
#cart-lines .quantity input[type="number"] { width: 4.5rem; flex: 0 0 auto; }

#cart-summary {
  padding: var(--pad);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--raised);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
}
#cart-summary .count { color: var(--muted); }
#cart-summary .total { font-size: var(--t-1); font-weight: 600; margin-right: auto; }

#totals { display: flex; flex-direction: column; gap: var(--s-1); }
#totals .goods { font-size: var(--t-2); font-weight: 600; }
/* One class carries both "you saved 1.99" and "that code is not recognised",
   so it cannot be painted as success. Until the view tells them apart, this
   stays neutral rather than colouring a refusal green. */
#totals .discount { color: var(--ink); }

/* ── Forms: one component, everywhere ───────────────────────────────────── */

form { display: flex; flex-direction: column; gap: var(--s-1); align-items: flex-start; }
#cart-lines form, .variant form, #wishlist form { flex-direction: row; align-items: center; gap: var(--s-1); }
/* A quantity is two digits, not a text field: left to grow it starves the
   action beside it and the label wraps. */
.variant form input[type="number"] { width: 5rem; flex: 0 0 auto; }
.variant form label { flex: 0 0 auto; }

label { font-size: var(--t--1); color: var(--muted); }
/* Named for a screen reader, absent for everyone else. The column heading is
   the visible label; repeating it on every row would be noise on screen and
   its absence would be a control with no name at all. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

input, select, textarea {
  font: inherit;
  min-height: var(--tap);
  padding: 0 var(--s-1);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  max-width: 32rem;
  width: 100%;
  transition: border-color var(--dur-micro) var(--ease);
}
textarea { padding: var(--s-1); min-height: calc(var(--tap) * 3); resize: vertical; }
input:hover, select:hover, textarea:hover { border-color: var(--muted); }

fieldset { border: 1px solid var(--line); border-radius: var(--radius); padding: var(--pad); display: flex; flex-direction: column; gap: var(--s-1); }
legend { font-size: var(--t--1); color: var(--muted); padding: 0 var(--s-1); }
fieldset label { display: flex; align-items: center; gap: var(--s-1); min-height: var(--tap); color: var(--ink); font-size: var(--t-0); }
fieldset input[type="radio"], fieldset input[type="checkbox"] { min-height: 0; width: auto; accent-color: var(--accent); }

/* ── Buttons ────────────────────────────────────────────────────────────── */

button {
  font: inherit;
  /* A label that wraps is a button that looks broken. */
  white-space: nowrap;
  min-height: var(--tap);
  min-width: var(--tap);
  padding: 0 var(--s-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  transition: background-color var(--dur-micro) var(--ease), border-color var(--dur-micro) var(--ease),
              transform var(--dur-micro) var(--ease), box-shadow var(--dur-micro) var(--ease);
}
button:hover { border-color: var(--accent); box-shadow: 0 1px 4px rgb(17 24 39 / 10%); }
button:active { transform: scale(0.97); }

/* The one accent fill on a page: the action that page exists for. */
.variant button[value="add"], #checkout button[type="submit"], #appearance-form button[type="submit"],
#coupon button[type="submit"], #search button[type="submit"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
}
.variant button[value="add"]:hover, #checkout button[type="submit"]:hover,
#appearance-form button[type="submit"]:hover, #coupon button[type="submit"]:hover,
#search button[type="submit"]:hover { filter: brightness(0.92); }

/* The admin's three kinds of button (AX-CHECKOUT-00185): the step a page
   exists for, a step beside it, and a step that undoes something. Every
   button staff press is one of these, so none is styled where it stands. */
button.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
}
button.primary:hover { filter: brightness(0.92); }
button.secondary { background: var(--surface); }
button.danger {
  background: var(--danger);
  border-color: var(--danger);
  color: #ffffff;
  font-weight: 600;
}
button.danger:hover { filter: brightness(0.92); }

/* A step that undoes something asks first, and asking needs no script: the
   question opens under its summary, and the danger button is inside it. */
details.confirm { display: inline-block; }
details.confirm > summary {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0 var(--s-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--danger);
  cursor: pointer;
  list-style: none;
}
details.confirm > summary::-webkit-details-marker { display: none; }
details.confirm[open] {
  display: block;
  padding: var(--s-1) var(--s-2);
  border-left: 3px solid var(--danger);
  background: var(--raised);
  border-radius: 0 var(--radius) var(--radius) 0;
}
details.confirm > p { margin-block: var(--s-1); max-width: 48ch; }

button:disabled, input:disabled, select:disabled, textarea:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

/* ── Links ──────────────────────────────────────────────────────────────── */

a { color: var(--ink); text-decoration-color: var(--accent); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }

/* ── Focus: the ring the surface rule guards (domain::theme) ────────────── */

:is(a, button, input, select, textarea, summary):focus-visible {
  outline: var(--ring) solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius);
}

/* ── State, status, refusal ─────────────────────────────────────────────── */

.state, .status, .stage, .to, .enabled {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--s-1);
  border-radius: 999px;
  background: var(--raised);
  font-size: var(--t--1);
}

#refused, .failure, .not-serviceable, .rejection, .rejected {
  padding: var(--pad);
  border-left: 3px solid var(--danger);
  background: var(--raised);
  border-radius: 0 var(--radius) var(--radius) 0;
  color: var(--ink);
}
.created, .discount { color: var(--good); }

#no-results, #empty-checkout {
  padding: var(--s-4);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  align-items: flex-start;
  color: var(--muted);
}
#empty-checkout h1 { color: var(--ink); }
#continue-shopping, #tracking-link, #export {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0 var(--s-2);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  text-decoration: none;
  font-weight: 600;
}

/* ── Order, tracking, history ───────────────────────────────────────────── */

#confirmation .order-id { font-size: var(--t-2); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; user-select: all; }
#history { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--row); }
.event { display: flex; flex-wrap: wrap; gap: var(--s-1); align-items: center; padding-bottom: var(--row); border-bottom: 1px solid var(--line); }
.event .actor, .event .detail { color: var(--muted); font-size: var(--t--1); }
#actions { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--s-1); }
.pay-action { color: var(--muted); font-size: var(--t--1); }

/* ── Tables the staff surfaces lean on ──────────────────────────────────── */

table { border-collapse: collapse; width: 100%; }
caption { text-align: left; font-size: var(--t--1); color: var(--muted); padding-bottom: var(--s-1); }
th, td { text-align: left; padding: var(--s-1); border-bottom: 1px solid var(--line); }

/* ── Lists of things, across every admin surface ────────────────────────── */

/* Lists only: a table that took one of these ids stays a table. */
:is(#product-list, #address-book, #rejections, #variants, #exchange-list, #review-list,
#tenant-list, #queue, #ledger, #pipeline, #delivery-log, #wishlist ul):is(ul, ol) {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--row);
}
:is(.product, .address, .exchange, .review, .tenant, .member, .page, .strategy,
.webhook, .delivery, .movement, .lead, .promotion):not(tr) {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1);
  align-items: baseline;
  padding-bottom: var(--row);
  border-bottom: 1px solid var(--line);
}
.slug, .hostname, .url, .sku, .reason, .company, .assignee, .detail { color: var(--muted); font-size: var(--t--1); }
.name, .wordmark { font-weight: 600; }

/* ── The development banner ─────────────────────────────────────────────── */

/* Deliberately not pretty. This says the shop is standing with its door open —
   sign-in links redeem themselves and the outbox is public — and it sits above
   everything, on every page, because the one thing it must never do is blend
   in. It is the only place in the stylesheet that names a colour outright:
   these are not the shop's tokens to theme, and a tenant must not be able to
   make this quiet. */
/* What the running shop says about itself to a developer: development mode
   and the mocks in use, in one small overlay in the bottom-right corner rather
   than bars across the page (AX-CHECKOUT-00154). It opens upward, so the pill
   stays where it was. Collapsed, a pill naming
   what is on; open, the notices. Neutral, not alarm colours: it is a note to
   the developer, not a warning to a buyer. */
.dev-overlay {
  position: fixed;
  bottom: var(--s-1);
  right: var(--s-1);
  display: flex;
  flex-direction: column-reverse;
  z-index: 1000;
  max-width: min(24rem, calc(100vw - 2 * var(--s-2)));
  font-size: var(--t--1);
  color: #f9fafb;
}
.dev-overlay > summary {
  display: flex;
  justify-content: flex-end;
  gap: var(--s-1);
  list-style: none;
  cursor: pointer;
  margin-left: auto;
  width: max-content;
  padding: 4px var(--s-1);
  border-radius: 999px;
  background: #1f2937;
  color: #ffffff;
  font-weight: 600;
  box-shadow: 0 2px 8px rgb(0 0 0 / 0.25);
}
.dev-overlay > summary::-webkit-details-marker { display: none; }
.dev-overlay > summary:hover, .dev-overlay[open] > summary { background: #111827; }
.dev-overlay-label, .dev-overlay > summary::after { color: #ffffff; }
.dev-overlay > summary:focus-visible { outline: var(--ring) solid var(--accent); outline-offset: 2px; }
.dev-overlay > summary::after { content: "▴"; }
.dev-overlay[open] > summary::after { content: "▾"; }
.dev-overlay-label::before { content: "●"; margin-right: 4px; color: #fbbf24; }
.dev-overlay-body {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  margin-bottom: 4px;
  padding: var(--s-1) var(--s-2);
  border-radius: 8px;
  background: #1f2937;
  color: #ffffff;
  box-shadow: 0 4px 16px rgb(0 0 0 / 0.3);
}
.dev-overlay-body p { margin: 0; line-height: var(--lh); }
.dev-overlay-body a { color: #93c5fd; text-underline-offset: 3px; }
#mock-banner a { margin-inline-start: 4px; }
@media print { .dev-overlay { display: none; } }

#mocks .mock { display: flex; flex-direction: column; gap: var(--s-2); }
#mocks .mock dl { display: grid; grid-template-columns: max-content 1fr; gap: var(--s-1) var(--s-3); margin: 0; }
#mocks .mock dd { margin: 0; overflow-wrap: anywhere; }
#mocks table { width: 100%; border-collapse: collapse; font-size: var(--t--1); }
#mocks th, #mocks td { text-align: start; padding: var(--s-1); border-bottom: 1px solid currentColor; }

/* Where you are in a walk, and the one thing next (AX-CHECKOUT-00148). The
   step you are on is the loudest thing on the page; the detail folds away. */
#walk, #stories { display: flex; flex-direction: column; gap: var(--s-2); margin-block-end: var(--s-5); }
/* An order's own steps use the walk's look: one shape for "where you are". */
.walk-steps, .order-steps { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--s-2); }
.walk-steps li, .order-steps li { padding: var(--s-1) var(--s-3); border: 1px solid var(--line); border-radius: 999px; color: var(--muted); }
.walk-steps li.done, .order-steps li.done { color: var(--ink); }
.walk-steps li.now, .order-steps li.now { color: var(--ink); border: 2px solid var(--accent); font-weight: 600; }
.walk-steps .mark, .order-steps .mark { display: inline-block; min-width: 1ch; }
#walk-next { padding: var(--s-3); background: var(--raised); border-inline-start: 4px solid var(--accent); }
#walk-next p { margin: 0; }
#walk-next-link.button, #pay-by-card.button { display: inline-block; padding: var(--s-1) var(--s-3); background: var(--accent); color: #ffffff; border-radius: 6px; text-decoration: none; font-weight: 600; }
.stories { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.stories button[aria-pressed="true"] { font-weight: 600; outline: 2px solid var(--accent); }
#mock-details > summary { cursor: pointer; font-weight: 600; margin-block: var(--s-3); }
#mock-next { font-weight: 600; }

/* A cart line asking for more than is left, and the one press that fixes it
   (AX-CHECKOUT-00150). */
#stock-notes { display: flex; flex-direction: column; gap: var(--s-2); margin-block-end: var(--s-3); }
.stock-short { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--s-3); border-inline-start: 4px solid var(--accent); background: var(--raised); }
.stock-short p { margin: 0; }
#back-to-cart.button { display: inline-block; padding: var(--s-1) var(--s-3); background: var(--accent); color: #ffffff; border-radius: 6px; text-decoration: none; font-weight: 600; }

/* ── The landing pages ──────────────────────────────────────────────────── */

/* A directory of surfaces, in groups. It is read by scanning, so the groups sit
   side by side where there is room and stack where there is not. */
#admin-home, #platform-home { display: flex; flex-direction: column; gap: var(--s-3); }
#admin-home .admin-section { display: flex; flex-direction: column; gap: var(--s-1); }
#admin-home ul, #platform-home ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}
#admin-home .admin-section h2 { font-size: var(--t-0); color: var(--muted); font-weight: 600; }
/* Each entry is a destination, so it is a target before it is a word: the row
   carries the 44px, not the text. */
#admin-home li a, #platform-home li a {
  display: flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0 var(--s-1);
  margin-left: calc(var(--s-1) * -1);
  border-radius: var(--radius);
  text-decoration: none;
}
#admin-home li a:hover, #platform-home li a:hover { background: var(--raised); }
#tenant-count { color: var(--muted); }

@media (min-width: 40rem) {
  #admin-home { display: grid; grid-template-columns: repeat(3, 1fr); align-items: start; gap: var(--s-4); }
  #admin-home > h1, #admin-home > .lead { grid-column: 1 / -1; }
}

/* The mailbox's own form: a fresh link is one field and one button, sitting
   above the notices so the link it makes lands in view. */
#mint { flex-direction: row; flex-wrap: wrap; align-items: flex-end; gap: var(--s-1); }
#mint label { flex: 0 0 auto; }
#mint input[type="email"] { min-width: 18rem; }

/* ── The appearance form ────────────────────────────────────────────────── */

/* Helper text explains a field; it never competes with it. */
.help { font-size: var(--t--1); color: var(--muted); margin-top: calc(var(--s-1) * -1); max-width: 48ch; }

#appearance-form { gap: var(--s-3); max-width: 40rem; }
#appearance-verdict { font-size: var(--t--1); color: var(--muted); min-height: var(--s-3); }
#appearance-verdict .passing { color: var(--good); }
#appearance-verdict .refusal { color: var(--danger); }
#appearance-saved { color: var(--good); font-size: var(--t--1); }
.swatch {
  display: inline-block;
  width: var(--s-3);
  height: var(--s-3);
  border-radius: var(--radius);
  background: var(--accent);
  border: 1px solid var(--line);
  vertical-align: middle;
}
.recommended { color: var(--muted); font-size: var(--t--1); }
details > summary {
  cursor: pointer;
  min-height: var(--tap);
  display: flex;
  align-items: center;
  color: var(--ink);
  font-size: var(--t--1);
}
details[open] > summary { margin-bottom: var(--s-1); }

/* ── The development mailbox ────────────────────────────────────────────── */

/* Every notice the server has sent, as cards. Nobody reads this page for
   pleasure: they came for one link, usually the newest, so the link is the
   loudest thing on a card and everything else gets out of its way. */
#mailbox { display: flex; flex-direction: column; gap: var(--s-3); max-width: var(--measure); }
#notices { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--s-2); }

.notice {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  padding: var(--pad);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--raised);
}
.notice .subject { font-weight: 600; }
.notice .recipient { font-size: var(--t--1); color: var(--muted); }

/* A URL is not prose. It is read character by character when it is read at
   all, and it is copied more often than it is read, so it wraps anywhere
   rather than pushing the card sideways. */
.notice .body {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--t--1);
  line-height: var(--lh);
  overflow-wrap: anywhere;
}

/* The link is why the page exists, so it is the one thing wearing the accent,
   and it is a target before it is a word: the row carries the 44px. */
.notice .body a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0 var(--s-1);
  margin: 0 calc(var(--s-1) * -1);
  border-radius: var(--radius);
  color: var(--accent);
  font-weight: 600;
  text-decoration-thickness: 2px;
}
.notice .body a:hover { background: var(--surface); text-decoration-thickness: 3px; }

#no-mail { color: var(--muted); }

/* ── Motion: it says what changed and where it went, or it is not here ──── */

@keyframes enter {
  from { opacity: 0; transform: translateY(var(--travel)); }
  to { opacity: 1; transform: none; }
}

#main > * { animation: enter var(--dur) var(--ease) both; }
#main > :nth-child(1) { animation-delay: 0ms; }
#main > :nth-child(2) { animation-delay: 60ms; }
#main > :nth-child(3) { animation-delay: 120ms; }
#main > :nth-child(4) { animation-delay: 180ms; }
#main > :nth-child(5) { animation-delay: 240ms; }
#main > :nth-child(6) { animation-delay: 300ms; }
#main > :nth-child(7) { animation-delay: 360ms; }
#main > :nth-child(8) { animation-delay: 420ms; }
#main > :nth-child(9) { animation-delay: 480ms; }
#main > :nth-child(10) { animation-delay: 540ms; }
/* Capped at 600ms however long the list is. */
#main > :nth-child(n+11) { animation-delay: 600ms; }

/* What htmx swapped: a fade out, a fade in, never a flash. */
.htmx-swapping { opacity: 0; transition: opacity var(--dur-micro) var(--ease); }
.htmx-settling { animation: enter var(--dur-large) var(--ease) both; }
.htmx-request button[type="submit"] { opacity: 0.65; cursor: progress; }

@media (prefers-reduced-motion: reduce) {
  html { --travel: 0px; }
  button:active { transform: none; }
  *, *::before, *::after { animation-duration: var(--dur-micro) !important; transition-duration: var(--dur-micro) !important; }
}

/* ── Staff panels ───────────────────────────────────────────────────────── */
/* The administration of the thing on the page, where the page is, for staff
   of this shop only (AX-CHECKOUT-00151). Set apart by the raised surface the
   staff row wears, so it never reads as something a buyer is being shown. */
.staff-panel {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  margin-top: var(--s-3);
  padding: var(--s-2);
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius, 4px);
  background: var(--raised);
  max-width: var(--measure);
}
.staff-panel h2 {
  font-size: var(--t--1);
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0;
}
.staff-stock { width: 100%; border-collapse: collapse; font-size: var(--t--1); }
.staff-stock th, .staff-stock td { text-align: left; padding: var(--s-1) var(--s-1) var(--s-1) 0; border-bottom: 1px solid var(--line); }
.staff-stock td a { margin-right: var(--s-1); }
.staff-stock form.restock { display: inline; margin: 0 var(--s-1) 0 0; }
.staff-stock form.restock button { min-height: 32px; padding: 0 var(--s-1); font-weight: 600; }
.staff-order { display: grid; grid-template-columns: max-content 1fr; gap: var(--s-1) var(--s-2); margin: 0; font-size: var(--t--1); }
.staff-order dt { color: var(--muted); }
.staff-order dd { margin: 0; }
.staff-actions { display: flex; flex-wrap: wrap; gap: var(--s-1); }
.staff-actions form { margin: 0; }
@media (max-width: 40rem) {
  .staff-stock { display: block; overflow-x: auto; }
}

/* The development pill's restock button (AX-CHECKOUT-00156). */
#dev-restock { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1); margin: 0; }
#dev-restock button {
  font: inherit; font-weight: 600; cursor: pointer;
  padding: 2px var(--s-2); border-radius: 999px; border: 1px solid #93c5fd;
  background: #111827; color: #ffffff;
}
#dev-restock button:hover, #dev-restock button:focus-visible { background: #1e3a8a; }
#dev-restock .help { color: #d1d5db; font-size: var(--t--1); }

/* Where a buyer is on the way to an order (cart, details, confirmed). The
   order's own steps wear the same shape; this one sits above the heading and
   stays quieter than it. */
.checkout-steps { font-size: var(--t--1); }
.checkout-steps li { padding: 4px var(--s-2); }
.checkout-steps a { color: inherit; }
/* The staff row names where you are too. */
#staff-bar a[aria-current="page"] { color: var(--ink); }

/* ── The admin's page anatomy (AX-CHECKOUT-00185) ──────────────────────────
   Every staff page opens the same way: the way back when it sits inside a
   section, its name, and one line saying what it is for. What was done says
   so at the top; what was refused says why, in the same place. */
.lead { color: var(--muted); max-width: var(--measure); margin-top: calc(var(--s-1) * -1); }
.back-link { margin: 0; font-size: var(--t--1); }
.back-link a.back::before { content: "← "; }
#notice {
  padding: var(--pad);
  border-left: 3px solid var(--good);
  background: var(--raised);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.empty { color: var(--muted); }
/* A cell holding several steps lays them out inside itself; the cell itself
   stays a cell, or the table's columns stop lining up. */
td.steps > * { display: inline-block; margin: 0 var(--s-1) var(--s-1) 0; vertical-align: middle; }

/* ── The order flow: where it is, and the one thing to do next ─────────── */
.piles { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3); margin-bottom: var(--s-3); }
.piles a { font-weight: 600; }
.count {
  display: inline-block; min-width: 1.6em; padding: 0 var(--s-1); border-radius: 999px;
  background: var(--raised); font-size: var(--t--1); text-align: center; font-weight: 600;
}
.pile { margin-block: var(--s-4); }
.pile > h2, details.pile > summary h2 { display: inline-flex; gap: var(--s-1); align-items: center; font-size: var(--t-1); margin: 0; }
details.pile > summary { cursor: pointer; list-style: none; }
details.pile > summary::-webkit-details-marker { display: none; }
details.pile > summary::before { content: "▸ "; color: var(--muted); }
details.pile[open] > summary::before { content: "▾ "; }
table.order-queue td { vertical-align: top; }
table.order-queue td.who a { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--t--1); }
table.order-queue td.who .when, table.order-queue td.who .buyer { display: block; color: var(--muted); font-size: var(--t--1); white-space: nowrap; }
table.order-queue td.total { white-space: nowrap; }
table.order-queue td.next { min-width: 16rem; }
table.order-queue td.where .state { display: none; }

.stage-track { list-style: none; padding: 0; margin: 0; display: flex; gap: 2px; font-size: var(--t--1); }
.stage-track li { padding: 2px var(--s-1); background: var(--raised); color: var(--muted); white-space: nowrap; }
.stage-track li:first-child { border-radius: 999px 0 0 999px; }
.stage-track li:last-child { border-radius: 0 999px 999px 0; }
.stage-track li.done { color: var(--ink); }
.stage-track li.done::before { content: "✓ "; color: var(--good); }
.stage-track li.now { background: var(--accent); color: var(--on-accent); font-weight: 600; }
.stage-track[data-ended] li { text-decoration: line-through; opacity: 0.6; }

.next-step { margin-bottom: var(--s-1); }
.next-step form { display: inline-block; margin: 0; }
.next-step .help { margin: var(--s-1) 0 0; }
details.more { margin-top: var(--s-1); font-size: var(--t--1); }
details.more > summary { cursor: pointer; color: var(--muted); list-style: none; display: inline-block; min-height: var(--tap); line-height: var(--tap); }
details.more > summary::-webkit-details-marker { display: none; }
details.more > summary::after { content: " ▾"; }
.more-steps { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-1); padding-top: var(--s-1); }

.what-next { margin-top: var(--s-2); padding: var(--s-2); border: 1px solid var(--line); border-radius: var(--radius); }
.what-next > h3 { margin: 0 0 var(--s-1); font-size: var(--t-0); }
.with-dhl { margin: 0 0 var(--s-1); }
.parcel-walk { list-style: none; padding: 0; margin: var(--s-1) 0; display: flex; flex-wrap: wrap; gap: var(--s-1); counter-reset: stage; }
.parcel-walk li { counter-increment: stage; display: flex; align-items: center; gap: 4px; }
.parcel-walk li::before { content: counter(stage); font-size: var(--t--1); color: var(--muted); }
.parcel-walk li.done button { text-decoration: line-through; opacity: 0.7; }
.parcel-walk li.done::before { content: "✓"; color: var(--good); }