/* #113 H1 Josh's cards (docs/design/refs/josh-2026-10-23-cards-*): cream cardboard, hand-drawn ink art, the café's
   name as a chunky tilted wordmark with a red heart, worn rubber-ink stamps. No chip and no contactless mark.
   Replaces the #85 credit-card faces; the stack geometry and switch motion in stack.css are unchanged, and the
   light (.card-sheen) still moves with --tilt-x/--tilt-y from bindTilt() using transform only.
   Each style is one data-card-style value from server/card-styles.mjs with its art in card-art/<style>.svg. */
.card-stack { container-type: inline-size; --tilt-x: -0.35; --tilt-y: -0.6; }
.club-card {
  --paper: #f8efdc; --ink: #2b1b12; --mark: #2b1b12; --soft: #5a4433; --heart: #e5432f; --stamp-ink: #c8372a;
  --art: url(card-art/runner.svg); --stamp-mask: url(card-art/stamp.svg);
}
.gold-card.club-card { --art: url(card-art/map.svg); }
.club-card[data-card-style=runner] { --art: url(card-art/runner.svg); }
.club-card[data-card-style=map] { --art: url(card-art/map.svg); }
.club-card[data-card-style=table] { --art: url(card-art/table.svg); }
.club-card[data-card-style=lounge] { --art: url(card-art/lounge.svg); --paper: #e8462b; --ink: #3a0d06; --mark: #fbe9d6; --soft: #fbe9d6; --heart: #fbe9d6; --stamp-ink: #3a0d06; }
.club-card[data-card-style=terrace] { --art: url(card-art/terrace.svg); --paper: #174b8c; --ink: #fbeedb; --mark: #f3b83a; --soft: #e9eef6; --heart: #e5432f; --stamp-ink: #f3b83a; }
.club-card[data-card-style=minimal] { --art: url(card-art/minimal.svg); }
.club-card[data-card-style=panorama] { --art: url(card-art/panorama.svg); --ink: #1f5d3f; --mark: #1f5d3f; --soft: #2f5a44; --stamp-ink: #1f5d3f; }
/* #116 H2 (josh-2026-10-23-cards-set-2-styles-06-10): the same cardboard and rubber ink; beans stamp a roasted bean in brown. */
.club-card[data-card-style=vista] { --art: url(card-art/vista.svg); }
.club-card[data-card-style=route] { --art: url(card-art/route.svg); }
.club-card[data-card-style=beans] { --art: url(card-art/beans.svg); --stamp-ink: #5b3518; --stamp-mask: url(card-art/bean-stamp.svg); }
.club-card[data-card-style=arch] { --art: url(card-art/arch.svg); }
.club-card[data-card-style=wave] { --art: url(card-art/wave.svg); }
/* The wave runs under the whole card; the art file already fades its line work away from the text. */
.club-card[data-card-style=wave] .card-art { -webkit-mask: none; mask: none; background-size: 100% auto; }

/* The board: paper colour under a faint fibre grain, a soft pressed edge, ISO card proportions. */
.card-stack > .stack-card.club-card {
  aspect-ratio: 85.6 / 54;
  display: grid; grid-template-rows: auto 1fr auto; align-content: stretch;
  padding: 4.4cqw 5cqw 4.2cqw;
  border-radius: 4.2cqw;
  overflow: hidden;
  isolation: isolate;
  color: var(--ink);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 .35  0 0 0 0 .25  0 0 0 0 .15  0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"),
    var(--paper);
  border: 1px solid rgba(60, 38, 20, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -1px 0 rgba(60, 38, 20, 0.18), 0 1px 2px rgba(58, 36, 20, 0.22), 0 14px 26px -14px rgba(58, 36, 20, 0.55);
}
.club-card > :not(.card-art, .card-sheen, .stack-select) { position: relative; z-index: 1; min-width: 0; max-width: 50cqw; }
.club-card > .stack-head { max-width: none; align-items: flex-start; }
.card-art {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: var(--art) right bottom / 92% auto no-repeat;
  -webkit-mask: linear-gradient(90deg, transparent 36%, #000 50%); mask: linear-gradient(90deg, transparent 36%, #000 50%);
}

/* The wordmark: the café's own name, chunky and tilted, with Josh's red heart. */
.club-name {
  display: block; max-width: 52cqw; margin: 0.6cqw 0 0 0.4cqw;
  font: 400 7.4cqw/0.9 var(--cc-font-display); letter-spacing: -0.02em; text-transform: uppercase;
  color: var(--mark); transform: rotate(-5deg); transform-origin: 0 100%;
  overflow-wrap: break-word; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  padding: 0.6cqw 1cqw 0.4cqw 0;
}
.club-name.is-long { font-size: 5.6cqw; }
.club-last { white-space: nowrap; }
.club-heart { display: inline-block; width: 0.8em; height: 0.72em; margin-left: 0.14em; vertical-align: 0.02em; fill: var(--heart); transform: rotate(10deg); }
.club-card .stack-head .stack-figure, .club-card .stack-head .gold-badge {
  flex: none; margin-top: 0.4cqw; padding: 0.9cqw 2.4cqw; border-radius: 99px;
  font: 700 clamp(10px, 3cqw, 12px)/1.2 var(--cc-font-body); letter-spacing: 0.04em;
  background: color-mix(in srgb, var(--paper) 78%, transparent); color: var(--ink);
  border: 1px solid color-mix(in srgb, var(--ink) 35%, transparent);
}
.club-card .stack-head .gold-badge { display: inline-flex; align-items: center; gap: 1.2cqw; }
.club-card .stack-head .gold-badge strong { font-weight: 800; }

/* Text column: letter-spaced labels, a big figure, the member line. */
.club-card .card-mid { display: grid; align-content: center; gap: 0.6cqw; }
.club-card .card-mid > .eyebrow { margin: 0; font: 700 clamp(10px, 3.3cqw, 14px)/1.2 var(--cc-font-body); letter-spacing: 0.24em; color: var(--ink); }
.club-card .card-plan { margin: 0; max-width: 50cqw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font: 500 clamp(9px, 2.5cqw, 11px)/1.3 var(--cc-font-body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--soft); }
.club-card .card-kind { font-size: clamp(8px, 2.2cqw, 10px); font-weight: 700; opacity: 0.85; }
.club-card.gold-card.is-gold .card-kind { color: #9a6c1f; opacity: 1; }
.club-card.gold-card.is-gold[data-card-style=lounge] .card-kind, .club-card.gold-card.is-gold[data-card-style=terrace] .card-kind { color: var(--mark); }
.club-card .card-foot { display: grid; gap: 1cqw; align-content: end; }
.club-card .card-figure { display: flex; align-items: center; gap: 2.6cqw; }
.club-card .coffee-count { min-height: 0; font: 700 clamp(34px, 12.5cqw, 56px)/0.85 Georgia, "Times New Roman", serif; letter-spacing: -0.03em; color: var(--ink); }
.club-card .card-figure p { margin: 0; max-width: 14ch; font: 700 clamp(9px, 2.8cqw, 12px)/1.35 var(--cc-font-body); letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink); }
.club-card .card-holder, .club-card .card-brand { font: 600 clamp(8px, 2.4cqw, 10px)/1.2 var(--cc-font-body); letter-spacing: 0.14em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--soft); }
.club-card.loyalty-card .card-foot { grid-auto-flow: column; justify-content: start; gap: 3cqw; }

/* Stamps: ten slots in two rows; an earned one is a frayed rubber-ink print of the running cup, each set at its own angle. */
.club-card .club-stamps {
  display: grid; grid-template-columns: repeat(5, 6.4cqw); gap: 1.1cqw 1.3cqw; margin: 1.6cqw 0 0; padding: 0;
}
.club-card .club-stamps .stamp {
  position: relative; display: block; width: 6.4cqw; height: 6.4cqw; aspect-ratio: 1; border-radius: 50%;
  border: 1.5px dashed color-mix(in srgb, var(--ink) 38%, transparent); background: color-mix(in srgb, var(--paper) 55%, transparent);
}
.club-card .club-stamps .stamp.filled { border-color: transparent; background: none; }
.club-card .club-stamps .stamp.filled::after {
  content: ""; position: absolute; inset: -6%;
  background: var(--stamp-ink); opacity: 0.86; mix-blend-mode: multiply;
  -webkit-mask: var(--stamp-mask) center / contain no-repeat; mask: var(--stamp-mask) center / contain no-repeat;
  transform: rotate(var(--turn, -6deg));
}
.club-card[data-card-style=lounge] .club-stamps .stamp.filled::after, .club-card[data-card-style=terrace] .club-stamps .stamp.filled::after { mix-blend-mode: normal; opacity: 0.92; }
.club-stamps .stamp:nth-child(2) { --turn: 7deg; } .club-stamps .stamp:nth-child(3) { --turn: -12deg; } .club-stamps .stamp:nth-child(4) { --turn: 4deg; }
.club-stamps .stamp:nth-child(5) { --turn: -3deg; } .club-stamps .stamp:nth-child(6) { --turn: 11deg; } .club-stamps .stamp:nth-child(7) { --turn: -9deg; }
.club-stamps .stamp:nth-child(8) { --turn: 2deg; } .club-stamps .stamp:nth-child(9) { --turn: -14deg; } .club-stamps .stamp:nth-child(10) { --turn: 8deg; }
.club-stamps .stamp.filled:nth-child(3n)::after { opacity: 0.72; } .club-stamps .stamp.filled:nth-child(4n+1)::after { opacity: 0.94; }
/* H2 cards number their slots as Josh drew them: a thin ring with its number until the stamp lands. */
.club-card:is([data-card-style=vista], [data-card-style=route], [data-card-style=beans], [data-card-style=arch], [data-card-style=wave]) .club-stamps .stamp:not(.filled) { border-style: solid; border-width: 1.2px; }
.club-card:is([data-card-style=vista], [data-card-style=route], [data-card-style=beans], [data-card-style=arch], [data-card-style=wave]) .club-stamps .stamp:not(.filled)::before {
  content: attr(data-n); position: absolute; inset: 0; display: grid; place-items: center;
  font: 600 clamp(7px, 2.3cqw, 10px)/1 var(--cc-font-body); color: var(--soft);
}
/* Josh's handwritten line (beans, wave): the café's own words, else his. */
.club-card .card-tagline {
  position: absolute; z-index: 1; top: 16cqw; right: 4cqw; width: 19cqw; pointer-events: none;
  font: 700 clamp(13px, 5.4cqw, 24px)/0.9 var(--cc-font-hand); color: var(--ink); text-align: center;
  transform: rotate(-9deg); overflow-wrap: anywhere;
}
.club-card .card-tagline::after { content: " \2665"; color: var(--heart); font-size: 0.8em; }
.club-card[data-card-style=beans] .card-tagline { top: 10cqw; right: 29cqw; width: 20cqw; }

/* Gold prepaid: the same board inside a pressed gold-foil frame, with gold labels. Empty: no foil, the art faded, ready to fill. */
.club-card.gold-card.is-gold::after {
  content: ""; position: absolute; inset: 2cqw; z-index: 1; pointer-events: none; border-radius: 2.8cqw; padding: 0.7cqw;
  background: linear-gradient(118deg, #f8e7b0 0%, #c8963e 28%, #fbeab8 50%, #b8862f 74%, #ecd08a 100%);
  -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);
  filter: drop-shadow(0 0.5px 0 rgba(255, 246, 214, 0.8));
}
.club-card.gold-card.is-gold .card-mid > .eyebrow { background: linear-gradient(118deg, #a87420, #e0b860 45%, #8a5d16); -webkit-background-clip: text; background-clip: text; color: transparent; }
.club-card.gold-card.is-gold .stack-head .gold-badge { background: linear-gradient(118deg, #f8e7b0, #d9ab55 55%, #f3dc9c); color: #3b260c; border-color: #a77a2f; }
.club-card.gold-card.is-gold .gold-dot { background: #3b260c; }
.card-stack > .gold-card.club-card.is-empty { border: 1px dashed color-mix(in srgb, var(--ink) 40%, transparent); }
.gold-card.club-card.is-empty .card-art { opacity: 0.42; filter: grayscale(0.7); }
.gold-card.club-card.is-empty .coffee-count { opacity: 0.55; }
.gold-card.club-card.is-empty .card-figure p { max-width: 24ch; font-weight: 500; letter-spacing: 0.04em; text-transform: none; font-size: clamp(10px, 2.9cqw, 12px); }
.club-card .stack-buy { color: var(--ink); }

/* The light: a soft highlight larger than the card, shifted by tilt; still where motion is reduced. */
.card-sheen {
  position: absolute; z-index: 0; left: -25%; top: -60%; width: 150%; height: 220%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.1) 55%, transparent 75%);
  transform: translate(calc(var(--tilt-x) * 22%), calc(var(--tilt-y) * 14%));
  transition: transform 120ms linear;
  mix-blend-mode: soft-light;
}
.card-stack > .is-back .card-sheen { opacity: 0.5; }
@media (prefers-reduced-motion: reduce) { .card-sheen { transition: none; transform: translate(-8%, -9%); } }

/* Owner Settings: the style picker with its live preview. */
.card-style-preview { display: grid; gap: 14px; margin: 16px 0; }
.card-style-sample { padding-top: 0; }
.card-style-sample > .stack-card { transform: none !important; }
.style-choices { margin: 0 0 14px; padding: 0; border: 0; min-width: 0; }
.style-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.style-choices legend { margin-bottom: 8px; font: 700 13px/1.3 var(--cc-font-body); }
.style-chip { position: relative; display: flex; align-items: center; gap: 8px; min-height: 44px; margin: 0; padding: 6px 8px; border: 1px solid var(--cc-divider); border-radius: 12px; cursor: pointer; font: 500 13px/1.25 var(--cc-font-body); }
.style-chip input { position: absolute; opacity: 0; pointer-events: none; }
.style-chip:has(input:checked) { border-color: var(--cc-ink); box-shadow: inset 0 0 0 1px var(--cc-ink); }
.style-chip:has(input:focus-visible) { outline: 3px solid var(--cc-ink); outline-offset: 2px; }
.style-swatch { flex: none; width: 30px; height: 20px; border-radius: 4px; border: 1px solid rgba(60, 38, 20, 0.25); background: var(--art) 75% 50% / 220% auto no-repeat, var(--paper); }
.style-chip { --paper: #f8efdc; --art: url(card-art/runner.svg); }
.style-chip[data-card-style=map] { --art: url(card-art/map.svg); } .style-chip[data-card-style=table] { --art: url(card-art/table.svg); }
.style-chip[data-card-style=lounge] { --art: url(card-art/lounge.svg); --paper: #e8462b; } .style-chip[data-card-style=terrace] { --art: url(card-art/terrace.svg); --paper: #174b8c; }
.style-chip[data-card-style=minimal] { --art: url(card-art/minimal.svg); } .style-chip[data-card-style=panorama] { --art: url(card-art/panorama.svg); }
.style-chip[data-card-style=vista] { --art: url(card-art/vista.svg); } .style-chip[data-card-style=route] { --art: url(card-art/route.svg); }
.style-chip[data-card-style=beans] { --art: url(card-art/beans.svg); } .style-chip[data-card-style=beans] .style-swatch { background-position: 92% 80%; } .style-chip[data-card-style=arch] { --art: url(card-art/arch.svg); }
.style-chip[data-card-style=wave] { --art: url(card-art/wave.svg); }
/* #116 offered-style checkboxes and the customer's own picker under their cards. */
.style-chip.offer-chip:has(input:checked) { border-color: var(--cc-ink); background: color-mix(in srgb, var(--cc-ink) 6%, transparent); }
.style-chip.offer-chip .offer-tick { flex: none; width: 18px; height: 18px; border: 1.5px solid var(--cc-ink); border-radius: 5px; display: grid; place-items: center; font: 800 12px/1 var(--cc-font-body); }
.style-chip.offer-chip input:checked ~ .offer-tick::after { content: "\2713"; }
.style-chip.offer-chip:has(input:disabled) { opacity: 0.7; cursor: default; }
.card-tagline-field { display: grid; gap: 6px; margin: 0 0 14px; font: 700 13px/1.3 var(--cc-font-body); }
.card-tagline-field input { min-height: 44px; font: 600 20px/1.2 var(--cc-font-hand); }
.my-card-style { margin: 14px 0 4px; border: 1px solid var(--cc-divider); border-radius: 16px; background: color-mix(in srgb, var(--cc-paper, #fff) 70%, transparent); }
.my-card-style > summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; padding: 0 16px; cursor: pointer; list-style: none; font: 700 15px/1.2 var(--cc-font-body); }
.my-card-style > summary::-webkit-details-marker { display: none; }
.my-card-style > summary::after { content: "\2192"; transition: transform 160ms ease; }
.my-card-style[open] > summary::after { transform: rotate(90deg); }
.my-card-style .card-style-form { padding: 0 14px 14px; }
/* #125 H3: a visible button-like control straight under the cards, not a quiet disclosure row. */
.my-card-style > summary.change-card-style { justify-content: center; margin: 0; border-radius: 15px; background: var(--cc-paper, #fff); color: var(--cc-ink, #2a1d14); box-shadow: inset 0 0 0 2px var(--cc-ink, #2a1d14); }
.my-card-style > summary.change-card-style::after { content: "\270E"; }
.my-card-style[open] > summary.change-card-style::after { transform: none; }
.my-card-style[open] > summary.change-card-style { margin-bottom: 12px; }
.my-card-style .card-style-preview { margin-top: 4px; }
.my-card-style .reset-style { margin-top: 8px; }
@media (prefers-reduced-motion: reduce) { .my-card-style > summary::after { transition: none; } }

/* Wallet: the "add it again" escape under "Open in Google Wallet". */
.wallet-again { grid-column: 1 / -1; justify-self: center; min-height: 44px; font-size: 13px; }
.wallet-again[hidden] { display: none !important; }

/* The one-off gold cut-scene card keeps its gold. */
.scene-gold {
  background:
    linear-gradient(118deg, transparent 18%, rgba(255, 255, 255, 0.38) 27%, transparent 36%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.09) 0 1px, transparent 1px 3px),
    linear-gradient(118deg, #f8e8b4 0%, #dcb663 26%, #fbebbd 47%, #d6ac58 63%, #b9873a 82%, #e9cc85 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), inset 0 -1px 0 rgba(90, 58, 18, 0.35), 0 18px 40px -14px rgba(0, 0, 0, 0.6);
}
.club-card.gold-card.is-gold[data-card-style=lounge] .card-mid > .eyebrow, .club-card.gold-card.is-gold[data-card-style=terrace] .card-mid > .eyebrow { background: none; color: var(--mark); }