:root { --ink: #111; --muted: #555; --line: #ddd; --bg: #fff; --ok: #1f7a3a; --info: #1d4ed8; --warn: #b45309; --grey: #52525b; --wallet: #10245c; --shop: #be1d67; --check: #3f3f46; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: -apple-system-body; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 1rem; line-height: 1.5; color: var(--ink); background: var(--bg); }
main { max-width: 38rem; margin: 0 auto; padding: 1rem 1rem 3rem; }
h1 { font-size: 1.5rem; line-height: 1.25; margin: .5rem 0 1rem; }
h2 { font-size: 1.15rem; margin: 1.5rem 0 .5rem; }
p, li { max-width: 36rem; }
a { color: var(--info); }
button, .btn { display: block; width: 100%; min-height: 3rem; padding: .85rem 1rem; margin: .75rem 0; font: inherit; font-weight: 600; border-radius: .75rem; border: 2px solid var(--ink); background: var(--ink); color: #fff; cursor: pointer; text-align: center; text-decoration: none; }
button.secondary, .btn.secondary { background: transparent; color: var(--ink); }
button:disabled { opacity: .45; cursor: not-allowed; }
button:focus-visible, a:focus-visible { outline: 3px solid var(--info); outline-offset: 3px; }
.muted { color: var(--muted); font-size: .95rem; }
.card { border: 1px solid var(--line); border-radius: 1rem; padding: 1rem 1.1rem; margin: 1rem 0; background: #fff; }
.see { border-left: 4px solid var(--line); padding: .5rem .75rem; margin: .75rem 0; background: #fafafa; }
.see strong { display: block; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.code { font: 700 1.6rem/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .2em; }
.pill { display: inline-block; padding: .1rem .55rem; border-radius: 999px; font-size: .8rem; font-weight: 600; background: #eee; }
.progress { height: .4rem; background: #eee; border-radius: 999px; overflow: hidden; margin: .25rem 0 1rem; }
.progress > span { display: block; height: 100%; background: var(--ink); }
.result { border-radius: 1rem; padding: 1rem 1.1rem; margin: 1rem 0; border: 2px solid; }
.result h2 { margin: 0 0 .35rem; font-size: 1.2rem; }
.result.worked, .result.refused { border-color: var(--ok); background: #f0fdf4; }
.result.tellus { border-color: var(--info); background: #eff6ff; }
.result.didnt, .result.hiccup { border-color: var(--grey); background: #f4f4f5; }
.result.unexpected { border-color: var(--warn); background: #fffbeb; }
.plan { list-style: none; padding: 0; }
.plan li { display: flex; gap: .6rem; align-items: baseline; padding: .45rem 0; border-bottom: 1px solid var(--line); }
.plan .tick { width: 1.4rem; flex: none; font-weight: 700; }
.stop { text-align: center; color: var(--muted); font-size: .9rem; padding: .5rem 0; border-bottom: 1px dashed var(--line); }
.choices button { text-align: left; font-weight: 500; background: #fff; color: var(--ink); border-width: 1px; }
.choices button[aria-pressed="true"] { border-width: 3px; border-color: var(--info); background: #eff6ff; }
.qr { display: inline-block; padding: .75rem; border: 3px solid var(--ink); border-radius: .75rem; background: #fff; }
.qr-label { font-weight: 800; letter-spacing: .1em; margin-bottom: .4rem; text-align: center; }
.banner { position: sticky; top: env(safe-area-inset-top, 0); z-index: 5; padding: .6rem 1rem; font-weight: 700; text-align: center; color: #fff; background: var(--ink); }
.saved { position: fixed; right: .75rem; bottom: calc(.75rem + env(safe-area-inset-bottom, 0px)); font-size: .8rem; padding: .25rem .6rem; border-radius: 999px; background: #eee; }
.saved.off { background: #fef3c7; }
/* TEST GUIDE ribbon, on every test page */
#pk-ribbon { position: sticky; top: env(safe-area-inset-top, 0); z-index: 10; background: #fef9c3; border-bottom: 2px solid #ca8a04; padding: .5rem 1rem; font-size: .95rem; }
#pk-ribbon .pk-ribbon-title { font-size: .72rem; font-weight: 800; letter-spacing: .1em; color: #713f12; }
#pk-ribbon p { margin: .15rem 0; }
/* Site looks */
body.wallet { --bg: #f5f7ff; } body.wallet header.site { background: var(--wallet); }
body.shop header.site { background: var(--shop); }
body.check header.site { background: var(--check); }
header.site { color: #fff; padding: .6rem 1rem; font-weight: 800; letter-spacing: .06em; }
header.site small { display: block; font-weight: 500; letter-spacing: 0; opacity: .85; }
.mark { background: #ffe1ef; padding: .75rem; border-radius: .6rem; font-weight: 600; }
.keypad { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; }
.keypad button { margin: 0; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }