/* The "Get your @handle" window on /hpay. HPAY's own paper, ink and red; it opens inside Biome, over the page, and closes back to it. */
.hp-hd {
  --hd-sheet: var(--hp-sheet, #faf7ef); --hd-ink: var(--hp-ink, #171615); --hd-quiet: var(--hp-quiet, #61594f);
  --hd-line: var(--hp-line, #c6bbad); --hd-red: var(--hp-red, #c8102e);
  width: min(520px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow: auto; padding: 0;
  background: var(--hd-sheet); color: var(--hd-ink); border: 1px solid var(--hd-ink); border-bottom: 3px solid var(--hd-red); border-radius: 0; box-shadow: none;
}
.hp-hd::backdrop { background: rgba(23, 22, 21, .62); }
.hp-hd-head { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: start; padding: 22px 24px 14px; border-bottom: 1px solid var(--hd-line); }
.hp-hd-kicker { grid-column: 1 / -1; margin: 0; font: 400 10px/1.5 var(--mono, ui-monospace, monospace); letter-spacing: .08em; color: var(--hd-red); }
.hp-hd-head h2 { margin: 0; font-size: 28px; line-height: 1.1; color: var(--hd-ink); }
.hp-hd-x { min-height: 44px; min-width: 44px; padding: 0 12px; background: transparent; color: var(--hd-ink); border: 1px solid var(--hd-line); border-radius: 0; font: 500 12px var(--body, inherit); cursor: pointer; }
.hp-hd-x:hover { border-color: var(--hd-ink); }
.hp-hd-body { padding: 18px 24px 24px; display: grid; gap: 14px; }
.hp-hd-intro { margin: 0; font-size: 14px; line-height: 1.6; color: var(--hd-quiet); }
.hp-hd-form { display: grid; gap: 10px; }
.hp-hd-form[hidden] { display: none; }
.hp-hd-field { display: grid; grid-template-columns: auto 1fr; align-items: center; border: 1px solid var(--hd-ink); background: #fff; }
.hp-hd-at { padding: 0 4px 0 14px; font: 500 18px var(--mono, ui-monospace, monospace); color: var(--hd-red); }
.hp-hd .hp-hd-input { border: 0; background: transparent; min-height: 48px; font: 500 18px var(--mono, ui-monospace, monospace); color: var(--hd-ink); padding-left: 2px; outline-offset: 4px; }
.hp-hd .hp-hd-input:focus-visible { outline: none; }
.hp-hd-field:focus-within { outline: 3px solid var(--hd-red); outline-offset: 2px; }
.hp-hd .pl-label { color: var(--hd-ink); }
.hp-hd .pl-help { color: var(--hd-quiet); margin: 0; }
.hp-hd-status { min-height: 22px; }
.hp-hd-status p, .hp-hd-result p { margin: 0; font-size: 14px; line-height: 1.5; }
.hp-hd-preview { margin: 0; font: 12px var(--mono, ui-monospace, monospace); color: var(--hd-ink); word-break: break-all; }
.hp-hd-preview:empty { display: none; }
.hp-hd-fee { margin: 0; font-size: 13px; line-height: 1.55; color: var(--hd-quiet); padding: 10px 0; border-top: 1px solid var(--hd-line); border-bottom: 1px solid var(--hd-line); }
.hp-hd .hp-hd-go { width: 100%; min-height: 48px; border-radius: 0; background: var(--hd-red); border-color: var(--hd-red); color: #fff; }
.hp-hd .hp-hd-go:disabled { background: #d8cfc2; border-color: #d8cfc2; color: #6b6258; cursor: not-allowed; }
.hp-hd-gate { display: grid; gap: 10px; }
.hp-hd-gate:empty { display: none; }
.hp-hd-note { margin: 0; font-size: 14px; line-height: 1.55; color: var(--hd-ink); }
.hp-hd-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 12px; }
.hp-hd-tx { display: inline-flex; align-items: center; min-height: 44px; color: var(--hd-ink); font-size: 13px; text-underline-offset: 4px; }
.hp-hd-result:empty { display: none; }
.hp-hd .pl-error { color: #9b0b24; }
.hp-hd .pl-success { color: #21613f; }
.hp-hd :focus-visible { outline: 3px solid var(--hd-red); outline-offset: 3px; }
@media (max-width: 480px) { .hp-hd-head, .hp-hd-body { padding-inline: 16px; } .hp-hd-head h2 { font-size: 24px; } }
@media (forced-colors: active) { .hp-hd { border: 2px solid CanvasText; } .hp-hd .hp-hd-go:disabled { border-color: GrayText; color: GrayText; } }