/* =========================================================================
   Qumash - ACCOUNT DASHBOARD
   -------------------------------------------------------------------------
   Figma "User dashboard" 9782:13948. Loaded only by account.html.

   The dashboard is the one screen in the file drawn on a different design
   system from the storefront: Mulish rather than Hanken/Cormorant, a
   16px card radius rather than 12, and the MUI grey ramp (var(--qm-ink-2) text,
   var(--qm-slate) secondary, var(--qm-ground-invoice) table head) rather than the brand browns.
   Those values are kept here, scoped to this page, rather than pushed into
   the shared stylesheet where they would collide with the storefront's.
   The brand cognac (var(--qm-cognac)) still carries every action, so the page reads
   as Qumash rather than as a stock admin template.
   ========================================================================= */

/* .font-hanken moved to css/styles.css - the auto-mounted overlays use it
   and they appear on pages that never load this stylesheet. */

/* ---- Card ---------------------------------------------------------------
   shadow/card from the file: a wide, very soft lift plus a 2px ambient ring
   that keeps the edge visible on a white-on-white stack. */
.acc-card {
  background: var(--qm-white);
  border-radius: 16px;
  box-shadow: 0 0 2px 0 rgba(145, 158, 171, .2),
              0 12px 24px -4px rgba(145, 158, 171, .12);
}

/* ---- Sub-nav -----------------------------------------------------------
   Stands in for the dashboard's own nav bar in the design. The site has one
   shared header; a second full-width nav under it would read as two sites. */
.acc-subnav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 48px;
  min-width: 48px;
  font-family: "Hanken Grotesk", sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 22px;
  color: var(--qm-slate);
  white-space: nowrap;
  transition: color .2s ease;
}
.acc-subnav-link:hover { color: var(--qm-ink-2); }
/* Active takes the file's ink underline, not the brand cognac the rest of
   the site uses - on this screen the tab row is MUI-derived and the accent
   would fight the gold membership card beside it. */
.acc-subnav-link.is-active { color: var(--qm-ink-2); }
.acc-subnav-link.is-active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--qm-ink-2);
}
/* Inactive tab icons sit back with their labels; the active one is full ink. */
.acc-subnav-link img { opacity: .55; transition: opacity .2s ease; }
.acc-subnav-link:hover img,
.acc-subnav-link.is-active img { opacity: 1; }

/* ---- Stat card ---------------------------------------------------------- */
.acc-stat {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 159px;
  padding: 16px 24px 24px;
}
.acc-stat-label {
  font-family: "Hanken Grotesk", sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 22px;
  color: var(--qm-ink-2);
}
.acc-stat-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 16px;
  padding-bottom: 8px;
}
.acc-stat-value {
  font-family: "Hanken Grotesk", sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 36px;
  color: var(--qm-ink-2);
}
/* Each exported SVG carries preserveAspectRatio="none" plus its own tight,
   non-square bounding box (the cart is 35x35, "delivered" is 38.5x28, and
   so on) - forcing a uniform 42x42 <img> box stretched every icon out of
   its real proportions. Capping instead of fixing both dimensions keeps
   every icon at its true aspect ratio while still bounding it to the same
   42px slot the design uses. */
.acc-stat-icon { max-width: 42px; max-height: 42px; width: auto; height: auto; opacity: .9; }

/* The card's background is now one flattened image (data-member-bg in the
   HTML) - gradient, gem and pedestal exported together from Figma, rather
   than the gradient here plus a separately positioned gem PNG. That split
   was fragile the moment the art needed to change independently of the
   text, which is exactly the admin field going in next: one input swaps
   this image, a separate one edits the text - neither touches the other.
   #F3EFE6 is a plain fallback for the gap before that image decodes. */
.acc-member { background-color: #F3EFE6; }

/* ---- Membership card ----------------------------------------------------
   The title is a metallic gradient in the file - a flat colour loses the
   whole effect, so it is painted through the text. A solid fallback colour
   is set first for anything that cannot clip a background to text. */
.acc-member-title {
  font-family: "Hanken Grotesk", Helvetica, Arial, sans-serif;
  color: #A47F3B;   /* solid fallback where background-clip:text is unsupported */
}
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .acc-member-title {
    background-image: linear-gradient(-79.5deg,
      #F3C136 9.14%, #A47F3B 55.92%, #9C7E2B 96.07%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

/* ---- Tabs --------------------------------------------------------------- */
.acc-tab {
  position: relative;
  min-height: 48px;
  padding: 13px 0;
  font-family: "Hanken Grotesk", sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 22px;
  color: var(--qm-slate);
  white-space: nowrap;
  transition: color .2s ease;
}
.acc-tab:hover { color: var(--qm-ink-2); }
.acc-tab.is-active { color: var(--qm-ink-2); }
.acc-tab.is-active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: var(--qm-cognac);
}

/* ---- Table -------------------------------------------------------------- */
.acc-table { border-collapse: collapse; }
.acc-table th {
  height: 56px;
  padding: 0 16px;
  background: var(--qm-ground-invoice);
  font-family: "Hanken Grotesk", sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 22px;
  color: var(--qm-slate);
  text-align: left;
  white-space: nowrap;
}
.acc-table td {
  height: 76px;
  padding: 0 16px;
  border-bottom: 1px solid rgba(145, 158, 171, .2);
  font-family: "Hanken Grotesk", sans-serif;
  font-size: 14px;
  line-height: 22px;
  color: var(--qm-ink-2);
  vertical-align: middle;
}
.acc-table tbody tr:last-child td { border-bottom: 0; }
.acc-table .acc-sub { display: block; color: var(--qm-slate); }

/* Full-row hover (Figma 9800:19451 "Variant2" row) - the whole row washes
   and its underline switches to the design's own var(--qm-line), not just the cell
   under the pointer. */
.acc-table tbody tr { transition: background-color .15s ease; }
.acc-table tbody tr:hover { background: rgba(243, 245, 247, .5); }
.acc-table tbody tr:hover td { border-bottom-color: var(--qm-line); }
/* Only rows with somewhere to go (a details page) get the pointer - see
   js/account-view.js's data-href/acc-row-link. */
.acc-table tbody tr.acc-row-link { cursor: pointer; }

@media (prefers-reduced-motion: reduce) {
  .acc-table tbody tr { transition: none; }
}

/* Status pill. Each state gets its own colour AND its own words, so the
   status is never carried by colour alone. */
.acc-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 6px;
  border-radius: 6px;
  font-family: "Hanken Grotesk", sans-serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 20px;
}
.acc-status-pending   { background: rgba(255, 171, 0, .16);  color: var(--qm-status-warning); }
.acc-status-shipped   { background: rgba(0, 120, 220, .16);  color: #006C9C; }
.acc-status-delivered { background: rgba(34, 197, 94, .16);  color: var(--qm-status-success); }
.acc-status-cancelled { background: rgba(255, 86, 48, .16);  color: var(--qm-status-danger); }

.acc-view {
  font-family: "Hanken Grotesk", sans-serif;
  font-size: 13px;
  font-weight: 700;
  line-height: 22px;
  color: var(--qm-cognac);
}
.acc-view:hover { text-decoration: underline; }

/* The native date control's own icon is replaced with the file's calendar
   glyph, so the field matches the rest of the row.

   The icon itself is only 20px, and by default that is also its entire
   clickable area - a real miss target. Padding grows the actual hit box
   to 40px; the matching negative margin pulls the box back so the field's
   layout does not shift. Covers every date input site-wide (My orders'
   two filters via .acc-date, My profile's Date of Birth via .pf-input),
   not just the ones that happened to get a dedicated class. */
.acc-date::-webkit-calendar-picker-indicator,
.pf-input[type="date"]::-webkit-calendar-picker-indicator {
  width: 20px; height: 20px;
  padding: 10px;
  margin: -10px;
  cursor: pointer;
  opacity: .6;
}
/* .acc-date's box, border, radius, font and focus ring are shared with
   .co-input/.pf-input/.login-input now - see css/styles.css. */

@media (prefers-reduced-motion: reduce) {
  .acc-subnav-link, .acc-tab, .acc-card img { transition: none; }
}

/* ---- Page grid ----------------------------------------------------------
   The file draws this screen on a 1920 frame with a 1366 content column
   centred in it - 955 left + 24 + 387 rail. The storefront's .container-x
   is a fluid 1420 grid, which on this page resolved to 1376 and pushed
   every column about 10px wide of the design, so the dashboard gets the
   file's fixed measure instead. Below 1366 it behaves like the rest of the
   site and simply fills the width. */
.acc-wrap {
  width: 100%;
  max-width: 1366px;
  margin-inline: auto;
  padding-inline: 1.5rem;
}
@media (min-width: 1430px) {
  /* Past the point where the gutters are no longer doing anything, drop
     them so the measure is exactly the 1366 of the frame. */
  .acc-wrap { padding-inline: 0; }
}

/* ---- Page ground --------------------------------------------------------
   White, rather than the checkout flow's var(--qm-ground-checkout). The cards are white too,
   so on this ground their edges are carried entirely by .acc-card's shadow
   - the 2px ambient ring in that rule is what keeps a white card legible on
   white, and it is the reason this page does not need a tinted backdrop.
   Scoped to the dashboard: cart, checkout and order still use .co-page. */
.acc-page { background: var(--qm-white); }

/* ---- My orders ----------------------------------------------------------
   The stat cards run as one full-width row here rather than the dashboard's
   2x2 block beside the profile card, and the file draws that row 140 tall
   against the dashboard's 159. */
.acc-stat-wide { min-height: 140px; }

/* Pagination arrows. 36px is under the 44px touch target the rest of the
   site holds to, so the tap area is widened on coarse pointers without
   moving the 36px circle the design draws. */
.acc-page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 500px;
  color: var(--qm-ink-2);
  transition: background-color .2s ease, opacity .2s ease;
}
.acc-page-btn:hover:not(:disabled) { background: rgba(145, 158, 171, .08); }
.acc-page-btn:disabled { opacity: .35; cursor: default; }
@media (pointer: coarse) {
  .acc-page-btn { position: relative; }
  .acc-page-btn::before {
    content: "";
    position: absolute;
    inset: -4px;                    /* 36 -> 44 without redrawing the circle */
  }
}

/* The rows-per-page control is a real <select> - the design's caret is drawn
   over it, so the native arrow has to go or there are two. */
.acc-per-page { border: 0; outline-offset: 2px; }
.acc-per-page::-ms-expand { display: none; }

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

/* =========================================================================
   ORDER DETAILS  (Figma 10629:23765)
   -------------------------------------------------------------------------
   The one screen in the account area drawn on a NARROWER measure than the
   dashboard: 1134 rather than 1366, centred in the 1920 frame. The page
   title above it still sits on 1366, which is why the heading starts to the
   left of the first card. That is the design.
   ========================================================================= */
.od-wrap {
  width: 100%;
  max-width: 1134px;
  margin-inline: auto;
  padding-inline: 1.5rem;
}
@media (min-width: 1200px) {
  .od-wrap { padding-inline: 0; }
}

/* The "Delivery information" card carries a green wash off its top-right
   corner. Two stops in the file, drawn here rather than shipped as pixels so
   it stays sharp and recolours in one line. */
.od-track {
  background-image:
    linear-gradient(55.8deg,
      rgba(255, 255, 255, 0) 31.3%,
      rgba(255, 255, 255, 0) 71.91%,
      rgb(201, 246, 213) 99.68%),
    linear-gradient(90deg, var(--qm-white) 0%, var(--qm-white) 100%);
}

/* Section headings inside the right column - Helvetica Neue Medium 18/28,
   which is the site's own body face, so nothing new is loaded. */
.od-h {
  font-size: 20px;
  font-weight: 700;
  line-height: 30px;
  color: var(--qm-black);
}

/* Label/value rows. The 120px label column is what keeps the values in a
   straight line down the card, exactly as the file lays them out. */
.od-label {
  width: 120px;
  flex-shrink: 0;
  font-family: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 24px;
  color: var(--ink-muted);
}
.od-value {
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  color: var(--qm-ink);
}

.od-copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  color: var(--ink-muted);
  transition: opacity .2s ease;
}
.od-copy:hover { opacity: .65; }
/* Confirmation is a word, never a colour change alone. */
.od-copy[data-copied="1"]::after {
  content: "Copied";
  margin-left: 8px;
  font-family: "Hanken Grotesk", sans-serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 20px;
  color: var(--qm-status-success);
  white-space: nowrap;
}

/* Order summary rows */
.od-sum-label {
  font-family: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  line-height: 22px;
  color: var(--ink-muted);
}
.od-sum-value {
  font-size: 16px;
  line-height: 24px;
  color: var(--qm-ink);
}

.od-back {
  color: var(--qm-ink);
  transition: background-color .2s ease;
}
.od-back:hover { background: rgba(145, 158, 171, .08); }

@media (prefers-reduced-motion: reduce) {
  .od-back, .od-copy { transition: none; }   /* .od-btn moved to styles.css */
}

/* =========================================================================
   TRACK YOUR ORDER  (Figma 10629:24440)
   -------------------------------------------------------------------------
   Two 439 columns with a 24 gap - 902 of content, centred. Narrower again
   than Order details' 1134, which is what the file draws.
   ========================================================================= */
.tr-wrap {
  width: 100%;
  max-width: 902px;
  margin-inline: auto;
  padding-inline: 1.5rem;
}
@media (min-width: 968px) {
  .tr-wrap { padding-inline: 0; }
}

/* Same green wash as the Delivery information card on Order details, at the
   shallower angle this one uses in the file. */
.tr-live {
  background-image:
    linear-gradient(30.6deg,
      rgba(255, 255, 255, 0) 31.3%,
      rgba(255, 255, 255, 0) 71.91%,
      rgb(201, 246, 213) 99.68%),
    linear-gradient(90deg, var(--qm-white) 0%, var(--qm-white) 100%);
}

/* The label column here is 190, not the 120 Order details uses. */
.tr-label {
  width: 190px;
  flex-shrink: 0;
  font-family: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 24px;
  color: var(--ink-muted);
}

/* ---- Timeline -----------------------------------------------------------
   Each step is 84 tall (44 for the last, which has no description) with the
   dot centred in a 36px block and the connector filling whatever is left.
   The connector is a real element rather than a border on the item, so the
   last step can simply omit it instead of needing an override. */
.tl-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  min-height: 84px;
}
.tl-item-last { min-height: 44px; }

.tl-sep {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: stretch;
  width: 12px;
  flex-shrink: 0;
}
/* The "to do" ring is 14 wide in a 12 column - it overhangs by a pixel each
   side, exactly as the file draws it. max-width:none is required: the site's
   global `img { max-width: 100% }` otherwise squeezes it back to 12 and
   thins the stroke, which is the one thing distinguishing it from the
   filled dot. */
.tl-dot {
  flex-shrink: 0;
  display: block;
  max-width: none;
}
.tl-line {
  flex: 1 0 0;
  min-height: 0;
  width: 1px;
  background: rgba(145, 158, 171, .2);
}

.tl-body {
  display: flex;
  flex-direction: column;
  flex: 1 0 0;
  min-width: 0;
  padding-top: 6px;
}
.tl-title {
  font-size: 14px;
  font-weight: 500;
  line-height: 22px;
  color: var(--brand-950);
}
.tl-now { color: var(--qm-cognac); }
.tl-date {
  font-size: 12px;
  line-height: 16px;
  color: var(--qm-warm-border);
}
.tl-desc {
  margin-top: 2px;
  font-family: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  line-height: 22px;
  color: #6F8091;
}

/* =========================================================================
   MY PROFILE  (Figma 10629:24791)
   -------------------------------------------------------------------------
   Back on the account area's 1366 measure, split 817 / 24 / 525.
   ========================================================================= */

/* .pf-avatar (a flat single-tone circle) was replaced by the nav's own
   two-tone ring - .nav-avatar.nav-avatar-md, used directly in profile.html. */

/* Label/value rows. The 210px label column is what lines every value up
   down the card, exactly as the file lays them out. Below the breakpoint
   the pair stacks rather than squeezing a long address into a sliver. */
.pf-row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.pf-key {             /* type = .qm-label (css/styles.css) */
  width: 210px;
  flex-shrink: 0;
  font-family: "Hanken Grotesk", Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 22px;
  color: #101820;
}
.pf-val {
  min-width: 0;
  font-family: "Hanken Grotesk", sans-serif;
  font-size: 14px;
  line-height: 22px;
  color: var(--qm-slate);
  overflow-wrap: anywhere;
}
/* An em dash on its own is easy to read as a value. Fading it further, and
   labelling it for a screen reader, says "nothing here yet". */
.pf-val.is-empty { color: var(--qm-neutral-400); }
.pf-val.is-empty::after {
  content: " not set";
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

@media (max-width: 639px) {
  .pf-row { flex-direction: column; gap: 2px; }
  .pf-key { width: auto; }
}

/* The pencil. 18px in the file, which is well under a comfortable target,
   so the hit area is widened without moving the glyph. */
.pf-edit {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--qm-ink-2);
  transition: opacity .2s ease;
}
.pf-edit::before { content: ""; position: absolute; inset: -13px; }
.pf-edit:hover { opacity: .65; }
.pf-edit:focus-visible { outline: 2px solid var(--qm-cognac); outline-offset: 6px; }

/* Editing swaps the rows in place, so the inputs sit on the same grid as
   the values they replace. */
/* .pf-input's box, colours, border, radius, font and focus ring are all
   defined once now, shared with .co-input/.login-input/.acc-date - see
   css/styles.css. Only the flex-sizing needed to sit inside .pf-row is
   specific to this page. */
.pf-input {
  min-width: 0;
  flex: 1 1 auto;
}
/* Shown, not editable - the registered mobile number in the Contact form. */
.pf-input-locked {
  background: var(--qm-neutral-50);          /* Neutral Scale/50 */
  color: var(--qm-neutral-400);                /* Neutral Scale/400 */
  cursor: not-allowed;
}
.pf-radio {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: "Hanken Grotesk", sans-serif;
  font-size: 14px;
  line-height: 22px;
  color: var(--qm-ink-2);
  cursor: pointer;
}
.pf-radio-input {
  width: 18px;
  height: 18px;
  accent-color: var(--qm-cognac);
  cursor: pointer;
}

.pf-hint {
  padding-left: 226px;          /* aligns with the value column */
  font-family: "Hanken Grotesk", sans-serif;
  font-size: 12px;
  line-height: 18px;
  color: var(--qm-neutral-400);                /* Neutral Scale/400 */
}
.pf-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding-left: 226px;          /* aligns with the value column */
}
@media (max-width: 639px) {
  .pf-hint { padding-left: 0; }
  .pf-actions { padding-left: 0; }
}

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

/* ---- Member ID: a "luxury id" treatment ---------------------------------
   QM-YYMMDD-#### (see buildMemberId() in js/profile-view.js) reads like a
   plain string otherwise; a thin gold-edged chip with wide tracking and
   tabular numerals is what makes it read as a membership number rather
   than a stray code. Only applied once there is a real value - :not(.is-empty)
   keeps the empty dash looking like every other empty field on this page. */
.pf-member-id:not(.is-empty) {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 10px;
  border: 1px solid var(--qm-gold-border);
  border-radius: 6px;
  background: linear-gradient(180deg, #FFFCF4 0%, #F3EFE0 100%);
  font-family: "Hanken Grotesk", sans-serif;
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: .12em;
  color: var(--qm-cognac);
}

/* ---- Measurement: the same chip treatment, in the secondary/neutral tone
   -------------------------------------------------------------------------
   A bare "S" read as plain text, unlike the Member ID beside it. Same small
   badge shape, but the neutral cream (not gold - that is the Member ID's
   own signature) so the two chips stay visibly different things on the
   same card. */
.pf-size-chip:not(.is-empty) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 26px;
  padding: 0 10px;
  border: 1px solid var(--qm-warm-border);
  border-radius: 6px;
  background: var(--qm-cream-100);
  font-family: "Hanken Grotesk", sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--qm-ink-2);
}

/* ---- Order status tracker (order-details.html "Confirmed -> Payment
   Verification -> Packaging -> In Transit") ---------------------------
   Stepper UI (Figma 10692:9872) - disc, title+description immediately
   beside it, then a connecting line - the same shape as checkout.html's
   .co-step (see its own comment), extended with a description line
   under the title. A step with no description would just omit
   .od-tstep-sub, which leaves the title centered against the disc for
   free (align-items:center on .od-tstep with only one line to center).
   Same status colours as .co-step: green=done, gold=in progress,
   white+gold number=upcoming - not the brand cognac buttons use
   elsewhere, since this says "you did this", not "buy this". */
.od-tstep-disc {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50px;
  background: #FFFFFF;
  color: #A88B4A;
  font-family: "Hanken Grotesk", sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 22px;
  box-shadow: 0 2px 4px -2px rgba(0, 0, 0, .06), 0 4px 8px -2px rgba(0, 0, 0, .1);
}
.od-tstep-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.od-tstep-title {
  font-family: "Hanken Grotesk", Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  color: #495968;
  white-space: nowrap;
}
.od-tstep-sub {
  font-family: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  font-size: 13px;
  line-height: 18px;
  color: var(--ink-muted);
  white-space: nowrap;
}
.od-tstep-line {
  flex: 1 1 0%;
  min-width: 12px;
  height: 1px;
  background: var(--qm-cream-300);
}
.od-tstep-line-end { background: transparent; }
.od-tstep.is-done .od-tstep-disc { background: #101820; color: #fff; box-shadow: none; }
.od-tstep.is-active .od-tstep-disc { background: #B8860B; color: #fff; box-shadow: none; }
.od-tstep.is-active .od-tstep-title,
.od-tstep.is-done .od-tstep-title { color: #101820; }
/* :not(.od-tstep-line-end) - same specificity fix as checkout.css's
   .co-step-line: the last step's trailing line must stay invisible even
   if that step is is-done/is-active, and .od-tstep-line-end alone (two
   classes) loses that fight against these rules (three) on specificity. */
.od-tstep.is-done .od-tstep-line:not(.od-tstep-line-end) { background: #101820; }
/* The exact pale dash Figma's "Atoms/Line/Active" asset shows after the
   current step - Warning/100, not a solid gold line. */
.od-tstep.is-active .od-tstep-line:not(.od-tstep-line-end) {
  background-image: linear-gradient(to right, #F2E2C4 50%, transparent 0%);
  background-size: 8px 1px;
  background-repeat: repeat-x;
  background-color: transparent;
}

/* Phones: each order becomes a card - ID and date, then amount and status,
   then the link - instead of a 720px table scrolled sideways. */
@media (max-width: 639px) {
  .acc-table { min-width: 0 !important; }
  .acc-table thead { display: none; }
  .acc-table tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px 12px;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(145, 158, 171, .2);
  }
  .acc-table tbody tr:last-child { border-bottom: 0; }
  .acc-table td { height: auto; padding: 0; border-bottom: 0 !important; }
  .acc-table td:nth-child(1) { font-weight: 600; color: var(--qm-ink-2); white-space: nowrap; }
  .acc-table td:nth-child(2) { text-align: right; color: var(--qm-slate); }
  .acc-table td:nth-child(4) { justify-self: end; }
  .acc-table td:nth-child(5) { grid-column: 1 / -1; text-align: left !important; padding-top: 4px; }
}

/* Phones: the order tracker reads top to bottom, one step per row, joined
   by a thin line between the discs (the horizontal connectors would sit
   after the text, pointing at nothing). */
@media (max-width: 639px) {
  [data-od-tracker] { flex-direction: column; align-items: stretch; gap: 20px; }
  .od-tstep { position: relative; flex: none; }
  .od-tstep-line { display: none; }
  .od-tstep:not(:last-child)::after {
    content: ""; position: absolute; left: 13.5px; top: calc(50% + 18px); height: calc(100% - 16px);
    width: 1px; background: var(--qm-cream-300, #E7E2D3);
  }
  .od-tstep.is-done:not(:last-child)::after { background: #101820; }
}
@media (max-width: 479px) { .tr-label { width: 128px; } }