/* checkout.css — the licence counter.
 *
 * ONE SHEET, NOT AN IMPORT OF THE EDITOR'S. css/editor.css is 114 KB of
 * layout for an application with a dial, two columns and eight rails, and
 * none of it describes a page with one card on it. What this borrows is the
 * MATERIAL — the same alloy, the same lamp, the same cut, the same accent —
 * declared again here because the tokens are the design system and the rules
 * that use them are not.
 *
 * It also has to survive something no other sheet in this repository does:
 * a third party rendering markup into the middle of it. The PayPal button is
 * an iframe PayPal styles, and this page's own CSP grants `style-src
 * 'unsafe-inline'` for exactly that reason (vercel.json). So the container it
 * lands in is given a floor, a minimum height and nothing else — anything
 * this sheet asserted about the inside of that box would be a bet on somebody
 * else's markup, and the bet would be settled by their next deploy.
 */

:root {
  --bg: #05080d;
  --face-hi: #151e2a;
  --face-lo: #0b111a;
  --key-hi: #1b2431;
  --key-lo: #131b26;
  --key-hot-hi: #223040;
  --key-hot-lo: #18212d;
  --cut-floor: #04070c;
  --panel-line: rgba(146, 178, 209, 0.14);

  --lit: inset 0 1px 0 rgba(255, 255, 255, 0.072);
  --lit-key: inset 0 1px 0 rgba(255, 255, 255, 0.10);
  --wash: radial-gradient(140% 180% at 20% -40%, rgba(255, 255, 255, 0.055), transparent 64%);
  --wash-key: radial-gradient(150% 200% at 26% -50%, rgba(255, 255, 255, 0.07), transparent 66%);
  --cut: inset 0 2px 5px rgba(0, 0, 0, 0.6),
         inset 0 1px 1px rgba(0, 0, 0, 0.72),
         inset 0 -1px 0 rgba(255, 255, 255, 0.05);
  --ao-pop: 0 2px 4px rgba(0, 0, 0, 0.6), 0 16px 40px rgba(0, 0, 0, 0.5),
            0 46px 110px rgba(0, 0, 0, 0.44);
  --ao-key: 0 1px 1px rgba(0, 0, 0, 0.52), 0 3px 7px rgba(0, 0, 0, 0.3);

  --seam: rgba(255, 255, 255, 0.055);
  --text: #dfe8f3;
  --text-2: #9dabbb;
  --text-3: #7f8c9b;
  --text-4: #616c79;
  --acc: #f2a13f;
  --acc-hi: #ffc476;
  --acc-ink: #1c1103;
  --acc-line: rgba(242, 161, 63, 0.55);
  --focus-core: #d6ecff;
  --focus-halo: rgba(6, 10, 16, 0.92);
  --danger: #f2564a;
  --good: #62d29a;

  --r-xl: 16px; --r-lg: 14px; --r-md: 9px; --r-sm: 7px;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 26px; --s7: 34px;
  --snap: cubic-bezier(0.2, 0.9, 0.1, 1);
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --t-key: 9.5px; --t-xs: 10.5px; --t-sm: 12px; --t-md: 13px; --t-lg: 15px;
  --track: 0.15em;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  min-height: 100vh;
  display: grid; place-items: center;
  padding: var(--s5) var(--s4) var(--s7);
  background:
    radial-gradient(120% 90% at 50% -20%, rgba(74, 163, 232, 0.07), transparent 62%),
    var(--bg);
  font-family: var(--font); font-size: var(--t-md);
  color: var(--text-2);
  -webkit-font-smoothing: antialiased;
}
button, input { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }

/* ── the card ── one module, the same alloy as every module in the editor ── */
.counter {
  width: min(520px, 100%);
  padding: var(--s6) var(--s6) var(--s5);
  border-radius: var(--r-xl);
  background: var(--wash), linear-gradient(180deg, var(--face-hi), var(--face-lo));
  box-shadow: inset 0 0 0 1px var(--panel-line), var(--lit), var(--ao-pop);
}
.brand {
  font-size: var(--t-key); font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-4);
}
h1 {
  margin: var(--s2) 0 var(--s3);
  font-size: 21px; font-weight: 700; letter-spacing: -0.012em; color: var(--text);
}
.lede { font-size: var(--t-sm); line-height: 1.62; color: var(--text-2); }
.lede b { color: var(--text); font-weight: 650; }

/* ── the facts ── a recess per fact, which is how this product shows a
   reading it did not invent. */
.facts { list-style: none; display: grid; gap: 5px; margin: var(--s5) 0; }
.facts li {
  display: flex; align-items: center; gap: var(--s3);
  min-height: 42px; padding: 0 var(--s3);
  border-radius: var(--r-sm);
  background: var(--cut-floor); box-shadow: var(--cut);
}
.facts b {
  flex: 0 0 86px;
  font-size: var(--t-key); font-weight: 700; letter-spacing: var(--track);
  text-transform: uppercase; color: var(--text-3);
}
.facts span { flex: 1; min-width: 0; color: var(--text); font-size: var(--t-sm); overflow-wrap: anywhere; }

.rule { display: flex; align-items: center; gap: var(--s2); margin: var(--s5) 0 var(--s3); }
.rule::after { content: ""; flex: 1; height: 1px; background: var(--seam); }
.rule b {
  font-size: var(--t-key); font-weight: 700; letter-spacing: var(--track);
  text-transform: uppercase; color: var(--text-3);
}

/* ── PayPal's button ──
   PayPal ships this as an inline <style> block and five `style` attributes.
   It is here instead, and that is the entire reason this page's content
   policy does not need `style-src 'unsafe-inline'` — the directive
   scripts/csp-hash.sh refuses by name on every other path, and half of what
   a CSS injection needs.

   THE BUTTON'S OWN COLOURS ARE PAYPAL'S AND ARE LEFT ALONE. #FFD140 on black
   is not this product's accent and does not want to be: a payment button that
   has been restyled to match the furniture around it is a payment button
   people have learnt to distrust. It is seated in one of this product's
   recesses so it reads as an instrument on the card rather than as a sticker,
   and inside that recess it is exactly the control PayPal specified. */
.pay {
  padding: var(--s4) var(--s2);
  border-radius: var(--r-md);
  background: var(--cut-floor); box-shadow: var(--cut);
}
.pp-form {
  display: inline-grid; justify-items: center; align-content: start; gap: 0.5rem;
  width: 100%;
}
.pp-buy {
  text-align: center; border: none; border-radius: 0.25rem;
  min-width: 11.625rem; max-width: 100%; padding: 0 2rem; height: 2.625rem;
  font-weight: bold;
  background-color: #FFD140; color: #000000;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem; line-height: 1.25rem;
  cursor: pointer;
}
.pp-buy:hover { filter: brightness(1.05); }
.pp-buy:active { transform: translateY(1px); }
.pp-cards { height: 1.5rem; max-width: 100%; }
.pp-mark {
  display: flex; align-items: center; gap: 0.3rem;
  font-size: 0.75rem; color: var(--text-4);
}
.pp-mark img { height: 0.875rem; vertical-align: middle; }

/* ── the receipt ── */
.receipt-row { display: flex; gap: var(--s2); margin-top: var(--s2); }
label[for="receipt-id"] {
  display: block; margin-bottom: var(--s2);
  font-size: var(--t-sm); line-height: 1.55; color: var(--text-2);
}
#receipt-id {
  flex: 1; min-width: 0; height: 42px; padding: 0 var(--s3);
  border: 0; border-radius: var(--r-sm);
  background: var(--cut-floor); box-shadow: var(--cut);
  color: var(--text); font-family: var(--mono); letter-spacing: 0.06em;
}
#receipt-id::placeholder { color: var(--text-4); letter-spacing: 0.04em; }
#receipt-id:focus { outline: none; box-shadow: var(--cut), inset 0 0 0 1px var(--acc-line); }

.key, #receipt-go {
  display: flex; align-items: center; justify-content: center;
  height: 42px; padding: 0 var(--s4);
  border-radius: var(--r-sm);
  background: var(--wash-key), linear-gradient(180deg, var(--key-hi), var(--key-lo));
  box-shadow: var(--lit-key), var(--ao-key);
  color: var(--text); font-size: var(--t-sm); font-weight: 650;
  white-space: nowrap; text-decoration: none;
  transition: background 0.16s var(--snap), color 0.16s var(--snap), transform 0.12s var(--snap);
}
.key:hover, #receipt-go:hover {
  color: #fff;
  background: var(--wash-key), linear-gradient(180deg, var(--key-hot-hi), var(--key-hot-lo));
}
.key:active, #receipt-go:active { transform: translateY(1px); }

/* ── what the page has to say ── */
#checkout-msg {
  margin-top: var(--s4);
  font-size: var(--t-sm); line-height: 1.55; color: var(--text-2);
}
#checkout-msg:empty { display: none; }
#checkout-msg.bad { color: var(--danger); }
#checkout-msg.good { color: var(--good); }

.fine {
  margin-top: var(--s5); padding-top: var(--s4);
  border-top: 1px solid var(--seam);
  font-size: var(--t-xs); line-height: 1.6; color: var(--text-4);
}
.fine a { color: var(--text-3); }
.foot { display: flex; align-items: center; gap: var(--s3); margin-top: var(--s4); }
.foot .key { flex: 1; }

[hidden] { display: none !important; }

/* The one ring, and it is the editor's: a near-white core so it reads on the
   chassis, wrapped in the chassis's own black so it reads on anything. */
:focus-visible {
  outline: 2px solid var(--focus-core);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--focus-halo);
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}