/* Parcel — Support (SPEC-v2 §3, §4): #/support, #/support/try, #/support/track, plus the pieces Settings and Messages share
   (Away mode, urgent alerts, the promise timer, the channel tag). Owned by the support screen builder. Pages are scoped under
   .view-support (the router adds it on top of .view-orders); shared pieces also under .view-settings / .view-orders; sheets
   (outside the view) under .sup-sheet. Tokens only: light and dark follow. */

/* ============================================================== page */
.view-support .sup-page { max-width: 760px; margin-inline: auto; padding-top: var(--sp-2); }
.view-support .sup-empty { padding-top: var(--sp-6); }
.view-support .sup-foot {
  margin: var(--sp-7) auto 0; max-width: 560px; padding: 0 16px;
  font-size: var(--fs-footnote); line-height: var(--lh-footnote); color: var(--label-2);
  text-align: center; text-wrap: pretty;
}
.view-support .sup-card-aside { flex: none; font-size: var(--fs-footnote); line-height: var(--lh-footnote); color: var(--label-2); white-space: nowrap; }
.view-support .sup-card-note {
  margin-top: 12px;
  font-size: var(--fs-footnote); line-height: var(--lh-footnote); color: var(--label-2); text-wrap: pretty;
}
.view-support .sup-none-line { margin: 12px 0 0; font-size: var(--fs-subhead); line-height: var(--lh-subhead); color: var(--label-2); }

/* ---- Covered 24/7 */
.view-support .sup-hero.is-padded { padding: 20px; }
@media (min-width: 768px) { .view-support .sup-hero.is-padded { padding: 24px; } }
.view-support .sup-hero-top { display: flex; align-items: center; gap: 14px; }
.view-support .sup-hero-seal {
  flex: none; display: grid; place-items: center;
  width: 52px; height: 52px; border-radius: 50%;
  background: color-mix(in srgb, var(--green) 15%, transparent); color: var(--green);
}
.view-support .sup-hero-head { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
/* Narrow phones (320): the seal is decoration; the words get the width, so "Covered 24/7" keeps the Sample pill beside it. */
@media (max-width: 359px) { .view-support .sup-hero-seal { display: none; } }
.view-support .sup-hero-titlerow { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; min-width: 0; }
.view-support .sup-hero-sample { flex: none; }
.view-support .sup-hero-title {
  font-family: var(--font-rounded);
  font-size: var(--fs-title1); line-height: var(--lh-title1); font-weight: var(--w-bold); letter-spacing: var(--ls-title1);
}
.view-support .sup-hero-sub {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px;
  font-size: var(--fs-subhead); line-height: var(--lh-subhead); color: var(--label-2);
}
.view-support .sup-hero-text {
  margin-top: 14px; max-width: 62ch;
  font-size: var(--fs-callout); line-height: var(--lh-callout); color: var(--label); text-wrap: pretty;
}
.view-support .sup-hero-live {
  display: flex; align-items: flex-start; gap: 6px; margin-top: 8px; max-width: 62ch;
  font-size: var(--fs-footnote); line-height: var(--lh-footnote); color: var(--label-2); text-wrap: pretty;
}
.view-support .sup-hero-live svg { flex: none; margin-top: 1.5px; color: var(--label-3); }
.view-support .sup-facts {
  display: grid; grid-template-columns: minmax(0, 1fr);
  margin: 16px 0 0; padding: 0; list-style: none;
  border-radius: 14px; background: var(--fill-4); overflow: hidden;
}
.view-support .sup-fact {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 10px 14px;
  font-size: var(--fs-subhead); line-height: var(--lh-subhead);
}
.view-support .sup-fact + .sup-fact { box-shadow: inset 0 var(--hairline) 0 var(--sep); }
.view-support .sup-fact-k { flex: none; font-weight: var(--w-semibold); }
.view-support .sup-fact-v { color: var(--label-2); text-align: right; text-wrap: pretty; }
@container orders (min-width: 520px) {
  .view-support .sup-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .view-support .sup-fact { flex-direction: column; justify-content: flex-start; gap: 2px; padding: 12px 14px 13px; }
  .view-support .sup-fact + .sup-fact { box-shadow: inset var(--hairline) 0 0 var(--sep); }
  .view-support .sup-fact-v { text-align: left; }
}
.view-support .sup-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 20px; }
.view-support .sup-try-btn { min-width: 220px; }
.view-support .sup-hero-link {
  position: relative; display: inline-flex; align-items: center; gap: 3px;
  font-size: var(--fs-subhead); line-height: var(--lh-subhead); color: var(--accent-text);
}
.view-support .sup-hero-link:active { opacity: .5; }
@media (hover: hover) and (pointer: fine) { .view-support .sup-hero-link:hover { text-decoration: underline; } }
@container orders (max-width: 459px) {
  .view-support .sup-try-btn { width: 100%; }
  .view-support .sup-hero-actions { justify-content: center; }
}

/* ---- Waiting for your reply (+ the promise timer, also on chat threads) */
.view-support .sup-waiting .card-header { margin-bottom: 4px; }
.view-support .sup-wait-list { list-style: none; margin-top: 0; margin-bottom: 0; padding: 0; }
.view-support .sup-wait { position: relative; padding: 0 16px 14px; }
@media (min-width: 768px) { .view-support .sup-wait { padding: 0 20px 16px; } }
.view-support .sup-wait + .sup-wait { padding-top: 4px; }
.view-support .sup-wait + .sup-wait::before { content: ""; position: absolute; top: 0; left: 68px; right: 0; height: var(--hairline); background: var(--sep); }
.view-support .sup-wait-link {
  display: grid; grid-template-columns: 40px minmax(0, 1fr) 16px; align-items: center; column-gap: 12px;
  min-height: 56px; margin: 0 -8px; padding: 6px 8px; border-radius: 12px; color: inherit;
  transition: background-color var(--dur-press) linear;
}
.view-support .sup-wait-link:active { background: var(--row-pressed); }
@media (hover: hover) and (pointer: fine) { .view-support .sup-wait-link:hover { background: var(--fill-4); } }
.view-support .sup-wait-link:focus-visible { outline-offset: -2px; }
.view-support .sup-wait-text { min-width: 0; display: flex; flex-direction: column; }
.view-support .sup-wait-name { font-size: var(--fs-headline); line-height: var(--lh-headline); font-weight: var(--w-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.view-support .sup-wait-chan { font-weight: var(--w-regular); color: var(--label-2); }
.view-support .sup-wait-subject { font-size: var(--fs-subhead); line-height: var(--lh-subhead); color: var(--label-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.view-support .sup-wait .sup-timer { margin: 6px 0 0 52px; }
.view-support .sup-waiting .sup-card-note { margin-top: 4px; }

:is(.view-orders) .sup-timer { display: flex; flex-direction: column; gap: 6px; min-width: 0; --c: var(--orange); --ct: var(--orange-text); }
:is(.view-orders) .sup-timer.is-red { --c: var(--red); --ct: var(--red-text); }
/* The title keeps its line; when the time left doesn't fit beside it, it drops under, on the right (no 3-line titles at 320). */
:is(.view-orders) .sup-timer-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; }
:is(.view-orders) .sup-timer-title {
  display: inline-flex; align-items: flex-start; gap: 5px; min-width: 0;
  font-size: var(--fs-footnote); line-height: var(--lh-footnote); font-weight: var(--w-semibold); color: var(--ct);
}
:is(.view-orders) .sup-timer-title svg { flex: none; margin-top: 1.5px; color: var(--c); }
:is(.view-orders) .sup-timer-left { flex: none; margin-left: auto; font-size: var(--fs-footnote); line-height: var(--lh-footnote); color: var(--label-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
:is(.view-orders) .sup-timer-bar { position: relative; height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--c) 16%, var(--fill-4)); }
:is(.view-orders) .sup-timer-fill { position: absolute; inset: 0 auto 0 0; border-radius: 3px; background: var(--c); }
:is(.view-orders) .sup-timer-tick {
  position: absolute; top: -3px; width: 2px; height: 12px; margin-left: -1px; border-radius: 1px;
  background: var(--label-2); box-shadow: 0 0 0 1.5px var(--bg-2);
}
:is(.view-orders) .sup-timer-detail { font-size: var(--fs-footnote); line-height: var(--lh-footnote); color: var(--label-2); text-wrap: pretty; }

/* ---- A row that belongs to the row above it (Away › Dates, Notifications › Mobile number): on the text inset, like iOS. */
:is(.view-support, .view-settings) .sup-sub-row .list-row-inner { padding-left: 61px; }
:is(.view-support, .view-settings) .sup-sub-row[hidden] { display: none; }

/* ---- Away mode (Support and Settings) */
:is(.view-support, .view-settings) .sup-away .sup-away-when { display: block; }
:is(.view-support, .view-settings) .sup-away .sup-away-summary .list-row-subtitle,
:is(.view-support, .view-settings) .sup-away .sup-away-switch .list-row-subtitle { white-space: normal; text-wrap: pretty; }
:is(.view-support, .view-settings) .sup-away .sup-away-dates .list-row-value { text-align: right; text-wrap: balance; max-width: 66%; }

/* ---- Urgent alerts (Support and Settings) */
:is(.view-support, .view-settings) .sup-ch-title { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px 7px; min-width: 0; max-width: 100%; }
:is(.view-support, .view-settings) .sup-ch-title .set-mchip { flex: none; }
/* Never cut "Push notifications" short: on narrow phones the M4 chip goes under the words instead (V009). */
:is(.view-support, .view-settings) .sup-ch-row .list-row-title { white-space: normal; overflow: visible; }
:is(.view-support, .view-settings) .sup-alerts .list-footer .info-btn { vertical-align: middle; margin: -10px -9px -8px -6px; }
.view-support .sup-alerts-row .list-row-subtitle { white-space: normal; text-wrap: pretty; }
:is(.view-support, .view-settings) .sup-alerts .sup-phone-row .list-row-value { font-variant-numeric: tabular-nums; }
.view-support .sup-alerts-wrap .list-section + .list-section { margin-top: var(--sp-6); }
.view-support .sup-alert-row .list-row-title.is-multiline { font-size: var(--fs-subhead); line-height: var(--lh-subhead); }
.view-support .sup-alert-row .list-row-subtitle { white-space: normal; text-wrap: pretty; }
.view-support .sup-recent .msg-row-chan { display: none; }

/* ---- Conversations */
.view-support .sup-numbers .section-header { align-items: center; flex-wrap: wrap; row-gap: 8px; }
.view-support .sup-range { flex: none; min-width: 168px; }
@container orders (max-width: 339px) { .view-support .sup-range { flex: 1 1 100%; min-width: 0; } }
.view-support .sup-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@container orders (min-width: 640px) { .view-support .sup-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.view-support .sup-tiles .stat-sub { text-wrap: pretty; }
.view-support .sup-numbers-line { margin-top: 10px; padding: 0 4px; font-size: var(--fs-footnote); line-height: var(--lh-footnote); color: var(--label-2); text-wrap: pretty; }
.view-support .sup-numbers-line[hidden] { display: none; }
.view-support .sup-none { padding-block: 8px; }

/* ---- Refunds while away (with evidence) */
.view-support .sup-big { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.view-support .sup-big-num { font-family: var(--font-rounded); font-size: var(--fs-title1); line-height: var(--lh-title1); font-weight: var(--w-bold); letter-spacing: var(--ls-title1); }
.view-support .sup-big-sub { font-size: var(--fs-subhead); line-height: var(--lh-subhead); color: var(--label-2); }
.view-support :is(.sup-ev-list, .sup-code-list) { list-style: none; margin-top: 12px; margin-bottom: 0; padding: 0; box-shadow: inset 0 var(--hairline) 0 var(--sep); }
.view-support :is(.sup-ev, .sup-code) { position: relative; }
.view-support .sup-ev + .sup-ev::before,
.view-support .sup-code + .sup-code::before { content: ""; position: absolute; top: 0; right: 0; left: 60px; height: var(--hairline); background: var(--sep); }
.view-support .sup-code + .sup-code::before { left: 16px; }
@media (min-width: 768px) { .view-support .sup-ev + .sup-ev::before { left: 64px; } .view-support .sup-code + .sup-code::before { left: 20px; } }
.view-support :is(.sup-ev-link, .sup-code-link) {
  display: grid; grid-template-columns: 29px minmax(0, 1fr) 16px; align-items: start; column-gap: 15px;
  padding: 12px 16px; color: inherit;
  transition: background-color var(--dur-press) linear;
}
.view-support .sup-code-link { grid-template-columns: minmax(0, 1fr) 16px; }
/* Narrow phones (320): the kind's tile goes (its words say it: "Lost in transit: …"), so "#1001 · Harper" and its amount share a line. */
@media (max-width: 359px) {
  .view-support .sup-ev-link { grid-template-columns: minmax(0, 1fr) 16px; }
  .view-support .sup-ev-link > .icon-tile { display: none; }
  .view-support .sup-ev + .sup-ev::before { left: 16px; }
}
@media (min-width: 768px) { .view-support :is(.sup-ev-link, .sup-code-link) { padding-inline: 20px; } }
.view-support :is(.sup-ev-link, .sup-code-link):active { background: var(--row-pressed); }
@media (hover: hover) and (pointer: fine) { .view-support :is(.sup-ev-link, .sup-code-link):hover { background: var(--fill-4); } }
.view-support :is(.sup-ev-link, .sup-code-link):focus-visible { outline-offset: -3px; }
.view-support .sup-ev-link .icon-tile { margin-top: 2px; }
.view-support :is(.sup-ev-chev, .sup-code-chev) { align-self: center; }
.view-support :is(.sup-ev-text, .sup-code-text) { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.view-support :is(.sup-ev-head, .sup-code-head) { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.view-support .sup-ev-title { min-width: 0; font-size: var(--fs-body); line-height: var(--lh-body); font-weight: var(--w-semibold); overflow-wrap: anywhere; text-wrap: pretty; }
.view-support .sup-ev-head { align-items: flex-start; }
/* Card titles beside an aside ("Refunds while away · Last 30 days") wrap rather than cut off on narrow phones (V009). */
.view-support :is(.sup-refunds, .sup-codes) .card-title { white-space: normal; overflow: visible; text-wrap: balance; }
.view-support :is(.sup-refunds, .sup-codes) .card-header { align-items: flex-start; }
.view-support :is(.sup-refunds, .sup-codes) .card-heading { align-items: flex-start; }
.view-support :is(.sup-refunds, .sup-codes) .card-heading svg { flex: none; margin-top: 3px; }
.view-support :is(.sup-refunds, .sup-codes) .sup-card-aside { padding-top: 2px; }
.view-support :is(.sup-ev-amount, .sup-code-amount) { flex: none; font-size: var(--fs-body); line-height: var(--lh-body); font-weight: var(--w-semibold); font-variant-numeric: tabular-nums; }
.view-support :is(.sup-ev-why, .sup-code-why) { font-size: var(--fs-subhead); line-height: var(--lh-subhead); color: var(--label); text-wrap: pretty; }
.view-support .sup-ev-proof { display: flex; align-items: flex-start; gap: 5px; margin-top: 2px; font-size: var(--fs-footnote); line-height: var(--lh-footnote); color: var(--label-2); overflow-wrap: anywhere; }
.view-support .sup-ev-proof svg { flex: none; margin-top: 2px; color: var(--green); }
.view-support :is(.sup-ev-when, .sup-code-when) { margin-top: 2px; font-size: var(--fs-footnote); line-height: var(--lh-footnote); color: var(--label-2); }

/* ---- One-off codes */
.view-support .sup-codes .meter[data-tone="pink"] { --meter: var(--pink); }
.view-support .sup-code-code { font-family: var(--font-mono); font-size: var(--fs-callout); line-height: var(--lh-callout); font-weight: var(--w-semibold); letter-spacing: .02em; }

/* ---- Rules: sentences with tappable numbers */
.view-support .sup-rules .card-header { margin-bottom: 2px; }
.view-support .sup-rules-lede { font-size: var(--fs-subhead); line-height: var(--lh-subhead); color: var(--label-2); }
.view-support .sup-rule-list { list-style: none; margin: 8px 0 0; padding: 0; }
.view-support .sup-rule { position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 11px 0; }
.view-support .sup-rule + .sup-rule::before { content: ""; position: absolute; top: 0; right: 0; left: 41px; height: var(--hairline); background: var(--sep); }
.view-support .sup-rule .icon-tile { flex: none; margin-top: 1px; }
.view-support .sup-rule-text { min-width: 0; font-size: var(--fs-body); line-height: 28px; letter-spacing: var(--ls-body); text-wrap: pretty; overflow-wrap: break-word; }
.view-support .sup-glue { white-space: nowrap; }
/* The chip and the punctuation after it read as one: no margin between them (V016). */
:is(.view-support, .sup-sheet) .sup-glue > .sup-token { margin-right: 0; }
:is(.view-support, .sup-sheet) .sup-token {
  position: relative; display: inline-block; margin: 0 1px; padding: 0 7px; border-radius: 7px;
  line-height: 25px; background: var(--accent-tint); color: var(--accent-text);
  font-weight: var(--w-semibold); font-variant-numeric: tabular-nums; white-space: nowrap; vertical-align: baseline;
  transition: transform var(--dur-press) var(--ease), opacity var(--dur-press) linear, background-color var(--dur-fast) linear;
}
.view-support button.sup-token { cursor: pointer; }
.view-support button.sup-token::before { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; }
.view-support button.sup-token::after { content: ""; position: absolute; z-index: 1; inset: min(0px, calc(50% - var(--hit) / 2)) min(-4px, calc(50% - var(--hit) / 2)); }
.view-support button.sup-token:active { transform: scale(.93); opacity: .7; }
.view-support button.sup-token:focus-visible { outline-offset: 1px; }
@media (hover: hover) and (pointer: fine) { .view-support button.sup-token:hover { background: var(--accent-tint-hover); } }
.view-support .sup-token.is-flash { animation: sup-token-flash 1.2s var(--ease-out); }
@keyframes sup-token-flash {
  0% { transform: scale(1.12); background: var(--accent); color: #fff; }
  25% { transform: none; background: var(--accent); color: #fff; }
  100% { background: var(--accent-tint); color: var(--accent-text); }
}
.view-support .sup-locked { margin-top: 12px; padding: 12px 14px 13px; border-radius: 14px; background: var(--fill-4); }
.view-support .sup-locked-title { display: flex; align-items: center; gap: 6px; font-size: var(--fs-footnote); line-height: var(--lh-footnote); font-weight: var(--w-semibold); color: var(--label-2); }
.view-support .sup-locked-list { margin: 6px 0 0; padding: 0 0 0 18px; list-style: disc; font-size: var(--fs-footnote); line-height: var(--lh-footnote); color: var(--label-2); }
.view-support .sup-locked-list li + li { margin-top: 3px; }
.view-support .sup-locked-list li::marker { color: var(--label-3); }

/* ============================================================== sheets (overlay root) */
.sup-sheet .sup-sheet-body { padding-top: 8px; }
.sup-sheet .list-section + .list-section { margin-top: var(--sp-6); }
.sup-sheet .list-footer { text-wrap: pretty; }
.sup-sheet .sup-error { color: var(--red-text); }
.sup-sheet .sup-error[hidden] { display: none; }
.sup-sheet .sup-dt-row { min-height: 52px; cursor: default; }
.sup-sheet .sup-dt {
  min-height: 36px; max-width: 100%; padding: 6px 10px; border: 0; border-radius: 8px;
  background: var(--fill-3); color: var(--label);
  font: inherit; font-size: var(--fs-subhead); font-variant-numeric: tabular-nums;
}
.sup-sheet .sup-dt:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.sup-sheet .sup-phone-body { padding-top: 12px; }
/* The number sheet (the same look as Autopilot's) */
.sup-sheet .sup-ps { display: flex; flex-direction: column; padding: 4px 0 8px; }
.sup-sheet .sup-ps-preview { padding: 14px 16px; border-radius: 14px; background: var(--bg-2); }
.sup-sheet .sup-ps-sentence { font-size: var(--fs-body); line-height: 28px; letter-spacing: var(--ls-body); color: var(--label-2); text-wrap: pretty; }
.sup-sheet .sup-token.is-static { background: var(--fill-3); color: var(--label-2); font-weight: var(--w-medium); }
.sup-sheet .sup-token.is-current { background: var(--accent-tint); color: var(--accent-text); font-weight: var(--w-semibold); }
.sup-sheet .sup-ps-value { display: flex; align-items: baseline; justify-content: center; gap: 8px; margin-top: 28px; }
.sup-sheet .sup-ps-num { display: inline-block; font-family: var(--font-rounded); font-size: 60px; line-height: 64px; font-weight: var(--w-bold); letter-spacing: -1.4px; font-variant-numeric: tabular-nums; }
.sup-sheet .sup-ps-unit { font-size: var(--fs-title3); line-height: var(--lh-title3); font-weight: var(--w-semibold); color: var(--label-2); }
.sup-sheet .sup-ps-unit[hidden] { display: none; }
.sup-sheet .sup-ps-stepper { display: flex; justify-content: center; margin-top: 14px; }
.sup-sheet .sup-ps-stepper .stepper-control { height: 44px; border-radius: 12px; }
.sup-sheet .sup-ps-stepper .stepper-btn { width: 76px; height: 44px; border-radius: 12px; }
.sup-sheet .sup-ps-stepper .stepper-btn svg { width: 22px; height: 22px; }
.sup-sheet .sup-ps-stepper .stepper-sep { height: 22px; }
.sup-sheet .sup-ps-range { margin-top: 10px; text-align: center; font-size: var(--fs-footnote); line-height: var(--lh-footnote); color: var(--label-2); }
.sup-sheet .sup-ps-hint { margin: 22px auto 0; max-width: 420px; text-align: center; font-size: var(--fs-subhead); line-height: var(--lh-subhead); color: var(--label-2); text-wrap: pretty; }
.sup-sheet .sup-ps-hint[hidden] { display: none; }

/* ============================================================== Try your assistant */
.view-support .sup-try { min-width: 0; }
.view-support .sup-try-avatar { display: block; width: 28px; height: 28px; }
.view-support .sup-try-avatar svg { width: 100%; height: 100%; }
.view-support .sup-try-intro {
  display: flex; flex-direction: column; gap: 12px;
  margin: 6px 0 4px; padding: 14px 16px 0;
  border-radius: 16px; background: var(--bg-2); overflow: hidden;
}
@media (min-width: 1024px) { .view-support .sup-try-intro { display: none; } }
.view-support .sup-try-lede { font-size: var(--fs-subhead); line-height: var(--lh-subhead); color: var(--label-2); text-wrap: pretty; }
.view-support .sup-try-lede strong { color: var(--label); font-weight: var(--w-semibold); }
.view-support .sup-try-away { display: flex; flex-direction: column; gap: 6px; }
.view-support .sup-try-label { font-size: var(--fs-footnote); line-height: var(--lh-footnote); font-weight: var(--w-semibold); color: var(--label-2); }
.view-support .sup-try-away .segmented { width: 100%; }
.view-support .sup-try-awayline { font-size: var(--fs-footnote); line-height: var(--lh-footnote); color: var(--label-2); text-wrap: pretty; }
.view-support .sup-try-awayline .info-btn { vertical-align: middle; margin: -10px -9px -8px -4px; }
.view-support .sup-try-more {
  display: flex; align-items: center; gap: 8px; min-height: 48px; margin: 0 -16px; padding: 0 16px;
  box-shadow: inset 0 var(--hairline) 0 var(--sep);
  color: var(--accent-text); font-size: var(--fs-body); line-height: var(--lh-body); text-align: left;
  transition: background-color var(--dur-press) linear;
}
.view-support .sup-try-more span { flex: 1 1 auto; }
.view-support .sup-try-more svg:last-child { color: var(--label-3); }
.view-support .sup-try-more:active { background: var(--row-pressed); }
.view-support .sup-try-more:focus-visible { outline-offset: -3px; }

:is(.view-support, .sup-try-sheet) .sup-try-group { display: flex; flex-direction: column; gap: 8px; }
:is(.view-support, .sup-try-sheet) .sup-try-h {
  padding: 0 4px;
  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;
}
:is(.view-support, .sup-try-sheet) .sup-try-note { padding: 0 4px; font-size: var(--fs-footnote); line-height: var(--lh-footnote); color: var(--label-2); text-wrap: pretty; }
:is(.view-support, .sup-try-sheet) .sup-try-orders { list-style: none; margin: 0; padding: 0; border-radius: var(--r-list); background: var(--bg-2); overflow: hidden; }
:is(.view-support, .sup-try-sheet) .sup-try-orders li { position: relative; }
:is(.view-support, .sup-try-sheet) .sup-try-orders li + li::before { content: ""; position: absolute; top: 0; right: 0; left: 16px; height: var(--hairline); background: var(--sep); }
:is(.view-support, .sup-try-sheet) .sup-try-order {
  display: flex; flex-direction: column; gap: 1px; width: 100%; min-height: 52px; padding: 9px 16px 10px;
  text-align: left; color: inherit; transition: background-color var(--dur-press) linear;
}
:is(.view-support, .sup-try-sheet) .sup-try-order:active { background: var(--row-pressed); }
@media (hover: hover) and (pointer: fine) { :is(.view-support, .sup-try-sheet) .sup-try-order:hover { background: var(--fill-4); } }
:is(.view-support, .sup-try-sheet) .sup-try-order:focus-visible { outline-offset: -3px; }
:is(.view-support, .sup-try-sheet) .sup-try-order-top { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
:is(.view-support, .sup-try-sheet) .sup-try-order-num { flex: none; font-size: var(--fs-body); line-height: var(--lh-body); font-weight: var(--w-semibold); font-variant-numeric: tabular-nums; color: var(--accent-text); }
:is(.view-support, .sup-try-sheet) .sup-try-order-label { min-width: 0; font-size: var(--fs-subhead); line-height: var(--lh-subhead); color: var(--label); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:is(.view-support, .sup-try-sheet) .sup-try-order-email { font-size: var(--fs-footnote); line-height: var(--lh-footnote); color: var(--label-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:is(.view-support, .sup-try-sheet) .sup-try-qs { display: flex; flex-wrap: wrap; gap: 8px; }
:is(.view-support, .sup-try-sheet) .sup-try-q {
  position: relative; display: inline-flex; align-items: center; min-height: 34px; padding: 6px 14px; border-radius: 17px;
  background: var(--bg-2); color: var(--accent-text);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 38%, transparent);
  font-size: 15px; line-height: 20px; font-weight: var(--w-medium); letter-spacing: -0.15px; text-align: left;
  transition: background-color var(--dur-fast) linear, opacity var(--dur-press) linear;
}
:is(.view-support, .sup-try-sheet) .sup-try-q::after { content: ""; position: absolute; inset: min(0px, calc(50% - var(--hit) / 2)) 0; }
:is(.view-support, .sup-try-sheet) .sup-try-q:active { opacity: .55; }
@media (hover: hover) and (pointer: fine) { :is(.view-support, .sup-try-sheet) .sup-try-q:hover { background: var(--accent-tint); } }
:is(.view-support, .sup-try-sheet) .sup-try-sit {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 46px; padding: 0 16px;
  text-align: left; color: inherit; transition: background-color var(--dur-press) linear;
}
:is(.view-support, .sup-try-sheet) .sup-try-sit:active { background: var(--row-pressed); }
@media (hover: hover) and (pointer: fine) { :is(.view-support, .sup-try-sheet) .sup-try-sit:hover { background: var(--fill-4); } }
:is(.view-support, .sup-try-sheet) .sup-try-sit:focus-visible { outline-offset: -3px; }
:is(.view-support, .sup-try-sheet) .sup-try-sit-k { flex: none; width: 76px; font-size: var(--fs-footnote); line-height: var(--lh-footnote); font-weight: var(--w-semibold); color: var(--label-2); }
:is(.view-support, .sup-try-sheet) .sup-try-sit-v { min-width: 0; flex: 1 1 auto; padding-block: 11px; font-size: var(--fs-subhead); line-height: var(--lh-subhead); color: var(--accent-text); }
.sup-try-sheet .sup-try-lists { display: flex; flex-direction: column; gap: 24px; padding-bottom: 8px; }

.view-support .sup-try-panel { display: none; }
@media (min-width: 1024px) {
  .view-support .sup-try { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 40px; align-items: start; }
  .view-support .sup-try .sup-chat .chat-dock { margin-inline: 0; padding-inline: 0; }
  .view-support .sup-try-panel {
    position: sticky; top: calc(var(--navbar-h) + var(--safe-top) + 8px);
    display: flex; flex-direction: column; gap: 20px;
    max-height: calc(100dvh - var(--navbar-h) - var(--safe-top) - 16px); overflow-y: auto; overscroll-behavior: contain;
    scrollbar-width: thin; margin-right: -8px; padding: 8px 8px 24px 0;
  }
  .view-support .sup-try-title { font-size: var(--fs-title3); line-height: var(--lh-title3); font-weight: var(--w-bold); letter-spacing: var(--ls-title3); margin-bottom: -14px; }
  .view-support .sup-try-panel .sup-try-order { min-height: 48px; padding-block: 7px 8px; }
  .view-support .sup-try-panel { margin-bottom: calc(-1 * var(--sp-10)); }
  .view-support .sup-try-panel .sup-try-sit { min-height: 44px; }
  .view-support .sup-try-panel .sup-try-sit-v { padding-block: 10px; }
}

/* ============================================================== the tracking page, previewed */
.view-support .sup-track { padding-top: var(--sp-2); }
.view-support .sup-track-lede { max-width: 62ch; margin: var(--sp-2) 0 var(--sp-5); padding: 0 4px; font-size: var(--fs-subhead); line-height: var(--lh-subhead); color: var(--label-2); text-wrap: pretty; }
.view-support .sup-track-grid { display: flex; flex-direction: column; gap: var(--sp-6); min-width: 0; }
.view-support .sup-track-side { display: flex; flex-direction: column; gap: var(--sp-5); min-width: 0; }
.view-support .sup-track-side .sup-foot { margin: 0; padding: 0 4px; text-align: left; max-width: none; }
.view-support .sup-track-frame { min-width: 0; }
.view-support .sup-track-device { --device-max: 430px; }
.view-support .sup-track-device .tp-s[hidden] { display: none; }
.view-support .sup-track-more {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: 44px; margin-top: 10px;
  font-size: var(--fs-subhead); line-height: var(--lh-subhead); color: var(--accent-text); text-align: center; text-wrap: balance;
}
.view-support .sup-track-more svg { flex: none; }
.view-support .sup-track-more:active { opacity: .5; }
@media (hover: hover) and (pointer: fine) { .view-support .sup-track-more:hover span { text-decoration: underline; } }
@container orders (min-width: 740px) {
  .view-support .sup-track-grid {
    display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
    grid-template-areas: "frame samples" "frame side"; grid-template-rows: auto 1fr;
    column-gap: 40px; row-gap: var(--sp-5); align-items: start;
  }
  .view-support .sup-samples { grid-area: samples; }
  .view-support .sup-track-frame { grid-area: frame; }
  .view-support .sup-track-side { grid-area: side; position: sticky; top: calc(var(--navbar-h) + var(--safe-top) + 12px); }
}
/* On a phone the page fills the width with a Safari address bar: no phone inside the phone. */
@container orders (max-width: 559px) {
  .view-support .sup-track-device { --device-max: none; }
  .view-support .sup-track-device .device-frame { padding: 0; border-radius: 18px; background: none; box-shadow: 0 0 0 var(--hairline) var(--sep), 0 6px 24px rgba(0, 0, 0, .08); }
  .view-support .sup-track-device .device-screen { border-radius: 18px; }
  .view-support .sup-track-device .device-status { display: none; }
  .view-support .sup-track-device .device-urlbar { padding-top: calc(var(--u) * 10); }
}

.view-support .sup-samples { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.view-support .sup-samples-title { padding: 0 4px; font-size: var(--fs-headline); line-height: var(--lh-headline); font-weight: var(--w-semibold); }
.view-support .sup-samples-none { padding: 0 4px; font-size: var(--fs-subhead); line-height: var(--lh-subhead); color: var(--label-2); text-wrap: pretty; }
.view-support .sup-samples-list {
  list-style: none; margin: 0 calc(-1 * var(--gutter)); padding: 2px var(--gutter) 6px;
  display: flex; gap: 10px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
  scroll-snap-type: x proximity; scroll-padding-inline: var(--gutter);
}
.view-support .sup-samples-list::-webkit-scrollbar { display: none; }
.view-support .sup-samples-list > li { flex: none; scroll-snap-align: start; }
.view-support .sup-sample {
  display: flex; flex-direction: column; gap: 2px; width: 196px; min-height: 60px; padding: 10px 14px 11px;
  border-radius: 14px; background: var(--bg-2); color: inherit; text-align: left;
  transition: background-color var(--dur-press) linear, transform var(--dur-press) var(--ease);
}
.view-support .sup-sample:active { transform: scale(.97); background: var(--row-pressed); }
@media (hover: hover) and (pointer: fine) { .view-support .sup-sample:hover { background: color-mix(in srgb, var(--bg-2) 94%, var(--label)); } }
.view-support .sup-sample-top { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.view-support .sup-sample-num { flex: none; font-size: var(--fs-headline); line-height: var(--lh-headline); font-weight: var(--w-semibold); font-variant-numeric: tabular-nums; color: var(--accent-text); }
.view-support .sup-sample-label { min-width: 0; font-size: var(--fs-subhead); line-height: var(--lh-subhead); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.view-support .sup-sample.is-wrong .sup-sample-label { color: var(--orange-text); }
.view-support .sup-sample-email { font-size: var(--fs-footnote); line-height: var(--lh-footnote); color: var(--label-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@container orders (min-width: 740px) {
  .view-support .sup-samples-list { margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; overflow: visible; }
  .view-support .sup-sample { width: 100%; min-height: 56px; padding-block: 8px 9px; }
}
@container orders (min-width: 980px) {
  .view-support .sup-track-grid { grid-template-columns: minmax(0, 430px) minmax(0, 1fr); }
  .view-support .sup-samples-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}
.view-support .sup-bts .card-header { margin-bottom: 8px; }
.view-support .sup-bts-body { display: flex; flex-direction: column; gap: 10px; }
.view-support .sup-bts-p { font-size: var(--fs-subhead); line-height: var(--lh-subhead); color: var(--label); text-wrap: pretty; }
.view-support .sup-bts-p.is-hint { font-size: var(--fs-footnote); line-height: var(--lh-footnote); color: var(--label-2); }
.view-support .sup-bts-outcome { display: flex; align-items: center; gap: 6px; font-size: var(--fs-headline); line-height: var(--lh-headline); font-weight: var(--w-semibold); }
.view-support .sup-bts-outcome svg { color: var(--indigo); }
.view-support .sup-bts-away { display: flex; flex-direction: column; gap: 6px; }
.view-support .sup-bts-link { position: relative; display: inline-flex; align-items: center; gap: 2px; color: var(--accent-text); font-weight: var(--w-medium); white-space: nowrap; }
.view-support .sup-bts-link::after { content: ""; position: absolute; inset: min(0px, calc(50% - var(--hit) / 2)) -4px; }
.view-support .sup-bts-link:active { opacity: .5; }
@media (hover: hover) and (pointer: fine) { .view-support .sup-bts-link:hover { text-decoration: underline; } }
.view-support .sup-bts-label { font-size: var(--fs-footnote); line-height: var(--lh-footnote); font-weight: var(--w-semibold); color: var(--label-2); }
.view-support .sup-bts-away .segmented { width: 100%; max-width: 320px; }

/* Inside the store's page (the theme's own classes, scoped under .tp-root): real controls need real sizes. */
.view-support .sup-track .tp-root .tp-input { min-height: max(44px, calc(var(--u) * 50)); font-size: max(16px, calc(var(--u) * 16)); }
.view-support .sup-track .tp-root .tp-btn { min-height: max(44px, calc(var(--u) * 50)); }
.view-support .sup-track .tp-root .tp-btn--small { min-height: 44px; }
.view-support .sup-track .tp-root .tp-btn:active { transform: scale(.98); }
.view-support .sup-track .tp-root :is(input, button, a):focus-visible { outline: 2px solid #0A84FF; outline-offset: 2px; }
.view-support .sup-track .tp-root [tabindex="-1"]:focus { outline: none; }
.view-support .sup-track .tp-root .sup-tr-submit.is-busy { opacity: .6; cursor: progress; }
.view-support .sup-track .tp-root .sup-tr-error { color: #B3261E; }
.view-support .sup-track .tp-root .sup-tr-error[hidden] { display: none; }
.view-support .sup-track .tp-root .sup-tr-out:empty { display: none; }
.view-support .sup-track .tp-root .sup-tr-out { display: grid; gap: calc(var(--u) * 14); }
.view-support .sup-track .tp-root .sup-tr-eta { display: grid; gap: calc(var(--u) * 2); }
.view-support .sup-track .tp-root .sup-tr-carrier { display: grid; gap: calc(var(--u) * 2); }
.view-support .sup-track .tp-root .sup-tr-return { display: grid; gap: calc(var(--u) * 10); padding-top: calc(var(--u) * 4); }
.view-support .sup-track .tp-root .sup-tr-return[hidden] { display: none; }
.view-support .sup-track .tp-root .sup-tr-reasons { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 8); }
/* The latest step tracking has confirmed: a soft ring on its filled dot (the next step stays an empty circle, V081). */
.view-support .sup-track .tp-root .tp-tl.is-latest .tp-tl__dot { box-shadow: 0 0 0 calc(var(--u) * 4) color-mix(in srgb, var(--s-accent) 22%, transparent); }

@media (forced-colors: active) {
  :is(.view-orders) .sup-timer-bar { border: 1px solid CanvasText; }
  :is(.view-orders) .sup-timer-fill { forced-color-adjust: none; background: Highlight; }
  .view-support button.sup-token, .sup-sheet .sup-token.is-current, .view-support .sup-try-q, .view-support .sup-sample, .view-support .sup-try-order { border: 1px solid ButtonText; }
  .view-support .sup-facts, .view-support .sup-locked, .view-support .sup-try-intro { border: 1px solid CanvasText; }
}
@media (prefers-reduced-motion: reduce) {
  .view-support .sup-token.is-flash { animation: none; }
  .view-support .sup-sample:active, .view-support button.sup-token:active { transform: none; }
}