/*
 * HPAY tools: the request page, the dollar-priced payment link, the receipt (and, in hpayPos.css, the point of sale).
 * Layered on base.css and paylink.css tokens only: black and red, one accent, no new palette, no new font.
 *
 * Direction (hartii-ui-craft, written before the code):
 *   subject    a payment request in dollars that watches the chain until it is paid, a counter point of sale, and a receipt
 *              rebuilt from the chain.
 *   audience   a shop owner or freelancer on a phone or tablet at a counter; a customer who scans a code; an accountant who
 *              wants a printable record.
 *   one job    take a payment of $X in QUAI and know, from the chain, the moment it has really arrived.
 *   mood       steady, exact, quiet.
 *   signature  the confirmation strip. One LED cell lights for each block that really confirms the payment, as the node reports
 *              it (about five seconds apart). When the last cell lights the panel turns green. No cell lights on a timer.
 * Roles: red = the signal (a payment being confirmed, the one primary action); green = money has arrived (status only);
 * amber = needs a look or waiting on a source; grey = over. Numbers use tabular figures. Spacing runs on 4 and 8.
 */

.ht-wrap { max-width: 720px; margin: 0 auto; padding-inline: var(--pad); }
.ht-wrap--wide { max-width: 1080px; }
.ht-head { display: flex; align-items: center; gap: 18px; }
.ht-head h1 { margin: 4px 0 0; }
.ht-mark { color: var(--red); display: inline-flex; flex: none; line-height: 0; }
.ht-beta {
  font: 500 10px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--warn);
  border: 1px solid rgba(255, 176, 32, 0.4); border-radius: 4px; padding: 3px 6px; margin-left: 8px; vertical-align: 2px;
}
.ht-lede { color: var(--fg-2); max-width: 60ch; margin-top: 14px; }
.ht-lede a { color: var(--fg); }
.ht-num { font-variant-numeric: tabular-nums; }

/* ---- the live line: "Live · block N · updated Xs ago". Its dot is a colour, never an animation. ---- */
.ht-live { display: inline-flex; align-items: center; gap: 8px; margin: 14px 0 0; font: 400 12px/1.3 var(--mono); color: var(--fg-2); font-variant-numeric: tabular-nums; }
.ht-live::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--fg-3); flex: none; }
.ht-live[data-health="live"]::before { background: var(--ok); }
.ht-live[data-health="stale"]::before { background: var(--warn); }
.ht-live[data-health="offline"]::before { background: var(--red-hi); }
.ht-live[data-health="live"] { color: var(--fg); }

/* ---- the status panel ---- */
.ht-status { margin-top: 16px; padding: 16px 18px; border-radius: 12px; border: 1px solid var(--line-2); border-left-width: 4px; background: rgba(255, 255, 255, 0.025); }
.ht-status[data-tone="wait"], .ht-status[data-tone="unknown"] { border-left-color: var(--fg-3); }
.ht-status[data-tone="confirm"] { border-left-color: var(--red-hi); }
.ht-status[data-tone="paid"] { border-color: rgba(74, 222, 128, 0.35); border-left-color: var(--ok); background: rgba(74, 222, 128, 0.07); }
.ht-status[data-tone="attention"] { border-left-color: var(--warn); background: rgba(255, 176, 32, 0.06); }
.ht-status[data-tone="expired"] { border-left-color: var(--fg-3); }
.ht-status-head { font: 700 20px/1.2 var(--display); letter-spacing: -0.01em; margin: 0; }
.ht-status[data-tone="paid"] .ht-status-head { color: var(--ok); }
.ht-status-detail { margin: 6px 0 0; color: var(--fg-2); font-size: 14px; line-height: 1.5; }
.ht-status-tx { margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 14px; }
.ht-status-tx a { color: var(--fg); text-underline-offset: 3px; min-height: 44px; display: inline-flex; align-items: center; }
.ht-notes, .ht-unmatched { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; font-size: 13px; color: var(--fg-2); }
.ht-notes li::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 8px; background: var(--warn); border-radius: 50%; vertical-align: 1px; }
.ht-unmatched li { display: grid; gap: 2px; padding: 10px 12px; border-radius: 10px; background: rgba(255, 176, 32, 0.08); border: 1px solid rgba(255, 176, 32, 0.25); }
.ht-unmatched strong { color: var(--fg); font-weight: 600; font-variant-numeric: tabular-nums; }
.ht-unmatched a { color: var(--fg); text-underline-offset: 3px; }

/* ---- the confirmation strip (the signature) ---- */
.ht-cells { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 2px; padding: 0; }
.ht-cell { width: 20px; height: 20px; border-radius: 4px; background: rgba(255, 190, 190, 0.07); border: 1px solid var(--line-2); }
.ht-cell.is-lit { background: var(--red-hi); border-color: var(--red-hi); box-shadow: 0 0 12px rgba(255, 78, 96, 0.55); }
.ht-status[data-tone="paid"] .ht-cell.is-lit { background: var(--ok); border-color: var(--ok); box-shadow: 0 0 12px rgba(74, 222, 128, 0.5); }
.ht-bar { display: block; width: 100%; height: 8px; border-radius: 4px; background: rgba(255, 190, 190, 0.1); overflow: hidden; }
.ht-bar i { display: block; height: 100%; background: var(--red-hi); }
@media (prefers-reduced-motion: no-preference) {
  .ht-cell { transition: background-color 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; }
  .ht-bar i { transition: width 0.4s ease; }
}

/* ---- label and value rows ---- */
.ht-kv { margin: 0; padding: 0; }
.ht-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.ht-row:last-child { border-bottom: 0; }
.ht-row dt { color: var(--fg-3); font-size: 13px; flex: 0 0 auto; min-width: 9.5rem; }
.ht-row dd { margin: 0; font: 400 13px/1.5 var(--mono); word-break: break-all; text-align: right; flex: 1 1 14rem; font-variant-numeric: tabular-nums; }
.ht-row dd.ht-plain { font-family: var(--body); }
.ht-row dd a { color: var(--fg); text-underline-offset: 3px; }
/* On a phone or a tablet the only way to open an address or a transaction on Quaiscan is this link, so it is a full-size tap target. */
@media (max-width: 1024px), (pointer: coarse) {
  .ht-row dd a { display: inline-flex; align-items: center; min-height: 44px; }
}
.ht-note { display: block; margin-top: 4px; font: 400 12px/1.5 var(--body); color: var(--fg-3); text-align: right; word-break: normal; }

/* ---- actions and forms ---- */
.ht-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.ht-actions .btn { min-height: 48px; justify-content: center; flex: 1 1 150px; }
.ht-field { margin-bottom: 16px; }
.ht-field label { display: block; font-size: 13px; color: var(--fg-2); margin-bottom: 8px; }
.ht-field .pl-help { margin-top: 6px; }
.ht-form-error:empty { display: none; }
.ht-more { margin-top: 20px; border-top: 1px solid var(--line); }
.ht-more > summary { cursor: pointer; min-height: 48px; display: flex; align-items: center; font: 13px var(--mono); color: var(--fg-2); }
.ht-more[open] > summary { color: var(--fg); }
.ht-print-only { display: none; }
.ht-checked { color: var(--fg-3); font: 400 12px/1.4 var(--mono); margin: 10px 0 0; font-variant-numeric: tabular-nums; }

/* ---- the receipt ---- */
.ht-slip { margin-top: 24px; padding: 24px 22px 8px; background: var(--ink-850); border: 1px solid var(--line-2); border-bottom: 1px dashed var(--line-2); border-radius: var(--r) var(--r) 0 0; }
.ht-stamp { display: flex; align-items: center; gap: 10px; font: 500 11px/1 var(--body); letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-3); margin: 0 0 10px; }
.ht-slip-top { display: flex; align-items: center; gap: 12px; }
.ht-slip-top:has(> .ht-glyph:empty) { gap: 0; }
.ht-glyph { display: inline-flex; line-height: 0; flex: none; }
.ht-glyph[data-tone="ok"] { color: var(--ok); }
.ht-glyph[data-tone="bad"] { color: #ff8a8a; }
.ht-slip-head { font: 700 clamp(1.3rem, 4vw, 1.7rem)/1.15 var(--display); letter-spacing: -0.02em; margin: 0; }
.ht-slip-head[data-tone="ok"] { color: var(--ok); }
.ht-slip-head[data-tone="wait"] { color: var(--warn); }
.ht-slip-head[data-tone="bad"] { color: #ff8a8a; }
.ht-slip-detail { margin: 6px 0 0; color: var(--fg-2); font-size: 14px; }
.ht-slip-amount { font: 700 clamp(2.4rem, 9vw, 3.8rem)/1 var(--display); letter-spacing: -0.03em; margin: 22px 0 4px; font-variant-numeric: tabular-nums; word-break: break-word; }
.ht-quoted { margin: 0 0 18px; color: var(--fg-2); font-size: 14px; }
.ht-sec { font: 500 11px/1 var(--body); letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-3); margin: 26px 0 6px; }
.ht-checks { list-style: none; margin: 0; padding: 0; }
.ht-checks li { display: flex; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.ht-checks li:last-child { border-bottom: 0; }
.ht-checks b { font-weight: 600; flex: none; }
/* What the payment is compared with is a link anyone can write, so a match is plain text, never the green of a chain fact. A difference is red. */
.ht-checks li[data-result="match"] b { color: var(--fg); }
.ht-checks li[data-result="differ"] b { color: #ff8a8a; }
.ht-checks li[data-result="unset"] b, .ht-checks li[data-result="pending"] b { color: var(--fg-3); }
.ht-claims-intro { margin: 0 0 10px; color: var(--fg-2); font-size: 13px; line-height: 1.55; }
.ht-problems { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.ht-problems li { color: #ff8a8a; background: rgba(196, 30, 58, 0.12); border: 1px solid rgba(196, 30, 58, 0.35); border-radius: 10px; padding: 10px 14px; font-size: 13px; }
.ht-problems:empty { display: none; }
.ht-disclaimer { color: var(--fg-3); font-size: 12px; line-height: 1.6; margin: 24px 0 14px; }

.pl-page select:disabled, .pl-page input:disabled { opacity: 0.5; cursor: not-allowed; }
@media (max-width: 480px) {
  /* twelve cells on one row, at 390px */
  .ht-cells { gap: 4px; }
  .ht-cell { width: 18px; height: 18px; }
}
@media (max-width: 560px) {
  .ht-row dt { min-width: 0; flex-basis: 100%; }
  .ht-row dd, .ht-note { text-align: left; flex-basis: 100%; }
  .ht-row dd { font-size: 12px; } /* a 42 character address then fits one line at 390px */
  .ht-slip { padding: 20px 16px 4px; }
}

/* ---- the result card of a dollar link ---- */
.pl-qr-plate.ht-qr { max-width: 100%; }
.pl-qr-plate.ht-qr canvas { width: min(100%, 320px); height: auto; aspect-ratio: 1; }
.ht-usd-result { margin: 0 0 16px; }
.ht-amount-line { font: 700 clamp(1.5rem, 6vw, 2rem)/1.1 var(--display); letter-spacing: -0.02em; margin: 0; font-variant-numeric: tabular-nums; }
.ht-lock { margin: 8px 0 0; font: 400 13px/1.4 var(--mono); color: var(--fg-2); font-variant-numeric: tabular-nums; }
.ht-usd-result.is-over .ht-lock { color: var(--warn); }
.ht-inline-watch { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.ht-inline-watch .ht-status { margin-top: 0; }
.ht-inline-watch #hp-again { margin-top: 14px; width: 100%; justify-content: center; min-height: 48px; }
.ht-quote { margin-top: 10px; }
.ht-quote-headline { margin: 0; font: 600 16px/1.4 var(--body); color: var(--fg); font-variant-numeric: tabular-nums; }
.ht-quote-detail { margin: 4px 0 0; font-size: 13px; line-height: 1.5; color: var(--fg-2); }
.hp-amount-row.has-unit { grid-template-columns: 1fr 150px; }
.hp-unit { font: 600 14px/1 var(--mono); }

/* ---- additions on the request page ---- */
#pl-usd-note { margin: 2px 0 12px; }
#pl-exact-box { margin: 2px 0 10px; }
.pl-status-pill.is-soon { color: var(--warn); border-color: rgba(255, 176, 32, 0.45); }
.ht-watch .ht-status { margin-top: 0; }
@media (max-width: 480px) {
  #pl-recipient-label, #pl-resolved-value, #pl-wallet-options .pl-row .v { font-size: 12px; } /* a 42 character address fits one line at 390px */
}

/* ---- links to the other HPAY tools, under the HPAY form ---- */
.ht-tools { margin-top: 28px; }
.ht-tools h2 { font: 500 11px/1 var(--body); letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-3); margin: 0 0 12px; }
.ht-tools ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); gap: 10px; }
.ht-tools a {
  display: grid; align-content: start; gap: 4px; min-height: 84px; padding: 14px 16px; text-decoration: none; color: var(--fg);
  border: 1px solid var(--line-2); border-radius: 12px; background: rgba(255, 255, 255, 0.02); transition: border-color 0.15s ease, background-color 0.15s ease;
}
.ht-tools a:hover, .ht-tools a:focus-visible { border-color: var(--red-hi); background: rgba(255, 255, 255, 0.04); }
.ht-tools b { font: 600 15px/1.2 var(--display); }
.ht-tools span { font-size: 12.5px; line-height: 1.45; color: var(--fg-2); }

/* ---- a glyph drawn dot by dot (drawDotGlyph with stagger): each dot fades in after the one before it. Only when motion is welcome. ---- */
@media (prefers-reduced-motion: no-preference) {
  .ht-draw rect { opacity: 0; animation: ht-dot-in 0.2s ease-out forwards; }
  @keyframes ht-dot-in { from { opacity: 0; } to { opacity: 1; } }
}
/* ---- on paper: black on white, no site chrome, the link and the date printed at the foot ---- */
@media print {
  @page { margin: 16mm; }
  html, body { background: #fff !important; color: #000 !important; }
  body::before { display: none !important; }
  #nav, .nav, .footer, footer, .ht-actions, #rc-more, #rc-form, #rc-live, #rc-checked, #rc-error, #rc-notes, .ht-no-print { display: none !important; }
  .pl-page { padding: 0 !important; }
  .ht-wrap { max-width: none; padding: 0; }
  .ht-head h1 { color: #000; }
  .ht-lede { color: #000; }
  .pl-help, .ht-beta { color: #333 !important; border-color: #666 !important; }
  .ht-slip { background: #fff; color: #000; border: 1px solid #000; border-radius: 0; margin-top: 12px; }
  .ht-slip * { color: #000 !important; border-color: #999 !important; }
  .ht-slip-detail, .ht-quoted, .ht-note, .ht-row dt, .ht-disclaimer { color: #333 !important; }
  .ht-problems li { background: none !important; border: 1px solid #000 !important; }
  .ht-slip a { text-decoration: none; }
  .ht-print-only { display: block !important; margin: 14px 0 0; font: 400 11px/1.5 var(--mono); color: #000; word-break: break-all; }
  .ht-slip, .ht-row, .ht-checks li { break-inside: avoid; }
}