/* B08 checkout — M06 v5 (research/mockups/M06-checkout-as-shipped/variants/v5-persona-fixes),
   ported 2026-09-28. Linked from templates/checkout/_base.html beside site-chrome.css, which is
   the ONE token sheet (M42): every color, face and alpha here is read through its tokens —
   this file defines none (LD#55) and names no font family; the prose face reaches the
   checkout's classes only through the sheet's generated typography rule (LD#53). Color
   meaning (LD#52 / DC-11): green is the purchase path (Pay, "Get my tickets →"); gold is
   "you chose this"; red is a STATUS only — the error rows and the pill's last minute, as
   the mockup draws them — and never on a control. The checkout is a paper page
   (<html data-ground="paper">, DC-14): the paper-world atmosphere at the foot of this file
   is the mockup's _light.html (D-23/D-24) re-expressed on the sheet's tokens. */
*{ box-sizing:border-box } html{ -webkit-text-size-adjust:100% }
body{ margin:0; font-family:var(--font-display); color:var(--ink); background:var(--dome); min-height:100dvh; }
a{ color:inherit }
.co-wrap{ max-width:64rem; margin-inline:auto; padding:1.25rem 1.25rem 6rem; }
.display{ letter-spacing:0; line-height:1.05; }
h1{ font-size:clamp(1.6rem,5vw,2.2rem); margin:.2rem 0 .3rem; font-weight:400 }
h2{ font-size:1.05rem; margin:1.6rem 0 .6rem; color:var(--muted); font-weight:400; text-transform:uppercase; letter-spacing:.06em }
.sub{ color:var(--muted); margin:0 0 1.2rem }
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem; border-radius:9999px; padding:.85rem 1.4rem; font:inherit; font-size:1rem; cursor:pointer; text-decoration:none; transition:transform .12s, filter .12s; }
.btn-gold{ background:var(--gold); color:#1a1205; border:1px solid var(--gold); } .btn-gold:hover{ filter:brightness(1.05); transform:translateY(-1px) }
.btn-ghost{ border:1px solid var(--line); background:rgba(255,255,255,.03); color:var(--ink); } .btn-ghost:hover{ border-color:rgba(244,243,241,.4) }
.btn[disabled]{ opacity:.55; cursor:default; transform:none }
/* DC-11 — green is the purchase path; the checkout's last step wears it (D-16). */
.btn-buy{ background:rgba(31,223,103,.06); color:#7ff0ad; border:1px solid rgba(31,223,103,.7); } .btn-buy:hover{ background:rgba(31,223,103,.16); border-color:var(--green); color:var(--green-ink); }
.btn-wide{ width:100%; padding:1rem 1.4rem; font-size:1.05rem }
.card{ border:1px solid var(--line); background:var(--plate); border-radius:16px; padding:1rem 1.1rem; margin:.7rem 0 }
.row{ display:flex; align-items:center; justify-content:space-between; gap:1rem }
.muted{ color:var(--muted) } .faint{ color:var(--faint) } .gold{ color:var(--gold) } .green{ color:var(--green) }
.lines{ list-style:none; margin:0; padding:0 } .lines li{ display:flex; justify-content:space-between; gap:1rem; padding:.45rem 0; border-bottom:1px solid var(--line) }
.lines li:last-child{ border-bottom:0 } .lines li[hidden]{ display:none } .lines .tot{ font-size:1.15rem; padding-top:.7rem }
.chips{ display:flex; flex-wrap:wrap; gap:.5rem } .chip{ position:relative; border:1px solid var(--line); border-radius:9999px; padding:.55rem .95rem; cursor:pointer; background:rgba(255,255,255,.03) }
.chip input{ position:absolute; opacity:0; pointer-events:none } .chip:has(input:checked){ border-color:var(--gold); color:var(--gold) }
.qty{ display:inline-flex; align-items:center; border:1px solid var(--line); border-radius:9999px; overflow:hidden }
.qty button{ background:none; border:0; color:var(--ink); font:inherit; font-size:1.2rem; width:2.4rem; height:2.4rem; cursor:pointer } .qty output{ min-width:1.6rem; text-align:center }
label.f{ display:block; margin:.9rem 0 .35rem; color:var(--muted); font-size:.92rem }
input.f{ width:100%; font:inherit; font-size:1.05rem; color:var(--ink); background:rgba(255,255,255,.04); border:1px solid var(--line); border-radius:12px; padding:.85rem 1rem; outline:none } input.f:focus{ border-color:var(--gold) }
.note{ font-size:.9rem; color:var(--muted); margin:.6rem 0 0 }
/* the error rows: the mockup's red-tinted status bar (a status, never a control — LD#52) */
.err{ border:1px solid rgba(230,29,42,.5); color:var(--ink); background:rgba(230,29,42,.07); border-radius:12px; padding:.75rem 1rem; margin:.8rem 0 }
.err a{ color:var(--ink); text-underline-offset:3px }
.linkbtn{ background:none; border:0; padding:0; font:inherit; color:var(--muted); text-decoration:underline; text-underline-offset:.2em; cursor:pointer } .linkbtn:hover{ color:var(--ink) }
.esc{ display:inline-block; margin-bottom:1rem; color:var(--muted); text-decoration:none } .esc:hover{ color:var(--ink) }
.spin{ width:44px; height:44px; border:3px solid var(--line); border-top-color:var(--gold); border-radius:50%; animation:rot 1s linear infinite; margin:1.5rem auto } @keyframes rot{ to{ transform:rotate(360deg) } }
.vh{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ── the band (D-22): one strip, not a header — the show and when on the left, the hold
   pill on the right, the photo behind; the venue is the program page's fact. ── */
.co{ margin-top:.4rem; }
.co-band{ position:relative; overflow:hidden; border-radius:20px; border:1px solid var(--line); isolation:isolate; }
.co-band img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:66% 42%; z-index:0; transform:scale(1.04); }
.co-band::after{ content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(90deg, rgba(6,6,7,.92) 0%, rgba(6,6,7,.72) 55%, rgba(6,6,7,.35) 100%),
             linear-gradient(0deg, rgba(6,6,7,.85) 0%, rgba(6,6,7,0) 60%); }
.co-band-in{ position:relative; z-index:2; padding:.95rem 1.15rem 1rem; display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"back back" "title hold" "when hold"; column-gap:1rem; row-gap:.15rem; align-items:center; }
.co-back{ grid-area:back; justify-self:start; color:var(--muted); text-decoration:none; font-size:.9rem; margin-bottom:.35rem; }
.co-back:hover{ color:var(--ink); }
.co-band h1{ grid-area:title; font-size:clamp(1.25rem,3.4vw,1.6rem); margin:0; line-height:1.1; text-shadow:0 1px 18px rgba(0,0,0,.6); }
.co-when{ grid-area:when; margin:0; color:var(--muted); font-size:.95rem; }
.co-when b{ color:var(--ink); font-weight:400; }
/* the hold pill — counts from B01's deadline only (register #39); its last minute is gold, not red */
.co-band .hold{ grid-area:hold; margin:0; display:inline-flex; align-items:center; gap:.45rem; align-self:center; justify-self:end; font-variant-numeric:tabular-nums;
  padding:.4rem .8rem; border-radius:999px; border:1px solid rgba(255,155,18,.5); background:rgba(255,155,18,.12); color:var(--ink); font-size:.92rem; }
.co-band .hold b{ font-weight:400; color:var(--gold); }
.co-band .hold.red{ border-color:rgba(230,29,42,.6); background:rgba(230,29,42,.14); } .co-band .hold.red b{ color:#b3111c; }
@media(max-width:520px){ .co-band-in{ grid-template-areas:"back back" "title title" "when when" "hold hold"; row-gap:.2rem; } .co-band .hold{ justify-self:start; margin-top:.4rem; } }

/* ── the plate and the order (D-13) ── */
.co-grid{ display:grid; grid-template-columns:minmax(0,1fr); gap:1.2rem; margin-top:1.1rem; }
.co-form, .co-sum{ min-width:0; }
@media(min-width:860px){ .co-grid{ grid-template-columns:minmax(0,1fr) 22rem; gap:1.6rem; align-items:start; } .co-sum{ position:sticky; top:1rem; } }
.co-form, .co-sum{ border:1px solid var(--line); background:var(--plate); border-radius:20px; }
.co-form{ padding:.4rem 1.25rem .9rem; }
.co-form section{ padding:1.1rem 0 1.2rem; border-top:1px solid var(--line); }
.co-form section:first-of-type{ border-top:0; }
.co h2{ margin:0 0 .7rem; font-size:1.05rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); display:flex; align-items:baseline; gap:.6rem; }
.co h2 .n{ display:inline-grid; place-items:center; width:1.5rem; height:1.5rem; border-radius:50%; border:1px solid var(--line); color:var(--gold); font-size:.85rem; letter-spacing:0; }
.co h2 .opt{ letter-spacing:0; text-transform:none; color:var(--muted); }
/* B17 F9 (2026-10-03): the gone/processing headline is level two in the tree and in the markup, drawn exactly as the h1 was */
.co h2.headline{ display:block; margin:.2rem 0 .3rem; font-size:clamp(1.6rem,5vw,2.2rem); font-weight:400; color:inherit; text-transform:none; letter-spacing:0; gap:normal; }
.co label.f{ margin-top:.2rem; }
.co input.f{ background:rgba(255,255,255,.035); }
/* Buyer name (LD#3 as amended 2026-11-03; changes/assets/2026-11-03-buyer-name-at-checkout/checkout.variant.html):
   First name | Last name side by side, stacked under 340 px; the empty box outlined on a blank-name refusal. */
.co .name2{ display:grid; grid-template-columns:1fr 1fr; gap:.6rem; }
.co .name2 + label.f, .co .name2 + .me{ margin-top:.85rem; }
.co input.f[aria-invalid="true"]{ border-color:#b3111c; }
@media (max-width:340px){ .co .name2{ grid-template-columns:1fr; } }
.co .hint{ margin:.55rem 0 0; font-size:.92rem; color:var(--muted); }
.co .hint b{ color:var(--ink); font-weight:400; }
.co .hint a{ color:var(--ink); text-decoration:underline; text-underline-offset:3px; } .co .hint a:hover{ color:var(--gold); }
/* D-47: the signed-in address — text, not a field; the session's proof as a small tag */
.co .me{ margin:.2rem 0 0; display:flex; flex-wrap:wrap; align-items:center; gap:.35rem .6rem; font-size:1.05rem; min-width:0; }
.co .me b{ font-weight:500; overflow-wrap:anywhere; }
.co .tag{ display:inline-flex; align-items:center; gap:.3rem; flex:none; border:1px solid var(--green-line); background:rgba(31,223,103,.12); color:var(--green-ink); border-radius:999px; padding:.15rem .6rem; font-size:.82rem; letter-spacing:.02em; }
.co .tag svg{ width:12px; height:12px; stroke:#7ff0ad; stroke-width:2.4; fill:none; }
/* the two quiet reveals */
.co .reveals{ display:flex; flex-wrap:wrap; gap:.5rem .6rem; }
.co .reveal{ border:1px solid var(--line); border-radius:999px; padding:.5rem .95rem; cursor:pointer; color:var(--ink); background:rgba(255,255,255,.03); font-size:.95rem; display:inline-flex; align-items:center; gap:.45rem; list-style:none; text-decoration:none; }
.co .reveal::-webkit-details-marker{ display:none; }
.co .reveal:hover{ border-color:rgba(244,243,241,.4); }
.co details[open] > .reveal{ border-color:var(--gold); color:var(--gold); }
.co details{ display:contents; }
.co .revealbody{ flex-basis:100%; padding-top:.4rem; }
.co .inline{ display:flex; gap:.5rem; align-items:stretch; }
.co .inline input.f{ flex:1; }
.co .reveals > details, .co .reveals > .applied{ min-width:0; max-width:100%; }
.co .applied{ display:inline-flex; align-items:center; gap:.55rem; max-width:100%; min-width:0; border:1px solid var(--green-line); background:rgba(31,223,103,.09); color:var(--green-ink); border-radius:999px; padding:.5rem .95rem; font-size:.95rem; }
.co .applied .who{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.co .applied.mine{ flex-wrap:wrap; row-gap:.2rem; } .co .applied.mine .who{ white-space:normal; overflow:visible; }
.co .applied .x{ color:var(--muted); text-decoration:none; font-size:.9rem; margin-left:.2rem; flex:none; background:none; border:0; padding:0; font-family:inherit; cursor:pointer; } .co .applied .x:hover{ color:var(--ink); }
.co .applied svg{ width:16px; height:16px; stroke:#7ff0ad; stroke-width:2.2; fill:none; }

/* payment — the Payment Element mounts into #payment-element; until it does (and with scripts
   off, or no publishable key) the .pe plate is the card form's shape, drawn as the mockup drew it */
.co .secure{ margin:.9rem 0 0; display:flex; align-items:center; gap:.45rem; color:var(--muted); font-size:.9rem; }
.co .secure svg{ width:14px; height:14px; stroke:var(--muted); stroke-width:2; fill:none; }
.co #payment-element{ margin-top:.2rem; }
.pe{ font-family:system-ui,-apple-system,sans-serif; color:var(--ink); }
.pe .pe-l{ display:block; font-size:.93rem; color:var(--muted); margin:.7rem 0 0; }
.pe .pe-f{ display:flex; align-items:center; justify-content:space-between; margin-top:.3rem; background:var(--plate); border:1px solid var(--line); border-radius:12px; padding:.8rem .95rem; font-size:1rem; }
.pe .pe-ph{ color:var(--faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.pe .pe-f > :first-child{ min-width:0; }
/* D-43: minmax(0,…) — a bare 1fr can't shrink below an input's intrinsic width on a 390 phone */
.pe .pe-row{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:.7rem; }
.pe .pe-brands{ display:inline-flex; gap:5px; } .pe .pe-brands i{ display:inline-block; width:26px; height:17px; border-radius:3px; background:var(--line); }
/* the wallets under the card fields (Notion Medium #20): Apple Pay / Google Pay / Link as Stripe's
   Express Checkout buttons, after a quiet "or" hairline; the block is hidden until Stripe says a
   method is available here, so no browser ever meets a dead button */
.co #express[hidden]{ display:none; }
.co #express{ margin-top:.9rem; }
.co .orpay{ display:flex; align-items:center; gap:.7rem; margin:0 0 .7rem; font-size:.85rem; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; }
.co .orpay::before, .co .orpay::after{ content:""; flex:1; border-top:1px solid var(--line); }
.co #pay-error{ margin-top:.8rem; }
/* the order */
.co-sum{ padding:1.1rem 1.25rem 1.2rem; }
.co-sum h2{ margin-bottom:.5rem; }
.co-sum .lines li{ padding:.5rem 0; }
.co-sum .lines .tot{ font-size:1.05rem; }
.co-sum .lines .tot strong{ font-size:1.5rem; color:var(--gold); font-weight:400; font-variant-numeric:tabular-nums; }
.co-sum .buy{ margin-top:1rem; font-size:1.1rem; padding:1rem 1.4rem; }
.co-sum .fine{ margin:.7rem 0 0; font-size:.9rem; color:var(--muted); line-height:1.45; }
.co-sum .basket-note{ margin:.7rem 0 0; font-size:.9rem; color:var(--muted); line-height:1.45; }
/* LD#70 / seams §4: the assent sentence sits directly above Place Order at BODY size (1rem — the
   .fine print under the button is .9rem on purpose; this is not fine print), links underlined.
   The refund line (seams §2) prints with the price, before payment, in the same measure. */
.co-sum .legal-consent{ margin:1rem 0 0; font-size:1rem; line-height:1.5; color:var(--ink); }
.co-sum .legal-consent b{ font-weight:400; }
.co-sum .legal-consent a{ color:var(--ink); text-decoration:underline; text-underline-offset:3px; } .co-sum .legal-consent a:hover{ color:var(--gold); }
.co-sum .refund-line{ margin:.7rem 0 0; font-size:.9rem; line-height:1.45; color:var(--muted); } /* the page's small text (.fine), Ethan 2026-10-29 */
@media(max-width:859px){ .co-sum{ order:2; } }
.co .err{ margin:.2rem 0 .8rem; }
/* D-42 / LD#60: the decline bar is ONE tap target — an anchor to #payment, so it works with
   JS off — and the payment section it lands on wears a brief gold ring. */
.co a.err-jump{ display:flex; align-items:center; justify-content:space-between; gap:.9rem; text-decoration:none; color:var(--ink); }
.co a.err-jump b{ font-weight:600; }
.co a.err-jump:hover, .co a.err-jump:focus-visible{ outline:none; border-color:#ff8a92; box-shadow:0 0 0 2px rgba(230,29,42,.3); }
.co a.err-jump .chev{ flex:none; display:inline-grid; place-items:center; width:1.9rem; height:1.9rem; border-radius:50%; border:1px solid rgba(230,29,42,.6); font-size:1rem; }
.co-form section#payment{ outline:none; scroll-margin-top:.6rem; border-radius:14px; }
.co-form section#payment:target, .co-form section#payment.landed{ animation:land 1.2s ease-out 1 both; }
@keyframes land{ 0%,40%{ box-shadow:0 0 0 2px var(--gold), 0 0 24px rgba(255,155,18,.35); } 100%{ box-shadow:0 0 0 2px transparent, 0 0 0 transparent; } }
.co .echo{ margin:-.25rem 0 .85rem; }
/* D-32 / LD#59: Abandon Cart — small, grey, at the very foot, never competing with Pay */
.abandon{ margin:2.2rem 0 0; text-align:center; }
.abandon form{ display:inline; }
.abandon button{ background:none; border:0; cursor:pointer; font-size:.9375rem; color:var(--faint); text-decoration:none; padding:.5rem .8rem; border-radius:999px; font-family:var(--font-display); }
.abandon button:hover{ color:var(--muted); text-decoration:underline; text-underline-offset:3px; }
/* the choose page (the JS-off / deep-link fallback, LD#57) */
.tier{ border:1px solid var(--line); background:var(--plate); border-radius:16px; padding:1rem 1.1rem; margin:.7rem 0 }
.tier .tier-d{ color:var(--muted); font-size:.92rem; margin:.2rem 0 0 }
.hold-note{ font-size:.9rem; color:var(--muted); margin:.6rem 0 0 }
/* the way out / gone states */
.gone{ margin-top:1.4rem; }
/* every animation cut under reduced motion (LD#54) */
@media (prefers-reduced-motion: reduce){
  .spin{ animation:none }
  .btn{ transition:none }
  .co-form section#payment:target, .co-form section#payment.landed{ animation:none; box-shadow:0 0 0 2px var(--gold); }
}
/* the confirmation's mark (confirmation.html extends _base.html; kept here so the shared
   base carries no <style> block of its own) */
.ok-anim{ width:96px; height:96px; margin:1.5rem auto 1rem; border-radius:50%; border:2px solid var(--green); display:grid; place-items:center; animation:pop .6s cubic-bezier(.2,1.4,.4,1) both }
.ok-anim svg{ width:52px; height:52px; stroke:var(--green); stroke-width:2.2; fill:none; stroke-dasharray:60; stroke-dashoffset:60; animation:draw .7s .25s ease-out forwards }
@keyframes pop{ from{ transform:scale(.4); opacity:0 } to{ transform:scale(1); opacity:1 } } @keyframes draw{ to{ stroke-dashoffset:0 } }
@media (prefers-reduced-motion: reduce){ .ok-anim, .ok-anim svg{ animation:none } .ok-anim svg{ stroke-dashoffset:0 } }

/* ── the paper world's atmosphere (M06 D-23 / D-24, the mockup's _light.html), on the sheet's
   tokens — the dome's projection light leaking onto the paper: an aurora of two soft light
   fields fixed behind the page, a neon rim on the plates, focus rings in the same light. The
   neon is weather, never meaning (LD#52). Honours reduced motion (LD#54). ── */
html[data-ground="paper"] body{ position:relative; }
html[data-ground="paper"] ::selection{ background:var(--gold); color:#1a1205; }
html[data-ground="paper"] body::before{ content:""; position:fixed; inset:-20vh -20vw; z-index:0; pointer-events:none;
  background:
    radial-gradient(44rem 30rem at 88% 6%, hsl(var(--neon-h) 100% 59% / calc(.34 * var(--neon-a))) 0%, hsl(var(--neon-h) 100% 59% / 0) 70%),
    radial-gradient(40rem 34rem at 4% 94%, hsl(calc(var(--neon-h) + 70) 90% 66% / calc(.30 * var(--neon-a))) 0%, hsl(calc(var(--neon-h) + 70) 90% 66% / 0) 70%),
    radial-gradient(26rem 20rem at 60% 68%, hsl(var(--neon-h) 100% 59% / calc(.16 * var(--neon-a))) 0%, hsl(var(--neon-h) 100% 59% / 0) 70%),
    radial-gradient(18rem 14rem at 30% 30%, hsl(calc(var(--neon-h) + 70) 90% 66% / calc(.10 * var(--neon-a))) 0%, hsl(calc(var(--neon-h) + 70) 90% 66% / 0) 70%);
  filter:blur(28px); animation:aurora 38s ease-in-out infinite alternate; }
@keyframes aurora{ from{ transform:translate3d(0,0,0) scale(1); } to{ transform:translate3d(-3vw,2vh,0) scale(1.06); } }
html[data-ground="paper"] .sitehdr, html[data-ground="paper"] main, html[data-ground="paper"] .sitefoot, html[data-ground="paper"] .co, html[data-ground="paper"] .cf{ position:relative; z-index:1; }
html[data-ground="paper"] .co-band, html[data-ground="paper"] .cf-band{ box-shadow:0 0 0 1px hsl(var(--neon-h) 100% 59% / calc(.25 * var(--neon-a))), 0 24px 50px -30px hsl(calc(var(--neon-h) + 70) 90% 66% / calc(.45 * var(--neon-a))); }
html[data-ground="paper"] .co-form, html[data-ground="paper"] .co-sum, html[data-ground="paper"] .cf-plate, html[data-ground="paper"] .tier{ box-shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 0 0 1px hsl(var(--neon-h) 100% 59% / calc(.16 * var(--neon-a))), 0 24px 50px -32px hsl(calc(var(--neon-h) + 70) 90% 66% / calc(.35 * var(--neon-a))); }
html[data-ground="paper"] .co-band .hold{ box-shadow:0 0 16px -4px hsl(var(--neon-h) 100% 59% / calc(.5 * var(--neon-a))); }
html[data-ground="paper"] .chip, html[data-ground="paper"] .qty, html[data-ground="paper"] .btn-ghost, html[data-ground="paper"] .co .reveal{ background:rgba(23,23,26,.03); }
html[data-ground="paper"] .btn-ghost:hover, html[data-ground="paper"] .chip:hover, html[data-ground="paper"] .co .reveal:hover{ border-color:rgba(23,23,26,.4); background:rgba(23,23,26,.05); }
html[data-ground="paper"] input.f, html[data-ground="paper"] .co input.f{ background:var(--plate); }
html[data-ground="paper"] input.f::placeholder{ color:rgba(23,23,26,.4); }
html[data-ground="paper"] .co .gold, html[data-ground="paper"] .co h2 .n, html[data-ground="paper"] .co-band .hold b, html[data-ground="paper"] .co-sum .lines .tot strong{ color:var(--gold-ink); }
html[data-ground="paper"] .green, html[data-ground="paper"] .co .green{ color:var(--green-ink); }
html[data-ground="paper"] .co .applied{ background:rgba(31,223,103,.12); }
html[data-ground="paper"] .co .applied svg, html[data-ground="paper"] .co .tag svg{ stroke:var(--green-ink); }
html[data-ground="paper"] .btn-buy{ background:rgba(31,223,103,.10); color:var(--green-ink); border-color:var(--green-line); }
html[data-ground="paper"] .btn-buy:hover{ background:rgba(31,223,103,.2); border-color:var(--green-ink); color:#0f5f2f; }
html[data-ground="paper"] .btn-gold{ box-shadow:0 1px 2px rgba(0,0,0,.15), 0 14px 30px -14px rgba(255,155,18,.6); }
/* B17 row 1 (2026-10-03, LD#52): gold as TEXT on paper is --gold-ink (5.1:1) — the chosen chip on the JS-off page */
html[data-ground="paper"] .chip:has(input:checked){ color:var(--gold-ink); }
html[data-ground="paper"] .co-band h1, html[data-ground="paper"] .co-when, html[data-ground="paper"] .co-when b, html[data-ground="paper"] .co-back, html[data-ground="paper"] .co-band .hold{ color:#f4f3f1; }
html[data-ground="paper"] .co-when{ color:rgba(244,243,241,.72); } html[data-ground="paper"] .co-back{ color:rgba(244,243,241,.72); } html[data-ground="paper"] .co-back:hover{ color:#f4f3f1; }
html[data-ground="paper"] .co-band .hold b{ color:var(--gold); }
html[data-ground="paper"] a:focus-visible, html[data-ground="paper"] button:focus-visible, html[data-ground="paper"] [tabindex]:focus-visible, html[data-ground="paper"] input.f:focus, html[data-ground="paper"] .co input.f:focus{ outline:2px solid var(--neon); outline-offset:3px; border-color:var(--neon); }
@media (prefers-reduced-motion: reduce){ html[data-ground="paper"] body::before{ animation:none; } }

/* ── F01 gift cards at the ticket checkout (M11, approved by Ethan 2026-11-06; GIFT_REDEMPTION) ──
   D-02: applied codes and cards sit ahead of the one code box; D-03: the line under a gift pill
   says what stays on the card. `.gifted` renders only with the switch on, so nothing here moves
   the checkout while it is off. The hint's face is the prose list's (`.hint`, typography.json). */
.co .reveals > .gift-left{ flex-basis:100%; margin:-.15rem 0 .1rem .2rem }
.co .reveals.gifted > .applied, .co .reveals.gifted > .gift-left{ order:-1 }
.co .applied.gift .who{ flex:1 1 9rem }
@media (max-width:560px){ .co .applied.gift{ border-radius:16px; align-items:flex-start } .co .applied.gift svg{ margin-top:.2rem } }