/* The results view — the loyalty card and the offer rows.
 *
 * TRANSCRIBED FROM functions/src/utils/cardAppPage.ts's <style>, which that
 * file declares the source of truth for the card on every surface. Values are
 * verbatim; selectors are scoped under .results so nothing leaks into the
 * rest of the portal. CUSTOMER_PORTAL_CONTEXT.md §10's acceptance test (open
 * /lookup#k= and /b/<CODE>/#k= side by side: below the card they must be
 * indistinguishable) holds by construction — so when that file's styles move,
 * move these with them.
 *
 * Dropped on purpose (the portal shows neither): the install banner and the
 * install-instructions sheet, and the "Go to My Perkonova" outbound link. */

.results { max-width: 520px; margin: 0 auto; min-height: 100vh; background: #f2f2f5;
  padding: calc(18px + env(safe-area-inset-top)) 16px calc(28px + env(safe-area-inset-bottom)) 16px; }
body.on-results { background: #f2f2f5; }

/* ── The card ─────────────────────────────────────────────── */
.results .card { background: var(--c1); background-image: linear-gradient(135deg, var(--c1), var(--c2));
  color: var(--ink); border-radius: 18px; padding: 20px; position: relative;
  box-shadow: 0 6px 20px rgba(15, 23, 42, .14); }
.results .card-top { display: flex; align-items: center; gap: 12px; min-height: 44px; }
/* NO HALO, NO PLATE, NO TINT BEHIND THE LOGO (cardAppPage.ts): the mark is
   painted exactly as the shop uploaded it. The slot is 46px tall and widens
   with the shop's declared aspect bucket (1 / 4:3 / 16:9). */
.results .card-top img { width: 46px; height: 46px; object-fit: contain; display: block; flex: 0 0 auto; }
.results .card-top img.wide { width: calc(46px * 4 / 3); }
.results .card-top img.landscape { width: calc(46px * 16 / 9); }
.results .card-top h1 { font-size: 17px; font-weight: 700; margin: 0; line-height: 1.25; letter-spacing: -.2px; }
.results .lbl { font-size: 10px; letter-spacing: 1.4px; text-transform: uppercase; opacity: .72; font-weight: 700; }
.results .member { margin-top: 20px; }
.results .member .v { font-size: 16px; font-weight: 600; margin-top: 3px; word-break: break-word; }
.results .codewrap { margin-top: 14px; }
.results .code { font-family: 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace; font-size: 34px; font-weight: 700;
  letter-spacing: 3px; margin-top: 2px; line-height: 1.1; }
.results .pts { margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .28); display: flex;
  align-items: baseline; justify-content: space-between; gap: 10px; }
.results .pts .n { font-size: 26px; font-weight: 750; letter-spacing: -.5px; }
.results .card.on-light .pts { border-top-color: rgba(15, 23, 42, .16); }

/* ── Offers ───────────────────────────────────────────────── */
.results h2 { font-size: 13px; letter-spacing: 1.2px; text-transform: uppercase; color: #64748B;
  margin: 26px 2px 10px 2px; font-weight: 700; }
.results .offer { display: flex; align-items: center; gap: 13px; background: #fff; border: 1px solid #E2E8F0;
  border-radius: 14px; padding: 12px; margin-bottom: 10px; }
.results .offer.locked { opacity: .62; }
.results .tile { width: 54px; height: 54px; border-radius: 12px; flex: 0 0 auto; display: flex;
  align-items: center; justify-content: center; }
.results .tile img { width: 62%; height: 62%; object-fit: contain; display: block; }
.results .tile svg { width: 50%; height: 50%; color: #475569; fill: currentColor; }
.results .otext { flex: 1 1 auto; min-width: 0; }
.results .otype { font-size: 9.5px; letter-spacing: 1.1px; font-weight: 800; text-transform: uppercase; }
.results .otitle { font-size: 15px; font-weight: 650; margin-top: 2px; line-height: 1.3; word-break: break-word; }
.results .odesc { font-size: 12.5px; color: #64748B; margin-top: 3px; line-height: 1.4; word-break: break-word; }
.results .osched { font-size: 12px; font-weight: 650; margin-top: 4px; }
.results .oexp { font-size: 11.5px; color: #94A3B8; margin-top: 3px; }

/* ── The shop's own actions — directly under the card ─────── */
.results .shopacts { display: flex; gap: 10px; margin-top: 14px; }
.results .shopact { flex: 1 1 0; min-width: 0; display: block; text-align: center; padding: 14px 12px;
  background: var(--c1); color: var(--ink); border-radius: 14px; font-size: 15px;
  font-weight: 700; text-decoration: none; line-height: 1.25;
  box-shadow: 0 2px 8px rgba(15, 23, 42, .10); }
.results .card.on-light ~ .shopacts .shopact { border: 1px solid rgba(15, 23, 42, .14); }
.results .oval { flex: 0 0 auto; text-align: right; }
.results .oval .b { display: inline-block; font-size: 12px; font-weight: 700; padding: 5px 9px; border-radius: 8px;
  background: #F1F5F9; color: #0F172A; white-space: nowrap; }
.results .oval .gap { display: block; font-size: 11px; color: #94A3B8; margin-top: 4px; white-space: nowrap; }
.results .ready { color: #0F9D58; font-weight: 800; }

/* ── Chrome ───────────────────────────────────────────────── */
.results .muted { color: #64748B; font-size: 14px; line-height: 1.55; }
.results .foot { margin-top: 26px; padding-top: 18px; border-top: 1px solid #E2E8F0;
  text-align: center; font-size: 12px; line-height: 1.7; color: #94A3B8; }
.results .foot a { color: #64748B; text-decoration: underline; }
.results .foot .sep { padding: 0 6px; }

/* Portal-only: the way back to the forms (lookup_screen.dart). */
.results .again { display: block; margin: 18px auto 0; padding: 12px 16px; border: 0; background: none;
  color: #F97316; font-size: 15px; font-weight: 600; cursor: pointer; }
.results .again:focus-visible { outline: 2px solid #0F172A; outline-offset: 2px; border-radius: 8px; }
.results .fade { animation: rise .45s cubic-bezier(.215, .61, .355, 1) both; }
@media (prefers-reduced-motion: reduce) { .results .fade { animation: none; } }