/* Customer confirmation: status first, practical next steps, a quiet receipt. */
.customer-tracking main.container.page { padding-top: var(--space-6); }
.tracking-shell { min-width: 0; }
.tracking-layout { display: grid; grid-template-columns: minmax(0, 1fr) clamp(22rem, 24vw, 25rem); gap: var(--space-6); align-items: start; }
.tracking-main { min-width: 0; display: flex; flex-direction: column; gap: var(--space-5); }
.tracking-hero, .tracking-fulfillment, .tracking-receipt, .tracking-details { min-width: 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); overflow: hidden; }
.tracking-hero { background: linear-gradient(130deg, var(--brand-tint), var(--card) 65%); }
.tracking-restaurant { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-5) var(--space-6); border-bottom: 1px solid color-mix(in srgb, var(--line) 75%, transparent); font-size: var(--text-sm); color: var(--muted); }
.tracking-restaurant > img { flex: none; width: 2.25rem; height: 2.25rem; border-radius: var(--r-md); object-fit: contain; border: 1px solid var(--line); background: var(--card); }
.tracking-restaurant-placeholder { display: grid; place-items: center; flex: none; width: 2.25rem; height: 2.25rem; border-radius: var(--r-md); background: var(--card); border: 1px solid var(--line); color: var(--ink-soft); }
.tracking-restaurant > span:not(.tracking-mode):not(.tracking-restaurant-placeholder) { flex: 1; min-width: 0; }
.tracking-restaurant strong { display: block; font-weight: var(--fw-semibold); color: var(--ink); overflow-wrap: anywhere; }
.tracking-mode { display: flex; align-items: center; gap: var(--space-1); flex: none; padding: var(--space-2) var(--space-3); border-radius: var(--pill); background: var(--card); color: var(--ink-soft); border: 1px solid var(--line); font-size: var(--text-xs); }
.tracking-hero-body { display: flex; align-items: flex-start; gap: var(--space-5); padding: var(--space-6); }
.tracking-status-icon { flex: none; display: grid; place-items: center; width: 4.5rem; height: 4.5rem; background: var(--brand); color: var(--brand-contrast); border-radius: 50%; box-shadow: 0 0 0 var(--space-2) color-mix(in srgb, var(--brand) 8%, transparent); }
.tracking-status-copy { min-width: 0; }
.tracking-status-copy h1 { margin: 0 0 var(--space-3); font-size: clamp(1.65rem, 2.6vw, 2.25rem); font-weight: var(--fw-bold); line-height: 1.17; letter-spacing: -.035em; text-wrap: balance; }
.tracking-status-note { color: var(--ink-soft); font-size: var(--text-base); line-height: 1.6; margin: 0; max-width: 34rem; }
.tracking-next-note { color: var(--muted); font-size: var(--text-sm); line-height: 1.5; margin: var(--space-3) 0 0; }
.tracking-hero.is-cancelled { background: var(--card); }
.tracking-hero.is-cancelled .tracking-status-icon { color: var(--danger); background: var(--danger-tint); box-shadow: none; }
.tracking-hero.is-payment .tracking-status-icon { color: var(--ink); background: var(--warn-tint); box-shadow: none; }
.tracking-hero.is-complete { background: linear-gradient(130deg, var(--ok-tint), var(--card) 65%); }
.tracking-hero.is-complete .tracking-status-icon { color: var(--ok); background: var(--ok-tint); box-shadow: 0 0 0 var(--space-2) var(--card); }
.tracking-eta { display: flex; align-items: center; gap: var(--space-4); margin: 0 var(--space-6) var(--space-5); padding: var(--space-4) var(--space-5); border: 1px solid var(--line); border-radius: var(--r); background: var(--card); }
.tracking-eta-icon { color: var(--brand-dark); flex: none; }
.tracking-eta > div { flex: 1; min-width: 0; }
.tracking-eta > div > span { display: block; color: var(--muted); font-size: var(--text-xs); margin-bottom: var(--space-1); }
.tracking-eta time { display: block; font-weight: var(--fw-bold); font-size: var(--text-2xl); line-height: 1.2; font-variant-numeric: var(--num); letter-spacing: -.025em; }
.tracking-eta > p { margin: 0; flex: 0 1 9rem; font-size: var(--text-xs); line-height: 1.5; color: var(--muted); }
.tracking-payment-action { padding: 0 var(--space-6) var(--space-5); }
.tracking-payment-action p, .tracking-refund-note { color: var(--ink-soft); font-size: var(--text-sm); line-height: 1.6; }
.tracking-refund-note { margin: 0 var(--space-6) var(--space-5); padding: var(--space-4); border-radius: var(--r-md); background: var(--tint-row); border: 1px solid var(--line); }
.tracking-progress { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; padding: 0; margin: 0; }
.tracking-progress-desktop { padding: var(--space-3) var(--space-6) var(--space-5); }
.tracking-step { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 0; color: var(--muted); }
.tracking-step::before { position: absolute; content: ''; top: 1.1rem; inset-inline: calc(-50% + 1.1rem) calc(50% + 1.1rem); height: 2px; background: var(--line); }
.tracking-step:first-child::before { display: none; }
.tracking-step.is-reached::before { background: var(--brand); }
.tracking-step-marker { position: relative; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border: 1px solid var(--line-strong); background: var(--card); border-radius: 50%; color: var(--muted); }
.tracking-step.is-reached .tracking-step-marker { border-color: var(--brand); color: var(--brand-dark); background: var(--brand-tint); }
.tracking-step.is-current .tracking-step-marker, .tracking-step.is-complete .tracking-step-marker { color: var(--brand-contrast); background: var(--brand); }
.tracking-step.is-current .tracking-step-marker { box-shadow: 0 0 0 var(--space-1) var(--brand-tint); }
.tracking-hero.is-complete .tracking-step.is-reached::before, .tracking-hero.is-complete .tracking-step-marker { background: var(--ok); border-color: var(--ok); }
.tracking-hero.is-complete .tracking-step.is-current .tracking-step-marker { box-shadow: 0 0 0 var(--space-1) var(--ok-tint); }
.tracking-step-label { margin-top: var(--space-3); padding-inline: var(--space-1); font-size: var(--text-xs); line-height: 1.4; }
.tracking-step.is-reached .tracking-step-label { color: var(--ink-soft); font-weight: var(--fw-semibold); }
.tracking-step-time { color: var(--muted); font-size: var(--text-xs); margin-top: var(--space-1); font-variant-numeric: var(--num); }
.tracking-progress-mobile { display: none; }
.tracking-live-note { display: flex; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-4); margin: 0; border-top: 1px solid var(--line); font-size: var(--text-xs); color: var(--muted); background: var(--card); }
.tracking-section-title, .tracking-receipt-heading { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-5); }
.tracking-section-icon { display: grid; place-items: center; flex: none; width: 2.5rem; height: 2.5rem; border-radius: var(--r); background: var(--tint-row); color: var(--ink-soft); }
.tracking-section-title h2, .tracking-receipt-heading h2 { margin: 0; font-size: var(--text-lg); letter-spacing: -.015em; }
.tracking-fulfillment-body { padding: 0 var(--space-5) var(--space-5); }
.tracking-address { color: var(--ink-soft); font-size: var(--text-sm); line-height: 1.6; }
.tracking-address > strong { color: var(--ink); font-size: var(--text-base); }
.tracking-address p { margin: var(--space-1) 0 0; }
.tracking-map-link { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--brand-dark); font-weight: var(--fw-semibold); min-height: 2.75rem; margin-top: var(--space-2); }
.tracking-address .tracking-requested { margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--line); }
.tracking-requested span { display: block; color: var(--muted); font-size: var(--text-xs); }
.tracking-requested strong { display: block; font-weight: var(--fw-semibold); }
.tracking-contact { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--line); }
.tracking-contact p { margin: 0; color: var(--muted); font-size: var(--text-sm); }
.tracking-contact .btn { min-height: 2.75rem; font-size: var(--text-sm); }
.tracking-receipt-heading { border-bottom: 1px solid var(--line); }
.tracking-receipt-heading p { margin: var(--space-1) 0 0; color: var(--muted); font-size: var(--text-sm); overflow-wrap: anywhere; }
.tracking-receipt-lines { padding-inline: var(--space-5); }
.tracking-receipt-line { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-3); align-items: start; padding-block: var(--space-5); font-size: var(--text-sm); line-height: 1.5; }
.tracking-receipt-line + .tracking-receipt-line { border-top: 1px solid var(--line); }
.tracking-line-quantity { color: var(--brand-dark); font-weight: var(--fw-semibold); font-variant-numeric: var(--num); }
.tracking-line-description strong { font-weight: var(--fw-semibold); color: var(--ink); overflow-wrap: anywhere; }
.tracking-line-description p { margin: var(--space-1) 0 0; color: var(--muted); font-size: var(--text-xs); }
.tracking-line-price { color: var(--ink); font-weight: var(--fw-semibold); white-space: nowrap; font-variant-numeric: var(--num); }
.tracking-totals { border-top: 1px solid var(--line); padding: var(--space-5); background: var(--tint-row); }
.tracking-totals > div { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-2); font-size: var(--text-sm); color: var(--muted); }
.tracking-totals > div > :last-child { font-variant-numeric: var(--num); white-space: nowrap; }
.tracking-totals .tracking-total { border-top: 1px solid var(--line); padding-top: var(--space-4); margin-top: var(--space-4); font-size: var(--text-xl); color: var(--ink); }
.tracking-tax-note { margin: var(--space-1) 0 0; text-align: right; font-size: var(--text-xs); color: var(--muted); }
.tracking-payment-summary { display: flex; align-items: flex-start; gap: var(--space-2); padding: var(--space-4) var(--space-5); border-top: 1px solid var(--line); color: var(--ink-soft); font-size: var(--text-sm); line-height: 1.5; }
.tracking-payment-summary > .ico { margin-top: .1rem; flex: none; }
.tracking-payment-summary.is-paid { color: var(--ok); }
.tracking-details > summary, .tracking-progress-mobile > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-5); list-style: none; cursor: pointer; font-size: var(--text-sm); font-weight: var(--fw-semibold); }
.tracking-details > summary::-webkit-details-marker, .tracking-progress-mobile > summary::-webkit-details-marker { display: none; }
.tracking-details > summary > span, .tracking-progress-mobile > summary > span { display: inline-flex; align-items: center; gap: var(--space-2); }
.tracking-details > summary > .ico, .tracking-progress-mobile > summary > .ico { flex: none; color: var(--muted); transition: transform var(--t); }
.tracking-details[open] > summary > .ico, .tracking-progress-mobile[open] > summary > .ico { transform: rotate(180deg); }
.tracking-details-body { border-top: 1px solid var(--line); padding: var(--space-5); }
.tracking-reference > label { display: block; font-size: var(--text-sm); font-weight: var(--fw-semibold); margin-bottom: var(--space-2); }
.tracking-reference textarea { min-height: 0; height: auto; resize: none; font-family: var(--font-mono); font-size: var(--text-sm); line-height: 1.6; overflow-wrap: anywhere; background: var(--tint-row); padding: var(--space-3); margin-bottom: var(--space-3); }
.tracking-reference .help:empty { display: none; }
.tracking-metadata { margin: var(--space-5) 0 0; padding-top: var(--space-4); border-top: 1px solid var(--line); }
.tracking-metadata > div { display: grid; grid-template-columns: minmax(6rem, .6fr) minmax(0, 1fr); gap: var(--space-4); margin-top: var(--space-3); font-size: var(--text-sm); line-height: 1.5; }
.tracking-metadata > div:first-child { margin-top: 0; }
.tracking-metadata dt { color: var(--muted); }
.tracking-metadata dd { margin: 0; color: var(--ink-soft); overflow-wrap: anywhere; }
.tracking-account { display: flex; align-items: center; gap: var(--space-4); margin-top: var(--space-6); padding: var(--space-5); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); }
.tracking-account > span { display: grid; place-items: center; flex: none; width: 2.75rem; height: 2.75rem; border-radius: var(--r); color: var(--ink-soft); background: var(--tint-row); }
.tracking-account > div { flex: 1; min-width: 0; font-size: var(--text-sm); }
.tracking-account strong { font-weight: var(--fw-semibold); }
.tracking-account p { margin: var(--space-1) 0 0; color: var(--muted); line-height: 1.5; }
.tracking-account .btn { flex: none; }
.tracking-back { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 2.75rem; margin-top: var(--space-5); color: var(--ink-soft); font-size: var(--text-sm); font-weight: var(--fw-semibold); }
@media (min-width: 90rem) {
    .tracking-main { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); align-items: start; }
    .tracking-main > .tracking-hero { grid-column: 1 / -1; }
    .tracking-main > .tracking-fulfillment, .tracking-main > .tracking-details { grid-column: auto; }
    .tracking-contact { align-items: flex-start; }
    .tracking-contact .btn { width: 100%; }
}
@media (min-width: 100rem) {
    .tracking-hero:has(.tracking-eta) { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; align-items: start; }
    .tracking-hero:has(.tracking-eta) > * { grid-column: 1 / -1; }
    .tracking-hero:has(.tracking-eta) > .tracking-hero-body { grid-column: 1; grid-row: 2; }
    .tracking-hero:has(.tracking-eta) > .tracking-eta { grid-column: 2; grid-row: 2; align-self: center; flex-wrap: wrap; margin: var(--space-5) var(--space-6) var(--space-5) 0; }
    .tracking-hero:has(.tracking-eta) .tracking-eta > p { flex-basis: 100%; }
}
@media (max-width: 64rem) {
    .tracking-layout { grid-template-columns: minmax(0, 1.4fr) minmax(18rem, 1fr); gap: var(--space-5); }
    .tracking-hero-body { gap: var(--space-4); }
    .tracking-status-icon { width: 3.5rem; height: 3.5rem; }
    .tracking-status-icon > .ico { width: 1.75rem; height: 1.75rem; }
    .tracking-restaurant, .tracking-hero-body { padding: var(--space-5); }
    .tracking-progress-desktop { padding-inline: var(--space-4); }
    .tracking-eta { margin-inline: var(--space-5); flex-wrap: wrap; }
    .tracking-eta > p { flex-basis: 100%; }
}
@media (max-width: 50rem) {
    .customer-tracking main.container.page { padding-top: var(--space-5); }
    .tracking-layout { display: flex; flex-direction: column; gap: var(--space-4); }
    .tracking-main { display: contents; }
    .tracking-hero { order: 1; width: 100%; }
    .tracking-fulfillment { order: 2; width: 100%; }
    .tracking-receipt { order: 3; width: 100%; }
    .tracking-details { order: 4; width: 100%; }
    .tracking-hero-body { display: block; padding: var(--space-5); }
    .tracking-status-icon { width: 3.25rem; height: 3.25rem; margin-bottom: var(--space-5); }
    .tracking-status-copy h1 { max-width: 23rem; font-size: clamp(1.6rem, 6.7vw, 2rem); margin-bottom: var(--space-3); }
    .tracking-status-note { font-size: var(--text-sm); line-height: 1.6; }
    .tracking-next-note { font-size: var(--text-xs); margin-top: var(--space-2); }
    .tracking-restaurant { padding: var(--space-4) var(--space-5); }
    .tracking-mode { padding: var(--space-2); }
    .tracking-progress-desktop { display: none; }
    .tracking-progress-mobile { display: block; margin: 0 var(--space-5) var(--space-5); border: 1px solid var(--line); border-radius: var(--r); background: var(--card); }
    .tracking-progress-mobile > summary { min-height: 2.75rem; padding: var(--space-3) var(--space-4); font-size: var(--text-xs); }
    .tracking-progress-mobile .tracking-progress { display: flex; flex-direction: column; padding: 0 var(--space-4) var(--space-3); }
    .tracking-progress-mobile .tracking-step { display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); text-align: left; min-height: 3.25rem; }
    .tracking-progress-mobile .tracking-step::before { top: -1.65rem; bottom: calc(50% + 1rem); left: 1rem; right: auto; width: 2px; height: auto; }
    .tracking-progress-mobile .tracking-step-marker { width: 2rem; height: 2rem; }
    .tracking-progress-mobile .tracking-step-marker .ico { width: 1rem; height: 1rem; }
    .tracking-progress-mobile .tracking-step-label, .tracking-progress-mobile .tracking-step-time { margin: 0; padding: 0; }
    .tracking-progress-mobile .tracking-step.is-current .tracking-step-marker { box-shadow: none; }
    .tracking-eta { padding: var(--space-4); margin: 0 var(--space-5) var(--space-5); gap: var(--space-3); }
    .tracking-eta time { font-size: var(--text-2xl); }
    .tracking-eta > p { flex-basis: auto; max-width: 8rem; }
    .tracking-payment-action { padding-inline: var(--space-5); }
    .tracking-payment-action .btn { width: 100%; }
    .tracking-live-note { padding: var(--space-3); }
    .tracking-contact { margin-top: var(--space-4); }
    .tracking-contact .btn { width: 100%; }
    .tracking-account { flex-wrap: wrap; padding: var(--space-4); margin-top: var(--space-5); gap: var(--space-3); }
    .tracking-account > div { flex-basis: calc(100% - 4rem); }
    .tracking-account .btn { width: 100%; }
}
@media (max-width: 23rem) {
    .tracking-restaurant, .tracking-hero-body, .tracking-section-title, .tracking-receipt-heading, .tracking-totals, .tracking-details-body { padding: var(--space-4); }
    .tracking-restaurant { gap: var(--space-2); }
    .tracking-restaurant > img, .tracking-restaurant-placeholder { width: 2rem; height: 2rem; }
    .tracking-mode { font-size: var(--text-xs); }
    .tracking-mode .ico { display: none; }
    .tracking-progress-mobile { margin-inline: var(--space-4); }
    .tracking-eta { margin-inline: var(--space-4); }
    .tracking-eta > p { flex-basis: 100%; max-width: none; }
    .tracking-receipt-lines, .tracking-fulfillment-body { padding-inline: var(--space-4); }
    .tracking-receipt-line { gap: var(--space-2); }
    .tracking-line-price { font-size: var(--text-xs); }
    .tracking-metadata > div { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); }
}