/* Commerce pages (success, download, refunds, license-sign) and the checkout form fragment.
   Loaded after styles.css; uses the site's own .sc-document, .access-form and .button.
   .checkout-agreement is copied from Chorix's styles.css (l.607-611); the rest is layout only. */
.access-form .checkout-agreement { grid-template-columns:auto 1fr; align-items:start; gap:10px; }
.access-form .checkout-agreement input { width:20px; height:20px; margin:1px 0 0; accent-color:#39FF6B; }
.access-form .checkout-agreement > span { font-size:12px; line-height:1.55; color:#aeb6ca; }
.access-form .checkout-agreement > span a { color:#8ea2ff; }
.access-form .checkout-agreement small { grid-column:2; }
.access-form .checkout-agreement.is-optional { opacity:.55; }

.commerce-page .commerce-card { margin:26px 0; padding:26px; border:1px solid rgba(200,220,255,.14); border-top:2px solid rgba(57,255,107,.55); border-radius:16px; background:rgba(16,22,38,.55); }
.commerce-page form.commerce-card { padding:26px; }
.commerce-key { display:block; margin:12px 0; color:#6effa0; font:700 17px ui-monospace,Consolas,monospace; word-break:break-all; }
.commerce-mono { font-family:ui-monospace,Consolas,monospace; word-break:break-all; }
.commerce-kv { display:grid; grid-template-columns:auto 1fr; gap:6px 16px; margin:0 0 8px; font-size:13px; }
.commerce-kv dt { color:#9da3b5; }
.commerce-kv dd { margin:0; color:#e7e9f2; }
.commerce-statement { font-size:13px; }
.commerce-hint { font-size:12px; color:#9da3b5; margin:0; }
.commerce-msg { font-size:14px; line-height:1.55; color:#ff9a86; margin:14px 0 0; }
.commerce-msg.ok { color:#6effa0; }
.commerce-foot { margin-top:22px; font-size:13px; }
.commerce-draft { padding:10px 14px; border:1px solid rgba(245,168,60,.5); border-radius:10px; color:#ffcf8a; }
.access-form label small.commerce-inline { display:inline; color:#9da3b5; font-size:10px; }
.checkout-request { display:grid; gap:8px; justify-items:center; margin-top:4px; }

/* Pass 2: the checkout dialog spliced into index.html. Copied from Chorix's styles.css (l.586-606, l.612-617
   and the 700px rule at l.719-720); none of these rules is in assets/styles/mother-base.css, which already
   carries body.dialog-open, .dialog-close:focus-visible and the --text / --line variables.
   E2E findings fix: the dialog is taller than a normal window, so it is capped at the viewport less the same 16px margin
   its width keeps, and its own content scrolls (the page behind is locked by body.dialog-open); overflow-x stays hidden
   so the glow is still clipped to the rounded corners. */
.access-dialog { width:min(calc(100% - 32px),570px); max-height:calc(100dvh - 32px); padding:0; border:1px solid rgba(255,255,255,.14); border-radius:23px; color:var(--text); background:linear-gradient(145deg,#12162b,#090c19); box-shadow:0 40px 120px rgba(0,0,0,.68),inset 0 1px 0 rgba(255,255,255,.055); overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; }
.access-dialog::backdrop { background:rgba(3,4,10,.72); backdrop-filter:blur(12px); }
.dialog-glow { position:absolute; width:280px; height:280px; right:-120px; top:-140px; border-radius:50%; background:rgba(13,201,75,.20); filter:blur(65px); pointer-events:none; }
.dialog-close { position:absolute; z-index:3; right:16px; top:16px; width:37px; height:37px; padding:0; border:1px solid var(--line); border-radius:10px; background:rgba(255,255,255,.035); cursor:pointer; }
.dialog-close span { position:absolute; left:10px; top:17px; width:15px; height:1px; background:#9da3b5; }
.dialog-close span:first-child { transform:rotate(45deg); }
.dialog-close span:last-child { transform:rotate(-45deg); }
.dialog-copy { position:relative; z-index:2; padding:38px 38px 0; }
.dialog-copy h2 { margin:18px 0 12px; font-size:34px; line-height:1.08; letter-spacing:-.045em; }
.dialog-copy p { margin:0; color:#838a9e; font-size:14px; line-height:1.7; }
.access-form { display:grid; gap:15px; padding:28px 38px 38px; }
.access-form label { display:grid; gap:7px; }
.access-form label > span { color:#9da3b5; font-size:10px; font-weight:600; }
.access-form input, .access-form select { width:100%; height:48px; padding:0 13px; border:1px solid rgba(255,255,255,.09); border-radius:10px; outline:none; color:#e7e9f2; background:rgba(255,255,255,.035); font-size:13px; transition:border-color .2s ease,box-shadow .2s ease; }
.access-form input::placeholder { color:#51586c; }
.access-form input:focus, .access-form select:focus { border-color:rgba(57, 255, 107,.55); box-shadow:0 0 0 3px rgba(57, 255, 107,.08); }
.access-form label small { display:none; color:#d86a55; font-size:8px; }
.access-form label.has-error small { display:block; }
.access-form label.has-error input, .access-form label.has-error select { border-color:rgba(255,113,133,.5); }
.form-note { margin:0; color:#525a6e; text-align:center; font-size:8px; line-height:1.5; }
.form-success { position:relative; z-index:2; padding:65px 40px 45px; text-align:center; }
.success-icon { display:grid; place-items:center; width:54px; height:54px; margin:0 auto 20px; border:1px solid rgba(98,227,147,.21); border-radius:50%; color:#76dda1; background:rgba(98,227,147,.07); }
.success-icon svg { width:26px; height:26px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.form-success h3 { margin:0 0 11px; font-size:25px; letter-spacing:-.04em; }
.form-success p { max-width:400px; margin:0 auto 24px; color:#838a9e; font-size:13px; line-height:1.65; }
@media (max-width:700px) { .dialog-copy { padding:34px 24px 0; } .access-form { padding:24px; } }

/* Pass 2: pack 19 GAP rows carry a visible [DRAFT] marker; the checksum command on download.html. */
.draft-tag { display:inline-block; margin-left:4px; padding:0 6px; border:1px solid rgba(245,168,60,.55); border-radius:6px; color:#ffcf8a; font:700 10px/1.7 ui-monospace,Consolas,monospace; letter-spacing:.04em; vertical-align:middle; }
.commerce-code { margin:12px 0; padding:12px 14px; border:1px solid rgba(200,220,255,.14); border-radius:10px; background:rgba(8,12,24,.7); overflow-x:auto; }
.commerce-code code { color:#c9d3ee; font:13px ui-monospace,Consolas,monospace; white-space:pre; }
.commerce-steps { padding-left:22px; }
/* QA 2026-09-25 (axe): the commerce pages have no h2 before the footer, so its column headings are h2 there (heading-order); same look as .footer-links h3 in styles.css. */
.footer-links h2 { font:600 11px/1.4 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:#c0d0e6; margin:0 0 10px; }
/* QA 2026-09-25 (axe scrollable-region-focusable): the command wraps at narrow widths instead of scrolling. */
.commerce-code code { white-space:pre-wrap; overflow-wrap:anywhere; }
/* 09-25 placement (M1: M6 places, M5 supplies the text): M6-41 and M6-42 before the pay button, M6-23 beside "Request access"; the checkbox text size, not the 8px .form-note. */
.access-form .checkout-disclosure { margin:0; color:#aeb6ca; font-size:12px; line-height:1.55; }
.checkout-request-note { margin:0; color:#9da3b5; font-size:12px; line-height:1.55; text-align:center; }
/* W9 (pack 19 Rev 7, OPTION B): M6-44 and M6-46 at the checkbox text size, not the 8px .form-note; the pack's
   bracketed review marks ([D2, ruled n=97] and the like) shown as marked placeholders, as ui/terms.html does with .ph. */
.access-form .checkout-ack-note { margin:0; color:#aeb6ca; font-size:12px; line-height:1.55; }
.sc-price-note .ph, .commerce-steps .ph, .commerce-card .ph, .faq-answer .ph { color:#ffd08a; }
.dialog-copy p + p { margin-top:10px; }