/* KIJI Club claim page. Customer-facing: the website's KIJI colours and type
   (Eina 03 at 400 / 600 / 700), and the website's black KIJI Club card
   (kijibakehouse-shopify sections/kiji-club-member.liquid) heading every screen.
   One column on one left edge: card, title, text, fields, actions. */
@font-face { font-family: 'Eina 03'; src: url('/fonts/eina-03-regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Eina 03'; src: url('/fonts/eina-03-semibold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Eina 03'; src: url('/fonts/eina-03-bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  --cream: #fffbf2;
  --paper: #ffffff;
  --espresso: #4a2810;
  --brown: #663915;
  --ink2: rgba(74, 40, 16, .66);
  --ink3: rgba(74, 40, 16, .38);
  --hair: rgba(74, 40, 16, .12);
  --oat: #e8dccb;
  --coral-text: #b04820;
  --green: #1b7f46;
  /* the card (website's KIJI Club card) */
  --card: #17120e;
  --card-ink: #fffbf2;
  --card-ink2: rgba(255, 251, 242, .66);
  --gold: #f2bc4a;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  /* one spacing scale */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--cream); -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
body { margin: 0; background: var(--cream); color: var(--espresso); font: 400 16px/1.5 'Eina 03', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif; }
h1, h2 { margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
button, input { font: inherit; color: inherit; }
button, a { touch-action: manipulation; }
button { -webkit-user-select: none; user-select: none; }
a { color: inherit; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }

.app {
  max-width: 440px; margin: 0 auto; min-height: 100dvh; display: flex; flex-direction: column; gap: var(--s6);
  padding-top: max(16px, calc(env(safe-area-inset-top, 0px) + 8px));
  padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px));
  padding-bottom: max(24px, env(safe-area-inset-bottom, 0px));
}
main { flex: 1; }

/* ── The KIJI Club card ─────────────────────────────────────────────────────
   The website's black metal card: engraved KIJI pattern, one soft band of light
   that drifts across it (claim.js), a thin lit rim. Real card proportions. */
.kc {
  position: relative; isolation: isolate; aspect-ratio: 1.586; display: flex; flex-direction: column; justify-content: space-between;
  padding: 18px 20px 20px; border-radius: 20px; color: var(--card-ink); overflow: hidden;
  /* The website's black card (VIP and the plain KIJI Club card): near-black brushed metal. */
  background: repeating-linear-gradient(90deg, rgb(255 255 255 / .014) 0 1px, transparent 1px 3px), linear-gradient(125deg, #030303 0%, #0e0d0c 28%, #1b1917 42%, #0b0a09 56%, #040404 78%, #0a0908 100%);
  box-shadow: 0 1px 2px rgb(23 18 14 / .18), 0 4px 8px rgb(23 18 14 / .12), 0 14px 28px -6px rgb(23 18 14 / .22), 0 30px 56px -18px rgb(43 26 14 / .4);
}
.kc > :not(.kc-fx) { position: relative; z-index: 1; }
.kc-fx, .kc-etch, .kc-sheen, .kc-rim { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }
.kc-fx { z-index: 0; }
.kc-etch { background: rgb(255 246 230 / .075); -webkit-mask: url('/kiji-club-pattern.svg') center / auto 224% no-repeat; mask: url('/kiji-club-pattern.svg') center / auto 224% no-repeat; }
.kc-etch--lit { background: none; }
.kc-rim { padding: 1.5px; background: linear-gradient(135deg, #5f5a55, #1c1a18 40%, #403c38 62%, #141211); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.kc-beam {
  --a: .2; position: absolute; top: -100%; left: -100%; width: 300%; height: 300%;
  background: linear-gradient(115deg, transparent 36%, rgb(255 255 255 / calc(var(--a) * .45)) 45%, rgb(255 255 255 / var(--a)) 50%, rgb(255 255 255 / calc(var(--a) * .45)) 55%, transparent 64%);
  transform: translate(var(--bx, -20%), var(--by, -10%)); will-change: transform;
}
.kc-sheen .kc-beam { --a: .07; }
.kc-rim .kc-beam { --a: .8; }

.kc-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); min-height: 28px; }
.kc-brand { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; color: var(--card-ink); font-size: 13px; font-weight: 700; letter-spacing: .16em; line-height: 1; }
/* The croissant as tall as the caps plus a little, sitting on the same middle line. */
.kc-brand .mark { width: 14px; height: 17px; flex: none; color: var(--gold); }
.kc-brand span { padding-top: 1px; }
.kc-chip { font-size: 12px; font-weight: 600; letter-spacing: .02em; padding: 5px 10px; border-radius: 999px; background: rgb(255 251 242 / .12); color: var(--card-ink); }
.kc-chip.gold { background: var(--gold); color: var(--card); }

.kc-main { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s4); }
.kc-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kc-label { font-size: 13px; font-weight: 600; color: var(--card-ink2); }
.kc-big { font-size: 44px; line-height: 1.05; font-weight: 700; letter-spacing: -.025em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kc-big small { font-size: 17px; font-weight: 600; letter-spacing: 0; margin-left: 6px; color: var(--card-ink2); }
.kc-sub { font-size: 14px; color: var(--card-ink2); font-variant-numeric: tabular-nums; }
.kc-gold { font-size: 14px; font-weight: 600; color: var(--gold); font-variant-numeric: tabular-nums; }
.kc-lines { display: flex; flex-direction: column; margin-top: 4px; }
.kc-qr { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: none; }
.kc-qr .tile { width: 92px; height: 92px; padding: 5px; border-radius: 10px; background: #fff; }
.kc-qr .tile svg { display: block; width: 100%; height: 100%; }
.kc-qr .tile path { fill: var(--card); }
.kc-qr span { font-size: 10px; font-weight: 600; letter-spacing: .16em; color: var(--card-ink2); font-variant-numeric: tabular-nums; }

/* ── Steps ─────────────────────────────────────────────────────────────── */
.step { display: flex; flex-direction: column; gap: var(--s5); }
.step.enter { animation: enter 240ms var(--ease-out); }
@keyframes enter { from { opacity: 0; transform: translateY(6px); } }
.head { display: flex; flex-direction: column; gap: var(--s2); }
h1 { font-size: 28px; line-height: 1.15; font-weight: 700; letter-spacing: -.02em; outline: none; }
.sub { color: var(--ink2); }
.sub b { color: var(--espresso); font-weight: 600; }
form { display: flex; flex-direction: column; gap: var(--s4); }

.field { display: flex; flex-direction: column; gap: var(--s2); }
.field .k { font-size: 15px; font-weight: 600; display: flex; justify-content: space-between; align-items: baseline; }
.opt { font-size: 13px; font-weight: 400; color: var(--ink2); }
.opt.done { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; color: var(--green); }
.opt.done svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
input {
  width: 100%; height: 54px; border: 1.5px solid var(--oat); border-radius: 14px; background: var(--paper);
  padding: 0 16px; font-size: 18px; font-variant-numeric: tabular-nums; outline: none;
  transition: border-color 150ms var(--ease-out), box-shadow 150ms var(--ease-out);
}
input::placeholder { color: var(--ink3); }
input:focus { border-color: var(--espresso); box-shadow: 0 0 0 4px rgb(242 188 74 / .4); }
input[aria-invalid="true"] { border-color: var(--coral-text); }
input[aria-invalid="true"]:focus { box-shadow: 0 0 0 4px rgb(176 72 32 / .14); }
.money { position: relative; display: block; }
.money .cur { position: absolute; left: 16px; top: 0; bottom: 0; display: flex; align-items: center; font-size: 18px; color: var(--ink2); pointer-events: none; }
.money input { padding-left: 36px; }
input.code { font-size: 26px; font-weight: 600; letter-spacing: .45em; padding-left: 18px; }
.hint { font-size: 13px; color: var(--ink2); }
.err { font-size: 14px; line-height: 1.4; color: var(--coral-text); }

/* The peso sign: Eina has none, so it's drawn from Eina 03's own P with two bars. */
svg.peso { height: .71em; width: auto; vertical-align: baseline; overflow: visible; fill: currentColor; margin-right: .05em; }

/* ── Actions: one dark button, then quieter text buttons under it ──────── */
.actions { display: flex; flex-direction: column; gap: var(--s1); margin-top: var(--s2); }
button.primary {
  height: 56px; border: 0; border-radius: 16px; background: var(--card); color: var(--card-ink);
  font-size: 17px; font-weight: 600; cursor: pointer; margin-bottom: var(--s1);
  transition: transform 120ms var(--ease-out), opacity 150ms var(--ease-out);
}
button.primary:active { transform: scale(.97); }
button.primary[disabled] { opacity: .5; cursor: default; transform: none; }
/* The other way in: scan instead of typing. Outlined, so the dark button stays the one main action. */
button.second {
  height: 56px; display: flex; align-items: center; justify-content: center; gap: 10px; border: 1.5px solid var(--espresso); border-radius: 16px;
  background: var(--paper); color: var(--espresso); font-size: 17px; font-weight: 600; cursor: pointer;
  transition: transform 120ms var(--ease-out), background-color 150ms var(--ease-out);
}
button.second svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
button.second:active { transform: scale(.97); }
button.text { height: 44px; border: 0; background: none; color: var(--espresso); font-size: 16px; font-weight: 600; cursor: pointer; transition: opacity 120ms; }
button.text:active { opacity: .45; }
button.text[disabled] { color: var(--ink3); cursor: default; }
:is(button, a):focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  button.primary:hover { background: #2a211a; }
  button.second:hover { background: #fbf3e2; }
  button.text:hover { opacity: .7; }
}
.fine { font-size: 13px; color: var(--ink2); }
.fine a { text-underline-offset: 2px; }

/* ── Member or new: two choices as rows, the same family as the fields ── */
.choices { display: flex; flex-direction: column; gap: var(--s3); }
.choice {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: var(--s3); align-items: center;
  width: 100%; min-height: 72px; padding: 14px 18px; text-align: left; cursor: pointer;
  border: 1.5px solid var(--oat); border-radius: 16px; background: var(--paper);
  transition: transform 120ms var(--ease-out), border-color 150ms var(--ease-out);
}
.choice .c-t { font-size: 17px; font-weight: 600; }
.choice .c-s { grid-row: 2; font-size: 14px; color: var(--ink2); }
.choice svg { grid-column: 2; grid-row: 1 / span 2; width: 8px; height: 14px; fill: none; stroke: var(--ink2); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.choice:active { transform: scale(.98); }
@media (hover: hover) and (pointer: fine) { .choice:hover { border-color: var(--espresso); } }

/* ── Recent receipts ─────────────────────────────────────────────────── */
.recent { display: flex; flex-direction: column; gap: var(--s3); margin-top: var(--s6); }
.recent h2 { font-size: 15px; font-weight: 600; }
.list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hair); }
.list li { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); padding: 14px 0; border-bottom: 1px solid var(--hair); }
.list .l { display: flex; flex-direction: column; min-width: 0; }
.list .l b { font-weight: 600; font-variant-numeric: tabular-nums; }
.list .l small { font-size: 13px; color: var(--ink2); }
.st { font-size: 15px; font-weight: 600; color: var(--ink2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.st.added { color: var(--green); }
.st.checking { color: var(--brown); }

/* Confetti on "points added": a canvas over everything that never takes a tap. */
.confetti { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 50; }

/* ── Footer and toast ────────────────────────────────────────────────── */
.foot { margin-top: var(--s6); padding-top: var(--s4); border-top: 1px solid var(--hair); }
.acct { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: var(--s3); }
.av { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--card); color: var(--gold); font-size: 16px; font-weight: 700; text-transform: uppercase; }
.acct .who { display: flex; flex-direction: column; min-width: 0; }
.acct .who b { font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct .who small { font-size: 13px; color: var(--ink2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
button.text.sm { height: 44px; padding: 0 4px; font-size: 15px; }
.toast {
  position: fixed; left: 50%; bottom: max(24px, calc(env(safe-area-inset-bottom, 0px) + 12px)); transform: translateX(-50%);
  background: var(--card); color: var(--card-ink); padding: 12px 20px; border-radius: 999px; font-size: 15px; font-weight: 600;
  max-width: calc(100% - 40px); box-shadow: 0 8px 24px rgb(23 18 14 / .25);
}
.toast.show { animation: toast 220ms var(--ease-out); }
@keyframes toast { from { opacity: 0; transform: translate(-50%, 8px); } }

@media (prefers-reduced-motion: reduce) {
  .step.enter, .toast.show { animation: fade 160ms ease; }
  @keyframes fade { from { opacity: 0; } }
  button.primary:active, button.second:active { transform: none; }
}