@import url("tokens.css");
*, *::before, *::after { box-sizing: border-box; }
html { font-family: var(--sc-font-body); color: var(--sc-color-text); background: var(--sc-color-canvas); line-height: var(--sc-leading-body); }
body { margin: 0; }
[hidden] { display: none !important; }
.wrap { max-width: 760px; margin: 0 auto; padding: var(--sc-space-6) var(--sc-space-4); }
header.top { background: var(--sc-color-nav); color: var(--sc-color-on-dark); padding: var(--sc-space-3) var(--sc-space-4); }
header.top a { color: var(--sc-color-on-dark); text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
header.top img { height: 28px; width: auto; }
h1 { font-family: var(--sc-font-display); font-size: var(--sc-text-heading); line-height: var(--sc-leading-heading); letter-spacing: var(--sc-tracking-heading); margin: 0 0 var(--sc-space-3); }
h2 { font-size: var(--sc-text-subheading); margin: var(--sc-space-6) 0 var(--sc-space-2); }
.card { background: var(--sc-color-surface); border: 1px solid var(--sc-color-border); border-radius: var(--sc-radius-lg); padding: var(--sc-space-6); box-shadow: var(--sc-shadow); margin-bottom: var(--sc-space-6); }
label { display: block; font-size: var(--sc-text-small); color: var(--sc-color-text-secondary); margin-top: var(--sc-space-3); }
input, select, textarea { width: 100%; min-height: 44px; font: inherit; padding: var(--sc-space-2) var(--sc-space-3); border: 1px solid var(--sc-color-border); border-radius: var(--sc-radius-sm); background: var(--sc-color-surface); }
input[readonly] { background: var(--sc-color-sky-pale); }
.button { display: inline-block; min-height: 44px; padding: var(--sc-space-3) var(--sc-space-6); border-radius: var(--sc-radius-pill); border: 0; background: var(--sc-color-primary); color: var(--sc-color-on-dark); font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; }
.button.secondary { background: var(--sc-color-surface); color: var(--sc-color-deep); border: 1px solid var(--sc-color-border); }
.error { color: var(--sc-color-danger); font-size: var(--sc-text-small); }
.muted { color: var(--sc-color-text-muted); font-size: var(--sc-text-small); }
table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
th, td { text-align: left; padding: var(--sc-space-2); border-bottom: 1px solid var(--sc-color-border); vertical-align: top; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sc-space-3); }
.grid3 { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--sc-space-3); }
@media (max-width: 480px) { .grid3 { grid-template-columns: 1fr; } }
.eyebrow { font-size: var(--sc-text-caption); letter-spacing: var(--sc-tracking-overline); text-transform: uppercase; color: var(--sc-color-deep); margin: 0 0 var(--sc-space-2); }
.num { text-align: right; white-space: nowrap; }
fieldset.loc { border: 1px solid var(--sc-color-border); border-radius: var(--sc-radius-md); padding: var(--sc-space-3); margin: var(--sc-space-3) 0; }
label.radio, label.check { display: flex; gap: var(--sc-space-2); min-height: 44px; font-size: var(--sc-text-body); color: var(--sc-color-text); }
label.radio { align-items: center; }
label.check { align-items: flex-start; }
label.radio input, label.check input { width: 24px; height: 24px; min-height: 0; margin: 0; flex: none; }
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--sc-color-danger); }
.order-form { background: var(--sc-color-surface); border: 1px solid var(--sc-color-border); padding: var(--sc-space-6); border-radius: var(--sc-radius-md); }
.order-form h1 { font-size: var(--sc-text-subheading); }
.order-form h2 { font-size: var(--sc-text-body); margin-top: var(--sc-space-4); }
.order-form p { font-size: var(--sc-text-small); }
pre.legal { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; margin: 0; }
details { border: 1px solid var(--sc-color-border); border-radius: var(--sc-radius-md); padding: 0 var(--sc-space-3); margin-top: var(--sc-space-3); background: var(--sc-color-surface); }
summary { cursor: pointer; font-weight: 600; min-height: 44px; padding: var(--sc-space-3) 0; }
details[open] > summary { border-bottom: 1px solid var(--sc-color-border); margin-bottom: var(--sc-space-3); }
.order-form .num { white-space: normal; }
.acceptance { overflow-wrap: anywhere; }
.admin-nav { display: flex; gap: var(--sc-space-4); margin-bottom: var(--sc-space-4); }
.admin-nav a { color: var(--sc-color-deep); font-weight: 600; min-height: 44px; display: inline-flex; align-items: center; }
.qr svg { width: min(70vw, 320px); height: auto; display: block; margin: var(--sc-space-4) auto; }
.link { word-break: break-all; font-size: var(--sc-text-small); }
.filters a, td a, .link a { display: inline-flex; align-items: center; min-height: 44px; }
form.inline { display: inline-block; margin-right: var(--sc-space-2); }
.chip { display: inline-block; padding: 2px 10px; border-radius: var(--sc-radius-pill); background: var(--sc-color-sky-pale); color: var(--sc-color-ink-blue); font-size: var(--sc-text-caption); text-transform: uppercase; letter-spacing: var(--sc-tracking-overline); }
.chip-paid { border: 1px solid var(--sc-color-success); }
.chip-failed, .chip-overdue, .chip-void { border: 1px solid var(--sc-color-danger); }
.filters a { margin-right: var(--sc-space-2); color: var(--sc-color-deep); }
.filters a.active { font-weight: 700; text-decoration: underline; }
.notice { background: var(--sc-color-sky-pale); border-radius: var(--sc-radius-sm); padding: var(--sc-space-2) var(--sc-space-3); }
pre.provisioning { white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--sc-text-small); background: var(--sc-color-canvas); padding: var(--sc-space-3); border-radius: var(--sc-radius-sm); }
.table-wrap { overflow-x: auto; }
/* Consent bar: a slim bar fixed to the bottom on the first visit. start.js shows it, and sets --sc-consent-offset on the page to its height (body padding, and scroll padding so a focused control is never left under the bar). */
.consent { position: fixed; inset-inline: 0; bottom: 0; z-index: var(--sc-z-consent); background: var(--sc-color-surface); border-top: 1px solid var(--sc-color-border); box-shadow: var(--sc-shadow-header); padding-bottom: max(0px, env(safe-area-inset-bottom)); }
.consent-inner { max-width: 760px; margin: 0 auto; padding: var(--sc-space-4); display: flex; flex-direction: column; gap: var(--sc-space-3); }
.consent-title { margin: 0; font-weight: 600; font-size: var(--sc-text-small); color: var(--sc-color-ink-blue); }
.consent-body { margin: var(--sc-space-1) 0 0; font-size: var(--sc-text-small); color: var(--sc-color-text-secondary); }
.consent-body a { color: var(--sc-color-deep); }
.consent-actions { display: flex; gap: var(--sc-space-3); }
.consent-actions .button { flex: 1; text-align: center; }
@media (min-width: 768px) { .consent-inner { flex-direction: row; align-items: center; justify-content: space-between; } .consent-actions .button { flex: none; } }
html { scroll-padding-bottom: var(--sc-consent-offset, 0px); }
body { padding-bottom: var(--sc-consent-offset, 0px); }
/* "Your Privacy Rights" in the footer: a button that reads as a link, at least 44px tall. */
button.link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--sc-space-2); background: none; border: 0; font: inherit; color: var(--sc-color-deep); text-decoration: underline; cursor: pointer; word-break: normal; }
.turnstile { margin: var(--sc-space-3) 0; min-height: 65px; }