/* The thank-you and lost-key pages. legal.css gives the tokens, themes, bar, paper and footer;
   this adds the display face, the key boxes, buttons, the payment-id form and the status line.
   Colours come only from legal.css tokens, so both themes keep their contrast. */
@font-face{
  font-family:"Bricolage Grotesque";
  src:url("fonts/BricolageGrotesque.ttf") format("truetype");
  font-weight:200 800;font-stretch:75% 100%;font-display:swap
}
:root{--display:"Bricolage Grotesque",var(--round);--field:var(--ground)}
h1,h2,h3,.logo{font-family:var(--display)}
h1{font-size:clamp(34px,1.2rem + 2.6vw,56px);line-height:1.05;letter-spacing:-.025em}
h3{font-size:var(--s-body);font-weight:800;margin:0}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 22px;border:0;border-radius:999px;
  background:var(--accent);color:var(--on-accent);font:800 var(--s-body)/1 var(--round);text-decoration:none;cursor:pointer;transition:transform 160ms var(--ease-out)}
.btn.quiet{background:var(--code);color:var(--ink)}
.btn:active{transform:scale(.96)}
.btn[disabled]{opacity:.6;cursor:progress}
.row{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}

.keys{list-style:none;padding:0;margin:20px 0 0;display:grid;gap:18px}
.keys li{background:var(--ground);border-radius:20px;padding:18px 18px 20px;margin:0}
.key{display:block;width:100%;margin-top:10px;font:600 15px/1.45 var(--mono);color:var(--ink);background:var(--paper);border:2px solid var(--code);
  border-radius:12px;padding:12px;resize:vertical;overflow-wrap:anywhere;word-break:break-all;min-height:6.5em;field-sizing:content}
.done{font-size:var(--s-small);color:var(--muted);margin-left:4px;align-self:center}

.steps{margin:10px 0 0;padding-left:1.4em}.steps li{margin-top:6px}

form{margin-top:18px}
label{display:block;font-weight:800}
.hint{font-size:var(--s-small);color:var(--muted);margin:4px 0 0}
input[type=text]{display:block;width:100%;max-width:28em;margin-top:8px;min-height:50px;padding:0 14px;font:600 17px/1 var(--mono);color:var(--ink);
  background:var(--field);border:2px solid var(--muted);border-radius:14px}
input[type=text][aria-invalid=true]{border-color:var(--accent)}

.status{margin-top:18px;min-height:1.6em;font-weight:700}
.status.err{background:var(--code);border-radius:16px;padding:14px 16px;font-weight:600}
.spin{display:inline-block;width:1em;height:1em;border:3px solid var(--code);border-top-color:var(--accent);border-radius:50%;vertical-align:-.15em;margin-right:.5em;animation:spin 900ms linear infinite}
@keyframes spin{to{transform:rotate(1turn)}}
[hidden]{display:none!important}
@media (prefers-reduced-motion:reduce){.btn{transition:none}.spin{animation:none;border-top-color:var(--code)}}