/* Storefront page furniture - account, orders, and the pages that follow.
 *
 * The menu page established the visual language (storefront-menu.css): density, real
 * hierarchy, no gradients, no floating cards, typography doing the work. This is the same
 * language for the pages that are mostly text and controls rather than a list of things
 * to buy.
 *
 * The organising idea here is WEIGHT. The brief's finding on the account page was two
 * identical full-width blue buttons for two completely different kinds of action, and
 * account deletion has since landed underneath them - so there are now three things
 * competing at one weight. Every class below exists to put them on different levels:
 *
 *   primary button  - the one thing this page is for (Save)
 *   nav rows        - going somewhere else; quiet, and shaped like links not buttons
 *   ghost button    - leaving (Sign out)
 *   danger block    - the irreversible one, fenced off and explained before its button
 */

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

.sf-head { margin-bottom: 18px; }
.sf-head h1 { font-size: 1.45rem; line-height: 1.2; margin: 0 0 4px; }
.sf-head__sub { color: var(--ink-soft, #6b6b66); font-size: .92rem; margin: 0; }

.sf-section { margin-top: 26px; }
.sf-section:first-of-type { margin-top: 20px; }

/* A quiet rule rather than a card. Cards on cards is what the brief ruled out, and the
 * grouping here only has to say "these belong together", not float. */
.sf-section__head {
  font-size: .76rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-soft, #6b6b66);
  padding-bottom: 6px; margin: 0 0 10px;
  border-bottom: 1px solid var(--line, #e5e9ef);
}

.sf-note {
  font-size: .84rem; line-height: 1.45; color: var(--ink-soft, #6b6b66);
  margin: 6px 0 0;
}

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

.sf-field { margin-top: 14px; }
.sf-field:first-child { margin-top: 0; }

.sf-label {
  display: block; font-size: .88rem; font-weight: 600; margin-bottom: 5px;
}
.sf-label__hint { font-weight: 400; color: var(--ink-soft, #6b6b66); }

.sf-input {
  display: block; width: 100%; box-sizing: border-box;
  font: inherit; font-size: .95rem;
  padding: 10px 12px;
  border: 1px solid var(--line-strong, #cfd6e0); border-radius: 8px;
  background: #fff; color: inherit;
}
.sf-input:focus {
  outline: 2px solid var(--brand, #0052ff); outline-offset: -1px;
  border-color: var(--brand, #0052ff);
}
textarea.sf-input { resize: vertical; min-height: 76px; }
.sf-input--upper { text-transform: uppercase; }

/* Checkbox and its words on one line, the words clickable with it. */
.sf-check {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: .92rem; line-height: 1.4; cursor: pointer;
}
.sf-check input { margin: 2px 0 0; flex: 0 0 auto; }

.sf-error {
  font-size: .84rem; color: var(--sf-danger-ink);
  margin: 5px 0 0;
}

/* -- actions --------------------------------------------------------------- */

.sf-save { margin-top: 20px; }
.sf-save .btn { width: 100%; text-align: center; }

/* Navigation, shaped as navigation. Rows with a chevron read as "somewhere else" the way
 * a full-width filled button never will - which was the whole complaint. */
.sf-nav { display: block; margin-top: 4px; }
.sf-nav__row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 2px;
  border-bottom: 1px solid var(--line, #e5e9ef);
  color: var(--ink, #1c1c1a); font-size: .95rem;
  text-decoration: none;
}
.sf-nav__row:first-child { border-top: 1px solid var(--line, #e5e9ef); }
.sf-nav__row:hover { color: var(--brand, #0052ff); text-decoration: none; }
.sf-nav__go { color: var(--ink-soft, #6b6b66); font-size: 1rem; line-height: 1; }
.sf-nav__row:hover .sf-nav__go { color: inherit; }

.sf-signout { margin-top: 22px; }

/* The irreversible one. Fenced by its own rule and its own colour, so it is not one more
 * row in a list of things to press - and the explanation sits above the button because it
 * has to be read first. */
.sf-danger {
  margin-top: 34px; padding-top: 20px;
  border-top: 1px solid var(--line, #e5e9ef);
}
.sf-danger h2 { font-size: .98rem; margin: 0 0 4px; }

.btn--danger {
  background: transparent;
  color: var(--sf-danger-ink);
  border: 1px solid var(--sf-danger-line);
}
.btn--danger:hover {
  background: var(--sf-danger-ink); color: #fff;
  border-color: var(--sf-danger-ink); text-decoration: none;
}

/* -- the orders list ------------------------------------------------------- */

.sf-group { margin-top: 24px; }
.sf-group__head {
  font-size: .76rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-soft, #6b6b66);
  padding-bottom: 6px; margin: 0 0 2px;
  border-bottom: 1px solid var(--line, #e5e9ef);
}

.sf-orders { list-style: none; padding: 0; margin: 0; }

.sf-order {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 2px;
  border-bottom: 1px solid var(--line, #e5e9ef);
  text-decoration: none; color: inherit;
}
.sf-order:hover { text-decoration: none; }
.sf-order:hover .sf-order__total { color: var(--brand, #0052ff); }

.sf-order__text { flex: 1 1 auto; min-width: 0; }
.sf-order__total {
  font-size: 1rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.sf-order__meta {
  display: block; margin-top: 2px;
  font-size: .84rem; color: var(--ink-soft, #6b6b66);
}

/* Past orders are quieter, not hidden: the brief wants a cancelled order from last week
 * to stop looking like one being prepared now. */
.sf-group--past .sf-order__total { font-weight: 600; color: var(--ink-soft, #6b6b66); }

/* -- status chips ---------------------------------------------------------- */

/* Enough weight to be scannable down a column, which is how they are actually read. */
.chip {
  flex: 0 0 auto;
  font-size: .76rem; font-weight: 700; letter-spacing: .02em;
  padding: 4px 10px; border-radius: 999px; white-space: nowrap;
}

/* Good news, and it should read as good news. */
.chip--ready { background: var(--sf-ok-bg); color: var(--sf-ok-ink); }
/* The customer has to do something. */
.chip--action { background: var(--sf-act-bg); color: var(--sf-act-ink); }
/* The outlet has to do something. */
.chip--waiting { background: var(--sf-wait-bg); color: var(--sf-wait-ink); }
/* Under way. */
.chip--live { background: var(--sf-live-bg); color: var(--sf-live-ink); }
/* Cancelled is neutral, not alarming - it is often the customer's own doing, and a red
 * badge turns their own decision into a warning about themselves. */
.chip--quiet { background: var(--sf-quiet-bg); color: var(--sf-quiet-ink); }

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

.sf-empty {
  margin-top: 24px; padding: 28px 20px;
  border: 1px dashed var(--line-strong, #cfd6e0); border-radius: 12px;
  text-align: center;
}
.sf-empty p { margin: 0 0 14px; color: var(--ink-soft, #6b6b66); }

@media (min-width: 720px) {
  .sf-save .btn { width: auto; min-width: 190px; }
  .sf-order { padding: 15px 2px; }
}

/* -- the basket ------------------------------------------------------------ */

.sf-lines {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: var(--sf-3);
}

.sf-line {
  display: flex; align-items: center; gap: var(--sf-3); flex-wrap: wrap;
  padding: var(--sf-3);
  background: var(--sf-surface);
  border: 1px solid var(--sf-line);
  border-radius: var(--sf-r-md);
  box-shadow: var(--sf-shadow-1);
  transition: box-shadow var(--sf-base) var(--sf-ease),
              border-color var(--sf-base) var(--sf-ease);
}
@media (hover: hover) {
  .sf-line:hover { box-shadow: var(--sf-shadow-2); border-color: var(--sf-line-strong); }
}
.sf-line__text { flex: 1 1 160px; min-width: 0; }
.sf-line__name { display: block; font-size: .97rem; overflow-wrap: anywhere; }
.sf-line__unit {
  display: block; margin-top: 2px;
  font-size: .84rem; color: var(--ink-soft, #6b6b66);
}
.sf-line__total {
  flex: 0 0 auto; min-width: 82px; text-align: right;
  font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.sf-line form { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.sf-line.is-busy { opacity: .55; }

/* A refusal is a message, never a silent no-op - the server's own sentence. */
.sf-line__error {
  flex: 1 1 100%;
  font-size: .82rem; color: var(--sf-danger-ink);
  padding: 2px 0 4px;
}
.sf-line__error[hidden] { display: none; }

/* Remove is a word, not a guess. Quiet, because it is destructive but reversible - the
 * item is one tap away on the menu. */
.sf-line__remove {
  border: 0; background: transparent; padding: 4px 2px; cursor: pointer;
  font: inherit; font-size: .84rem; color: var(--ink-soft, #6b6b66);
  text-decoration: underline;
}
.sf-line__remove:hover { color: var(--sf-danger-ink); }

/* The same control as the menu's, and deliberately a separate class: that file is the
 * menu page's and this one is shared by every page that follows. One sheet importing the
 * other to save nine lines would couple two surfaces that have no other reason to move
 * together. */
.sf-step {
  display: inline-flex; align-items: stretch;
  border: 1px solid var(--brand, #0052ff); border-radius: 8px; overflow: hidden;
}
.sf-step button {
  border: 0; background: transparent; cursor: pointer;
  color: var(--brand, #0052ff); font-size: 1rem; font-weight: 700;
  width: 34px; padding: 0; line-height: 1;
}
.sf-step button:hover { background: rgba(0, 82, 255, .08); }
.sf-step__n {
  min-width: 30px; padding: 7px 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .92rem; font-weight: 700; font-variant-numeric: tabular-nums;
  border-left: 1px solid var(--line, #e5e9ef);
  border-right: 1px solid var(--line, #e5e9ef);
}

.sf-totals { margin-top: 14px; }
.sf-totals__row {
  display: flex; justify-content: space-between; gap: 16px;
  font-size: .92rem; color: var(--ink-soft, #6b6b66);
  padding: 2px 0;
  font-variant-numeric: tabular-nums;
}
.sf-totals__row--grand {
  margin-top: 6px; padding-top: 8px;
  border-top: 1px solid var(--line, #e5e9ef);
  font-size: 1.08rem; color: var(--ink, #1c1c1a);
}

/* -- checkout -------------------------------------------------------------- */

.co { display: block; }

/* A choice should look like one. The radio stays visible: the selected state has to be
 * readable where `:has()` is not supported, and a custom control that hides the real input
 * is the usual way a radio group stops being reachable by keyboard. */
.co-choice {
  display: flex; align-items: center; gap: var(--sf-3);
  padding: var(--sf-3) var(--sf-4);
  border: 1px solid var(--sf-line-strong);
  border-radius: var(--sf-r-md);
  background: var(--sf-surface);
  cursor: pointer; font-size: .95rem;
  transition: border-color var(--sf-fast) var(--sf-ease),
              background var(--sf-fast) var(--sf-ease),
              box-shadow var(--sf-fast) var(--sf-ease);
}
.co-choice:hover { border-color: var(--ink-soft, #6b6b66); }
.co-choice:has(input:checked) {
  border-color: var(--brand, #0052ff);
  background: var(--sf-tint);
  box-shadow: inset 0 0 0 1px var(--brand, #0052ff), var(--sf-shadow-1);
}
.co-choice:has(input:focus-visible) { outline: 2px solid var(--brand, #0052ff); }

.co-summary {
  border: 1px solid var(--line, #e5e9ef); border-radius: 12px;
  padding: 4px 16px 16px;
  margin-bottom: 22px;
}
.co-summary__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 12px 0; cursor: pointer;
  font-size: .95rem; font-weight: 700;
  list-style-position: inside;
}
.co-summary__total { font-variant-numeric: tabular-nums; }

.co-lines { list-style: none; padding: 0; margin: 0; }
.co-line { padding: 10px 0; border-top: 1px solid var(--line, #e5e9ef); }
.co-line__top {
  display: flex; gap: 12px; align-items: baseline; justify-content: space-between;
}
.co-line__what { min-width: 0; overflow-wrap: anywhere; }
.co-line__money { font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.co-line__note { margin-top: 6px; font-size: .88rem; padding: 8px 10px; }

@media (min-width: 760px) {
  /* The summary alongside the fields rather than stacked above them. It is first in the
   * DOM so the stacked reading order on a phone is unchanged; grid moves it, nothing else
   * does. */
  .co {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 28px;
    align-items: start;
  }
  .co-main { grid-column: 1; grid-row: 1; }
  .co-summary { grid-column: 2; grid-row: 1; margin-bottom: 0; position: sticky; top: 16px; }
  /* Always open on desktop, where there is room for it - the marker would offer to
   * collapse something that is not in anyone's way. */
  .co-summary__head { cursor: default; }
  .co-summary__head::marker, .co-summary__head::-webkit-details-marker { content: ""; display: none; }
}

/* -- the basket ------------------------------------------------------------ */

.sf-lines {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: var(--sf-3);
}

.sf-line {
  display: flex; align-items: center; gap: var(--sf-3); flex-wrap: wrap;
  padding: var(--sf-3);
  background: var(--sf-surface);
  border: 1px solid var(--sf-line);
  border-radius: var(--sf-r-md);
  box-shadow: var(--sf-shadow-1);
  transition: box-shadow var(--sf-base) var(--sf-ease),
              border-color var(--sf-base) var(--sf-ease);
}
@media (hover: hover) {
  .sf-line:hover { box-shadow: var(--sf-shadow-2); border-color: var(--sf-line-strong); }
}
.sf-line__text { flex: 1 1 160px; min-width: 0; }
.sf-line__name { display: block; font-size: .97rem; overflow-wrap: anywhere; }
.sf-line__unit {
  display: block; margin-top: 2px;
  font-size: .84rem; color: var(--ink-soft, #6b6b66);
}
.sf-line__total {
  flex: 0 0 auto; min-width: 82px; text-align: right;
  font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.sf-line form { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.sf-line.is-busy { opacity: .55; }

/* A refusal is a message, never a silent no-op - the server's own sentence. */
.sf-line__error {
  flex: 1 1 100%;
  font-size: .82rem; color: var(--sf-danger-ink);
  padding: 2px 0 4px;
}
.sf-line__error[hidden] { display: none; }

/* Remove is a word, not a guess. Quiet, because it is destructive but reversible - the
 * item is one tap away on the menu. */
.sf-line__remove {
  border: 0; background: transparent; padding: 4px 2px; cursor: pointer;
  font: inherit; font-size: .84rem; color: var(--ink-soft, #6b6b66);
  text-decoration: underline;
}
.sf-line__remove:hover { color: var(--sf-danger-ink); }

/* The same control as the menu's, and deliberately a separate class: that file is the
 * menu page's and this one is shared by every page that follows. One sheet importing the
 * other to save nine lines would couple two surfaces that have no other reason to move
 * together. */
.sf-step {
  display: inline-flex; align-items: stretch;
  border: 1px solid var(--brand, #0052ff); border-radius: 8px; overflow: hidden;
}
.sf-step button {
  border: 0; background: transparent; cursor: pointer;
  color: var(--brand, #0052ff); font-size: 1rem; font-weight: 700;
  width: 34px; padding: 0; line-height: 1;
}
.sf-step button:hover { background: rgba(0, 82, 255, .08); }
.sf-step__n {
  min-width: 30px; padding: 7px 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .92rem; font-weight: 700; font-variant-numeric: tabular-nums;
  border-left: 1px solid var(--line, #e5e9ef);
  border-right: 1px solid var(--line, #e5e9ef);
}

.sf-totals { margin-top: 14px; }
.sf-totals__row {
  display: flex; justify-content: space-between; gap: 16px;
  font-size: .92rem; color: var(--ink-soft, #6b6b66);
  padding: 2px 0;
  font-variant-numeric: tabular-nums;
}
.sf-totals__row--grand {
  margin-top: 6px; padding-top: 8px;
  border-top: 1px solid var(--line, #e5e9ef);
  font-size: 1.08rem; color: var(--ink, #1c1c1a);
}

/* -- checkout -------------------------------------------------------------- */

.co { display: block; }

/* A choice should look like one. The radio stays visible: the selected state has to be
 * readable where `:has()` is not supported, and a custom control that hides the real input
 * is the usual way a radio group stops being reachable by keyboard. */
.co-choice {
  display: flex; align-items: center; gap: var(--sf-3);
  padding: var(--sf-3) var(--sf-4);
  border: 1px solid var(--sf-line-strong);
  border-radius: var(--sf-r-md);
  background: var(--sf-surface);
  cursor: pointer; font-size: .95rem;
  transition: border-color var(--sf-fast) var(--sf-ease),
              background var(--sf-fast) var(--sf-ease),
              box-shadow var(--sf-fast) var(--sf-ease);
}
.co-choice:hover { border-color: var(--ink-soft, #6b6b66); }
.co-choice:has(input:checked) {
  border-color: var(--brand, #0052ff);
  background: var(--sf-tint);
  box-shadow: inset 0 0 0 1px var(--brand, #0052ff), var(--sf-shadow-1);
}
.co-choice:has(input:focus-visible) { outline: 2px solid var(--brand, #0052ff); }

.co-summary {
  border: 1px solid var(--line, #e5e9ef); border-radius: 12px;
  padding: 4px 16px 16px;
  margin-bottom: 22px;
}
.co-summary__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 12px 0; cursor: pointer;
  font-size: .95rem; font-weight: 700;
  list-style-position: inside;
}
.co-summary__total { font-variant-numeric: tabular-nums; }

.co-lines { list-style: none; padding: 0; margin: 0; }
.co-line { padding: 10px 0; border-top: 1px solid var(--line, #e5e9ef); }
.co-line__top {
  display: flex; gap: 12px; align-items: baseline; justify-content: space-between;
}
.co-line__what { min-width: 0; overflow-wrap: anywhere; }
.co-line__money { font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.co-line__note { margin-top: 6px; font-size: .88rem; padding: 8px 10px; }

@media (min-width: 760px) {
  /* The summary alongside the fields rather than stacked above them. It is first in the
   * DOM so the stacked reading order on a phone is unchanged; grid moves it, nothing else
   * does. */
  .co {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 28px;
    align-items: start;
  }
  .co-main { grid-column: 1; grid-row: 1; }
  .co-summary { grid-column: 2; grid-row: 1; margin-bottom: 0; position: sticky; top: 16px; }
  /* Always open on desktop, where there is room for it - the marker would offer to
   * collapse something that is not in anyone's way. */
  .co-summary__head { cursor: default; }
  .co-summary__head::marker, .co-summary__head::-webkit-details-marker { content: ""; display: none; }
}

/* -- the life of an order -------------------------------------------------- */

/* Three steps, read left to right on a phone. Deliberately not a bar with a percentage:
 * the customer is not waiting for a download, they are waiting for a person, and what
 * they want to know is which of three named things has happened. */
.life {
  list-style: none; display: flex; margin: 0 0 18px; padding: 0;
  counter-reset: none;
}
.life__step {
  flex: 1 1 0; min-width: 0;
  position: relative;
  padding-top: 22px;
  font-size: .82rem; line-height: 1.25;
  color: var(--ink-soft, #6b6b66);
  text-align: center;
}

/* The connecting rule sits BEHIND the dots, drawn per step so it cannot fall out of step
 * with them - one element, one truth. */
.life__step::before {
  content: ""; position: absolute; top: 6px; height: 2px;
  left: 0; right: 50%;
  background: var(--line, #e5e9ef);
}
.life__step::after {
  content: ""; position: absolute; top: 6px; height: 2px;
  left: 50%; right: 0;
  background: var(--line, #e5e9ef);
}
.life__step:first-child::before, .life__step:last-child::after { display: none; }

.life__dot {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--bg, #fff);
  border: 2px solid var(--line-strong, #cfd6e0);
  z-index: 1;
}

/* Behind it. */
.life__step.is-done { color: var(--ink, #1c1c1a); }
.life__step.is-done .life__dot {
  background: var(--brand, #0052ff); border-color: var(--brand, #0052ff);
}
.life__step.is-done::before, .life__step.is-done::after { background: var(--brand, #0052ff); }

/* Where it is. The only step that carries weight, because it is the answer to "has
 * anything happened". */
.life__step.is-now { color: var(--ink, #1c1c1a); font-weight: 700; }
.life__step.is-now .life__dot {
  border-color: var(--brand, #0052ff);
  box-shadow: 0 0 0 3px rgba(0, 82, 255, .18);
}
.life__step.is-now::before { background: var(--brand, #0052ff); }

/* Ahead of it - visible, so the customer can see what is coming, but plainly not yet. */
.life__step.is-next { color: var(--ink-soft, #6b6b66); }


/* -- the basket ------------------------------------------------------------- */

/* One column on a phone; items beside a sticky summary where there is room. The summary
 * comes SECOND in the DOM, so the stacked reading order is items-then-money, which is the
 * order a customer checks them in. */
.bk { display: block; }

.bk__items { min-width: 0; }

.bk__panel {
  background:
    linear-gradient(160deg, var(--sf-tint-strong), rgba(0, 82, 255, 0) 55%),
    var(--sf-surface);
  border: 1px solid var(--sf-line);
  border-radius: var(--sf-r-lg);
  box-shadow: var(--sf-shadow-2);
  padding: var(--sf-4);
}
.bk__panel-title {
  font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted, #6b7787);
  margin: 0 0 var(--sf-3);
}

/* The page's one primary action, and it should look it. */
.bk__go {
  display: block; width: 100%; text-align: center;
  margin-top: var(--sf-4);
  padding: .85em 1.4em; font-size: 1.02rem;
}

/* Subordinate to it, and still easy to find. */
.bk__back {
  display: block; text-align: center; margin-top: var(--sf-3);
  font-size: .88rem; color: var(--muted, #6b7787);
}
.bk__back:hover { color: var(--brand, #0052ff); }

.sf-line__media { width: 56px; height: 56px; font-size: 1.25rem; }

/* A line total that has just changed gets one quiet pulse, so a stepper press is visibly
 * answered by the money and not only by the number in the stepper. */
@keyframes sf-line-settle {
  0%   { background: var(--sf-tint-strong); }
  100% { background: transparent; }
}
.sf-line__total.is-changed {
  animation: sf-line-settle 480ms var(--sf-ease);
  border-radius: var(--sf-r-sm);
}

/* -- the empty basket -------------------------------------------------------- */

.sf-empty--figured {
  background:
    linear-gradient(170deg, var(--sf-tint-strong), rgba(0, 82, 255, 0) 60%),
    var(--sf-surface);
  border-style: solid; border-color: var(--sf-line);
  box-shadow: var(--sf-shadow-1);
  padding: var(--sf-7) var(--sf-5);
}
.sf-empty__mark {
  display: block; width: 46px; height: 46px; margin: 0 auto var(--sf-3);
  color: rgba(0, 82, 255, .42);
}
.sf-empty__mark svg { width: 100%; height: 100%; display: block; }

@media (min-width: 860px) {
  .bk {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 312px;
    gap: var(--sf-5);
    align-items: start;
  }
  .bk__summary { position: sticky; top: var(--sf-4); }
}

@media (prefers-reduced-motion: reduce) {
  .sf-line, .sf-line__total.is-changed { transition: none; animation: none; }
}


/* -- checkout ---------------------------------------------------------------- */

/* The left column is a FLOW, not a stack of cards. Each step is a heading and space, with
 * at most a hairline between them - a checkout built of floating boxes reads as a
 * dashboard. The one strongly contained surface on this page is the summary, because that
 * is the money and the decision. */
.co-step { padding: var(--sf-5) 0; border-top: 1px solid var(--sf-line); }
.co-step--first { padding-top: 0; border-top: 0; }

.co-step__title {
  display: block;
  font-size: 1rem; font-weight: 700; letter-spacing: -.01em;
  color: var(--ink, #0b1220);
  margin: 0 0 var(--sf-3);
}
.co-step__hint {
  font-size: .78rem; font-weight: 500; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted, #6b7787); margin-left: var(--sf-2);
}

/* A step the server refused gets a quiet tinted gutter, so the eye lands on the section
 * before it has read the sentence. */
.co-step[data-errored] {
  box-shadow: inset 3px 0 0 var(--sf-danger-ink);
  padding-left: var(--sf-4);
  border-radius: 0 var(--sf-r-sm) var(--sf-r-sm) 0;
}

.co-choices { display: grid; gap: var(--sf-2); }

/* A field the server refused. Colour is not the only signal - the message sits under it
 * and carries role="alert" - but the border is what finds it on a long page. */
.sf-input.is-invalid {
  border-color: var(--sf-danger-ink);
  box-shadow: 0 0 0 3px rgba(154, 52, 18, .12);
}
.sf-input.is-invalid:focus { box-shadow: 0 0 0 3px rgba(154, 52, 18, .22); }

/* The summary: the page's one contained surface, and the primary action lives in it,
 * beside the total a customer has just read. */
.co-summary {
  background:
    linear-gradient(160deg, var(--sf-tint-strong), rgba(0, 82, 255, 0) 55%),
    var(--sf-surface);
  border: 1px solid var(--sf-line);
  border-radius: var(--sf-r-lg);
  box-shadow: var(--sf-shadow-2);
  padding: var(--sf-2) var(--sf-4) var(--sf-4);
  margin-bottom: var(--sf-5);
}

.co-place {
  display: block; width: 100%; text-align: center;
  margin-top: var(--sf-4);
  padding: .9em 1.4em; font-size: 1.04rem;
}

@media (prefers-reduced-motion: reduce) {
  .co-choice, .sf-input { transition: none; }
}


/* -- order tracking ---------------------------------------------------------- */

/* The page's ONE strong surface. Status is what the customer opened this page for, so the
 * chip, the sentence, the timeline and any action it carries live in a single panel rather
 * than as four stacked things the eye has to assemble. Everything below it - items, money,
 * fulfilment - is deliberately lighter. */
.track {
  background:
    linear-gradient(160deg, var(--sf-tint-strong), rgba(0, 82, 255, 0) 60%),
    var(--sf-surface);
  border: 1px solid var(--sf-line);
  border-radius: var(--sf-r-lg);
  box-shadow: var(--sf-shadow-2);
  padding: var(--sf-5) var(--sf-4);
  margin-bottom: var(--sf-5);
}

.track__top {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sf-3); flex-wrap: wrap;
  margin-bottom: var(--sf-2);
}
.track__when { font-size: .84rem; color: var(--muted, #6b7787); }

/* The sentence a customer reads first. The words are the page's existing ones. */
.track__now { margin: var(--sf-3) 0 0; font-size: .95rem; line-height: 1.5; }
.track__now strong { display: block; font-size: 1.06rem; color: var(--ink, #0b1220); }

.track__action { margin-top: var(--sf-4); }
.track__action .btn { width: 100%; text-align: center; }

/* -- the timeline ------------------------------------------------------------ */

.life {
  list-style: none; display: flex; margin: var(--sf-5) 0 0; padding: 0;
}
.life__step {
  flex: 1 1 0; min-width: 0; position: relative;
  padding-top: 26px;
  font-size: .84rem; line-height: 1.25; text-align: center;
  color: var(--muted, #6b7787);
}

/* The connecting rail, drawn per step so it cannot fall out of step with the dots - one
 * element, one truth. */
.life__step::before,
.life__step::after {
  content: ""; position: absolute; top: 7px; height: 3px;
  background: var(--sf-line);
  border-radius: 2px;
  transition: background var(--sf-base) var(--sf-ease);
}
.life__step::before { left: 0; right: 50%; }
.life__step::after { left: 50%; right: 0; }
.life__step:first-child::before, .life__step:last-child::after { display: none; }

.life__dot {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 17px; height: 17px; border-radius: 50%;
  background: var(--sf-surface);
  border: 3px solid var(--sf-line-strong);
  z-index: 1;
  transition: background var(--sf-base) var(--sf-ease),
              border-color var(--sf-base) var(--sf-ease),
              box-shadow var(--sf-base) var(--sf-ease);
}

/* Behind it. */
.life__step.is-done { color: var(--ink, #1c1c1a); font-weight: 600; }
.life__step.is-done .life__dot {
  background: var(--brand, #0052ff); border-color: var(--brand, #0052ff);
}
.life__step.is-done::before, .life__step.is-done::after { background: var(--brand, #0052ff); }

/* Where it is. The only step that carries full weight, because it is the answer to
 * "has anything happened". */
.life__step.is-now { color: var(--ink, #1c1c1a); font-weight: 700; }
.life__step.is-now .life__dot {
  background: var(--sf-surface);
  border-color: var(--brand, #0052ff);
  box-shadow: 0 0 0 4px rgba(0, 82, 255, .16);
  animation: sf-pulse 2.4s var(--sf-ease) infinite;
}
.life__step.is-now::before { background: var(--brand, #0052ff); }

/* Ahead of it - visible, so what comes next can be read, and plainly not yet. */
.life__step.is-next { color: var(--muted, #6b7787); }

/* One slow breath on the step the order is sitting at. It is the only moving thing on a
 * page a customer may leave open for twenty minutes, and it says "still live" - which is
 * the same thing the poll's honesty note says when it stops being true. */
@keyframes sf-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(0, 82, 255, .16); }
  50%      { box-shadow: 0 0 0 7px rgba(0, 82, 255, .07); }
}

/* An order that finished: the whole rail is brand blue and nothing is pulsing, which is
 * what "there is nothing left to wait for" looks like. */
.track--done .life__step.is-done .life__dot { box-shadow: none; }

@media (prefers-reduced-motion: reduce) {
  .life__step.is-now .life__dot { animation: none; }
  .life__step::before, .life__step::after, .life__dot { transition: none; }
}

/* -- the outlet chooser ------------------------------------------------------ */

.pick { list-style: none; margin: var(--sf-4) 0 0; padding: 0; display: grid; gap: var(--sf-3); }

/* The whole row is the button, so the touch target is the row and keyboard focus lands on
 * one thing per outlet rather than on a link nested inside a card. */
.pick__row {
  display: flex; align-items: center; gap: var(--sf-3);
  width: 100%; text-align: left; cursor: pointer;
  font: inherit; color: inherit;
  padding: var(--sf-4);
  background: var(--sf-surface);
  border: 1px solid var(--sf-line);
  border-radius: var(--sf-r-md);
  box-shadow: var(--sf-shadow-1);
  transition: border-color var(--sf-base) var(--sf-ease),
              box-shadow var(--sf-base) var(--sf-ease),
              transform var(--sf-base) var(--sf-ease);
}
@media (hover: hover) {
  .pick__row:hover {
    border-color: var(--brand, #0052ff);
    box-shadow: var(--sf-shadow-2);
    transform: translateY(-2px);
  }
}
.pick__row:focus-visible {
  outline: none;
  border-color: var(--brand, #0052ff);
  box-shadow: var(--sf-focus);
}
.pick__row:active { transform: translateY(0); }

.pick__body { flex: 1 1 auto; min-width: 0; display: block; }
.pick__top { display: flex; align-items: center; gap: var(--sf-2); flex-wrap: wrap; }
.pick__name { font-size: 1.02rem; font-weight: 700; color: var(--ink, #0b1220); }
.pick__meta {
  display: block; margin-top: 3px;
  font-size: .86rem; color: var(--muted, #6b7787);
}

/* Labelled, not selected - and it has to read as a note rather than as a state, or the
 * page starts looking like it has chosen for them. */
.pick__last {
  display: inline-block; margin-top: var(--sf-2);
  font-size: .76rem; font-weight: 600;
  padding: 3px 9px; border-radius: var(--sf-r-pill);
  background: var(--sf-tint-strong); color: var(--brand-ink, #0043cf);
}

.pick__go { flex: 0 0 auto; color: var(--muted, #6b7787); font-size: 1.2rem; line-height: 1; }
.pick__row:hover .pick__go { color: var(--brand, #0052ff); }

/* -- the marketplace entry --------------------------------------------------- */

/* A gateway, not a landing page: one mark, one question, one field, one button. The glow
 * is the only decoration and it sits behind the card rather than over the whole page. */
.gate {
  position: relative;
  margin-top: var(--sf-6);
  padding: var(--sf-7) var(--sf-5);
  background:
    linear-gradient(170deg, var(--sf-tint-strong), rgba(0, 82, 255, 0) 55%),
    var(--sf-surface);
  border: 1px solid var(--sf-line);
  border-radius: var(--sf-r-lg);
  box-shadow: var(--sf-shadow-2);
  text-align: center;
}
/* An ambient blue bloom above the card. Purely decorative, so it is hidden from assistive
 * tech by being a background rather than an element, and it never sits over the text. */
.gate::before {
  content: ""; position: absolute; left: 50%; top: -60px;
  width: 260px; height: 160px; transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(0, 82, 255, .16), rgba(0, 82, 255, 0));
  pointer-events: none; z-index: -1;
}

.gate__mark {
  display: block; width: 44px; height: 44px; margin: 0 auto var(--sf-4);
  color: var(--brand, #0052ff);
}
.gate__mark svg { width: 100%; height: 100%; display: block; }

.gate__title { font-size: 1.4rem; letter-spacing: -.02em; margin: 0 0 var(--sf-2); }
.gate__sub { color: var(--muted, #6b7787); margin: 0 0 var(--sf-5); font-size: .95rem; }

.gate__form { text-align: left; }
.gate__code {
  text-align: center; letter-spacing: .12em; text-transform: uppercase;
  font-size: 1.05rem; font-weight: 600;
}
.gate__code::placeholder { letter-spacing: .12em; font-weight: 400; }
.gate__go { display: block; width: 100%; text-align: center; margin-top: var(--sf-3); }

.gate__foot {
  margin: var(--sf-6) 0 0;
  font-size: .78rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted, #6b7787);
}

@media (prefers-reduced-motion: reduce) {
  .pick__row { transition: none; }
}