/* HPAY welcome claim: event screen. Cream/ink/red, square, mobile first. Reuses the cq-* slip from hpayInvoices.css. */
.wl-page .cq-hero { padding-bottom: 28px; }
.wl-grid { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); }
.wl-count { display: flex; align-items: baseline; gap: 12px; margin: 18px 0 8px; flex-wrap: wrap; }
.wl-count strong { font: 500 clamp(72px, 22vw, 128px)/.9 var(--display); letter-spacing: -.07em; color: var(--hp-red); font-variant-numeric: tabular-nums; }
.wl-count span { font: 400 14px/1.3 var(--mono); color: var(--hp-quiet); letter-spacing: .02em; }
.wl-bar { height: 10px; border: 1px solid var(--hp-ink); background: var(--hp-paper); }
.wl-bar span { display: block; height: 100%; width: 0; background: var(--hp-ink); transition: width .4s ease; }
.wl-ends { font: 400 11px/1.6 var(--mono); color: var(--hp-quiet); margin: 8px 0 0; }
.hpay-workspace .wl-card h2 { margin-top: 20px; font-size: clamp(34px, 9vw, 48px); }
.wl-big { min-height: 64px; font-size: 18px; font-weight: 600; }
.wl-status { min-height: 3.4em; font-size: 14px; color: var(--hp-ink); }
.wl-card[data-state="error"] .wl-status, .wl-card[data-state="not-new"] .wl-status { color: var(--hp-red); font-weight: 600; }
.wl-card[data-state="received"] .wl-status { color: var(--ok); font-weight: 600; }
.wl-card[data-state="received"] { border-top-color: var(--ok); }
.wl-card[data-state="signing"] .wl-status, .wl-card[data-state="submitting"] .wl-status, .wl-card[data-state="pending"] .wl-status { font-weight: 600; }
.wl-card[data-state="not-open"] .wl-count strong, .wl-card[data-state="over"] .wl-count strong, .wl-card[data-state="full"] .wl-count strong { color: var(--hp-quiet); }
.wl-help { margin-top: 12px; }
.wl-help .wl-blip { display: flex; align-items: center; justify-content: center; width: 100%; text-decoration: none; }
.wl-alt { display: block; margin-top: 10px; font-size: 13px; }
.wl-desktop { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--hp-line); font-size: 13px; line-height: 1.5; }
.wl-desktop p { margin: 0; flex: 1 1 220px; }
.wl-desktop .wl-link { flex: 1 1 100%; font: 400 12px/1.4 var(--mono); }
.wl-help-note { margin: 14px 0 0; font-size: 12px; line-height: 1.7; color: var(--hp-quiet); }
.wl-name { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--hp-line); }
.hpay-workspace .wl-name h3 { font: 500 24px/1.15 var(--display); letter-spacing: -.04em; margin: 0 0 6px; }
.wl-name-note { margin: 0 0 12px; font-size: 13px; line-height: 1.6; color: var(--hp-quiet); }
.wl-name-label { display: block; font: 400 11px/1.6 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--hp-quiet); margin-bottom: 4px; }
.wl-name-field { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.wl-name-field span { font: 500 22px/1 var(--display); color: var(--hp-red); }
.wl-name-field input { flex: 1; min-width: 0; font-size: 18px; }
.wl-name-status { min-height: 2.6em; margin: 0 0 10px; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.wl-send { display: flex; align-items: center; justify-content: center; width: 100%; margin-top: 14px; text-decoration: none; }
.wl-card[data-state="named"] .wl-status { color: var(--ok); font-weight: 600; }
.wl-card[data-state="named"] { border-top-color: var(--ok); }
.wl-result #wl-stage { font: 500 28px/1.1 var(--display); letter-spacing: -.04em; margin: 0 0 6px; color: var(--hp-ink); }
.wl-card[data-state="received"] .wl-result #wl-stage, .wl-card[data-state="named"] .wl-result #wl-stage { color: var(--ok); }
.wl-result a { word-break: break-all; font-family: var(--mono); font-size: 12px; }
.wl-side { min-width: 0; }
.hpay-workspace .wl-side h2 { font-size: 25px; margin: 0 0 4px; }
@media (max-width: 700px) {
  /* Phone: the claim card comes first (counter and Connect / Blip button in the first screen); hero copy and steps follow. */
  .wl-page { display: flex; flex-direction: column; padding-top: 20px; }
  .wl-grid { display: contents; }
  .wl-card { order: 0; }
  .wl-hero { order: 1; padding-top: 32px; }
  .wl-page > .hp-ledger-nav { order: 2; margin-block: 8px 24px; }
  .wl-side { order: 3; }
  .wl-page > .cq-footer { order: 4; }
  .wl-card .cq-fixed-amount { margin-bottom: 16px; padding-block: 10px; }
  .wl-count { margin-top: 10px; }
  .wl-count strong { font-size: clamp(64px, 19vw, 96px); }
  .hpay-workspace .wl-card h2 { margin: 12px 0 8px; font-size: 32px; }
  .wl-card { padding: 20px; }
  .wl-big { min-height: 56px; }
  .wl-page .cq-intro > p:last-child { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) { .wl-bar span { transition: none; } }