/* Parcel — Orders view (owned by the orders view).
   Layout decisions use a container query on the view (the content column is narrower than the viewport once the
   sidebar shows at 1024px), so rows, the toolbar and the detail grid adapt to the space they really have. */

.view-orders { container: orders / inline-size; }

/* ------------------------------------------------------------------ shared: product thumbnail */
.view-orders .ord-thumb,
.ord-sheet .ord-thumb {
  display: block; flex: none; overflow: hidden;
  width: var(--thumb, 44px); height: var(--thumb, 44px);
  border-radius: calc(var(--thumb, 44px) * .24);
  background: var(--bg-3);
  box-shadow: inset 0 0 0 var(--hairline) var(--sep);
}
:is(.view-orders, .ord-sheet) .ord-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Each thumbnail carries a light and a dark studio (an <img> can't see the theme); show the one that matches,
   with the same rules as css/tokens.css (system dark unless forced light, or forced dark). */
:is(.view-orders, .ord-sheet) .ord-thumb img.ord-thumb-dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) :is(.view-orders, .ord-sheet) .ord-thumb img.ord-thumb-light { display: none; }
  :root:not([data-theme="light"]) :is(.view-orders, .ord-sheet) .ord-thumb img.ord-thumb-dark { display: block; }
}
:root[data-theme="dark"] :is(.view-orders, .ord-sheet) .ord-thumb img.ord-thumb-light { display: none; }
:root[data-theme="dark"] :is(.view-orders, .ord-sheet) .ord-thumb img.ord-thumb-dark { display: block; }

/* ================================================================== LIST */

/* Toolbar: the "Orders | Messages" switch (the page's one segmented control, like Products' "My products | Test lab"),
   then, on the Orders page, filter capsules and the search field. Narrow: stacked, the search field closest to the rows
   it filters. Wide: capsules left, search right (Mac toolbar). */
.view-orders .ord-toolbar { display: flex; flex-direction: column; gap: 16px; }
.view-orders .ord-switch .segmented { width: 100%; }
@media (min-width: 768px) { .view-orders .ord-switch { max-width: 360px; } }
/* The switch's counts say "needs you" (orange capsule), not a total. */
.view-orders .ord-switch .segmented-item { gap: 7px; }
.view-orders .ord-switch .segmented-badge.is-alert {
  display: inline-grid; place-items: center;
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--orange); color: #000;
  font-size: 12px; line-height: 1; font-weight: var(--w-bold);
}
.view-orders .ord-tools { display: flex; flex-direction: column; gap: 12px; }
.view-orders .ord-tools[hidden] { display: none; }
@container orders (min-width: 680px) {
  .view-orders .ord-tools { flex-direction: row; align-items: center; gap: 16px; }
  .view-orders .ord-chips { flex: 1 1 auto; min-width: 0; }
  .view-orders .ord-search { flex: 0 1 300px; margin-left: auto; }
}
.view-orders .ord-chip-count { margin-left: -1px; font-weight: var(--w-regular); font-variant-numeric: tabular-nums; opacity: .72; }
.view-orders .ord-chip-count:empty { display: none; }
@media (forced-colors: active) {
  .view-orders .ord-switch .segmented-badge.is-alert { forced-color-adjust: none; background: Canvas; color: CanvasText; border: 1px solid CanvasText; }
  .view-orders .ord-chip-count { opacity: 1; }
}

/* ---- "Needs you" card: issues float to the top */
.view-orders .ord-heading { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.view-orders .ord-count {
  display: inline-grid; place-items: center;
  min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 10px;
  background: var(--orange); color: #000;
  font-size: 12px; line-height: 1; font-weight: var(--w-bold);
  font-variant-numeric: tabular-nums;
}
.view-orders .ord-issues { display: grid; grid-template-columns: minmax(0, 1fr); }
.view-orders .ord-issue {
  position: relative;
  display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 12px;
  padding: 14px 0;
}
.view-orders .ord-issue:first-child { padding-top: 2px; }
.view-orders .ord-issue:last-child { padding-bottom: 0; }
.view-orders .ord-issue + .ord-issue::before {
  content: ""; position: absolute; top: 0; left: 42px; right: 0;
  height: var(--hairline); background: var(--sep);
}
.view-orders .ord-issue .icon-tile { margin-top: 1px; }
.view-orders .ord-issue-main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.view-orders .ord-issue-head { display: flex; align-items: baseline; gap: 10px; }
.view-orders .ord-issue-title {
  flex: 1 1 auto; min-width: 0;
  font-size: var(--fs-headline); line-height: var(--lh-headline); font-weight: var(--w-semibold);
  letter-spacing: var(--ls-headline); color: var(--label);
  border-radius: 4px;
}
.view-orders .ord-issue-title:active { opacity: .55; }
@media (hover: hover) and (pointer: fine) { .view-orders .ord-issue-title:hover { color: var(--accent-text); } }
.view-orders .ord-issue-time {
  flex: none; margin-left: auto;
  font-size: var(--fs-subhead); line-height: var(--lh-subhead); color: var(--label-2); white-space: nowrap;
}
.view-orders .ord-issue-meta,
.view-orders .ord-issue-msg {
  font-size: var(--fs-subhead); line-height: var(--lh-subhead); color: var(--label-2);
  text-wrap: pretty;
}
.view-orders .ord-issue-meta { color: var(--label); }
.view-orders .ord-issue-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.view-orders .ord-issue-actions .btn { min-width: 104px; }
/* "Send all N to CJ" under the waiting orders (Supplier orders = Ask me). */
.view-orders .ord-send-all-row {
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  margin-top: 16px; padding-top: 14px; box-shadow: inset 0 var(--hairline) 0 var(--sep);
}
.view-orders .ord-send-all-note { font-size: var(--fs-footnote); line-height: var(--lh-footnote); color: var(--label-2); text-wrap: pretty; }

/* Two issues side by side when there's room. */
@container orders (min-width: 760px) {
  .view-orders .ord-issues { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
  .view-orders .ord-issues.is-single { grid-template-columns: minmax(0, 1fr); }
  .view-orders .ord-issue { padding: 2px 0 0; }
  .view-orders .ord-issue + .ord-issue::before { top: 0; bottom: 0; left: -20px; right: auto; width: var(--hairline); height: auto; }
  .view-orders .ord-issue:nth-child(2n + 1)::before { display: none; }
  .view-orders .ord-issue:nth-child(n + 3) { margin-top: 20px; }
}

.view-orders .ord-body > .section:first-child { margin-top: 20px; }

/* ---- Day groups */
.view-orders .ord-day { margin-top: var(--sp-6); }
.view-orders .ord-day-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 0 16px 7px;
  font-size: 13px; line-height: 18px; color: var(--label-2);
}
.view-orders .ord-day-title { font: inherit; text-transform: uppercase; letter-spacing: 0; }
.view-orders .ord-day-count { font-variant-numeric: tabular-nums; }
.view-orders .ord-list { background: var(--bg-2); border-radius: var(--r-list); overflow: hidden; }

/* ---- One order row. Phone: two lines (name + pill · total / number + suburb · time). */
.view-orders .ord-row { position: relative; }
.view-orders .ord-row + .ord-row::before {
  content: ""; position: absolute; top: 0; right: 0; left: 72px; z-index: 1;
  height: var(--hairline); background: var(--sep);
}
.view-orders .ord-row-link {
  --thumb: 44px;
  position: relative;
  display: grid;
  grid-template-columns: var(--thumb) minmax(0, 1fr) auto 8px;
  grid-template-areas:
    "thumb name total chev"
    "thumb sub  time  chev";
  column-gap: 12px; row-gap: 1px;
  align-items: baseline;
  min-height: 64px;
  padding: 10px 14px 10px 16px;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--dur-press) linear;
}
.view-orders .ord-row-link:active { background: var(--row-pressed); }
@media (hover: hover) and (pointer: fine) {
  .view-orders .ord-row-link:hover { background: var(--fill-4); }
  .view-orders .ord-row-link:active { background: var(--row-pressed); }
}
.view-orders .ord-row-link:focus-visible { outline-offset: -3px; border-radius: var(--r-list); }
.view-orders .ord-row-thumb { grid-area: thumb; align-self: center; }
.view-orders .ord-row-name {
  grid-area: name; min-width: 0;
  display: flex; align-items: center; gap: 7px;
  font-size: var(--fs-body); line-height: var(--lh-body); letter-spacing: var(--ls-body); font-weight: var(--w-semibold);
}
.view-orders .ord-row-first { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.view-orders .ord-row-pill { display: inline-flex; flex: none; transform: translateY(-1px); }
.view-orders .ord-row-sub {
  grid-area: sub; min-width: 0;
  font-size: var(--fs-subhead); line-height: var(--lh-subhead); color: var(--label-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.view-orders .ord-row-total {
  grid-area: total; justify-self: end;
  font-size: var(--fs-body); line-height: var(--lh-body); letter-spacing: var(--ls-body);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.view-orders .ord-row-time {
  grid-area: time; justify-self: end;
  font-size: var(--fs-subhead); line-height: var(--lh-subhead); color: var(--label-2); white-space: nowrap;
}
/* disclosureChevron (16pt) in an 8px track: it overflows into the row padding, 13px from the edge like listRow's. */
.view-orders .ord-row-chev { grid-area: chev; align-self: center; justify-self: end; margin-right: -1px; }
.view-orders .ord-row-product,
.view-orders .ord-row-status { display: none; }
.view-orders .ord-row.is-refunded .ord-row-total { color: var(--label-2); text-decoration: line-through; text-decoration-thickness: 1px; }

/* Narrow phones (≤ 360pt): three lines so the name never gets squeezed by the pill. */
@container orders (max-width: 339px) {
  .view-orders .ord-row + .ord-row::before { left: 66px; }
  .view-orders .ord-row-link {
    --thumb: 38px;
    grid-template-areas:
      "thumb name   total chev"
      "thumb sub    sub   chev"
      "thumb status time  chev";
    column-gap: 12px; row-gap: 2px;
    padding-left: 16px;
  }
  .view-orders .ord-row-pill { display: none; }
  .view-orders .ord-row-status { display: flex; grid-area: status; margin-top: 3px; }
  .view-orders .ord-row-time { align-self: center; margin-top: 3px; }
  /* Buttons use the card's full width (under the icon too) so both labels fit. */
  .view-orders .ord-issue-actions { margin-left: -42px; }
  .view-orders .ord-issue-actions .btn { flex: 1 1 0; min-width: 0; padding-inline: 12px; }
}

/* Wide: product and status get their own columns. */
@container orders (min-width: 680px) {
  .view-orders .ord-row + .ord-row::before { left: 72px; }
  .view-orders .ord-row-link {
    grid-template-columns: var(--thumb) minmax(0, 1.15fr) minmax(0, 1fr) 112px 84px 80px 8px;
    grid-template-areas:
      "thumb name product status time total chev"
      "thumb sub  product status time total chev";
    column-gap: 14px;
    padding-right: 16px;
  }
  .view-orders .ord-row-pill { display: none; }
  /* Up to two lines (the row has two), so "Slow Feeder Bowl + Lick Mat" isn't cut off on a tablet. */
  .view-orders .ord-row-product {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; grid-area: product; align-self: center; min-width: 0;
    font-size: var(--fs-subhead); line-height: var(--lh-subhead); color: var(--label-2);
    overflow: hidden; text-wrap: balance;
  }
  .view-orders .ord-row-status { display: flex; grid-area: status; align-self: center; }
  .view-orders .ord-row-time { align-self: center; font-size: var(--fs-subhead); }
  .view-orders .ord-row-total { align-self: center; font-weight: var(--w-medium); }
  .view-orders .ord-row-chev { margin-right: -3px; }
}
@container orders (min-width: 900px) {
  .view-orders .ord-row-link { grid-template-columns: var(--thumb) minmax(0, 1fr) minmax(0, 1.15fr) 108px 88px 88px 8px; }
}

.view-orders .ord-footnote {
  margin-top: 8px; padding: 0 16px;
  font-size: var(--fs-footnote); line-height: var(--lh-footnote); color: var(--label-2);
  text-wrap: pretty;
}
.view-orders .ord-empty .empty { padding-top: 48px; }
.view-orders .ord-empty.is-search .empty { padding-top: 32px; }

/* "Show earlier orders" under the last day, and the line that says how far back the list goes. */
.view-orders .ord-more {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  margin-top: var(--sp-6);
}
.view-orders .ord-more-btn { min-width: 220px; }
.view-orders .ord-more-note {
  padding: 0 16px; text-align: center;
  font-size: var(--fs-footnote); line-height: var(--lh-footnote); color: var(--label-2);
  text-wrap: pretty;
}
.view-orders .ord-more-note.is-end { margin-top: var(--sp-6); }

/* ================================================================== DETAIL */

.view-orders .ord-detail {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px;
  margin-top: var(--sp-2);
}
.view-orders .ord-col { display: flex; flex-direction: column; gap: 28px; min-width: 0; }
.view-orders .ord-col > .list-section + .list-section { margin-top: 0; }
@container orders (min-width: 680px) {
  .view-orders .ord-detail { grid-template-columns: minmax(0, 1.18fr) minmax(0, 1fr); gap: 24px; align-items: start; }
  .view-orders .ord-col { gap: 24px; }
}

/* ---- Issue callout */
.view-orders .ord-callout .card-header { margin-bottom: 10px; }
.view-orders .ord-callout-time { font-size: var(--fs-subhead); line-height: var(--lh-subhead); color: var(--label-2); white-space: nowrap; }
.view-orders .ord-callout-title {
  margin: 0;
  font-size: var(--fs-title3); line-height: var(--lh-title3); font-weight: var(--w-semibold); letter-spacing: var(--ls-title3);
}
.view-orders .ord-callout-msg {
  margin-top: 4px;
  font-size: var(--fs-subhead); line-height: var(--lh-subhead); color: var(--label-2);
  text-wrap: pretty;
}
.view-orders .ord-callout-fixes { margin-top: 14px; margin-bottom: -16px; }
/* The delay email autopilot already sent (§36), under the issue. */
.view-orders .ord-callout-email {
  display: inline-flex; align-items: baseline; gap: 6px; margin-top: 10px;
  font-size: var(--fs-footnote); line-height: var(--lh-footnote); color: var(--accent-text); border-radius: 4px;
  text-wrap: pretty;
}
.view-orders .ord-callout-email svg { flex: none; transform: translateY(2px); }
.view-orders .ord-callout-email svg:first-child { color: var(--indigo); }
.view-orders .ord-callout-email:active { opacity: .55; }
@media (hover: hover) and (pointer: fine) { .view-orders .ord-callout-email:hover span { text-decoration: underline; text-underline-offset: 3px; } }
.view-orders .ord-waiting-actions { margin-top: 16px; }
.view-orders .ord-waiting-actions .btn { min-width: 160px; }
@container orders (max-width: 339px) { .view-orders .ord-waiting-actions .btn { width: 100%; } }
/* Match the card's own padding (16 → 20 at 768px) so rows line up with the text above. */
@media (min-width: 768px) {
  .view-orders .ord-callout-fixes { margin-bottom: -20px; }
  .view-orders .ord-callout .list-row-inner { padding-left: 20px; }
  .view-orders .ord-callout .list-row-main { padding-right: 20px; }
  .view-orders .ord-callout .list-footer { padding-inline: 20px; }
}
.view-orders .ord-callout .ord-fix-list .list { background: transparent; border-radius: 0; box-shadow: inset 0 var(--hairline) 0 var(--sep); }
.view-orders .ord-callout .ord-fix-list .list-footer { padding-bottom: 16px; }

/* Fix rows (callout + sheet) */
:is(.view-orders, .ord-sheet) .ord-fix-row .list-row-main { padding-block: 12px; }
:is(.view-orders, .ord-sheet) .ord-fix-row .list-row-title { font-weight: var(--w-medium); }
:is(.view-orders, .ord-sheet) .ord-fix-row .list-row-subtitle { white-space: normal; text-wrap: pretty; }
:is(.view-orders, .ord-sheet) .ord-fix-row .list-row-leading { align-self: flex-start; margin-top: 12px; }
:is(.view-orders, .ord-sheet) .ord-fix-row .spinner { margin-right: -2px; }
:is(.view-orders, .ord-sheet) .ord-fix-list.is-busy .list-row-inner { pointer-events: none; }
:is(.view-orders, .ord-sheet) .ord-fix-list.is-busy .ord-fix-row:not(.is-busy) { opacity: .45; transition: opacity 200ms linear; }
:is(.view-orders, .ord-sheet) .ord-fix-list .list-footer { text-wrap: pretty; }

/* ---- Status card: headline + Apple-order-status timeline */
.view-orders .ord-status { padding: 20px 16px 18px; }
@container orders (min-width: 400px) { .view-orders .ord-status { padding: 22px 20px 20px; } }
.view-orders .ord-headline {
  margin: 0;
  font-size: var(--fs-title1); line-height: var(--lh-title1); font-weight: var(--w-bold); letter-spacing: var(--ls-title1);
  text-wrap: balance;
}
.view-orders .ord-headline.is-orange { color: var(--orange-text); }
.view-orders .ord-headline.is-green { color: var(--green-text); }
.view-orders .ord-status-sub {
  margin-top: 4px;
  font-size: var(--fs-subhead); line-height: var(--lh-subhead); color: var(--label-2);
  text-wrap: pretty;
}

.view-orders .ord-tl { --tl: var(--accent); list-style: none; margin: 22px 0 0; padding: 0; }
.view-orders .ord-tl.tl-green { --tl: var(--green); }
.view-orders .ord-tl.tl-gray { --tl: var(--gray); }
.view-orders .ord-tl-step {
  position: relative;
  display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 14px;
  padding-bottom: 22px;
}
.view-orders .ord-tl-step:last-child { padding-bottom: 0; }
/* The rail: a line from this dot's centre to the next dot's centre. */
.view-orders .ord-tl-step:not(:last-child)::before {
  content: ""; position: absolute; left: 11px; top: 11px; bottom: -11px;
  width: 2px; border-radius: 1px;
  background: var(--tl);
}
.view-orders .ord-tl-step.line-pending::before { background: var(--ord-rail-off); }
.view-orders .ord-tl-rail { position: relative; z-index: 1; height: 22px; display: grid; place-items: center; }
.view-orders .ord-tl-dot {
  display: grid; place-items: center;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--tl); color: #fff;
}
.view-orders .is-current .ord-tl-dot {
  width: 14px; height: 14px;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--tl) 22%, var(--bg-2));
}
.view-orders .is-complete .ord-tl-dot,
.view-orders .is-issue .ord-tl-dot,
.view-orders .is-refunded .ord-tl-dot { width: 22px; height: 22px; }
.view-orders .is-issue .ord-tl-dot { background: var(--orange); }
.view-orders .is-refunded .ord-tl-dot { background: var(--gray); }
.view-orders .ord-tl-dot.is-symbol { background: transparent; color: var(--tl); --knockout: #fff; }
.view-orders .ord-tl-dot.is-symbol svg { display: block; }
.view-orders .is-issue .ord-tl-dot.is-symbol { color: var(--orange); }
.view-orders .is-pending .ord-tl-dot {
  width: 12px; height: 12px;
  background: var(--bg-2);
  box-shadow: inset 0 0 0 2px var(--ord-rail-off);
}
.view-orders .ord-tl-text { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.view-orders .ord-tl-label {
  font-size: var(--fs-body); line-height: var(--lh-body); letter-spacing: var(--ls-body);
  overflow-wrap: anywhere;
}
.view-orders :is(.is-current, .is-complete, .is-issue, .is-refunded) .ord-tl-label { font-weight: var(--w-semibold); }
.view-orders .is-issue .ord-tl-label { color: var(--orange-text); }
.view-orders .is-pending .ord-tl-label { color: var(--label-2); }
.view-orders :is(.ord-tl-date, .ord-tl-note, .ord-tl-extra) {
  font-size: var(--fs-subhead); line-height: var(--lh-subhead); color: var(--label-2);
  text-wrap: pretty;
}
.view-orders .ord-tl-extra { display: inline-flex; align-items: baseline; gap: 5px; margin-top: 2px; }
.view-orders .ord-tl-extra svg { flex: none; transform: translateY(2px); }

/* Tracking under the timeline */
.view-orders .ord-track {
  display: flex; align-items: center; gap: 12px;
  margin-top: 22px; padding-top: 16px;
  box-shadow: inset 0 var(--hairline) 0 var(--sep);
}
.view-orders .ord-track-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.view-orders .ord-track-label { font-size: var(--fs-subhead); line-height: var(--lh-subhead); color: var(--label-2); }
.view-orders .ord-track-num {
  font-size: var(--fs-body); line-height: var(--lh-body); font-weight: var(--w-semibold);
  font-variant-numeric: tabular-nums; letter-spacing: .02em;
  overflow-wrap: anywhere;
  -webkit-user-select: all; user-select: all;
}
.view-orders .ord-copy { flex: none; min-width: 84px; }
.view-orders .ord-copy.is-copied { background: color-mix(in srgb, var(--green) 16%, transparent); color: var(--green-text); }
.view-orders .ord-track.is-empty {
  gap: 10px; color: var(--label-2);
  font-size: var(--fs-subhead); line-height: var(--lh-subhead);
}
.view-orders .ord-track.is-empty svg { flex: none; color: var(--label-3); }

/* ---- Item */
.view-orders .ord-item-row { --thumb: 52px; }
.view-orders .ord-item-row .list-row-main { min-height: 72px; }
.view-orders .ord-item-row .list-row-value { color: var(--label); font-variant-numeric: tabular-nums; }

/* ---- Profit on this order */
.view-orders .ord-profit .card-header { margin-bottom: 6px; }
.view-orders .ord-profit .card-header .info-btn,
.view-orders .ord-profit .card-header > :last-child { margin: -11px -11px -11px 0; }
.view-orders .ord-profit-value {
  display: block;
  font-family: var(--font-rounded);
  font-size: var(--fs-title1); line-height: var(--lh-title1); font-weight: var(--w-bold); letter-spacing: -0.5px;
  font-variant-numeric: tabular-nums;
}
.view-orders .ord-profit-value:not(.t-pos):not(.t-neg) { color: var(--label); }
.view-orders .ord-profit-sub {
  margin-top: 2px;
  font-size: var(--fs-subhead); line-height: var(--lh-subhead); color: var(--label-2);
  text-wrap: pretty;
}
.view-orders .ord-bar {
  display: flex; gap: 2px;
  height: 12px; margin-top: 16px;
  border-radius: 6px; overflow: hidden;
  background: var(--fill-3);
}
.view-orders .ord-bar-seg { flex: 0 1 0; min-width: 3px; background: var(--c); }
.view-orders .ord-lines { list-style: none; margin: 14px 0 -6px; padding: 0; }
.view-orders .ord-line {
  display: grid; grid-template-columns: 9px minmax(0, 1fr) auto; column-gap: 10px; align-items: center;
  min-height: 40px; padding: 9px 0;
  font-size: var(--fs-subhead); line-height: var(--lh-subhead);
}
.view-orders .ord-line + .ord-line { box-shadow: inset 0 var(--hairline) 0 var(--sep); }
.view-orders .ord-line-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--c); }
/* A loss has no bar, so the colour key has nothing to point at. */
.view-orders .ord-lines.no-bar .ord-line { grid-template-columns: minmax(0, 1fr) auto; }
.view-orders .ord-lines.no-bar .ord-line-dot { display: none; }
.view-orders .ord-line-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.view-orders .ord-line-value { font-variant-numeric: tabular-nums; white-space: nowrap; }
.view-orders .ord-line.k-sale .ord-line-value { font-weight: var(--w-medium); }
.view-orders .ord-line.is-total { font-weight: var(--w-semibold); }
.view-orders .ord-line.is-total .ord-line-value:not(.t-pos):not(.t-neg) { color: var(--label); }

/* ---- Details + refund */
.view-orders .ord-details .list-row-subtitle { white-space: normal; text-wrap: pretty; }
.view-orders .ord-delay-row .list-row-leading { align-self: flex-start; margin-top: 12px; }
.view-orders .ord-cj-row .list-row-value { font-variant-numeric: tabular-nums; }
.view-orders .ord-refund .list-row-text { align-items: center; }
.view-orders .ord-refund .list-row-inner { padding-left: 16px; }
.view-orders .ord-refund .list-row-main { justify-content: center; padding-left: 0; }
.view-orders .ord-refund .list-row-main .spinner { position: absolute; right: 16px; }
.view-orders .ord-refund .list-row.is-busy { pointer-events: none; }

.view-orders .ord-notfound { padding-top: 40px; }
.view-orders .list-footer { text-wrap: pretty; }

/* Rail colour for steps not reached yet */
.view-orders { --ord-rail-off: rgba(60, 60, 67, .2); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .view-orders { --ord-rail-off: rgba(235, 235, 245, .22); } }
:root[data-theme="dark"] .view-orders { --ord-rail-off: rgba(235, 235, 245, .22); }

/* ================================================================== FIX SHEET */
.ord-sheet .ord-fix-sheet { padding-top: 6px; }
.ord-sheet .ord-fix-head { display: flex; align-items: flex-start; gap: 14px; padding: 0 4px; }
.ord-sheet .ord-fix-head .icon-tile { border-radius: 11px; }
.ord-sheet .ord-fix-head-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ord-sheet .ord-fix-eyebrow { font-size: var(--fs-subhead); line-height: var(--lh-subhead); color: var(--label-2); }
.ord-sheet .ord-fix-title {
  margin: 0;
  font-size: var(--fs-title3); line-height: var(--lh-title3); font-weight: var(--w-semibold); letter-spacing: var(--ls-title3);
}
.ord-sheet .ord-fix-message { font-size: var(--fs-subhead); line-height: var(--lh-subhead); color: var(--label-2); text-wrap: pretty; }

/* Headings that take focus after a fix (status headline, profit title): a quiet ring, keyboard only. */
.view-orders :is(.ord-headline, .ord-profit .card-title):focus { outline: none; }
.view-orders :is(.ord-headline, .ord-profit .card-title):focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px;
}
.view-orders .ord-headline { width: fit-content; max-width: 100%; }

/* ================================================================== FORCED COLOURS (Windows High Contrast)
   Backgrounds are replaced in forced colours, so the custom rails, dots, bars and badges get system colours. */
@media (forced-colors: active) {
  .view-orders .ord-list { border: 1px solid CanvasText; }
  .view-orders .ord-count { border: 1px solid CanvasText; }
  .view-orders .ord-tl-step:not(:last-child)::before { forced-color-adjust: none; background: CanvasText; }
  .view-orders .ord-tl-step.line-pending::before { background: GrayText; }
  .view-orders .ord-tl-dot { forced-color-adjust: none; background: CanvasText; color: Canvas; }
  .view-orders .ord-tl-dot.is-symbol { background: Canvas; color: CanvasText; --knockout: Canvas; }
  .view-orders .is-current .ord-tl-dot { background: Highlight; box-shadow: 0 0 0 3px Canvas, 0 0 0 5px Highlight; }
  .view-orders .is-pending .ord-tl-dot { background: Canvas; box-shadow: inset 0 0 0 2px GrayText; }
  .view-orders .ord-bar { border: 1px solid CanvasText; }
  .view-orders :is(.ord-bar-seg, .ord-line-dot) { forced-color-adjust: none; }
  .view-orders .ord-line-dot { box-shadow: 0 0 0 1px CanvasText; }
}

/* ================================================================== MESSAGES (#/orders/messages) */

.view-orders .msg-body > .section:first-child { margin-top: 20px; }
.view-orders .msg-recent { margin-top: var(--sp-7); }
.view-orders .msg-recent.is-first { margin-top: 20px; }

/* Monogram avatar (Contacts style). Decorative: the name is always next to it. */
:is(.view-orders, .msg-sheet) .msg-avatar {
  display: grid; place-items: center; flex: none;
  width: 40px; height: 40px; border-radius: 50%;
  background: linear-gradient(180deg, #A6ABB7, #858A96);
  color: #fff;
  font-family: var(--font-rounded); font-size: 17px; line-height: 1; font-weight: var(--w-semibold);
  letter-spacing: 0;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) :is(.view-orders, .msg-sheet) .msg-avatar { background: linear-gradient(180deg, #7C7C82, #5E5E63); }
}
:root[data-theme="dark"] :is(.view-orders, .msg-sheet) .msg-avatar { background: linear-gradient(180deg, #7C7C82, #5E5E63); }
.view-orders .msg-avatar.is-safety { background: color-mix(in srgb, var(--red) 15%, var(--bg-2)); color: var(--red); }

.view-orders .msg-list { list-style: none; margin: 0; padding: 0; background: var(--bg-2); border-radius: var(--r-list); overflow: hidden; }
/* Inside the Needs you card: rows run edge to edge and down to the card's bottom. */
.view-orders .msg-needs-card .card-header { margin-bottom: 4px; }
.view-orders .msg-list.is-in-card { background: transparent; border-radius: 0; margin-bottom: -16px; }
@media (min-width: 768px) { .view-orders .msg-list.is-in-card { margin-bottom: -20px; } }
.view-orders .msg-needs-card { overflow: hidden; }

.view-orders .msg-row { position: relative; }
.view-orders .msg-row + .msg-row::before {
  content: ""; position: absolute; top: 0; right: 0; left: 68px; z-index: 1;
  height: var(--hairline); background: var(--sep);
}
.view-orders .msg-row-link {
  position: relative;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto 8px;
  grid-template-areas:
    "av name    time    chev"
    "av subject subject chev"
    "av preview preview chev"
    "av status  status  chev";
  column-gap: 12px; row-gap: 1px;
  align-items: baseline;
  padding: 12px 14px 13px 16px;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--dur-press) linear;
}
@media (min-width: 768px) {
  .view-orders .msg-list.is-in-card .msg-row-link { padding-left: 20px; padding-right: 18px; }
  .view-orders .msg-list.is-in-card .msg-row + .msg-row::before { left: 72px; }
}
.view-orders .msg-row-link:active { background: var(--row-pressed); }
@media (hover: hover) and (pointer: fine) {
  .view-orders .msg-row-link:hover { background: var(--fill-4); }
  .view-orders .msg-row-link:active { background: var(--row-pressed); }
}
.view-orders .msg-row-link:focus-visible { outline-offset: -3px; border-radius: var(--r-list); }
.view-orders .msg-row-avatar { grid-area: av; align-self: start; margin-top: 1px; }
.view-orders .msg-row-name {
  grid-area: name; min-width: 0;
  font-size: var(--fs-headline); line-height: var(--lh-headline); font-weight: var(--w-semibold); letter-spacing: var(--ls-headline);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.view-orders .msg-row-time {
  grid-area: time; justify-self: end;
  font-size: var(--fs-subhead); line-height: var(--lh-subhead); color: var(--label-2); white-space: nowrap;
}
.view-orders .msg-row-subject {
  grid-area: subject; min-width: 0;
  font-size: var(--fs-subhead); line-height: var(--lh-subhead); color: var(--label);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.view-orders .msg-row-order { color: var(--label-2); font-variant-numeric: tabular-nums; }
.view-orders .msg-row-where { font-weight: var(--w-regular); color: var(--label-2); }
.view-orders .msg-row-preview {
  grid-area: preview; min-width: 0;
  font-size: var(--fs-subhead); line-height: var(--lh-subhead); color: var(--label-2);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  overflow-wrap: anywhere;
}
.view-orders .msg-row-status { grid-area: status; margin-top: 5px; }
.view-orders .msg-row-chev { grid-area: chev; align-self: center; justify-self: end; margin-right: -1px; }
.view-orders .msg-row.is-archived .msg-row-name { font-weight: var(--w-regular); }

/* Where a thread stands: icon or dot + words (never colour alone). */
:is(.view-orders) .msg-status {
  display: flex; align-items: flex-start; gap: 6px; min-width: 0;
  font-size: var(--fs-footnote); line-height: var(--lh-footnote); font-weight: var(--w-medium);
  color: var(--label-2);
}
.view-orders .msg-status svg { flex: none; margin-top: 2.5px; }
.view-orders .msg-status .msg-dot { flex: none; width: 8px; height: 8px; margin-top: 5px; border-radius: 50%; background: currentColor; }
.view-orders .msg-status-text { min-width: 0; display: flex; flex-direction: column; gap: 1px; text-wrap: pretty; }
.view-orders .msg-status-detail { font-weight: var(--w-regular); color: var(--label-2); }
.view-orders .msg-status.is-red { color: var(--red-text); }
.view-orders .msg-status.is-red svg { color: var(--red); }
.view-orders .msg-status.is-orange { color: var(--orange-text); }
.view-orders .msg-status.is-orange .msg-dot { background: var(--orange); }
.view-orders .msg-status.is-secondary { font-weight: var(--w-regular); }
.view-orders .msg-status.is-secondary svg { color: var(--label-3); }
.view-orders .msg-status.accent-indigo svg { color: var(--indigo); }

/* Archived spam: a quiet toggle under the list. */
.view-orders .msg-archived-wrap { margin-top: var(--sp-6); display: flex; flex-direction: column; gap: 12px; }
.view-orders .msg-archived-head { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.view-orders .msg-archived-note { padding: 0 16px; font-size: var(--fs-footnote); line-height: var(--lh-footnote); color: var(--label-2); text-wrap: pretty; }
.view-orders .msg-archived-btn { min-width: 180px; }
.view-orders .msg-footnote {
  margin-top: var(--sp-6); padding: 0 16px;
  font-size: var(--fs-footnote); line-height: var(--lh-footnote); color: var(--label-2);
  text-align: center; text-wrap: pretty;
}
@container orders (min-width: 680px) { .view-orders .msg-footnote { max-width: 560px; margin-inline: auto; } }

/* Wide (Mac Mail): subject and preview share one line, so each thread reads in three short lines. */
@container orders (min-width: 680px) {
  .view-orders .msg-row-link {
    grid-template-columns: 40px auto minmax(0, 1fr) auto 8px;
    grid-template-areas:
      "av name    name    time chev"
      "av subject preview preview chev"
      "av status  status  status chev";
  }
  .view-orders .msg-row-subject { max-width: 320px; }
  .view-orders .msg-row-preview { display: block; -webkit-line-clamp: unset; white-space: nowrap; text-overflow: ellipsis; }
  .view-orders .msg-row-preview::before { content: "\2014\2002"; color: var(--label-3); }
  .view-orders .msg-row + .msg-row::before { left: 68px; }
}

/* Phones: the state goes, so a long suburb ("Noosa Heads") keeps its name whole. */
@container orders (max-width: 399px) { .view-orders .msg-row-state { display: none; } }

/* Narrow phones: a smaller avatar keeps the name room. */
@container orders (max-width: 339px) {
  .view-orders .msg-row-link { grid-template-columns: 34px minmax(0, 1fr) auto 8px; column-gap: 10px; }
  .view-orders .msg-row-link .msg-avatar { width: 34px; height: 34px; font-size: 15px; }
  .view-orders .msg-row + .msg-row::before { left: 60px; }
  .view-orders .msg-row-where { display: none; }
}

/* ================================================================== THREAD (#/orders/messages/:id) */

.view-orders .thr { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; margin-top: var(--sp-2); }
.view-orders .thr-col { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.view-orders .thr-col > .list-section + .list-section { margin-top: 0; }
@container orders (min-width: 760px) {
  .view-orders .thr { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: start; }
  .view-orders .thr-safety { grid-column: 1 / -1; }
  .view-orders .thr.no-side { grid-template-columns: minmax(0, 1fr); max-width: 720px; }
}

/* ---- Where it stands */
.view-orders .thr-state {
  --c: var(--gray); --ct: var(--label);
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 16px; border-radius: var(--r-card);
  background: var(--bg-2);
}
@container orders (min-width: 400px) { .view-orders .thr-state { padding: 16px 20px; } }
.view-orders .thr-state.is-orange { --c: var(--orange); }
.view-orders .thr-state.is-green { --c: var(--green); }
.view-orders .thr-state.is-indigo { --c: var(--indigo); }
.view-orders .thr-state.is-secondary { --c: var(--gray); }
.view-orders .thr-state-icon { flex: none; display: grid; place-items: center; width: 24px; height: 24px; color: var(--c); }
.view-orders .thr-state-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.view-orders .thr-state-title {
  margin: 0; font-size: var(--fs-headline); line-height: var(--lh-headline); font-weight: var(--w-semibold); letter-spacing: var(--ls-headline);
  text-wrap: pretty;
}
.view-orders .thr-state-sub { font-size: var(--fs-subhead); line-height: var(--lh-subhead); color: var(--label-2); text-wrap: pretty; }
.view-orders .thr-state:focus { outline: none; }
.view-orders .thr-state:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---- Conversation */
.view-orders .thr-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.view-orders .thr-msg { padding: 14px 16px 16px; border-radius: var(--r-card); background: var(--bg-2); }
@container orders (min-width: 400px) { .view-orders .thr-msg { padding: 16px 20px 20px; } }
.view-orders .thr-msg:focus { outline: none; }
.view-orders .thr-msg:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.view-orders .thr-msg-head { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; column-gap: 10px; align-items: center; }
.view-orders .thr-avatar { width: 36px; height: 36px; font-size: 16px; align-self: start; margin-top: 2px; }
.view-orders .thr-avatar.is-brand { display: block; border-radius: 0; background: none; }
.view-orders .thr-avatar.is-brand svg { display: block; width: 36px; height: 36px; }
.view-orders .thr-msg-who { min-width: 0; }
.view-orders .thr-msg-name {
  display: flex; align-items: center; flex-wrap: wrap; column-gap: 8px; row-gap: 2px;
  font-size: var(--fs-subhead); line-height: var(--lh-subhead); font-weight: var(--w-semibold);
}
.view-orders .thr-msg-name-text { min-width: 0; overflow-wrap: anywhere; }
.view-orders .thr-msg-to { font-size: var(--fs-footnote); line-height: var(--lh-footnote); color: var(--label-2); }
.view-orders .thr-msg-time {
  align-self: start; padding-top: 1px;
  font-size: var(--fs-footnote); line-height: var(--lh-footnote); color: var(--label-2); white-space: nowrap;
}
.view-orders .thr-msg-body {
  margin-top: 12px; display: flex; flex-direction: column; gap: 12px;
  font-size: var(--fs-body); line-height: 1.45; letter-spacing: var(--ls-body);
  overflow-wrap: break-word;
}
.view-orders .thr-tag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 999px;
  font-size: 12px; line-height: 16px; font-weight: var(--w-semibold); white-space: nowrap;
}
.view-orders .thr-tag.is-autopilot { background: color-mix(in srgb, var(--indigo) 14%, transparent); color: var(--indigo-text); }
.view-orders .thr-tag.is-you { background: color-mix(in srgb, var(--green) 14%, transparent); color: var(--green-text); }
.view-orders .thr-tag.is-draft { background: color-mix(in srgb, var(--orange) 16%, transparent); color: var(--orange-text); }

/* The draft: dashed edge (not sent yet), actions right under the words. */
.view-orders .thr-msg.is-draft {
  background: var(--bg-2);
  box-shadow: none;
  outline: 1.5px dashed color-mix(in srgb, var(--orange) 70%, transparent);
  outline-offset: -1.5px;
}
.view-orders .thr-msg.is-draft:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.view-orders .thr-draft-foot { margin-top: 16px; padding-top: 14px; box-shadow: inset 0 var(--hairline) 0 var(--sep); }
.view-orders .thr-draft-note {
  display: flex; align-items: flex-start; gap: 7px;
  font-size: var(--fs-footnote); line-height: var(--lh-footnote); color: var(--label-2); text-wrap: pretty;
}
.view-orders .thr-draft-note svg { flex: none; margin-top: 1px; color: var(--label-3); }
.view-orders .thr-draft-note.is-warn { color: var(--orange-text); }
.view-orders .thr-draft-note.is-warn svg { color: var(--orange); }
.view-orders .thr-draft-actions { display: flex; gap: 10px; margin-top: 12px; }
.view-orders .thr-send { flex: 1 1 auto; min-width: 0; }
.view-orders .thr-send .btn-label { white-space: normal; text-align: center; }
.view-orders .thr-edit { flex: 0 0 auto; min-width: 96px; }
@container orders (min-width: 520px) { .view-orders .thr-send { flex: 0 0 auto; min-width: 160px; } }
/* "Send and refund $199.90" is long: on a narrow card the two buttons stack, full width. */
@container orders (max-width: 519px) {
  .view-orders .thr-draft-actions.is-wide { flex-direction: column; }
  .view-orders .thr-draft-actions.is-wide .btn { width: 100%; }
}
.view-orders .thr-msg.is-empty { display: flex; flex-direction: column; gap: 4px; }
.view-orders .thr-msg.is-empty .thr-draft-actions { margin-top: 8px; }

.view-orders .thr-system {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 2px 16px;
  font-size: var(--fs-footnote); line-height: var(--lh-footnote); color: var(--label-2); text-align: center;
}
.view-orders .thr-system svg { flex: none; color: var(--label-3); }

/* ---- Linked order */
.view-orders .thr-order .card-header { margin-bottom: 14px; }
.view-orders .thr-order-item { display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 12px; align-items: center; }
.view-orders .thr-order-thumb { --thumb: 52px; }
.view-orders .thr-order-text { min-width: 0; }
.view-orders .thr-order-title {
  font-size: var(--fs-body); line-height: var(--lh-body); letter-spacing: var(--ls-body);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.view-orders .thr-order-sub { font-size: var(--fs-subhead); line-height: var(--lh-subhead); color: var(--label-2); font-variant-numeric: tabular-nums; }
.view-orders .thr-order-headline {
  margin-top: 16px;
  font-size: var(--fs-title3); line-height: var(--lh-title3); font-weight: var(--w-semibold); letter-spacing: var(--ls-title3);
  text-wrap: balance;
}
.view-orders .thr-order-headline.is-green { color: var(--green-text); }
.view-orders .thr-order-headline.is-orange { color: var(--orange-text); }
.view-orders .thr-order-headline.is-gray { color: var(--label-2); }
.view-orders .thr-track {
  display: flex; align-items: center; gap: 12px;
  margin-top: 14px; padding-top: 14px;
  box-shadow: inset 0 var(--hairline) 0 var(--sep);
}
.view-orders .thr-track-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.view-orders .thr-track-label { font-size: var(--fs-footnote); line-height: var(--lh-footnote); color: var(--label-2); }
.view-orders .thr-track-num {
  font-size: var(--fs-subhead); line-height: var(--lh-subhead); font-weight: var(--w-semibold);
  font-variant-numeric: tabular-nums; letter-spacing: .01em; overflow-wrap: anywhere;
  -webkit-user-select: all; user-select: all;
}
.view-orders .thr-track .copy-btn { margin-right: -10px; }
.view-orders .thr-scan {
  display: flex; align-items: flex-start; gap: 7px; margin-top: 10px;
  font-size: var(--fs-footnote); line-height: var(--lh-footnote); color: var(--label-2); text-wrap: pretty;
}
.view-orders .thr-scan svg { flex: none; margin-top: 1px; color: var(--label-3); }
.view-orders .thr-product-thumb { --thumb: 52px; }
.view-orders .thr-product-row .list-row-subtitle { white-space: normal; }
.view-orders .thr-done-row .list-row-title { color: var(--accent-text); }
.view-orders .thr-refunded-note {
  display: flex; align-items: center; justify-content: center; gap: 6px; padding: 0 16px;
  font-size: var(--fs-footnote); line-height: var(--lh-footnote); color: var(--label-2);
}
.view-orders .thr-refunded-note svg { flex: none; color: var(--label-3); }

/* ---- The safety net: a quiet red wash and plain words. What autopilot did, then what you must do (2 days). */
.view-orders .thr-safety {
  background: color-mix(in srgb, var(--red) 6%, var(--bg-2));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--red) 24%, transparent);
}
.view-orders .thr-safety-head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
.view-orders .thr-safety-time { margin-left: auto; }
.view-orders .thr-safety-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-subhead); line-height: var(--lh-subhead); font-weight: var(--w-semibold); color: var(--red-text);
}
.view-orders .thr-safety-badge svg { color: var(--red); }
.view-orders .thr-safety-time { font-size: var(--fs-footnote); line-height: var(--lh-footnote); color: var(--label-2); white-space: nowrap; }
.view-orders .thr-safety-title {
  margin: 8px 0 0; width: fit-content; max-width: 100%;
  font-size: var(--fs-title2); line-height: var(--lh-title2); font-weight: var(--w-bold); letter-spacing: var(--ls-title2);
  text-wrap: balance;
}
.view-orders .thr-safety-title:focus { outline: none; }
.view-orders .thr-safety-title:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.view-orders .thr-safety-lead {
  margin-top: 6px; max-width: 64ch;
  font-size: var(--fs-callout); line-height: var(--lh-callout); color: var(--label-2); text-wrap: pretty;
}
.view-orders .thr-safety-lead.is-urgent { color: var(--red-text); font-weight: var(--w-semibold); }
.view-orders .thr-safety-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: 18px; }
@container orders (min-width: 760px) {
  .view-orders .thr-safety-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: 40px; }
  .view-orders .thr-todo { position: relative; }
  .view-orders .thr-todo::before { content: ""; position: absolute; left: -20px; top: 0; bottom: 0; width: var(--hairline); background: var(--sep); }
}
.view-orders .thr-sub-title {
  margin: 0 0 8px;
  font-size: var(--fs-footnote); line-height: var(--lh-footnote); font-weight: var(--w-semibold);
  color: var(--label-2); text-transform: uppercase; letter-spacing: .02em;
}
.view-orders .thr-did-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.view-orders .thr-did-list li { display: flex; align-items: flex-start; gap: 10px; font-size: var(--fs-subhead); line-height: var(--lh-subhead); text-wrap: pretty; }
.view-orders .thr-did-check {
  flex: none; display: grid; place-items: center;
  width: 20px; height: 20px; margin-top: 0; border-radius: 50%;
  background: var(--green); color: #fff;
}
.view-orders .thr-steps { list-style: none; margin: 0; padding: 0; }
.view-orders .thr-step { display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 12px; padding: 12px 0; }
.view-orders .thr-step:first-child { padding-top: 2px; }
.view-orders .thr-step:last-child { padding-bottom: 0; }
.view-orders .thr-step + .thr-step { box-shadow: inset 0 var(--hairline) 0 var(--sep); }
.view-orders .thr-step-num {
  display: grid; place-items: center;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--label); color: var(--bg-2);
  font-size: 13px; line-height: 1; font-weight: var(--w-bold); font-variant-numeric: tabular-nums;
}
.view-orders .thr-step.is-done .thr-step-num { background: var(--green); color: #fff; }
.view-orders .thr-step-body { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.view-orders .thr-step-title { font-size: var(--fs-callout); line-height: var(--lh-callout); font-weight: var(--w-semibold); text-wrap: pretty; }
.view-orders .thr-step.is-done .thr-step-title { color: var(--label-2); }
.view-orders .thr-step-text { font-size: var(--fs-subhead); line-height: var(--lh-subhead); color: var(--label-2); text-wrap: pretty; }
.view-orders .thr-due {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 6px;
  font-size: var(--fs-subhead); line-height: var(--lh-subhead); font-weight: var(--w-semibold); color: var(--red-text);
}
.view-orders .thr-due svg { flex: none; color: var(--red); }
.view-orders .thr-step-wide { grid-column: 1 / -1; margin-top: 12px; display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
.view-orders .thr-step-wide .btn { width: 100%; max-width: 100%; }
.view-orders .thr-step-wide .btn .btn-label { white-space: normal; text-align: center; }
.view-orders .thr-step.is-done .thr-step-title:focus { outline: none; }
.view-orders .thr-step-title:focus { outline: none; }
.view-orders .thr-step-title:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
@container orders (min-width: 520px) {
  .view-orders .thr-step-wide { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .view-orders .thr-step-wide .btn { width: auto; }
}
@container orders (min-width: 760px) {
  .view-orders .thr-step-wide { grid-column: 2; }
}
.view-orders .thr-step-link {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 4px;
  font-size: var(--fs-subhead); line-height: var(--lh-subhead); color: var(--accent-text); border-radius: 4px;
}
.view-orders .thr-step-link:active { opacity: .5; }
@media (hover: hover) and (pointer: fine) { .view-orders .thr-step-link:hover { text-decoration: underline; text-underline-offset: 3px; } }

/* ---- Edit reply sheet */
.msg-sheet .msg-edit .field-input { min-height: 280px; font-size: var(--fs-body); line-height: 1.45; resize: vertical; }

@media (forced-colors: active) {
  .view-orders .thr-safety { border: 2px solid CanvasText; }
  .view-orders .thr-msg.is-draft { outline: 2px dashed CanvasText; }
  .view-orders :is(.thr-step-num, .thr-did-check, .msg-avatar) { forced-color-adjust: none; background: Canvas; color: CanvasText; border: 1px solid CanvasText; }
  .view-orders .msg-status .msg-dot { forced-color-adjust: none; background: CanvasText; }
}

/* ============================================================== v2: chat beside email (SPEC-v2 §3) */
/* "Chat" / "Email" tag (rows, Support). */
:is(.view-orders) .sup-chan {
  display: inline-flex; align-items: center; gap: 3px; flex: none;
  height: 18px; padding: 0 6px; border-radius: 5px;
  font-size: 11px; line-height: 18px; font-weight: var(--w-semibold); letter-spacing: .01em; white-space: nowrap;
  background: var(--fill-3); color: var(--label-2);
}
:is(.view-orders) .sup-chan.is-chat { background: color-mix(in srgb, var(--indigo) 14%, transparent); color: var(--indigo-text); }
/* In a row the tag leads the subject line, with its word (V010): the name and time keep their room. */
.view-orders .msg-row-chan { margin-right: 6px; vertical-align: 1px; }
:is(.view-orders) .sup-chan .icon { flex: none; }
/* The narrowest phones (320): the tag shrinks to its icon (the row's label still says Chat or Email). */
@container orders (max-width: 319px) {
  .view-orders .msg-row-chan { width: 22px; padding: 0; justify-content: center; gap: 0; margin-right: 5px; }
  .view-orders .msg-row-chan .sup-chan-word { display: none; }
}
.view-orders .msg-avatar.is-visitor svg { display: block; }

/* Who answers shoppers right now → Support. */
.view-orders .msg-coverage-wrap { margin-top: var(--sp-4); }
.view-orders .msg-coverage {
  display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 10px 14px 10px 12px;
  border-radius: var(--r-list); background: var(--bg-2); color: inherit;
  transition: background-color var(--dur-press) linear;
}
.view-orders .msg-coverage:active { background: var(--row-pressed); }
@media (hover: hover) and (pointer: fine) { .view-orders .msg-coverage:hover { background: color-mix(in srgb, var(--bg-2) 94%, var(--label)); } }
.view-orders .msg-coverage:focus-visible { outline-offset: -2px; }
.view-orders .msg-coverage-icon { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: color-mix(in srgb, var(--green) 15%, transparent); color: var(--green); }
html.is-away .view-orders .msg-coverage-icon { background: color-mix(in srgb, var(--indigo) 15%, transparent); color: var(--indigo); }
.view-orders .msg-coverage-text { flex: 1 1 auto; min-width: 0; font-size: var(--fs-subhead); line-height: var(--lh-subhead); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.view-orders .msg-coverage-title { font-weight: var(--w-semibold); }
.view-orders .msg-coverage-sub { color: var(--label-2); }
.view-orders .msg-coverage-go { flex: none; display: inline-flex; align-items: center; gap: 3px; font-size: var(--fs-subhead); line-height: var(--lh-subhead); color: var(--accent-text); }
.view-orders .msg-coverage-go svg { opacity: .7; }
@container orders (max-width: 389px) {
  .view-orders .msg-coverage-sub { display: none; }
}
/* The narrowest phones: "Support ›" so "Covered 24/7" stays whole (the link's label still says Support settings). */
@container orders (max-width: 319px) {
  .view-orders .msg-coverage-go-more { display: none; }
}
.view-orders .msg-coverage-wrap + .section { margin-top: var(--sp-5); }

/* Recent: All | Chat | Email */
.view-orders .msg-recent-head { align-items: center; flex-wrap: wrap; row-gap: 8px; }
.view-orders .msg-recent-head .spacer { flex: 1 1 auto; }
.view-orders .msg-chan-seg { flex: none; min-width: 180px; }
/* Narrow phones: the switch takes its own line under "Recent". */
@container orders (max-width: 359px) {
  .view-orders .msg-recent-head .spacer { display: none; }
  .view-orders .msg-chan-seg { flex: 1 1 100%; min-width: 0; }
}

/* A chat thread: the transcript in a card, your reply (by email) under it. */
.view-orders .thr-state.is-red { --c: var(--red); }
.view-orders .thr-state .thr-timer { margin-top: 10px; }
.view-orders .thr-chat-card { padding: 10px 6px 12px; overflow: hidden; }
@container orders (min-width: 400px) { .view-orders .thr-chat-card { padding: 12px 10px 14px; } }
.view-orders .thr-chat.chat--page { min-height: 0; margin-bottom: 0; }
.view-orders .thr-chat .chat-dock { display: none; }
.view-orders .thr-chat .chat-log { padding-bottom: 0; }
.view-orders .thr-chat-reply { margin-top: 20px; display: flex; flex-direction: column; gap: 8px; }
.view-orders .thr-chat-reply-note { display: flex; align-items: flex-start; gap: 6px; padding: 0 4px; font-size: var(--fs-footnote); line-height: var(--lh-footnote); color: var(--label-2); text-wrap: pretty; }
.view-orders .thr-chat-reply-note svg { flex: none; margin-top: 2px; }

/* Evidence of an auto-refund · a one-off code. Titles carry money: they wrap, never cut off (V009). */
.view-orders :is(.thr-evidence, .thr-code) .card-title { white-space: normal; overflow: visible; text-wrap: balance; }
.view-orders :is(.thr-evidence, .thr-code) .card-heading { align-items: flex-start; }
.view-orders :is(.thr-evidence, .thr-code) .card-heading svg { flex: none; margin-top: 3px; }
.view-orders .thr-ev-lead { font-size: var(--fs-subhead); line-height: var(--lh-subhead); text-wrap: pretty; }
.view-orders .thr-ev-list { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 14px; margin: 12px 0 0; padding: 12px 0 0; box-shadow: inset 0 var(--hairline) 0 var(--sep); }
.view-orders .thr-ev-list dt { font-size: var(--fs-footnote); line-height: var(--lh-footnote); color: var(--label-2); white-space: nowrap; }
.view-orders .thr-ev-list dd { margin: 0; min-width: 0; font-size: var(--fs-footnote); line-height: var(--lh-footnote); overflow-wrap: anywhere; }
.view-orders .thr-ev-note { margin-top: 12px; font-size: var(--fs-footnote); line-height: var(--lh-footnote); color: var(--label-2); text-wrap: pretty; }
.view-orders .thr-code-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.view-orders .thr-code-code { font-family: var(--font-mono); font-size: var(--fs-title3); line-height: var(--lh-title3); font-weight: var(--w-semibold); letter-spacing: .03em; }
.view-orders .thr-code .thr-ev-note { margin-top: 8px; }

@media (forced-colors: active) {
  :is(.view-orders) .sup-chan, .view-orders .msg-coverage { border: 1px solid CanvasText; }
}