/* Stand receipts (receipt privacy, package S): the waiting page and its
   states (waiting, taken, timeout, inactive), the private-receipt page and
   the receipt's share sheet. Load after pages.css (standalone pages) or
   after account.css (the receipt page). Tokens only; no raw hex. */

/* ── One section per state; the script shows one ── */
.rw-status.rs-state[hidden] { display: none; }

/* ── The till: merchant logo, name, branch and till ── */
.rs-merchant { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-1); min-width: 0; }
.rs-merchant__logo {
  width: 44px; height: 44px; flex-shrink: 0; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-lg); border: var(--border-width-thin) solid var(--color-border-primary);
  background: var(--receipt-card-bg); color: var(--color-text-secondary);
}
.rs-merchant__logo img { width: 100%; height: 100%; object-fit: contain; }
.rs-merchant__text { display: flex; flex-direction: column; min-width: 0; }
.rs-merchant__name { font-size: 15px; font-weight: var(--font-bold); overflow-wrap: anywhere; }
.rs-merchant__till { font-size: var(--text-xs); color: var(--color-text-secondary); overflow-wrap: anywhere; }
html[lang="ar"] .rs-en,
html:not([lang="ar"]) .rs-ar { display: none; }

/* ── Status tile in the accent colour (waiting, taken, private) ── */
.rw-tile--status.rs-tile--accent { background: var(--receipt-accent-soft); color: var(--color-accent); }

/* ── Waiting: live dots, time left, three steps ── */
.rs-dots { display: flex; gap: var(--space-2); margin: var(--space-1) 0; }
.rs-dots span { width: 10px; height: 10px; border-radius: var(--radius-full); background: var(--brand-100); animation: rs-dot calc(var(--duration-slower) * 2.4) var(--ease-default) infinite; }
.rs-dots span:nth-child(1) { background: var(--brand-500); }
.rs-dots span:nth-child(2) { background: var(--brand-300); animation-delay: var(--duration-normal); }
.rs-dots span:nth-child(3) { animation-delay: var(--duration-slower); }
@keyframes rs-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.rs-wait { font-size: var(--text-sm); color: var(--color-text-secondary); }
.rs-wait bdi { font-weight: var(--font-bold); color: var(--color-text-primary); }
.rs-steps {
  display: flex; flex-direction: column; gap: var(--space-2);
  margin: 0; padding: var(--space-3_5) var(--space-4); list-style: none;
  border-radius: var(--radius-xl); border: var(--border-width-thin) solid var(--color-border-primary);
  background: var(--receipt-card-bg); font-size: var(--text-sm); line-height: 1.6;
}
.rs-steps li { display: flex; gap: var(--space-2); }
.rs-steps__n { font-weight: var(--font-bold); color: var(--color-accent); }

/* ── Chooser: one row per ready receipt, total and print time only ── */
.rs-choices { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.rs-choice {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--space-3);
  width: 100%; min-height: 64px; padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-xl); border: var(--border-width-thin) solid var(--color-border-primary);
  background: var(--receipt-card-bg); color: var(--color-text-primary);
  font: inherit; text-align: start; cursor: pointer;
}
.rs-choice:hover { border-color: var(--color-accent); }
.rs-choice__total { grid-column: 1; font-size: var(--text-lg); font-weight: var(--font-bold); }
.rs-choice__time,
.rs-choice__taken { grid-column: 1; font-size: 13px; color: var(--color-text-secondary); }
.rs-choice > .r-icon { grid-column: 2; grid-row: 1 / span 3; color: var(--color-accent); }
.rs-choice[disabled] { cursor: default; background: var(--color-bg-tertiary); }
.rs-choice[disabled] > .r-icon { display: none; }
.rs-choice__taken:not([hidden]) { font-weight: var(--font-medium); color: var(--color-error); }
/* A row whose total has not been read yet: words instead of a 0.00 that would mislead. */
.rs-choice__total--unread { font-size: var(--text-base); font-weight: var(--font-medium); color: var(--color-text-secondary); }
/* The tapped row opens: tinted, with a spinner; the rows around it wait, faded. */
.rs-choice.is-opening { border-color: var(--color-accent); background: var(--receipt-accent-soft); }
.rs-choice.is-opening[disabled] { background: var(--receipt-accent-soft); }
.rs-choice.is-opening > .r-icon { display: none; }
.rs-choice__spin { grid-column: 2; grid-row: 1 / span 3; }
.rs-choice__spin[hidden] { display: none; }
.rs-choice[disabled]:not(.is-opening) .rs-choice__total,
.rs-choice[disabled]:not(.is-opening) .rs-choice__time { opacity: 0.6; }

/* ── Actions and hints ── */
.rs-actions { display: flex; flex-direction: column; gap: var(--space-2_5); margin-top: var(--space-2); }
.rs-actions .btn { text-decoration: none; }
.rs-hint[hidden] { display: none; } /* author display:flex beats the UA [hidden] rule */
.rs-hint { display: flex; align-items: flex-start; gap: var(--space-2); font-size: var(--text-sm); line-height: 1.6; color: var(--color-text-secondary); }
.rs-hint .r-icon { width: 18px; height: 18px; margin-top: 2px; color: var(--color-accent); }

/* ── Trust line, pinned to the bottom ── */
.rs-trust { display: flex; align-items: center; justify-content: center; gap: var(--space-2); margin-top: auto; font-size: var(--text-xs); color: var(--color-text-secondary); }
.rs-trust .r-icon { width: 16px; height: 16px; color: var(--color-success); }

@media (prefers-reduced-motion: reduce) {
  .rs-dots span { animation: none; }
}

/* ── Receipt page: the share pill beside Download PDF, and the share sheet ── */
.receipt-page .rx-topbar .rs-share-btn { margin-inline-end: auto; }
.rs-share-btn .r-icon { color: var(--color-accent); }
.rs-sheet .r-h2 { font-size: 22px; }
.rs-sheet__lead { margin: 0; font-size: var(--text-sm); line-height: 1.6; color: var(--color-text-secondary); }
.rs-sheet__head { display: flex; flex-direction: column; gap: var(--space-1); }
.rs-link {
  display: flex; align-items: center; gap: var(--space-2); min-width: 0; height: 52px;
  padding-inline: var(--space-3_5) var(--space-1); border-radius: var(--radius-lg);
  border: var(--border-width-thin) solid var(--color-border-primary); background: var(--color-bg-primary);
}
.rs-link input {
  flex-grow: 1; min-width: 0; border: 0; padding: 0; background: transparent;
  font: inherit; font-size: var(--text-sm); color: var(--color-text-secondary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rs-link .r-chip { min-height: var(--receipt-tap); padding: 0 var(--space-3); border-color: var(--color-accent); color: var(--color-accent); font-weight: var(--font-bold); font-size: var(--text-sm); }
.rs-sheet .btn-lg { gap: var(--space-2); }
.r-sheet-backdrop[hidden] { display: none; }
.rs-state .rw-title:focus { outline: none; }

/* Earlier receipts on a claimed receipt (receipt_claims.history, _includes/earlier-receipts.html).
   Built like the receipt's own cards: r-card surface and radius, r-h2 heading, a muted count subline, then compact
   rows (doc tile, day over time · branch, the total in the page's currency rendering, a chevron). Every colour is a
   page token, so a white-label merchant's background, text and accent apply as they do to the receipt. */
.rh { display: flex; flex-direction: column; gap: var(--receipt-gap); }
.rh[hidden], .rh [hidden] { display: none; }
.rh__card { gap: var(--space-2); }
.rh__head { display: flex; flex-direction: column; gap: var(--space-0_5); }
.rh__sub { margin: 0; font-size: var(--text-sm); color: var(--color-text-secondary); }
.rh__list { list-style: none; margin: 0; padding: 0; }
.rh__list > li + li { border-top: var(--border-width-thin) solid var(--receipt-divider); }
.rh__row {
  display: flex; align-items: center; gap: var(--space-3);
  min-height: 60px; padding: var(--space-2_5) var(--space-2); margin-inline: calc(var(--space-2) * -1);
  border-radius: var(--radius-lg); color: inherit; text-decoration: none;
  transition: background-color var(--duration-fast) var(--ease-default);
}
.rh__row:hover, .rh__row:focus { color: inherit; text-decoration: none; }
.rh__row:hover { background: var(--color-bg-secondary); }
.rh__row:focus-visible { outline: 2px solid var(--color-border-focus); outline-offset: -2px; }
.rh__tile {
  width: 36px; height: 36px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-lg); background: var(--receipt-accent-soft); color: var(--color-accent);
}
.rh__tile .r-icon { width: 18px; height: 18px; }
.rh__text { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.rh__day { font-size: 15px; font-weight: var(--font-bold); line-height: 1.35; }
.rh__meta { font-size: 13px; line-height: 1.4; color: var(--color-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rh__amount { flex-shrink: 0; font-size: 15px; font-weight: var(--font-bold); white-space: nowrap; }
.rh__amount--none { flex-shrink: 1; max-width: 9.5rem; font-size: 13px; font-weight: var(--font-medium); color: var(--color-text-secondary); white-space: normal; text-align: end; line-height: 1.35; }
.rh__chev { display: inline-flex; flex-shrink: 0; color: var(--color-text-secondary); }
.rh__more {
  display: flex; align-items: center; justify-content: center; gap: var(--space-2);
  width: 100%; min-height: var(--receipt-tap); padding: var(--space-1) 0 0;
  border: 0; border-top: var(--border-width-thin) solid var(--receipt-divider); background: none;
  font: inherit; font-size: var(--text-sm); font-weight: var(--font-medium); color: var(--color-text-link); cursor: pointer;
}
.rh__more:disabled { cursor: progress; opacity: 0.7; }
.rh__more:focus-visible { outline: 2px solid var(--color-border-focus); outline-offset: 2px; border-radius: var(--radius-md); }
[data-accent] .rh__tile,
[data-accent] .rh__more { color: var(--color-accent-ink); }
@media (prefers-reduced-motion: reduce) { .rh__row { transition: none; } }

/* The floating back-to-top button (rx-totop, 44 px at 16 px from the bottom) never covers the last content: the page
   ends with room for it, safe area included. */
.receipt-page #container { padding-bottom: calc(var(--space-8) + var(--receipt-tap) + env(safe-area-inset-bottom, 0px)); }