/* MicroFret buy, download and thank-you pages. Loaded after site.css (tokens, header, buttons, plates, steps). */

/* ---- buy: order plate first on a phone, the form beside it from 900px ---- */
.buy-grid { display: grid; gap: 24px; margin-top: 20px; grid-template-areas: "order" "form" "next"; }
.buy-grid .order { grid-area: order; padding: 22px 22px 8px; }
.buy-grid .form { grid-area: form; }
.buy-grid .next { grid-area: next; }
@media (min-width: 900px) {
  .buy-grid { grid-template-columns: minmax(0, var(--form-max)) minmax(0, 1fr); grid-template-areas: "form order" "form next"; align-items: start; gap: 24px 40px; }
}
.order .ticks { margin: 16px 0; }
.next h2 { margin-top: 0; }
.form { display: grid; gap: 18px; max-width: var(--form-max); }
.field label { display: block; font-weight: 600; margin-bottom: 6px; }
.field input[type="text"], .field input[type="email"] { width: 100%; min-height: 50px; padding: 10px 14px; border-radius: var(--r-md); border: 2px solid var(--muted); background: var(--wood-0); color: var(--cream); font: inherit; }
.field input:focus-visible { outline: 3px solid var(--brass-hi); outline-offset: 1px; border-color: var(--brass); }
.field input[aria-invalid="true"] { border-color: var(--bad); }
.hint { color: var(--tan); font-size: 0.93rem; margin: 4px 0 0; }
.err { color: var(--bad); font-weight: 600; margin: 4px 0 0; }
.field .err:empty { display: none; }
.err:not(:empty)::before { content: "! "; font-weight: 800; } /* an error is never only a colour */
.summary-err { min-height: 1.3em; }
.check { display: flex; gap: 12px; align-items: flex-start; }
.check input { width: 24px; height: 24px; margin-top: 2px; accent-color: var(--brass); flex: none; }
.check input[aria-invalid="true"] { outline: 2px solid var(--bad); }
.hp { position: absolute; inset-inline-start: -9999px; width: 1px; height: 1px; overflow: hidden; }
.trust-row { margin-top: 4px; }
.trust-row .fine { margin: 0 0 8px; }
.trust-row .pay-row { margin-block: 8px 12px; }
[data-cancelled]:focus { outline-offset: 2px; }
.btn[aria-busy="true"] { cursor: progress; }

/* ---- download ---- */
.dl-grid { display: grid; gap: 16px; margin-block: 20px 16px; }
@media (min-width: 760px) { .dl-grid { grid-template-columns: 1.25fr 1fr; align-items: start; } }
.dl-card { padding: 22px; }
.dl-card .btn { width: 100%; }
.dl-facts { display: grid; gap: 10px; margin: 16px 0 0; }
.dl-facts div { display: grid; gap: 2px; }
.dl-facts dt { color: var(--tan); font-weight: 600; font-size: 0.93rem; }
.dl-facts dd { margin: 0; }
.dl-facts code { font-family: var(--font-mono); font-size: var(--fs-mono); word-break: break-all; }
.dl-facts .btn { margin-top: 8px; }
.dl-card .fine { margin: 12px 0 0; }
.dl-card .alert { margin: 12px 0 0; }
.dl-grid .plate:not(.dl-card) { padding: 18px 22px 8px; }
.plain { margin: 8px 0 12px; padding-inline-start: 1.2em; }
.plain li { margin-bottom: 0.4em; }
.phone-notice { padding: 18px 22px 8px; margin-bottom: 24px; }
.steps-list { grid-template-columns: 1fr; gap: 12px; }
.steps-list li { display: grid; grid-template-columns: auto 1fr; column-gap: 16px; padding: 18px 20px; } /* the number sits beside the text, not above it */
.steps-list li::before { grid-row: 1 / span 5; margin: 2px 0 0; }
.steps-list li > * { grid-column: 2; }
.steps-list li { transition: border-color var(--dur-slow) var(--ease); }
.steps-list.is-started li { border-color: var(--brass); } /* the install steps get a brass edge when the download starts */
.steps-list li p .btn { margin-top: 2px; }

/* ---- thanks: the key box is an inset (the licence key is alive data), with a signal edge once the key is there ---- */
.keybox { margin: 16px 0; padding: 18px 20px 8px; border-block-start: 5px solid var(--signal); }
.keybox h2 { font-size: 1.25rem; margin-bottom: 10px; }
.keybox h2:focus { outline: none; }
.keybox h2:focus-visible { outline: 3px solid var(--cream); }
.keybox .key { display: block; width: 100%; min-height: 120px; resize: vertical; padding: 14px; background: transparent; box-shadow: none; border: 2px solid var(--brass); color: var(--cream); font-family: var(--font-mono); font-size: var(--fs-mono); line-height: 1.5; direction: ltr; text-align: left; word-break: break-all; }
.keybox .btn-row { margin-top: 12px; }
/* waiting loader: the five fret bars of the logo pulse in turn. Reduced motion: they sit still (site.css, preferences). */
.spinner { display: inline-flex; align-items: flex-end; gap: 3px; height: 20px; margin-inline-end: 10px; vertical-align: -4px; }
.spinner i { display: block; width: 3px; border-radius: 2px; background: var(--brass); opacity: 0.3; animation: fret-pulse 1.2s var(--ease) infinite; }
.spinner i:nth-child(1) { height: 8px; }
.spinner i:nth-child(2) { height: 15px; animation-delay: 0.12s; }
.spinner i:nth-child(3) { height: 20px; animation-delay: 0.24s; }
.spinner i:nth-child(4) { height: 13px; animation-delay: 0.36s; }
.spinner i:nth-child(5) { height: 6px; animation-delay: 0.48s; }
@keyframes fret-pulse { 0%, 100% { opacity: 0.3; } 35% { opacity: 1; } }

@media (forced-colors: active) {
  .keybox .key { border: 2px solid CanvasText; }
  .field input, .check input { forced-color-adjust: auto; }
}