/* Token · Change order — the design system, built to mockups/change-order-prototype.html
   at v63 (F-54, the frozen design). Do not redesign (CLAUDE.md).
   Content on white. Radius 6px everywhere. Teal is the only action colour;
   Pick Yellow appears exactly once, on the Condition 2 chip. */

:root {
  --ink: #171717;
  --sub: #6e6e73;
  --hair: #e5e5e5;
  --line: #d2d2d7;
  --gray: #f5f5f7;
  --teal: #133a3f;
  /* F-56: the page chrome is brand Teal, a shade off the button teal on purpose.
     tokenmade.com's own footer measures #103a3e, and header and footer must match each
     other (Daniel, 09-14: "Yes, obviously, make them the same"). Buttons stay --teal. */
  --teal-chrome: #0f3b3d;
  --yellow: #ffb81a;
  --r: 6px;
  --cream: #f3ecde;
  /* One content column, and the header and footer align to it. Widened on the two-list
     screens, which carry a second column (F-52). */
  --content: 680px;
  --display: "Archivo Black", Arial, sans-serif;
  --body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }
/* Item 85 (Nadia, iPhone, 2026-10-07): the page zoomed in on repeated taps and she could not
   get back out. iOS Safari double-tap-zooms any element without `touch-action`. `manipulation`
   keeps panning and pinch zoom and removes only double-tap zoom. No visual change. */
html, body, button, a, input, select, textarea, label, [role="button"], [data-act], [data-do], [data-go], [data-chip], [data-reason], [data-rate] { touch-action: manipulation; }

body {
  margin: 0;
  background: #fff;
  color: var(--ink);
  font: 16px/1.45 var(--body);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1;
  margin: 0 0 6px;
}
h1 { font-size: 26px; }
h2 { font-size: 20px; }

p { margin: 0 0 14px; }
a { color: var(--teal); }

/* ---------------------------------------------------------------- shell */

/* Teal, and NO rule under it — F-56 amends F-52's light gray. Daniel: "The gray header
   is feeling weak to me." The header and the footer are the same colour, so the page is
   bracketed by the brand rather than fading into it. */
.top {
  background: var(--teal-chrome);
  border-bottom: 0;
}
.top-inner,
main,
.sfoot-inner {
  width: 100%;
  max-width: var(--content);
  margin: 0 auto;
}
.top-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 20px;
}
.top a { display: block; line-height: 0; }
/* F-69: everything on the teal is Cream — a real cream wordmark file, not a CSS
   inversion of the black one (which came out a shade off and blurred the edges). */
.top img {
  height: 44px;
  width: auto;
  display: block;
}
/* "Order #NNNN · date", right, against the logo. Cream, like everything on the teal (F-69
   retires F-56's Light Teal). */
.ordermeta {
  font: 600 11px/1 var(--body);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cream);
  text-align: right;
}

main {
  flex: 1;
  padding: 24px 20px 56px;
}

/* The two-list screens run wider, because they carry the sticky second column. */
body.wide { --content: 1100px; }

/* The tokenmade.com footer (F-52), minus the "Sign up for updates" box — no marketing
   capture on a money screen — and minus Dealer Locator (Daniel, 09-14). These links are
   kept in step with the theme by hand. */
.sfoot { background: var(--teal-chrome); color: var(--cream); }
.sfoot-inner {
  padding: 34px 20px 30px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 28px 40px;
  font-size: 13px;
  line-height: 1.7;
}
.sfoot a { color: var(--cream); text-decoration: none; }
.sfoot a:hover { text-decoration: underline; }
.sfoot .links { display: grid; gap: 2px; }
.sfoot .brand { text-align: right; display: grid; gap: 12px; justify-items: end; align-content: start; }
.sfoot .brand img { height: 40px; width: auto; }
.sfoot .social { display: flex; gap: 16px; align-items: center; }
.sfoot .social a { display: inline-flex; opacity: 0.95; }
.sfoot .social a:hover { opacity: 1; }
@media (max-width: 719px) {
  .sfoot-inner { grid-template-columns: 1fr; padding: 26px 18px; }
  .sfoot .brand { justify-items: start; text-align: left; }
}

/* ---------------------------------------------------------------- help card (F-53) */

.help {
  margin-top: 14px;
  border: 1px solid var(--hair);
  border-radius: var(--r);
  padding: 16px 18px;
  font-size: 14px;
}
.help b { display: block; margin-bottom: 6px; }
.help .ways { display: grid; gap: 8px; margin-top: 12px; }
.help .way {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1.5px solid var(--teal);
  border-radius: var(--r);
  padding: 10px 12px;
  color: var(--teal);
  text-decoration: none;
  background: #fff;
  transition: background 0.12s;
}
.help .way:hover { background: #e8efee; }
.help .way span { display: grid; line-height: 1.25; flex: 1; min-width: 0; }
.help .way b { margin: 0; font-size: 14px; display: block; }
.help .way small { color: var(--sub); font-size: 12px; }
.help .way i { font-style: normal; color: var(--teal); }

/* ---------------------------------------------------------------- two columns (F-52) */

/* Mobile and tablet stack, exactly as before. At 1024px the lists and finder keep the
   left column and "Your changes" pins to the right, so the net and Confirm stay on
   screen while the customer works down a long order. */
.twocol { display: grid; gap: 0; }
.twocol .summary { margin-top: 26px; }
@media (min-width: 1024px) {
  .twocol {
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 32px;
    align-items: start;
  }
  .twocol > div:last-child { position: sticky; top: 16px; }
  .twocol .summary { margin-top: 0; }
}
/* A long description must wrap rather than squeeze the stepper off the row. */
.twocol .list li > div > span:first-child { flex: 1; min-width: 0; }
.twocol .list li .step { flex: none; }

.banner {
  background: var(--gray);
  border-left: 4px solid var(--yellow);
  padding: 10px 14px;
  font-size: 13px;
  margin: 0 0 18px;
}

/* ---------------------------------------------------------------- blocks */

.meta { font-size: 13px; color: var(--sub); margin: 0 0 20px; }
.muted { color: var(--sub); }
.fine { font-size: 13px; color: var(--sub); margin: 12px 0 0; }
.price { font-variant-numeric: tabular-nums; white-space: nowrap; }
.sku { font-weight: 500; }

.eyebrow {
  font: 600 11px/1 var(--body);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sub);
  margin: 0 0 10px;
}

.card {
  border: 1px solid var(--hair);
  border-radius: var(--r);
  padding: 20px 22px;
  margin: 0 0 14px;
}
.card.gray { background: var(--gray); border-color: var(--gray); }

.chip {
  display: inline-block;
  font: 500 11px/1 var(--body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 9px;
  border-radius: var(--r);
  background: var(--gray);
  color: var(--ink);
}
.chip.y { background: var(--yellow); }
.chip.t { background: var(--teal); color: #fff; }

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

.btn {
  display: inline-block;
  background: var(--teal);
  color: #fff;
  padding: 15px 25px;
  font: 500 15px/1 var(--body);
  text-decoration: none;
  border: 0;
  border-radius: var(--r);
  cursor: pointer;
  text-align: center;
}
.btn:disabled { opacity: 0.45; cursor: default; }
.btn.ghost {
  background: #fff;
  color: var(--teal);
  border: 2px solid var(--teal);
  padding: 13px 23px;
}
.btn.block { display: block; width: 100%; }
.btn.sm { padding: 10px 14px; font-size: 14px; }
.btn + .btn { margin-top: 10px; }
.btns { display: grid; gap: 10px; margin-top: 18px; }
@media (min-width: 520px) { .btns.two { grid-template-columns: 1fr 1fr; } .btns.two .btn + .btn { margin-top: 0; } }

.back {
  background: none;
  border: 0;
  padding: 0 0 14px;
  color: var(--sub);
  font: 500 13px var(--body);
  cursor: pointer;
}

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

.list { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid #d4d4d4;
  border-radius: var(--r);
  background: #fff;
  text-align: left;
  font: 16px/1.3 var(--body);
  color: var(--ink);
  width: 100%;
  cursor: pointer;
}
.list li.static { cursor: default; }
.list li[aria-pressed="true"] { border-color: var(--teal); box-shadow: inset 0 0 0 1px var(--teal); }
.list li .arrow { color: var(--sub); }

.li {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 12px 0;
  border-top: 1px solid var(--hair);
}
.li:first-of-type { border-top: 0; }
.li .img {
  width: 56px;
  height: 56px;
  border-radius: var(--r);
  background: var(--gray);
  flex: none;
  object-fit: cover;
}
.li .grow { flex: 1; min-width: 0; }
.li .small { font-size: 13px; color: var(--sub); }

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

label {
  display: block;
  font: 500 13px/1 var(--body);
  color: var(--sub);
  margin: 16px 0 6px;
}
.in {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 12px 15px;
  font: 16px var(--body);
  background: #fff;
  color: var(--ink);
}
textarea.in { min-height: 110px; resize: vertical; }
.in:focus-visible, .list li:focus-visible, .btn:focus-visible,
.filters button:focus-visible, .filters span:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}
.two-up { display: grid; gap: 0 12px; }
@media (min-width: 520px) { .two-up { grid-template-columns: 1fr 1fr; } }

/* ---------------------------------------------------------------- chips row */

.filters { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 16px; }

/* Two families of chip, one look:
 *   - the two-list screens render <span class="on">, matching the frozen prototype
 *     (.m .filters span, prototype line 100)
 *   - the older per-action screens render <button aria-pressed>
 *
 * Only the buttons were ever styled, so every chip on the two-list screens — the
 * shape/material/thickness finder AND the Condition 3 reason chips — rendered as plain
 * text: no pill, no selected state, no pointer. Daniel's "dead text" (#6701, 09-14).
 * Both selectors must stay in step with the markup; test/chips.test.js checks that. */
.filters button,
.filters span {
  border: 1px solid #d4d4d4;
  border-radius: var(--r);
  padding: 7px 12px;
  font: 13px var(--body);
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  user-select: none;
}
.filters button[aria-pressed="true"],
.filters span.on {
  background: var(--teal);
  border-color: var(--teal);
  color: #fff;
}

/* ---------------------------------------------------------------- product grid */

.grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 560px) { .grid { grid-template-columns: repeat(3, 1fr); } }

.prod {
  border: 1px solid var(--hair);
  border-radius: var(--r);
  padding: 12px;
  background: #fff;
  text-align: left;
  cursor: pointer;
  font: 14px var(--body);
  color: var(--ink);
}
.prod[aria-pressed="true"] { border-color: var(--teal); box-shadow: inset 0 0 0 1px var(--teal); }
.prod .sw { height: 64px; margin-bottom: 10px; border-radius: var(--r); }
.prod .n { font-weight: 500; }
.prod .p { font-size: 13px; color: var(--sub); }
.prod .qty { font-size: 13px; color: var(--teal); font-weight: 500; margin-top: 4px; }

/* ---------------------------------------------------------------- ledger */

.ledger { border-top: 1px solid #d4d4d4; margin-top: 16px; padding-top: 10px; }
.ledger .row { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; }
.ledger .tot {
  border-top: 1px solid #d4d4d4;
  margin-top: 6px;
  padding-top: 10px;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

/* ---------------------------------------------------------------- states */

/* The landing card sits on the gray. F-139 (Daniel, 2026-09-17): the header is the same
   teal bar every other screen has — cream wordmark inside it, in its normal position, no
   order line because there is no order yet. The earlier override painted the bar gray, which
   put the cream logo on a light ground, floating top-left. */
body.lookup { background: var(--gray); }
body.lookup .card { background: #fff; border-color: var(--hair); }

.center { display: grid; justify-items: center; padding: 16px 0 40px; text-align: center; }
.center .card { max-width: 440px; width: 100%; text-align: left; }

.error {
  border-left: 4px solid #9a3b2b;
  background: var(--gray);
  padding: 12px 14px;
  font-size: 14px;
  border-radius: var(--r);
  margin: 0 0 16px;
}

.spinner {
  width: 20px; height: 20px;
  border: 2px solid var(--hair);
  border-top-color: var(--teal);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  margin: 40px auto;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation: none; } }

.busy { opacity: 0.55; pointer-events: none; }
.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------------------------------------------------------------- the two-list screen
   Lifted from the frozen prototype (v52), de-scoped from its `.m` mock frame and mapped
   onto this sheet's variable names (--teal for --btn-teal, --sub for --fg2, --hair for
   --rule). No dark mode: CLAUDE.md's design rules put content on white. */

.flabel {
  font: 600 11px/1 var(--body);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--sub);
  margin: 14px 0 8px;
}
.section-label {
  font: 600 13px/1 var(--body);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--sub);
  margin: 4px 0 10px;
}
.section-label + .list { margin-bottom: 0 }
.list-2 { margin-top: 26px }

/* Top list: one row per line on the order, stepper on the right. */
ul.list { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px }
ul.list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border: 1px solid #d4d4d4;
  border-radius: var(--r);
}
ul.list li.on { border-color: var(--teal); box-shadow: inset 0 0 0 1px var(--teal) }
ul.list li.row-block { display: block }
ul.list li.pending { border-color: var(--line); background: #fafafa }

.rowtop { display: flex; align-items: center; justify-content: space-between; gap: 12px }
.rowleft { display: flex; align-items: center; gap: 12px }
.thumb {
  width: 44px; height: 44px;
  border: 1px solid var(--hair);
  border-radius: var(--r);
  overflow: hidden; flex: none; display: block;
}
.thumb img, .thumb span { display: block; width: 100%; height: 100%; object-fit: contain }

/* Stepper. The − and + are the only controls on a row. */
.step { display: inline-flex; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; user-select: none }
.step button {
  padding: 8px 14px;
  font: inherit;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--ink);
}
.step button[disabled] { color: #c7c7cc; cursor: default }
.step .v { padding: 8px 18px; font-weight: 600; min-width: 48px; text-align: center }
.step button + .v, .step .v + button { border-left: 1px solid var(--line) }

.err { font-size: 13px; color: #9a3b2b; margin: 6px 0 0 }
/* F-70: a returned line with no reason yet. Label and chip group in the warning colour;
   both clear the moment a chip is chosen. */
.flabel.needs-reason { color: #9a3b2b; }
.needs-reason-note { letter-spacing: 0; text-transform: none; font-weight: 500; }
.filters.needs-reason { padding: 8px; border: 1.5px solid #9a3b2b; border-radius: 6px; }
/* The hint under the actions, while it is the thing blocking Review. */
.hint-block { margin: 12px 0 0; font-size: 14px; color: #9a3b2b; font-weight: 500; }

/* Summary panel — "Your changes". */
.summary { background: var(--gray); border-radius: var(--r); padding: 22px 22px 20px; margin-top: 26px }
.summary .eyebrow { margin-bottom: 12px }
.srow { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid #e0e0e3 }
.srow:first-of-type { border-top: 0; padding-top: 0 }
.srow .img { width: 40px; height: 40px; border-radius: var(--r); background: #fff; border: 1px solid var(--hair); overflow: hidden; flex: none; display: block }
.srow .img img, .srow .img span { display: block; width: 100%; height: 100%; object-fit: contain }
.srow .what { flex: 1; font-size: 15px; line-height: 1.3 }
.srow .tag { display: block; font: 600 11px/1 var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--sub); margin-bottom: 3px }
.srow .d { display: block; font-size: 13px; color: var(--sub) }
.srow .price { font-weight: 600; font-variant-numeric: tabular-nums; font-size: 16px }
.srow.small { padding: 6px 0; border-top: 0 }
.srow.small .what, .srow.small .price { font-size: 14px; color: var(--sub); font-weight: 400 }

.net {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  border-top: 2px solid var(--ink);
  margin-top: 10px; padding-top: 14px;
  font-weight: 600; font-size: 17px;
}
.net .amt { font: 400 28px/1 var(--display); letter-spacing: -.015em; font-variant-numeric: tabular-nums }

/* Fulfilled mid-edit (spec §4 Guards) — never a raw error. */
.overlay {
  position: fixed; inset: 0;
  background: rgba(23, 23, 23, .45);
  display: grid; place-items: center;
  padding: 24px; z-index: 5;
}
.dialog { background: #fff; border-radius: var(--r); padding: 26px 28px; max-width: 440px; width: 100%; box-shadow: 0 12px 40px rgba(0,0,0,.25) }
.dialog h4 { font: 400 22px/1.1 var(--display); letter-spacing: -.015em; margin: 0 0 10px }
.dialog p { margin: 0 0 18px; font-size: 15px }

.actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px }
.btn.sm { padding: 9px 16px; font-size: 14px }

@media (max-width: 560px) {
  .rowtop { flex-wrap: wrap }
  .net .amt { font-size: 24px }
}

/* ---- the guided flow (item 83, F-161): one question per page, phone first ---- */
.gback { display: inline-block; color: var(--teal); font-size: 14px; text-decoration: none; margin: 0 0 14px; }
.gstep { margin: 0 0 6px; }
.gchoice { display: block; text-decoration: none; color: inherit; margin: 0 0 12px; cursor: pointer; }
.gchoice:hover, .gchoice:focus-visible { border-color: var(--teal); }
.gtitle { font-size: 17px; font-weight: 500; line-height: 1.2; margin: 0 0 4px; }
.gsub { font-size: 13px; }
.gcard { cursor: pointer; margin: 0 0 12px; }
.gcard.on { border-color: var(--teal); box-shadow: inset 0 0 0 1px var(--teal); }
.gcard .grow { display: flex; gap: 14px; align-items: center; }
.gcard .img { width: 56px; height: 56px; border: 1px solid #e5e5e5; border-radius: 6px; overflow: hidden; flex: none; display: block; object-fit: cover; }
.gcard .gtext { flex: 1; min-width: 0; }
.gcard .gtitle { margin: 0 0 2px; font-size: 16px; }
.gqty { display: flex; align-items: center; gap: 12px; font-size: 15px; margin: 12px 0 0; }
.greasons { margin: 12px 0 0; }
.greasons .eyebrow { margin: 0 0 8px; }
.gremind { display: flex; gap: 12px; align-items: center; font-size: 14px; margin: 0 0 16px; }
.gremind .img { width: 40px; height: 40px; border: 1px solid #e5e5e5; border-radius: 6px; overflow: hidden; flex: none; display: block; object-fit: cover; }