/* Wear Blume — customer order tracking
   Only what is specific to this module. The page frame comes from
   css/components/_customer-shell.css and the icons from
   css/components/_icons.css; the admin UI kit is not loaded on this public
   page, so the few controls it needs are drawn here.

   Specificity note: css/theme-overrides.css loads after this file and styles
   bare `button`, `button:hover, button:focus` (0,1,1) and `table`, `td`, `th`
   from the theme settings. Button and table rules below are written at (0,2,0)
   — `.cb-track .cb-track-button` — so they win without !important.

   Table of contents:
     1. Intro, board and TikTok checkout
     1b. Tabs
     2. Status, skeleton and notices
     3. Order groups and order card
     4. Progress track
     5. Items table and totals
     6. Invoice
     7. Payment sent, package photo, shipment and callouts
     7a. Items shipping with another order
     7b. Completed orders and concerns
     7c. Order received
     8. Buttons and alerts
     9. Motion
    10. Hidden state
    11. Photo view
    11b. Concern form
    12. Print
*/

/* 1. Intro, board and TikTok checkout ----------------------------------- */

.cb-track__intro {
  margin-bottom: var(--cb-space-md);
  padding-top: var(--cb-space-sm);
}

.cb-track__greeting {
  color: var(--cb-accent-deep);
  font-size: var(--cb-text-md);
  font-weight: 600;
  margin: 0 0 var(--cb-space-3xs);
}

.cb-track__title {
  color: var(--cb-text);
  font-family: var(--cb-font-display);
  font-size: var(--cb-text-2xl);
  font-weight: 600;
  letter-spacing: var(--cb-tracking-tight);
  line-height: var(--cb-leading-tight);
  margin: 0 0 var(--cb-space-2xs);
  text-transform: none;
}

.cb-track__lead {
  color: var(--cb-text-muted);
  font-size: var(--cb-text-md);
  line-height: var(--cb-leading-body);
  margin: 0;
  max-width: 34rem;
}

/* Tones — the colour each group wears, on its board button and its heading,
   set once here as three local properties: an ink for the icon and the
   figures, a tint for them to sit on, and a border. Every tone is a status
   family from css/settings/_brand.css with an ink that reads on its tint.
   The tone names are the `tone` keys of the group list in module.html. */
.cb-track-tile--all,
.cb-track-tile--neutral,
.cb-track-group--neutral {
  --cb-track-tone: var(--cb-ink);
  --cb-track-tone-border: var(--cb-border-strong);
  --cb-track-tone-soft: var(--cb-sunken);
}

.cb-track-tile--due,
.cb-track-group--due {
  --cb-track-tone: var(--cb-warning);
  --cb-track-tone-border: var(--cb-warning-border);
  --cb-track-tone-soft: var(--cb-warning-soft);
}

.cb-track-tile--balance,
.cb-track-group--balance {
  --cb-track-tone: var(--cb-ribbon-ink);
  --cb-track-tone-border: var(--cb-ribbon-border);
  --cb-track-tone-soft: var(--cb-ribbon-soft);
}

.cb-track-tile--progress,
.cb-track-group--progress {
  --cb-track-tone: var(--cb-accent-deep);
  --cb-track-tone-border: var(--cb-accent-border);
  --cb-track-tone-soft: var(--cb-accent-soft);
}

.cb-track-tile--done,
.cb-track-group--done {
  --cb-track-tone: var(--cb-success);
  --cb-track-tone-border: var(--cb-success-border);
  --cb-track-tone-soft: var(--cb-success-soft);
}

/* Board — a button per group with orders in it, in two columns on a phone
   with All orders across the top, and as many columns as fit from 768px.
   Each button is a toggle: its icon in the group's tone, its name, its count
   and, for the groups that ask for money, what they owe under the name. It
   heads the active panel, over the groups. */
.cb-track-board {
  margin-bottom: var(--cb-space-md);
}

.cb-track .cb-track-board__label {
  color: var(--cb-text-muted);
  font-size: var(--cb-text-xs);
  font-weight: 600;
  letter-spacing: var(--cb-tracking-wide);
  margin: 0 0 var(--cb-space-2xs);
  text-transform: uppercase;
}

.cb-track-board__tiles {
  display: grid;
  gap: var(--cb-space-2xs);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Two classes: the theme styles bare `button` and its hover and focus at
   (0,1,1). */
.cb-track .cb-track-tile {
  -webkit-tap-highlight-color: transparent;
  align-content: center;
  align-items: center;
  background-color: var(--cb-surface);
  border: 1px solid var(--cb-border);
  border-radius: var(--cb-radius-lg);
  box-shadow: var(--cb-shadow-sm);
  color: var(--cb-text);
  cursor: pointer;
  display: grid;
  font-family: var(--cb-font-body);
  font-size: var(--cb-text-sm);
  font-weight: 500;
  gap: var(--cb-space-3xs) var(--cb-space-2xs);
  grid-template-columns: auto minmax(0, 1fr) auto;
  line-height: var(--cb-leading-tight);
  min-height: 2.75rem;
  padding: var(--cb-space-xs);
  text-align: left;
  text-transform: none;
  transition: background-color var(--cb-duration) var(--cb-ease),
    border-color var(--cb-duration) var(--cb-ease),
    box-shadow var(--cb-duration) var(--cb-ease),
    transform var(--cb-duration) var(--cb-ease);
}

.cb-track .cb-track-tile--all {
  grid-column: 1 / -1;
}

.cb-track .cb-track-tile:focus,
.cb-track .cb-track-tile:active {
  background-color: var(--cb-surface);
  color: var(--cb-text);
}

.cb-track .cb-track-tile:hover {
  background-color: var(--cb-surface);
  border-color: var(--cb-track-tone-border);
  box-shadow: var(--cb-shadow-md);
  color: var(--cb-text);
  transform: translateY(-1px);
}

.cb-track .cb-track-tile:focus-visible {
  box-shadow: 0 0 0 3px var(--cb-focus-ring);
  outline: none;
}

/* The group showing: filled with its tint and ringed in its ink. Last, so it
   holds through the hover and focus above. */
.cb-track .cb-track-tile[aria-pressed="true"] {
  background-color: var(--cb-track-tone-soft);
  border-color: var(--cb-track-tone);
  box-shadow: inset 0 0 0 1px var(--cb-track-tone), var(--cb-shadow-md);
}

.cb-track .cb-track-tile[aria-pressed="true"]:focus-visible {
  box-shadow: inset 0 0 0 1px var(--cb-track-tone), 0 0 0 3px var(--cb-focus-ring);
}

.cb-track-tile__icon {
  align-items: center;
  background-color: var(--cb-track-tone-soft);
  border-radius: var(--cb-radius-pill);
  color: var(--cb-track-tone);
  display: inline-flex;
  height: var(--cb-tile-xs);
  justify-content: center;
  position: relative;
  width: var(--cb-tile-xs);
}

/* On the pressed button the icon sits on the same tint as the button, so it
   turns solid to stay a shape of its own. */
.cb-track-tile[aria-pressed="true"] .cb-track-tile__icon {
  background-color: var(--cb-track-tone);
  color: var(--cb-on-ink);
}

/* A group with an order waiting on the customer breathes, like the step an
   order has reached. The halo runs on the duration token, so it stands still
   under prefers-reduced-motion. */
.cb-track-tile.is-urgent .cb-track-tile__icon::after {
  animation: cb-track-halo calc(var(--cb-duration-slow) * 7) var(--cb-ease) infinite;
  border: 2px solid var(--cb-track-tone-border);
  border-radius: var(--cb-radius-pill);
  content: "";
  inset: calc(var(--cb-space-3xs) * -1);
  position: absolute;
}

.cb-track-tile__label {
  font-weight: 600;
  min-width: 0;
  overflow-wrap: anywhere;
}

.cb-track-tile__count {
  color: var(--cb-track-tone);
  font-family: var(--cb-font-display);
  font-size: var(--cb-text-xl);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

/* Under the name, so a long amount never squeezes it. */
.cb-track-tile__note {
  color: var(--cb-track-tone);
  font-size: var(--cb-text-xs);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  grid-column: 2 / -1;
}

.cb-track .cb-track-board__showing {
  color: var(--cb-text-muted);
  font-size: var(--cb-text-sm);
  margin: var(--cb-space-2xs) 0 0;
}

.cb-track-board__showing:empty {
  display: none;
}

/* Beside the greeting, once the customer has saved a TikTok name: quieter
   than the name itself, so the greeting still reads first. */
.cb-track__greeting-note {
  color: var(--cb-text-muted);
  font-weight: 500;
  overflow-wrap: anywhere;
}

/* TikTok checkout — one card: a list of banners, one per HubDB row, then the
   TikTok name box as its footer. Banners are rows of the card, split by a
   hairline, not cards of their own, so two or three of them read as one
   schedule instead of a stack. A banner has three states: waiting, with no
   button; `is-open`, with the Go to Checkout Link button under its title;
   and `is-closed`, with no button, set back on a sunken ground with a lock.
   Waiting and closed are deliberately quieter than open, so a glance tells
   them apart without reading the countdown. The card spans the
   full column, so its edges line up with the board of tiles under it. */

.cb-track__checkout {
  background-color: var(--cb-surface);
  border: 1px solid var(--cb-border);
  border-radius: var(--cb-radius-xl);
  box-shadow: var(--cb-shadow-sm);
  display: grid;
  margin-top: var(--cb-space-sm);
  overflow: hidden;
}

.cb-track .cb-track__checkout-list {
  display: grid;
  list-style: none;
  margin: 0;
  padding: 0;
}

.cb-track-checkout {
  color: var(--cb-text-muted);
  display: grid;
  font-size: var(--cb-text-sm);
  font-weight: 500;
  gap: var(--cb-space-xs);
  line-height: var(--cb-leading-body);
  padding: var(--cb-space-xs) var(--cb-space-sm);
  transition: background-color var(--cb-duration) var(--cb-ease);
}

.cb-track-checkout + .cb-track-checkout {
  border-top: 1px solid var(--cb-border);
}

.cb-track-checkout.is-open {
  background-color: var(--cb-accent-soft);
  color: var(--cb-accent-deep);
}

.cb-track-checkout.is-closed {
  background-color: var(--cb-sunken);
}

/* The badge, then the title and message, then the countdown. On a phone the
   countdown sits under the message, in line with the title: beside it, its
   widest reading took 140px of a 343px banner and folded the title and the
   message into a narrow column. From 768px it moves up to the right of the
   title, both starting at the top edge so a long message only grows the
   banner downwards. */
.cb-track-checkout__head {
  align-items: start;
  column-gap: var(--cb-space-xs);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  row-gap: var(--cb-space-2xs);
}

/* The state icon in a soft round badge — a clock while waiting, a bag once
   open. module.js swaps the icon's class, not the badge's. */
.cb-track-checkout__badge {
  background-color: var(--cb-sunken);
  border-radius: var(--cb-radius-pill);
  color: var(--cb-text-muted);
  display: grid;
  padding: var(--cb-space-2xs);
  place-items: center;
  transition: background-color var(--cb-duration) var(--cb-ease),
    color var(--cb-duration) var(--cb-ease);
}

.cb-track-checkout.is-open .cb-track-checkout__badge {
  background-color: var(--cb-accent-tint);
  color: var(--cb-accent);
}

/* On the sunken ground of a closed banner, the badge and the countdown pill
   would vanish into it, so they lift onto the surface instead. */
.cb-track-checkout.is-closed .cb-track-checkout__badge,
.cb-track-checkout.is-closed .cb-track-checkout__timer {
  background-color: var(--cb-surface);
}

/* The title and the row's message stack, and give up their width first,
   wrapping rather than pushing the countdown out of the banner. The title is
   nudged down to sit centred on the badge. */
.cb-track-checkout__text {
  display: grid;
  gap: var(--cb-space-3xs);
  min-width: 0;
  padding-block-start: calc((var(--cb-icon-sm) + 2 * var(--cb-space-2xs) - var(--cb-text-sm) * var(--cb-leading-body)) / 2);
}

.cb-track .cb-track-checkout__label,
.cb-track .cb-track-checkout__message {
  margin: 0;
}

.cb-track-checkout__label {
  color: var(--cb-text);
  font-weight: 600;
}

.cb-track-checkout.is-open .cb-track-checkout__label {
  color: var(--cb-accent-deep);
}

/* The message is the admin's own text: kept as they typed its line breaks,
   a size down from the title and quieter. */
.cb-track-checkout__message {
  color: var(--cb-text-muted);
  font-size: var(--cb-text-xs);
  font-weight: 400;
  overflow-wrap: anywhere;
  white-space: pre-line;
}

.cb-track-checkout.is-open .cb-track-checkout__message {
  color: var(--cb-text);
}

/* The countdown is a pill. Tabular digits on one line, so the seconds
   ticking never shift anything beside or under it. */
.cb-track-checkout__timer {
  background-color: var(--cb-sunken);
  border-radius: var(--cb-radius-pill);
  color: var(--cb-text-muted);
  font-size: var(--cb-text-xs);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  grid-column: 2;
  justify-self: start;
  padding: var(--cb-space-3xs) var(--cb-space-2xs);
  white-space: nowrap;
}

.cb-track-checkout.is-open .cb-track-checkout__timer {
  background-color: var(--cb-surface);
  color: var(--cb-accent-deep);
}

/* The Go to Checkout Link button is an anchor drawn as a .cb-track-button, so
   it drops the theme's link underline. */
.cb-track .cb-track-checkout__go,
.cb-track .cb-track-checkout__go:hover,
.cb-track .cb-track-checkout__go:focus {
  text-decoration: none;
}

/* The TikTok name box, the card's footer: the field, then its save button —
   under it on a phone, beside the box from 768px. */
.cb-track-tiktok {
  background-color: var(--cb-sunken);
  border-top: 1px solid var(--cb-border);
  display: grid;
  gap: var(--cb-space-2xs);
  padding: var(--cb-space-xs) var(--cb-space-sm);
}

.cb-track-tiktok .cb-field {
  margin: 0;
}

.cb-track-tiktok__status:empty {
  display: none;
}

/* 1b. Tabs -------------------------------------------------------------- */

/* Active orders and Completed, as a segmented control: a sunken track with
   the selected tab raised on it in white. Each tab is half the track on a
   phone; from 768px the track only takes the width it needs. */
.cb-track-tabs {
  background-color: var(--cb-sunken);
  border: 1px solid var(--cb-border);
  border-radius: var(--cb-radius-pill);
  display: grid;
  gap: var(--cb-space-3xs);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0 0 var(--cb-space-md);
  padding: var(--cb-space-3xs);
}

/* Two classes: the theme styles bare `button` and its hover and focus at
   (0,1,1). */
.cb-track .cb-track-tabs__tab {
  -webkit-tap-highlight-color: transparent;
  align-items: center;
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: var(--cb-radius-pill);
  color: var(--cb-text-muted);
  cursor: pointer;
  display: inline-flex;
  font-family: var(--cb-font-body);
  font-size: var(--cb-text-sm);
  font-weight: 600;
  gap: var(--cb-space-2xs);
  justify-content: center;
  line-height: var(--cb-leading-tight);
  min-height: 2.75rem;
  min-width: 0;
  padding: var(--cb-space-2xs) var(--cb-space-sm);
  text-transform: none;
  transition: background-color var(--cb-duration) var(--cb-ease),
    border-color var(--cb-duration) var(--cb-ease),
    box-shadow var(--cb-duration) var(--cb-ease),
    color var(--cb-duration) var(--cb-ease);
}

.cb-track .cb-track-tabs__tab:focus,
.cb-track .cb-track-tabs__tab:active {
  background-color: transparent;
  color: var(--cb-text-muted);
}

.cb-track .cb-track-tabs__tab:hover {
  background-color: transparent;
  color: var(--cb-text);
}

.cb-track .cb-track-tabs__tab:focus-visible {
  box-shadow: 0 0 0 3px var(--cb-focus-ring);
  outline: none;
}

/* The selected tab, raised. Last, so it holds through the hover and focus
   above — and restates the focus ring, which its shadow would otherwise
   replace. */
.cb-track .cb-track-tabs__tab[aria-selected="true"] {
  background-color: var(--cb-surface);
  border-color: var(--cb-border);
  box-shadow: var(--cb-shadow-sm);
  color: var(--cb-text);
}

.cb-track .cb-track-tabs__tab[aria-selected="true"]:focus-visible {
  box-shadow: 0 0 0 3px var(--cb-focus-ring);
}

.cb-track-tabs__tab .cb-icon {
  flex: none;
}

.cb-track-tabs__count {
  background-color: var(--cb-sunken);
  border-radius: var(--cb-radius-pill);
  color: var(--cb-text-muted);
  font-size: var(--cb-text-xs);
  font-variant-numeric: tabular-nums;
  line-height: var(--cb-leading-tight);
  padding: 0 var(--cb-space-2xs);
}

.cb-track-tabs__tab[aria-selected="true"] .cb-track-tabs__count {
  background-color: var(--cb-accent-soft);
  color: var(--cb-accent-deep);
}

/* 2. Status, skeleton and notices --------------------------------------- */

.cb-track__skeleton {
  display: grid;
  gap: var(--cb-space-sm);
}

.cb-track__skeleton-card {
  animation: cb-track-shimmer calc(var(--cb-duration-slow) * 5) var(--cb-ease) infinite alternate;
  background-color: var(--cb-surface);
  border: 1px solid var(--cb-border);
  border-radius: var(--cb-radius-xl);
  height: 12rem;
}

.cb-track__notice {
  animation: cb-track-rise var(--cb-duration-slow) var(--cb-ease) both;
  background-color: var(--cb-surface);
  border: 1px solid var(--cb-border);
  border-radius: var(--cb-radius-xl);
  box-shadow: var(--cb-shadow-md);
  padding: var(--cb-space-xl) var(--cb-space-md);
  text-align: center;
}

.cb-track__notice-icon {
  align-items: center;
  background-color: var(--cb-accent-soft);
  border-radius: var(--cb-radius-pill);
  color: var(--cb-accent-deep);
  display: inline-flex;
  height: 3.5rem;
  justify-content: center;
  margin-bottom: var(--cb-space-sm);
  width: 3.5rem;
}

.cb-track__notice-title {
  color: var(--cb-text);
  font-family: var(--cb-font-display);
  font-size: var(--cb-text-xl);
  font-weight: 600;
  letter-spacing: var(--cb-tracking-tight);
  margin: 0 0 var(--cb-space-2xs);
  text-transform: none;
}

.cb-track__notice-text {
  color: var(--cb-text-muted);
  font-size: var(--cb-text-md);
  line-height: var(--cb-leading-body);
  margin: 0 auto;
  max-width: 26rem;
}

.cb-track__orders {
  display: grid;
  gap: var(--cb-space-lg);
  scroll-margin-top: var(--cb-space-md);
}

/* 3. Order groups and order card ---------------------------------------- */

/* A group: its icon in a tinted tile, its heading and a line on what its
   orders are waiting on, a pill with how many there are and what they owe,
   then its cards. The tone comes from section 1. On a phone the pill sits
   under the text; from 768px it moves up to the right of the heading. */
.cb-track-group {
  animation: cb-track-rise var(--cb-duration-slow) var(--cb-ease) both;
  display: grid;
  gap: var(--cb-space-sm);
}

.cb-track-group__header {
  align-items: start;
  column-gap: var(--cb-space-xs);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  row-gap: var(--cb-space-2xs);
}

.cb-track-group__icon {
  align-items: center;
  background-color: var(--cb-track-tone-soft);
  border: 1px solid var(--cb-track-tone-border);
  border-radius: var(--cb-radius-lg);
  color: var(--cb-track-tone);
  display: flex;
  height: var(--cb-tile-md);
  justify-content: center;
  width: var(--cb-tile-md);
}

.cb-track-group__text {
  min-width: 0;
}

/* Two classes: the theme styles bare h2 and p. */
.cb-track .cb-track-group__title {
  color: var(--cb-text);
  font-family: var(--cb-font-display);
  font-size: var(--cb-text-xl);
  font-weight: 600;
  letter-spacing: var(--cb-tracking-tight);
  line-height: var(--cb-leading-tight);
  margin: 0;
  text-transform: none;
}

.cb-track .cb-track-group__description {
  color: var(--cb-text-muted);
  font-size: var(--cb-text-sm);
  line-height: var(--cb-leading-body);
  margin: var(--cb-space-3xs) 0 0;
}

.cb-track .cb-track-group__summary {
  background-color: var(--cb-track-tone-soft);
  border: 1px solid var(--cb-track-tone-border);
  border-radius: var(--cb-radius-pill);
  color: var(--cb-track-tone);
  font-size: var(--cb-text-xs);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  grid-column: 2;
  justify-self: start;
  line-height: var(--cb-leading-tight);
  margin: 0;
  padding: var(--cb-space-3xs) var(--cb-space-2xs);
}

/* A step's banner over its orders — To Ship's note that its orders complete
   themselves — tinted in the group's tone, like its icon tile and pill. */
.cb-track .cb-track-group__notice {
  align-items: flex-start;
  background-color: var(--cb-track-tone-soft);
  border: 1px solid var(--cb-track-tone-border);
  border-radius: var(--cb-radius-lg);
  color: var(--cb-text);
  display: flex;
  font-size: var(--cb-text-sm);
  gap: var(--cb-space-2xs);
  line-height: var(--cb-leading-body);
  margin: 0;
  padding: var(--cb-space-xs) var(--cb-space-sm);
}

.cb-track-group__notice-icon {
  color: var(--cb-track-tone);
  flex-shrink: 0;
  margin-top: var(--cb-space-3xs);
}

.cb-track-group__orders {
  display: grid;
  gap: var(--cb-space-sm);
}

/* An order card. --cb-track-due is the colour of what the order asks of the
   customer — its edge, its badge, its current step and its invoice badge:
   amber while nothing is paid, the ribbon's blue once part of it is. */
.cb-track-order {
  --cb-track-due: var(--cb-warning);
  --cb-track-due-border: var(--cb-warning-border);
  --cb-track-due-soft: var(--cb-warning-soft);
  animation: cb-track-rise var(--cb-duration-slow) var(--cb-ease) both;
  background-color: var(--cb-surface);
  border: 1px solid var(--cb-border);
  border-radius: var(--cb-radius-xl);
  box-shadow: var(--cb-shadow-md);
  overflow: hidden;
  scroll-margin-top: var(--cb-space-md);
}

/* An order waiting on the customer carries a warm edge along its top, so it
   is the card the eye lands on first. */
.cb-track-order.is-balance {
  --cb-track-due: var(--cb-ribbon-ink);
  --cb-track-due-border: var(--cb-ribbon-border);
  --cb-track-due-soft: var(--cb-ribbon-soft);
}

.cb-track-order.is-payment-due {
  border-color: var(--cb-track-due-border);
  box-shadow: inset 0 3px 0 var(--cb-track-due), var(--cb-shadow-md);
}

/* The header is one button. On a phone it is two rows: what the order is
   with the chevron beside it, then its state and figure across the full
   width — so the chevron keeps its place however long the date runs. From
   768px the state moves up between them, onto one row. */
.cb-track-order__heading {
  margin: 0;
}

.cb-track .cb-track-order__toggle {
  -webkit-tap-highlight-color: transparent;
  align-items: center;
  background-color: transparent;
  border: 0;
  border-radius: 0;
  color: var(--cb-text);
  cursor: pointer;
  display: grid;
  font-family: var(--cb-font-body);
  gap: var(--cb-space-xs) var(--cb-space-sm);
  grid-template-columns: minmax(0, 1fr) auto;
  padding: var(--cb-space-sm);
  text-align: left;
  text-transform: none;
  transition: background-color var(--cb-duration) var(--cb-ease);
  width: 100%;
}

.cb-track .cb-track-order__toggle:focus,
.cb-track .cb-track-order__toggle:active {
  background-color: transparent;
  color: var(--cb-text);
}

.cb-track .cb-track-order__toggle:hover {
  background-color: var(--cb-sunken);
  color: var(--cb-text);
}

.cb-track .cb-track-order__toggle:focus-visible {
  box-shadow: inset 0 0 0 3px var(--cb-focus-ring);
  outline: none;
}

.cb-track-order__who {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
}

.cb-track-order__title {
  color: var(--cb-text);
  display: block;
  font-family: var(--cb-font-display);
  font-size: var(--cb-text-lg);
  font-weight: 600;
  letter-spacing: var(--cb-tracking-tight);
  line-height: var(--cb-leading-tight);
  overflow-wrap: anywhere;
}

.cb-track-order__meta {
  color: var(--cb-text-muted);
  display: block;
  font-size: var(--cb-text-sm);
  margin-top: var(--cb-space-3xs);
}

/* State and figure sit together: the badge at the start of the second row
   and the figure at its end, wrapping under the badge if both cannot fit. */
.cb-track-order__state {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--cb-space-3xs) var(--cb-space-sm);
  grid-column: 1 / -1;
  grid-row: 2;
  justify-content: space-between;
}

.cb-track-order__badge {
  align-items: center;
  background-color: var(--cb-accent-soft);
  border: 1px solid var(--cb-accent-border);
  border-radius: var(--cb-radius-pill);
  color: var(--cb-accent-deep);
  display: inline-flex;
  flex: none;
  font-size: var(--cb-text-xs);
  font-weight: 600;
  gap: var(--cb-space-3xs);
  line-height: 1.2;
  padding: var(--cb-space-3xs) var(--cb-space-2xs);
  white-space: nowrap;
}

.cb-track-order__badge--due {
  background-color: var(--cb-track-due-soft);
  border-color: var(--cb-track-due-border);
  color: var(--cb-track-due);
}

.cb-track-order__badge--final {
  background-color: var(--cb-accent);
  border-color: var(--cb-accent);
  color: var(--cb-on-ink);
}

/* Pushed to the end, so a figure that wraps under the badge still lines up
   with the other cards' figures. */
.cb-track-order__figure {
  margin-left: auto;
}

.cb-track-order__figure-label {
  color: var(--cb-text-muted);
  font-size: var(--cb-text-xs);
}

.cb-track-order__figure-value {
  font-size: var(--cb-text-md);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  margin-left: var(--cb-space-3xs);
}

.cb-track-order__chevron {
  color: var(--cb-ink-faint);
  grid-column: 2;
  grid-row: 1;
  transition: transform var(--cb-duration) var(--cb-ease);
}

.cb-track-order.is-open .cb-track-order__chevron {
  transform: rotate(180deg);
}

/* Paid so far, on a Balance left order: across the header under everything
   else, the bar taking what the figures leave. The fill is scaled by
   --cb-track-paid, 0 to 1, which module.js sets, and grows in from the left
   as the card appears. */
.cb-track-order__paid {
  align-items: center;
  column-gap: var(--cb-space-2xs);
  display: grid;
  grid-column: 1 / -1;
  grid-row: 3;
  grid-template-columns: minmax(0, 1fr) auto;
}

.cb-track-order__paid-bar {
  background-color: var(--cb-ribbon-soft);
  border: 1px solid var(--cb-ribbon-border);
  border-radius: var(--cb-radius-pill);
  display: block;
  height: var(--cb-space-2xs);
  overflow: hidden;
}

.cb-track-order__paid-fill {
  animation: cb-track-fill calc(var(--cb-duration-slow) * 3) var(--cb-ease) both;
  background-color: var(--cb-ribbon-deep);
  border-radius: inherit;
  display: block;
  height: 100%;
  transform: scaleX(var(--cb-track-paid, 0));
  transform-origin: left center;
}

.cb-track-order__paid-text {
  color: var(--cb-ribbon-ink);
  font-size: var(--cb-text-xs);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  white-space: nowrap;
}

.cb-track-order__body {
  border-top: 1px solid var(--cb-border);
}

.cb-track-order__lines {
  padding: 0 var(--cb-space-sm) var(--cb-space-md);
}

/* 4. Progress track ----------------------------------------------------- */

.cb-track-progress {
  padding: var(--cb-space-md) var(--cb-space-sm);
}

/* --cb-track-dot is the circle's size, set once here and widened in the
   media query, so the line between the circles always meets their centres. */
.cb-track-progress__steps {
  --cb-track-dot: var(--cb-tile-sm);
  display: flex;
  list-style: none;
  margin: 0 0 var(--cb-space-sm);
  padding: 0;
}

/* Each step is a circle holding its icon, and every step after the first
   draws the line that leads into it — from the previous circle's centre to
   its own. */
.cb-track-progress__step {
  align-items: center;
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: var(--cb-space-2xs);
  margin: 0;
  min-width: 0;
  position: relative;
  text-align: center;
}

.cb-track-progress__step + .cb-track-progress__step::before {
  background-color: var(--cb-border);
  content: "";
  height: 2px;
  left: -50%;
  position: absolute;
  right: 50%;
  top: calc(var(--cb-track-dot) / 2 - 1px);
  transition: background-color var(--cb-duration-slow) var(--cb-ease);
}

.cb-track-progress__step.is-done::before,
.cb-track-progress__step.is-current::before {
  background-color: var(--cb-accent);
}

/* A step still to come: a quiet outline and a faint icon. */
.cb-track-progress__dot {
  align-items: center;
  background-color: var(--cb-surface);
  border: 2px solid var(--cb-border);
  border-radius: var(--cb-radius-pill);
  color: var(--cb-ink-faint);
  display: flex;
  height: var(--cb-track-dot);
  justify-content: center;
  position: relative;
  transition: background-color var(--cb-duration-slow) var(--cb-ease),
    border-color var(--cb-duration-slow) var(--cb-ease),
    color var(--cb-duration-slow) var(--cb-ease);
  width: var(--cb-track-dot);
  z-index: 1;
}

/* A finished step: filled with the accent, its icon in white, and a small
   tick badge on its edge so "done" does not rest on colour alone. */
.cb-track-progress__step.is-done .cb-track-progress__dot {
  background-color: var(--cb-accent);
  border-color: var(--cb-accent);
  color: var(--cb-on-ink);
}

.cb-track-progress__tick {
  align-items: center;
  background-color: var(--cb-accent-deep);
  border: 2px solid var(--cb-surface);
  border-radius: var(--cb-radius-pill);
  bottom: -0.25rem;
  color: var(--cb-on-ink);
  display: none;
  height: 1rem;
  justify-content: center;
  position: absolute;
  right: -0.25rem;
  width: 1rem;
}

.cb-track-progress__tick .cb-icon {
  height: 0.5rem;
  width: 0.5rem;
}

.cb-track-progress__step.is-done .cb-track-progress__tick {
  display: flex;
}

/* The step reached: a tinted circle, a coloured ring and icon, and a halo
   that breathes outward. The halo runs on the duration token, so it stands
   still under prefers-reduced-motion. */
.cb-track-progress__step.is-current .cb-track-progress__dot {
  background-color: var(--cb-accent-soft);
  border-color: var(--cb-accent);
  box-shadow: 0 0 0 4px var(--cb-accent-tint);
  color: var(--cb-accent-deep);
}

.cb-track-progress__step.is-current .cb-track-progress__dot::after {
  animation: cb-track-halo calc(var(--cb-duration-slow) * 7) var(--cb-ease) infinite;
  border: 2px solid var(--cb-accent-border);
  border-radius: var(--cb-radius-pill);
  content: "";
  inset: -0.375rem;
  position: absolute;
}

.is-payment-due .cb-track-progress__step.is-current .cb-track-progress__dot {
  background-color: var(--cb-track-due-soft);
  border-color: var(--cb-track-due);
  box-shadow: 0 0 0 4px var(--cb-track-due-soft);
  color: var(--cb-track-due);
}

.is-payment-due .cb-track-progress__step.is-current .cb-track-progress__dot::after {
  border-color: var(--cb-track-due-border);
}

/* On a phone seven labels do not fit, so only the panel below names the step;
   the labels stay for screen readers. */
.cb-track-progress__label {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.cb-track-progress__now {
  align-items: flex-start;
  background-color: var(--cb-sunken);
  border-radius: var(--cb-radius-lg);
  display: flex;
  gap: var(--cb-space-xs);
  padding: var(--cb-space-xs) var(--cb-space-sm);
}

.cb-track-progress__now-icon {
  align-items: center;
  background-color: var(--cb-surface);
  border: 1px solid var(--cb-border);
  border-radius: var(--cb-radius-md);
  color: var(--cb-accent);
  display: flex;
  flex: none;
  height: var(--cb-tile-md);
  justify-content: center;
  width: var(--cb-tile-md);
}

.is-payment-due .cb-track-progress__now-icon {
  color: var(--cb-track-due);
}

.cb-track-progress__now-body {
  min-width: 0;
}

.cb-track-progress__now-count {
  color: var(--cb-text-muted);
  font-size: var(--cb-text-xs);
  font-weight: 600;
  letter-spacing: var(--cb-tracking-wide);
  margin: 0;
  text-transform: uppercase;
}

.cb-track-progress__now-title {
  color: var(--cb-text);
  font-size: var(--cb-text-md);
  font-weight: 600;
  margin: 0;
}

.cb-track-progress__now-text {
  color: var(--cb-text-muted);
  font-size: var(--cb-text-sm);
  line-height: var(--cb-leading-body);
  margin: var(--cb-space-3xs) 0 0;
}

/* 5. Items table and totals --------------------------------------------- */

.cb-track-lines__none {
  color: var(--cb-text-muted);
  font-size: var(--cb-text-sm);
  margin: 0 0 var(--cb-space-sm);
}

.cb-track .cb-track-lines__table {
  background-color: transparent;
  border: 0;
  border-collapse: collapse;
  margin: 0;
  width: 100%;
}

.cb-track .cb-track-lines__head {
  background-color: transparent;
  border: 0;
  border-bottom: 1px solid var(--cb-border);
  color: var(--cb-text-muted);
  font-size: var(--cb-text-xs);
  font-weight: 600;
  letter-spacing: var(--cb-tracking-wide);
  padding: var(--cb-space-2xs) 0;
  text-align: left;
  text-transform: uppercase;
}

.cb-track .cb-track-lines__cell {
  background-color: transparent;
  border: 0;
  border-bottom: 1px solid var(--cb-border);
  color: var(--cb-text);
  font-size: var(--cb-text-md);
  padding: var(--cb-space-xs) 0;
  text-align: left;
  vertical-align: top;
}

.cb-track .cb-track-lines__head--number,
.cb-track .cb-track-lines__cell--number {
  font-variant-numeric: tabular-nums;
  padding-left: var(--cb-space-sm);
  text-align: right;
  white-space: nowrap;
}

/* Quantity and price fold into the line under the item's name on a phone. */
.cb-track .cb-track-lines__head--wide,
.cb-track .cb-track-lines__cell--wide {
  display: none;
}

/* The live sale an order's items were claimed on. Each group is a tbody of its
   own holding a heading, its items and what they come to; an order whose items
   carry no live number has no groups at all and reads as one plain list. */
.cb-track .cb-track-lines__group-head {
  background-color: transparent;
  border: 0;
  border-bottom: 1px solid var(--cb-border);
  color: var(--cb-text);
  font-size: var(--cb-text-sm);
  font-weight: 600;
  padding: var(--cb-space-sm) 0 var(--cb-space-2xs);
  text-align: left;
}

/* The first heading sits under the column titles, which already space it. */
.cb-track .cb-track-lines__group:first-of-type .cb-track-lines__group-head {
  padding-top: var(--cb-space-2xs);
}

.cb-track .cb-track-lines__group-total-label {
  color: var(--cb-text-muted);
  font-size: var(--cb-text-sm);
  font-weight: 600;
  text-align: left;
}

.cb-track .cb-track-lines__group-row--total .cb-track-lines__amount {
  font-size: var(--cb-text-sm);
  font-weight: 600;
}

.cb-track .cb-track-lines__item {
  font-weight: 400;
}

/* Picture first, then the name and its figures beside it. */
.cb-track-lines__item {
  align-items: center;
  display: flex;
  gap: var(--cb-space-2xs);
}

.cb-track-lines__text {
  min-width: 0;
}

/* Two classes: the theme colours bare `a` and `a:hover, a:focus` at (0,1,1). */
.cb-track .cb-track-lines__thumb {
  -webkit-tap-highlight-color: transparent;
  background-color: var(--cb-sunken);
  border: 1px solid var(--cb-border);
  border-radius: var(--cb-radius-md);
  display: block;
  flex: none;
  height: 3rem;
  overflow: hidden;
  transition: border-color var(--cb-duration) var(--cb-ease);
  width: 3rem;
}

.cb-track .cb-track-lines__thumb:hover {
  border-color: var(--cb-accent);
}

.cb-track .cb-track-lines__thumb:focus-visible {
  border-color: var(--cb-accent);
  box-shadow: 0 0 0 3px var(--cb-focus-ring);
  outline: none;
}

.cb-track-lines__thumb-image {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.cb-track-lines__name {
  display: block;
  font-weight: 500;
}

/* The line item's own name, under the product it is. */
.cb-track-lines__reference {
  color: var(--cb-text-muted);
  display: block;
  font-size: var(--cb-text-xs);
  margin-top: 0.125rem;
  overflow-wrap: anywhere;
}

.cb-track-lines__sub {
  color: var(--cb-text-muted);
  display: block;
  font-size: var(--cb-text-sm);
  font-variant-numeric: tabular-nums;
  margin-top: 0.125rem;
}

.cb-track .cb-track-lines__amount {
  font-weight: 500;
}

.cb-track-totals {
  display: grid;
  gap: var(--cb-space-2xs);
  margin: var(--cb-space-sm) 0 0;
}

.cb-track-totals__row {
  align-items: baseline;
  display: flex;
  gap: var(--cb-space-sm);
  justify-content: space-between;
}

.cb-track-totals__row dt {
  color: var(--cb-text-muted);
  font-size: var(--cb-text-sm);
}

.cb-track-totals__row dd {
  color: var(--cb-text);
  font-size: var(--cb-text-md);
  font-variant-numeric: tabular-nums;
  margin: 0;
}

.cb-track-totals__row--discount dd {
  color: var(--cb-success);
}

.cb-track-totals__row--total {
  border-top: 1px dashed var(--cb-border-strong);
  padding-top: var(--cb-space-2xs);
}

.cb-track-totals__row--total dt,
.cb-track-totals__row--balance dt {
  color: var(--cb-text);
  font-weight: 600;
}

.cb-track-totals__row--total dd,
.cb-track-totals__row--balance dd {
  font-size: var(--cb-text-lg);
  font-weight: 600;
}

/* 6. Invoice ------------------------------------------------------------ */

.cb-track-invoice {
  background-color: var(--cb-page-bg);
  border-top: 1px solid var(--cb-border);
  display: grid;
  gap: var(--cb-space-md);
  padding: var(--cb-space-md) var(--cb-space-sm);
}

.cb-track-invoice__head {
  align-items: flex-start;
  display: flex;
  gap: var(--cb-space-sm);
  justify-content: space-between;
}

.cb-track-invoice__heading {
  min-width: 0;
}

.cb-track-invoice__eyebrow {
  align-items: center;
  color: var(--cb-text-muted);
  display: flex;
  font-family: var(--cb-font-body);
  font-size: var(--cb-text-xs);
  font-weight: 600;
  gap: var(--cb-space-3xs);
  letter-spacing: var(--cb-tracking-wide);
  margin: 0;
  text-transform: uppercase;
}

.cb-track-invoice__badge {
  background-color: var(--cb-track-due-soft);
  border: 1px solid var(--cb-track-due-border);
  border-radius: var(--cb-radius-pill);
  color: var(--cb-track-due);
  flex: none;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: var(--cb-tracking-wide);
  padding: 0.1875rem var(--cb-space-2xs);
  text-transform: uppercase;
  white-space: nowrap;
}

.cb-track-invoice__badge--sent {
  background-color: var(--cb-success-soft);
  border-color: var(--cb-success-border);
  color: var(--cb-success);
}

/* What is due, in type large enough to read at a glance and copy from. */
.cb-track-invoice__due {
  background-color: var(--cb-ink);
  border-radius: var(--cb-radius-lg);
  box-shadow: var(--cb-shadow-md);
  color: var(--cb-on-ink);
  padding: var(--cb-space-sm) var(--cb-space-md);
}

.is-paid .cb-track-invoice__due {
  background-color: var(--cb-surface);
  border: 1px solid var(--cb-border);
  box-shadow: none;
  color: var(--cb-text);
}

.cb-track-invoice__due-label {
  font-size: var(--cb-text-sm);
  margin: 0;
  opacity: 0.75;
}

.cb-track-invoice__due-value {
  font-family: var(--cb-font-display);
  font-size: var(--cb-text-3xl);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  letter-spacing: var(--cb-tracking-tight);
  line-height: var(--cb-leading-tight);
  margin: var(--cb-space-3xs) 0 0;
  overflow-wrap: anywhere;
}

.cb-track-invoice__facts {
  display: grid;
  gap: var(--cb-space-xs);
  margin: 0;
}

.cb-track-invoice__fact dt {
  color: var(--cb-text-muted);
  font-size: var(--cb-text-xs);
  font-weight: 600;
  letter-spacing: var(--cb-tracking-wide);
  text-transform: uppercase;
}

.cb-track-invoice__fact dd {
  color: var(--cb-text);
  font-size: var(--cb-text-md);
  font-weight: 500;
  margin: 0.125rem 0 0;
}

.cb-track-invoice .cb-track-lines {
  background-color: var(--cb-surface);
  border: 1px solid var(--cb-border);
  border-radius: var(--cb-radius-lg);
  padding: var(--cb-space-2xs) var(--cb-space-sm) var(--cb-space-sm);
}

/* Phone: the steps, then the QR code centred under them. From 768px the QR
   code moves up beside the steps. */
.cb-track-invoice__instructions {
  background-color: var(--cb-accent-soft);
  border: 1px solid var(--cb-accent-border);
  border-radius: var(--cb-radius-lg);
  display: grid;
  gap: var(--cb-space-sm);
  grid-template-areas:
    "steps"
    "qr";
  padding: var(--cb-space-sm);
}

.cb-track-invoice__steps {
  grid-area: steps;
  min-width: 0;
}

.cb-track-invoice__instructions-title {
  align-items: center;
  color: var(--cb-accent-deep);
  display: flex;
  font-family: var(--cb-font-body);
  font-size: var(--cb-text-sm);
  font-weight: 600;
  gap: var(--cb-space-2xs);
  margin: 0 0 var(--cb-space-2xs);
  text-transform: none;
}

/* Set small on purpose: these are steps followed while paying, beside the QR
   code, not something to read through. The amount due above stays the one
   figure the eye lands on. */
.cb-track-invoice__rich {
  color: var(--cb-text);
  font-size: var(--cb-text-sm);
  line-height: var(--cb-leading-body);
}

.cb-track-invoice__rich p,
.cb-track-invoice__rich ul,
.cb-track-invoice__rich ol {
  font-size: inherit;
  margin: 0 0 var(--cb-space-2xs);
}

.cb-track-invoice__rich ul,
.cb-track-invoice__rich ol {
  display: grid;
  gap: var(--cb-space-2xs);
  padding-left: var(--cb-space-md);
}

.cb-track-invoice__rich li::marker {
  color: var(--cb-accent-deep);
  font-weight: 600;
}

.cb-track-invoice__rich > :last-child {
  margin-bottom: 0;
}

/* The QR code sits on white, whatever the box around it, so a scanner reads
   it cleanly. */
.cb-track-qr {
  align-items: center;
  align-self: start;
  background-color: var(--cb-surface);
  border: 1px solid var(--cb-accent-border);
  border-radius: var(--cb-radius-lg);
  display: flex;
  flex-direction: column;
  gap: var(--cb-space-2xs);
  grid-area: qr;
  justify-self: center;
  margin: 0;
  max-width: 16rem;
  padding: var(--cb-space-sm);
  text-align: center;
  width: 100%;
}

.cb-track-qr__image {
  aspect-ratio: 1;
  display: block;
  height: auto;
  object-fit: contain;
  width: 100%;
}

.cb-track-qr__caption {
  color: var(--cb-text);
  font-size: var(--cb-text-xs);
  font-weight: 600;
}

/* Two classes: the theme colours bare `a` and `a:hover, a:focus` at (0,1,1). */
.cb-track-qr .cb-track-qr__save {
  -webkit-tap-highlight-color: transparent;
  align-items: center;
  border-radius: var(--cb-radius-pill);
  color: var(--cb-accent-deep);
  display: inline-flex;
  font-size: var(--cb-text-xs);
  font-weight: 500;
  gap: var(--cb-space-3xs);
  min-height: 2.75rem;
  padding: 0 var(--cb-space-xs);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.cb-track-qr .cb-track-qr__save:hover,
.cb-track-qr .cb-track-qr__save:focus {
  color: var(--cb-accent);
}

.cb-track-qr .cb-track-qr__save:focus-visible {
  box-shadow: 0 0 0 3px var(--cb-focus-ring);
  outline: none;
}

/* 7. Payment sent, package photo, shipment and callouts ---------------- */

.cb-track-pay {
  display: grid;
  gap: var(--cb-space-xs);
}

.cb-track-pay__again,
.cb-track-pay__ask,
.cb-track-pay__confirm,
.cb-track-received__confirm {
  display: grid;
  gap: var(--cb-space-xs);
  text-align: center;
}

.cb-track-pay__prompt {
  color: var(--cb-text-muted);
  font-size: var(--cb-text-sm);
  margin: 0;
}

/* The receipt field reads like a form field, left-aligned, inside the
   centred ask. */
.cb-track-pay__receipt {
  text-align: left;
}

.cb-track-concern__sent-photo,
.cb-track-pay__attached,
.cb-track-pay__sent-receipt {
  align-items: center;
  display: flex;
  font-size: var(--cb-text-sm);
  gap: var(--cb-space-2xs);
  margin: 0;
}

.cb-track-pay__attached {
  color: var(--cb-text-muted);
  justify-content: center;
}

.cb-track-concern__sent-photo,
.cb-track-pay__sent-receipt {
  color: var(--cb-success);
  font-weight: 500;
  margin-top: var(--cb-space-2xs);
}

.cb-track-pay__confirm,
.cb-track-received__confirm {
  animation: cb-track-rise var(--cb-duration-slow) var(--cb-ease) both;
  background-color: var(--cb-surface);
  border: 1px solid var(--cb-border-strong);
  border-radius: var(--cb-radius-lg);
  padding: var(--cb-space-sm);
}

.cb-track-pay__question,
.cb-track-received__question {
  color: var(--cb-text);
  font-size: var(--cb-text-md);
  font-weight: 600;
  line-height: var(--cb-leading-body);
  margin: 0;
}

.cb-track-pay__actions,
.cb-track-received__actions {
  display: grid;
  gap: var(--cb-space-2xs);
}

/* A good-news box — a round icon, a title and a sentence or two: the payment
   thank-you, and a shipped order's tracking link. The title may be a <p> or a
   heading, so it resets what the theme gives bare headings. */
.cb-track-callout {
  align-items: flex-start;
  animation: cb-track-rise var(--cb-duration-slow) var(--cb-ease) both;
  background-color: var(--cb-success-soft);
  border: 1px solid var(--cb-success-border);
  border-radius: var(--cb-radius-lg);
  display: flex;
  gap: var(--cb-space-xs);
  padding: var(--cb-space-sm);
}

.cb-track-callout__icon {
  align-items: center;
  background-color: var(--cb-success);
  border-radius: var(--cb-radius-pill);
  color: var(--cb-on-ink);
  display: flex;
  flex: none;
  height: var(--cb-tile-sm);
  justify-content: center;
  width: var(--cb-tile-sm);
}

.cb-track-callout__body {
  min-width: 0;
}

.cb-track-callout__title {
  color: var(--cb-success);
  font-family: var(--cb-font-body);
  font-size: var(--cb-text-md);
  font-weight: 600;
  letter-spacing: normal;
  line-height: var(--cb-leading-tight);
  margin: 0;
  text-transform: none;
}

.cb-track-callout__text {
  color: var(--cb-text);
  font-size: var(--cb-text-sm);
  line-height: var(--cb-leading-body);
  margin: var(--cb-space-3xs) 0 0;
  overflow-wrap: anywhere;
}

/* Each thank-you takes focus once its form is sent, so it can show it. */
.cb-track-concern__sent:focus-visible,
.cb-track-pay__sent:focus-visible {
  box-shadow: 0 0 0 3px var(--cb-focus-ring);
  outline: none;
}

/* The photo of a packed parcel, on an order To Ship or Shipped, above the
   shipment box and the items: the picture, and its caption. On a phone the
   picture takes the card's width, cropped to a band so the items stay near;
   from 768px it is a square beside the caption. Padded like the shipment box
   under it. The theme gives a bare <figure> margins, so they are set here. */
.cb-track-package {
  display: flex;
  flex-direction: column;
  gap: var(--cb-space-xs);
  margin: 0 0 var(--cb-space-sm);
  padding: 0 var(--cb-space-sm);
}

/* Two classes: the theme colours bare `a` and `a:hover, a:focus` at (0,1,1). */
.cb-track .cb-track-package__photo {
  -webkit-tap-highlight-color: transparent;
  background-color: var(--cb-sunken);
  border: 1px solid var(--cb-border);
  border-radius: var(--cb-radius-lg);
  display: block;
  flex: none;
  height: 12rem;
  overflow: hidden;
  transition: border-color var(--cb-duration) var(--cb-ease);
  width: 100%;
}

.cb-track .cb-track-package__photo:hover {
  border-color: var(--cb-accent);
}

.cb-track .cb-track-package__photo:focus-visible {
  border-color: var(--cb-accent);
  box-shadow: 0 0 0 3px var(--cb-focus-ring);
  outline: none;
}

.cb-track-package__image {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.cb-track-package__caption {
  display: grid;
  gap: var(--cb-space-3xs);
  min-width: 0;
}

.cb-track-package__title {
  align-items: center;
  color: var(--cb-text);
  display: flex;
  font-size: var(--cb-text-sm);
  font-weight: 600;
  gap: var(--cb-space-2xs);
  line-height: var(--cb-leading-tight);
}

.cb-track-package__title .cb-icon {
  color: var(--cb-accent);
}

.cb-track-package__text {
  color: var(--cb-text-muted);
  font-size: var(--cb-text-sm);
  line-height: var(--cb-leading-body);
}

/* A shipped order: the tracking link box, then the heading over its items.
   Laid out like the items under it, and so padded the same. */
.cb-track-shipment {
  padding: 0 var(--cb-space-sm);
}

/* The box as a grid — icon, then text — with the button, when the order has a
   tracking link, on a row under both. On a phone that row spans the whole
   box; from 768px it starts under the text. Two classes to outrank the
   callout's flex. */
.cb-track-shipment .cb-track-callout {
  column-gap: var(--cb-space-xs);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  row-gap: 0;
}

.cb-track-shipment__link {
  grid-column: 1 / -1;
}

/* An <a> drawn as the page's button; the theme underlines bare links, so every
   state says no. Full width on a phone, like the payment button. */
.cb-track .cb-track-shipment__link,
.cb-track .cb-track-shipment__link:hover,
.cb-track .cb-track-shipment__link:focus {
  margin-top: var(--cb-space-xs);
  text-decoration: none;
}

.cb-track-shipment__items-heading {
  align-items: center;
  color: var(--cb-text);
  display: flex;
  font-family: var(--cb-font-body);
  font-size: var(--cb-text-sm);
  font-weight: 600;
  gap: var(--cb-space-2xs);
  letter-spacing: normal;
  line-height: var(--cb-leading-tight);
  margin: var(--cb-space-md) 0 0;
  text-transform: none;
}

.cb-track-shipment__items-heading .cb-icon {
  color: var(--cb-accent);
}

/* 7a. Items shipping with another order -------------------------------- */

/* Under an item, on its own order: the order the shop packs it with, and
   where that order is. */
.cb-track-lines__ships {
  align-items: center;
  color: var(--cb-accent-deep);
  display: flex;
  font-size: var(--cb-text-xs);
  font-weight: 500;
  gap: var(--cb-space-3xs);
  line-height: var(--cb-leading-tight);
  margin-top: var(--cb-space-3xs);
  overflow-wrap: anywhere;
}

.cb-track-lines__ships .cb-icon {
  flex: none;
}

/* Also in this parcel: under the totals, set apart by a dashed rule, since
   these items are not in them. Padded like the items above it. */
.cb-track-included {
  border-top: 1px dashed var(--cb-border-strong);
  display: grid;
  gap: var(--cb-space-2xs);
  margin: 0 var(--cb-space-sm) var(--cb-space-md);
  padding-top: var(--cb-space-sm);
}

/* Two classes: the theme sizes bare headings and lists. */
.cb-track .cb-track-included__title {
  align-items: center;
  color: var(--cb-text);
  display: flex;
  font-family: var(--cb-font-body);
  font-size: var(--cb-text-md);
  font-weight: 600;
  gap: var(--cb-space-2xs);
  letter-spacing: normal;
  line-height: var(--cb-leading-tight);
  margin: 0;
  text-transform: none;
}

.cb-track-included__title .cb-icon {
  color: var(--cb-accent);
}

.cb-track-included__text {
  color: var(--cb-text-muted);
  font-size: var(--cb-text-sm);
  line-height: var(--cb-leading-body);
  margin: 0;
}

.cb-track .cb-track-included__list {
  display: grid;
  gap: var(--cb-space-2xs);
  list-style: none;
  margin: 0;
  padding: 0;
}

.cb-track .cb-track-included__item {
  align-items: center;
  background-color: var(--cb-sunken);
  border: 1px solid var(--cb-border);
  border-radius: var(--cb-radius-lg);
  display: flex;
  gap: var(--cb-space-2xs);
  margin: 0;
  padding: var(--cb-space-2xs);
}

.cb-track-included__about {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
}

.cb-track-included__from {
  color: var(--cb-text-muted);
  font-size: var(--cb-text-xs);
  margin-top: var(--cb-space-3xs);
  overflow-wrap: anywhere;
}

.cb-track-included__quantity {
  color: var(--cb-text);
  flex: none;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}

/* 7b. Completed orders and concerns ------------------------------------- */

/* The time left to report a concern, across a completed card's header under
   everything else, where a Balance left card has its paid bar: an amber pill,
   since it is the one thing on the card with a deadline. Tabular digits, so
   the seconds ticking never shift it. */
.cb-track-order__window {
  align-items: center;
  background-color: var(--cb-warning-soft);
  border: 1px solid var(--cb-warning-border);
  border-radius: var(--cb-radius-pill);
  color: var(--cb-warning);
  display: inline-flex;
  font-size: var(--cb-text-xs);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  gap: var(--cb-space-3xs);
  grid-column: 1 / -1;
  grid-row: 3;
  justify-self: start;
  line-height: var(--cb-leading-tight);
  padding: var(--cb-space-3xs) var(--cb-space-2xs);
}

/* The concern box opens a completed card's body, where an active card has
   its progress track, and is padded like the track. */
.cb-track-concern {
  padding: var(--cb-space-sm);
}

/* The question: an icon, the heading and a line, then the button on a row
   of its own — across the whole box on a phone, under the text from 768px. */
.cb-track-concern__ask,
.cb-track-received__ask {
  background-color: var(--cb-sunken);
  border: 1px solid var(--cb-border);
  border-radius: var(--cb-radius-lg);
  column-gap: var(--cb-space-xs);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  padding: var(--cb-space-sm);
  row-gap: var(--cb-space-xs);
}

.cb-track-concern__icon {
  align-items: center;
  background-color: var(--cb-warning-soft);
  border: 1px solid var(--cb-warning-border);
  border-radius: var(--cb-radius-pill);
  color: var(--cb-warning);
  display: flex;
  height: var(--cb-tile-sm);
  justify-content: center;
  width: var(--cb-tile-sm);
}

.cb-track-concern__text,
.cb-track-received__text {
  min-width: 0;
}

/* Two classes: the theme styles bare h4 and p. */
.cb-track .cb-track-concern__title,
.cb-track .cb-track-received__title {
  color: var(--cb-text);
  font-family: var(--cb-font-body);
  font-size: var(--cb-text-md);
  font-weight: 600;
  letter-spacing: normal;
  line-height: var(--cb-leading-tight);
  margin: 0;
  text-transform: none;
}

.cb-track .cb-track-concern__prompt,
.cb-track .cb-track-received__prompt {
  color: var(--cb-text-muted);
  font-size: var(--cb-text-sm);
  line-height: var(--cb-leading-body);
  margin: var(--cb-space-3xs) 0 0;
}

.cb-track-concern__open,
.cb-track-received__open {
  grid-column: 1 / -1;
}

/* What the customer sent, under the thank-you: their words as they wrote
   them, line breaks kept, set off by a rule at the start. The title is the
   stronger of the two. */
.cb-track .cb-track-concern__quote {
  border-inline-start: 3px solid var(--cb-success-border);
  color: var(--cb-text);
  font-size: var(--cb-text-sm);
  line-height: var(--cb-leading-body);
  margin: var(--cb-space-2xs) 0 0;
  overflow-wrap: anywhere;
  padding-inline-start: var(--cb-space-2xs);
  white-space: pre-line;
}

.cb-track .cb-track-concern__quote--title {
  font-weight: 600;
}

.cb-track .cb-track-concern__quote--title + .cb-track-concern__quote {
  margin-top: 0;
}

/* Under a resolved concern: the day the order leaves the page, quieter
   than the good news above it, with a clock leading it. */
.cb-track .cb-track-concern__removal {
  align-items: flex-start;
  color: var(--cb-text-muted);
  display: flex;
  font-size: var(--cb-text-sm);
  gap: var(--cb-space-2xs);
  line-height: var(--cb-leading-body);
  margin: var(--cb-space-xs) 0 0;
}

.cb-track-concern__removal .cb-icon {
  flex: none;
  margin-top: 0.125rem;
}

/* The Completed panel once the last card's time has run out. */
.cb-track .cb-track-completed__none {
  color: var(--cb-text-muted);
  font-size: var(--cb-text-sm);
  margin: 0;
}

/* 7c. Order received ---------------------------------------------------- */

/* The box under an active card's progress track, inset like the package
   photo under it. The question and its button are the concern box's — see
   7b — then the confirmation, which is the payment one's — see 7 — and the
   box's status region, stacked. */
.cb-track-received {
  display: grid;
  gap: var(--cb-space-xs);
  margin: 0 0 var(--cb-space-sm);
  padding: 0 var(--cb-space-sm);
}

/* Good news, where the concern box's icon is a warning. */
.cb-track-received__icon {
  align-items: center;
  background-color: var(--cb-success-soft);
  border: 1px solid var(--cb-success-border);
  border-radius: var(--cb-radius-pill);
  color: var(--cb-success);
  display: flex;
  height: var(--cb-tile-sm);
  justify-content: center;
  width: var(--cb-tile-sm);
}

/* 8. Buttons and alerts ------------------------------------------------- */

/* The theme repaints `button:focus` with its own hover colours at (0,1,1),
   which would leave a pressed button looking hovered, so each variant
   restates its resting colours for :focus at (0,2,0) before its :hover. */
.cb-track .cb-track-button {
  -webkit-tap-highlight-color: transparent;
  align-items: center;
  background-color: var(--cb-accent);
  border: 1px solid var(--cb-accent);
  border-radius: var(--cb-radius-pill);
  box-shadow: var(--cb-shadow-button);
  color: var(--cb-on-ink);
  cursor: pointer;
  display: inline-flex;
  font-family: var(--cb-font-body);
  font-size: 1rem;
  font-weight: 600;
  gap: var(--cb-space-2xs);
  justify-content: center;
  letter-spacing: var(--cb-tracking-snug);
  min-height: 3rem;
  padding: var(--cb-space-2xs) var(--cb-space-md);
  text-transform: none;
  transition: background-color var(--cb-duration) var(--cb-ease),
    border-color var(--cb-duration) var(--cb-ease),
    transform var(--cb-duration) var(--cb-ease);
  width: 100%;
}

.cb-track .cb-track-button:focus {
  background-color: var(--cb-accent);
  border-color: var(--cb-accent);
  color: var(--cb-on-ink);
}

.cb-track .cb-track-button:hover {
  background-color: var(--cb-accent-deep);
  border-color: var(--cb-accent-deep);
  color: var(--cb-on-ink);
}

.cb-track .cb-track-button:active:not([disabled]) {
  transform: translateY(1px);
}

.cb-track .cb-track-button:focus-visible {
  box-shadow: 0 0 0 3px var(--cb-focus-ring);
  outline: none;
}

.cb-track .cb-track-button[disabled] {
  box-shadow: none;
  cursor: not-allowed;
  opacity: 0.6;
}

.cb-track .cb-track-button--ghost,
.cb-track .cb-track-button--ghost:focus {
  background-color: var(--cb-surface);
  border-color: var(--cb-border-strong);
  box-shadow: none;
  color: var(--cb-text);
}

.cb-track .cb-track-button--ghost:hover {
  background-color: var(--cb-sunken);
  border-color: var(--cb-ink-faint);
  color: var(--cb-text);
}

/* Soft: a rose tint that fills in as it is pointed at — for a secondary
   action that still belongs to the brand, such as saving the TikTok name. */
.cb-track .cb-track-button--soft,
.cb-track .cb-track-button--soft:focus {
  background-color: var(--cb-accent-soft);
  border-color: var(--cb-accent-border);
  box-shadow: none;
  color: var(--cb-accent-deep);
}

.cb-track .cb-track-button--soft:hover {
  background-color: var(--cb-accent);
  border-color: var(--cb-accent);
  box-shadow: var(--cb-shadow-button);
  color: var(--cb-on-ink);
}

/* Small: for an action inside a box of its own — Order Received?, Report a
   concern, saving the TikTok name — where a full-size button outweighs the
   text it answers. Still the 44px touch target on a phone; 40px from
   768px, beside the inputs it matches. */
.cb-track .cb-track-button--sm {
  font-size: var(--cb-text-md);
  gap: var(--cb-space-2xs);
  min-height: 2.75rem;
  padding: var(--cb-space-3xs) var(--cb-space-sm);
}

/* The spinner takes the icon's place while the button is busy. */
.cb-track-button__spinner {
  animation: cb-track-spin 700ms linear infinite;
  border: 1.5px solid var(--cb-accent-border);
  border-radius: var(--cb-radius-pill);
  border-top-color: var(--cb-on-ink);
  display: none;
  flex: none;
  height: 1rem;
  width: 1rem;
}

.cb-track-button.is-busy .cb-track-button__spinner {
  display: block;
}

/* On the soft button's tint a white arc would vanish, so it turns rose —
   and back to white once the button fills in. */
.cb-track-button--soft .cb-track-button__spinner {
  border-top-color: var(--cb-accent);
}

.cb-track-button--soft:hover .cb-track-button__spinner {
  border-top-color: var(--cb-on-ink);
}

.cb-track-button.is-busy .cb-icon {
  display: none;
}

/* Close: the cross alone in a round 44px button, a soft fill and no outline,
   so it reads as the quiet way out rather than an action — on the photo view
   and the concern form alike. It darkens as it is pointed at and gives a
   little as it is pressed. The theme restyles `button:hover, button:focus`
   at (0,1,1), so the resting look is restated for :focus too. */
.cb-track .cb-track-close {
  -webkit-tap-highlight-color: transparent;
  align-items: center;
  background-color: var(--cb-sunken);
  border: 0;
  border-radius: var(--cb-radius-pill);
  color: var(--cb-ink-soft);
  cursor: pointer;
  display: inline-flex;
  flex: none;
  height: 2.75rem;
  justify-content: center;
  padding: 0;
  transition: background-color var(--cb-duration) var(--cb-ease),
    color var(--cb-duration) var(--cb-ease),
    transform var(--cb-duration) var(--cb-ease);
  width: 2.75rem;
}

.cb-track .cb-track-close:focus {
  background-color: var(--cb-sunken);
  color: var(--cb-ink-soft);
}

.cb-track .cb-track-close:hover {
  background-color: var(--cb-border);
  color: var(--cb-text);
}

.cb-track .cb-track-close:active:not([disabled]) {
  transform: scale(0.94);
}

.cb-track .cb-track-close:focus-visible {
  box-shadow: 0 0 0 3px var(--cb-focus-ring);
  outline: none;
}

.cb-track .cb-track-close[disabled] {
  cursor: not-allowed;
  opacity: 0.6;
}

.cb-track-alert {
  border: 1px solid var(--cb-border);
  border-radius: var(--cb-radius-lg);
  font-size: var(--cb-text-sm);
  font-weight: 500;
  line-height: var(--cb-leading-body);
  margin: 0 0 var(--cb-space-sm);
  padding: var(--cb-space-xs) var(--cb-space-sm);
}

.cb-track-pay__status .cb-track-alert,
.cb-track-received__status .cb-track-alert {
  margin: 0;
  text-align: center;
}

.cb-track-dialog__status .cb-track-alert {
  margin: 0;
}

.cb-track-alert--info {
  background-color: var(--cb-accent-soft);
  border-color: var(--cb-accent-border);
  color: var(--cb-accent-deep);
}

.cb-track-alert--success {
  background-color: var(--cb-success-soft);
  border-color: var(--cb-success-border);
  color: var(--cb-success);
}

.cb-track-alert--error {
  background-color: var(--cb-danger-soft);
  border-color: var(--cb-danger-border);
  color: var(--cb-danger);
}

/* 9. Motion ------------------------------------------------------------- */

/* All run on the duration tokens, which collapse to 0ms under
   prefers-reduced-motion — except the spinner, which has to turn to say
   anything at all. */

@keyframes cb-track-rise {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes cb-track-halo {
  from {
    opacity: 1;
    transform: scale(0.9);
  }

  to {
    opacity: 0;
    transform: scale(1.25);
  }
}

@keyframes cb-track-fill {
  from {
    transform: scaleX(0);
  }
}

@keyframes cb-track-shimmer {
  from {
    opacity: 1;
  }

  to {
    opacity: 0.55;
  }
}

@keyframes cb-track-spin {
  to {
    transform: rotate(360deg);
  }
}

/* 10. Hidden state ------------------------------------------------------ */

/* Many of the elements module.js shows and hides set their own `display`,
   which outranks the browser's `[hidden]` rule, so it is restated once here,
   last, for everything in the module. */
.cb-track [hidden] {
  display: none;
}

/* Desktop --------------------------------------------------------------- */

@media (min-width: 768px) {
  .cb-track__intro {
    margin-bottom: var(--cb-space-lg);
    padding-top: var(--cb-space-lg);
  }

  .cb-track__title {
    font-size: var(--cb-text-3xl);
  }

  .cb-track__lead {
    font-size: var(--cb-text-lg);
  }

  .cb-track-board__tiles {
    grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  }

  .cb-track .cb-track-tile--all {
    grid-column: auto;
  }

  .cb-track-group__header {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .cb-track .cb-track-group__summary {
    grid-column: 3;
    grid-row: 1;
  }

  .cb-track-checkout__head {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  /* Centred on the badge, as the title is. */
  .cb-track-checkout__timer {
    grid-column: 3;
    grid-row: 1;
    margin-block-start: calc((var(--cb-icon-sm) + 2 * var(--cb-space-2xs) - var(--cb-text-xs) * var(--cb-leading-body)) / 2 - var(--cb-space-3xs));
  }

  /* The TikTok name box puts its save button on the input's row: the field's
     own wrapper steps aside so its label, input and help text become the
     box's grid items. */
  .cb-track-tiktok {
    column-gap: var(--cb-space-2xs);
    grid-template-columns: minmax(0, 1fr) auto;
    padding: var(--cb-space-sm);
  }

  .cb-track-tiktok .cb-field {
    display: contents;
  }

  .cb-track-tiktok .cb-field__label,
  .cb-track-tiktok .cb-field__help,
  .cb-track-tiktok .cb-field__error,
  .cb-track-tiktok__status {
    grid-column: 1 / -1;
  }

  /* Two classes: the photo view's own rules come later in this file. */
  .cb-track-photo .cb-track-photo__facts {
    column-gap: var(--cb-space-sm);
  }

  .cb-track-progress,
  .cb-track-invoice {
    padding-left: var(--cb-space-lg);
    padding-right: var(--cb-space-lg);
  }

  .cb-track .cb-track-order__toggle {
    gap: var(--cb-space-2xs) var(--cb-space-sm);
    grid-template-columns: minmax(0, 1fr) auto auto;
    padding: var(--cb-space-md) var(--cb-space-lg);
  }

  .cb-track-order__state {
    align-items: flex-end;
    flex-direction: column;
    flex-wrap: nowrap;
    grid-column: 2;
    grid-row: 1;
    text-align: right;
  }

  .cb-track-order__chevron {
    grid-column: 3;
  }

  .cb-track-order__paid {
    grid-row: 2;
  }

  .cb-track-order__lines {
    padding: 0 var(--cb-space-lg) var(--cb-space-lg);
  }

  .cb-track-included {
    margin: 0 var(--cb-space-lg) var(--cb-space-lg);
  }

  .cb-track-received,
  .cb-track-shipment {
    padding: 0 var(--cb-space-lg);
  }

  .cb-track-package {
    align-items: center;
    flex-direction: row;
    gap: var(--cb-space-sm);
    padding: 0 var(--cb-space-lg);
  }

  .cb-track .cb-track-package__photo {
    height: 8rem;
    width: 8rem;
  }

  .cb-track-shipment__link {
    grid-column: 2;
  }

  .cb-track .cb-track-shipment__link {
    justify-self: start;
    width: auto;
  }

  /* There is room for every step's name under its dot. */
  .cb-track-progress__label {
    clip: auto;
    color: var(--cb-text-muted);
    font-size: var(--cb-text-xs);
    font-weight: 500;
    height: auto;
    line-height: var(--cb-leading-tight);
    overflow: visible;
    padding: 0 var(--cb-space-3xs);
    position: static;
    white-space: normal;
    width: auto;
  }

  .cb-track-progress__step.is-done .cb-track-progress__label {
    color: var(--cb-text);
  }

  .cb-track-progress__step.is-current .cb-track-progress__label {
    color: var(--cb-text);
    font-weight: 600;
  }

  .cb-track-progress__steps {
    --cb-track-dot: var(--cb-tile-md);
    margin-bottom: var(--cb-space-md);
  }

  .cb-track-progress__icon {
    height: var(--cb-icon-md);
    width: var(--cb-icon-md);
  }

  .cb-track .cb-track-lines__head--wide,
  .cb-track .cb-track-lines__cell--wide {
    display: table-cell;
  }

  .cb-track-lines__sub {
    display: none;
  }

  .cb-track .cb-track-lines__thumb {
    height: 3.5rem;
    width: 3.5rem;
  }

  .cb-track-totals {
    margin-left: auto;
    max-width: 18rem;
  }

  .cb-track-invoice__facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cb-track-invoice__instructions {
    padding: var(--cb-space-md);
  }

  .cb-track-invoice__instructions--qr {
    column-gap: var(--cb-space-md);
    grid-template-areas: "steps qr";
    grid-template-columns: minmax(0, 1fr) 13rem;
  }

  .cb-track-qr {
    max-width: none;
  }

  .cb-track-pay__actions,
  .cb-track-received__actions {
    display: flex;
    justify-content: center;
  }

  .cb-track .cb-track-button {
    width: auto;
  }

  .cb-track .cb-track-checkout__go {
    justify-self: start;
    margin-inline-start: calc(var(--cb-icon-sm) + 2 * var(--cb-space-2xs) + var(--cb-space-xs));
  }

  .cb-track .cb-track-button--sm {
    min-height: 2.5rem;
  }

  /* A small button, so already as tall as the input beside it; it takes the
     input's corners too, so the two read as one control. */
  .cb-track .cb-track-tiktok__save {
    border-radius: var(--cb-radius-md);
    grid-column: 2;
    grid-row: 2;
    white-space: nowrap;
  }

  /* The track takes only the width its two tabs need. */
  .cb-track-tabs {
    max-width: 28rem;
  }

  .cb-track-order__window {
    grid-row: 2;
  }

  .cb-track-concern {
    padding: var(--cb-space-md) var(--cb-space-lg);
  }

  .cb-track .cb-track-concern__open,
  .cb-track .cb-track-received__open {
    grid-column: 2;
    justify-self: start;
  }

  /* Two classes: the form's own rules come later in this file. */
  .cb-track-dialog .cb-track-dialog__body {
    padding: var(--cb-space-md);
  }

  .cb-track-dialog .cb-track-dialog__actions {
    display: flex;
    justify-content: flex-start;
    padding: var(--cb-space-sm) var(--cb-space-md);
  }

  .cb-track-pay__again .cb-track-button,
  .cb-track-pay__ask .cb-track-button {
    justify-self: center;
    min-width: 18rem;
  }
}

/* 11. Photo view -------------------------------------------------------- */

/* The order's item pictures, one at a time, as large as the screen sensibly
   allows: the panel takes up to 92% of the width and a fixed 88% of the
   height, so it does not jump as the customer swipes between a tall picture
   and a wide one. No picture is ever cropped. */
.cb-track-photo {
  background-color: var(--cb-surface);
  border: 1px solid var(--cb-border);
  border-radius: var(--cb-radius-xl);
  box-shadow: var(--cb-shadow-lg);
  color: var(--cb-text);
  height: 88vh;
  max-height: 88vh;
  max-width: 92vw;
  overflow: hidden;
  padding: 0;
  width: 44rem;
}

/* On a phone, vh counts the height behind the browser's toolbars too; dvh is
   only what is showing, so the panel never runs under them. */
@supports (height: 1dvh) {
  .cb-track-photo {
    height: 88dvh;
    max-height: 88dvh;
  }
}

/* Only while open: a closed dialog must keep the browser's display: none. */
.cb-track-photo[open] {
  display: flex;
  flex-direction: column;
}

.cb-track-dialog::backdrop,
.cb-track-photo::backdrop {
  backdrop-filter: blur(2px);
  background-color: var(--cb-scrim);
}

/* Two rows at every width: the item's name and Close, then its figures in one
   line under both. Beside Close the figures had only what the button left,
   and wrapped — Amount dropped to a line of its own on a phone — so they take
   the head's whole width instead.

   The caption is one live region holding the name and the figures, so it
   spans both rows and both columns and passes the head's tracks down as a
   subgrid: the name takes the first column of the first row, beside Close, and
   the figures the whole second row. */
.cb-track-photo__head {
  align-items: center;
  border-bottom: 1px solid var(--cb-border);
  column-gap: var(--cb-space-sm);
  display: grid;
  flex: none;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  padding: var(--cb-space-2xs) var(--cb-space-2xs) var(--cb-space-2xs) var(--cb-space-sm);
}

.cb-track-photo__caption {
  align-items: center;
  display: grid;
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
  min-width: 0;
}

.cb-track-photo__title {
  font-size: var(--cb-text-md);
  font-weight: 600;
  grid-column: 1;
  grid-row: 1;
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* The item's figures — live number, quantity and amount — in one line, each
   an icon, a quiet label and a strong value, with no box around them. The
   amount, what the customer is paying for it, is in the accent. The space
   above is a margin rather than a row gap, so the package photo, which has no
   figures, keeps a head of one row.

   The three need about 250px. The type eases from the small size to the
   extra-small one below a 380px screen, so they still share the line on a
   320px phone; wrapping is kept only as the last resort for a very long
   amount, so a figure is never cut off. */
.cb-track-photo__facts {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--cb-space-3xs) var(--cb-space-xs);
  grid-column: 1 / -1;
  grid-row: 2;
  margin: var(--cb-space-2xs) 0 var(--cb-space-3xs);
  min-width: 0;
}

.cb-track-photo__fact {
  align-items: center;
  display: inline-flex;
  flex: none;
  font-size: clamp(var(--cb-text-xs), 3.4vw, var(--cb-text-sm));
  gap: var(--cb-space-3xs);
  white-space: nowrap;
}

.cb-track-photo__fact dt {
  align-items: center;
  color: var(--cb-text-muted);
  display: inline-flex;
  font-weight: 400;
  gap: var(--cb-space-3xs);
}

.cb-track-photo__fact-icon {
  color: var(--cb-accent);
}

.cb-track-photo__fact dd {
  color: var(--cb-text);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  margin: 0;
}

.cb-track-photo .cb-track-photo__fact--amount dd {
  color: var(--cb-accent-deep);
}

/* A browser without subgrid lays the caption out on its own, beside Close,
   where the figures wrap as they used to. */
@supports not (grid-template-columns: subgrid) {
  .cb-track-photo__caption {
    display: flex;
    flex-direction: column;
    grid-column: 1;
  }
}

/* Close — drawn by .cb-track-close in section 8 — sits beside the item's
   name, on the head's first row. */
.cb-track-photo__close {
  grid-column: 2;
  grid-row: 1;
}

/* The picture area takes whatever height the head leaves. */
.cb-track-photo__stage {
  background-color: var(--cb-sunken);
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
}

/* A row of full-width slides that scrolls sideways and snaps to one at a
   time — a swipe on a phone, a sideways scroll on a trackpad. The scrollbar
   is hidden; the arrows and the counter say there is more. */
.cb-track-photo__track {
  display: flex;
  height: 100%;
  list-style: none;
  margin: 0;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  padding: 0;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.cb-track-photo__track::-webkit-scrollbar {
  display: none;
}

.cb-track-photo__track:focus-visible {
  box-shadow: inset 0 0 0 3px var(--cb-focus-ring);
  outline: none;
}

.cb-track-photo__slide {
  align-items: center;
  display: flex;
  flex: 0 0 100%;
  height: 100%;
  justify-content: center;
  margin: 0;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.cb-track-photo__image {
  display: block;
  height: 100%;
  object-fit: contain;
  width: 100%;
}

/* The arrows sit over the picture's edges. Two classes, as for Close. */
.cb-track-photo .cb-track-photo__step {
  -webkit-tap-highlight-color: transparent;
  align-items: center;
  background-color: var(--cb-glass);
  border: 1px solid var(--cb-border);
  border-radius: var(--cb-radius-pill);
  box-shadow: var(--cb-shadow-md);
  color: var(--cb-text);
  cursor: pointer;
  display: flex;
  height: 2.75rem;
  justify-content: center;
  padding: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  transition: opacity var(--cb-duration) var(--cb-ease);
  width: 2.75rem;
}

.cb-track-photo .cb-track-photo__step:focus {
  background-color: var(--cb-glass);
  border-color: var(--cb-border);
  color: var(--cb-text);
}

.cb-track-photo .cb-track-photo__step:hover {
  background-color: var(--cb-surface);
  border-color: var(--cb-border-strong);
  color: var(--cb-text);
}

.cb-track-photo .cb-track-photo__step:focus-visible {
  box-shadow: 0 0 0 3px var(--cb-focus-ring);
  outline: none;
}

.cb-track-photo .cb-track-photo__step:disabled {
  cursor: default;
  opacity: 0.35;
}

/* The two-class rule above sets display, which outranks `.cb-track [hidden]`
   because it comes later — a single picture has no arrows. */
.cb-track-photo .cb-track-photo__step[hidden] {
  display: none;
}

.cb-track-photo__step--previous {
  left: var(--cb-space-2xs);
}

.cb-track-photo__step--next {
  right: var(--cb-space-2xs);
}

.cb-track-photo__counter {
  background-color: var(--cb-glass);
  border: 1px solid var(--cb-border);
  border-radius: var(--cb-radius-pill);
  bottom: var(--cb-space-xs);
  box-shadow: var(--cb-shadow-sm);
  color: var(--cb-text);
  font-family: var(--cb-font-body);
  font-size: var(--cb-text-xs);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  left: 50%;
  margin: 0;
  padding: var(--cb-space-3xs) var(--cb-space-xs);
  pointer-events: none;
  position: absolute;
  transform: translateX(-50%);
}

/* 11b. Concern form ----------------------------------------------------- */

/* The form a completed order's Report a concern button opens: a heading
   with Close beside it, the three fields, and the two buttons, in a panel
   up to 34rem wide that keeps a gutter either side on a phone. The panel
   never runs taller than the screen: the fields scroll between the head and
   the buttons, which stay in reach. */
.cb-track-dialog {
  background-color: var(--cb-surface);
  border: 1px solid var(--cb-border);
  border-radius: var(--cb-radius-xl);
  box-shadow: var(--cb-shadow-lg);
  color: var(--cb-text);
  max-height: 90vh;
  max-width: calc(100vw - 2 * var(--cb-space-sm));
  overflow: hidden;
  padding: 0;
  width: 34rem;
}

/* As for the photo view: dvh leaves out the browser's toolbars. */
@supports (height: 1dvh) {
  .cb-track-dialog {
    max-height: 90dvh;
  }
}

/* A browser without <dialog> treats it as a plain element, so closed is
   said here too; open, it is a column. */
.cb-track-dialog:not([open]) {
  display: none;
}

.cb-track-dialog[open] {
  display: flex;
  flex-direction: column;
}

.cb-track-dialog__head {
  align-items: start;
  border-bottom: 1px solid var(--cb-border);
  column-gap: var(--cb-space-sm);
  display: grid;
  flex: none;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: var(--cb-space-2xs) var(--cb-space-2xs) var(--cb-space-xs) var(--cb-space-sm);
}

.cb-track-dialog__heading {
  min-width: 0;
  padding-top: var(--cb-space-2xs);
}

/* Two classes: the theme styles bare h2 and p. */
.cb-track .cb-track-dialog__title {
  color: var(--cb-text);
  font-family: var(--cb-font-display);
  font-size: var(--cb-text-lg);
  font-weight: 600;
  letter-spacing: var(--cb-tracking-tight);
  line-height: var(--cb-leading-tight);
  margin: 0;
  text-transform: none;
}

.cb-track .cb-track-dialog__intro {
  color: var(--cb-text-muted);
  font-size: var(--cb-text-sm);
  line-height: var(--cb-leading-body);
  margin: var(--cb-space-3xs) 0 0;
}

.cb-track-dialog__body {
  display: grid;
  flex: 1 1 auto;
  gap: var(--cb-space-sm);
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--cb-space-sm);
}

.cb-track-dialog__body .cb-field {
  margin: 0;
}

.cb-track-dialog__status:empty {
  display: none;
}

/* Send over Cancel on a phone, each the full width; side by side from
   768px, Send first. */
.cb-track-dialog__actions {
  border-top: 1px solid var(--cb-border);
  display: grid;
  flex: none;
  gap: var(--cb-space-2xs);
  padding: var(--cb-space-sm);
}

/* 12. Print ------------------------------------------------------------- */

/* The page has no print button of its own; this is for a customer who prints
   or saves the page from their browser's own menu. The controls step aside and
   each order stays whole on its page. */
@media print {
  .cb-track-board,
  .cb-track-concern__ask,
  .cb-track-dialog,
  .cb-track-order__window,
  .cb-track-tabs,
  .cb-track__checkout,
  .cb-track__status,
  .cb-track-pay__ask,
  .cb-track-pay__confirm,
  .cb-track-pay__status,
  .cb-track-photo,
  .cb-track-received,
  .cb-track-qr__save,
  .cb-track-order__chevron {
    display: none;
  }

  /* Every order prints in full, open or not. */
  .cb-track .cb-track-order__body[hidden] {
    display: block;
  }

  .cb-track-order,
  .cb-track-order.is-payment-due {
    animation: none;
    border-color: var(--cb-border-strong);
    box-shadow: none;
    break-inside: avoid;
  }

  .cb-track-invoice {
    background-color: transparent;
  }

  .cb-track-invoice__due {
    background-color: transparent;
    border: 2px solid var(--cb-ink);
    box-shadow: none;
    color: var(--cb-text);
  }
}