/*
 * The redeem page (Figma "29 Redeem page (web) — Glass" R1–R4, R3d; DESIGN.md › Onboarding › Redeem page). Always the
 * light look, like the app's auth screens. Glass (14 Oct 2026): Poppins with Courier Prime caps labels, Glass/Soft
 * button wells, the blue Glass/Selected primary, a frosted on-photo card. Values mirror app/src/theme/tokens.ts
 * (`glass`); change them there first.
 */

@font-face { font-family: 'Poppins'; font-weight: 400; font-display: swap; src: url('fonts/Poppins-Regular.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-weight: 500; font-display: swap; src: url('fonts/Poppins-Medium.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-weight: 600; font-display: swap; src: url('fonts/Poppins-SemiBold.ttf') format('truetype'); }
@font-face { font-family: 'Courier Prime'; font-weight: 400; font-display: swap; src: url('fonts/CourierPrime-Regular.ttf') format('truetype'); }

:root {
  color-scheme: light;
  /* Colour (tokens.ts, light) */
  --text-primary: #061C28;      /* navy900 */
  --text-inverse: #FFFFFF;
  --accent-teal-text: #0A7080;  /* teal600: teal text and links */
  --accent-teal-tint: #E0F5F7;  /* teal50 */
  --danger-text: #8B2E14;       /* red600 */
  --danger-bg: #FAECE7;         /* red50 */
  --artwork-top: #5AAEE0; /* deepened 10 Oct 2026 with the app (the launch splash end colour) */
  --artwork-bottom: #1D4E67;
  /* The share cards' Blue background (tokens.ts › shareCard.background.blue: top → 45% → bottom), the page's water
     since 29 Oct 2026 (Dan: make it look like the Malta trip post). */
  --share-blue-top: #6FB0F5;
  --share-blue-mid: #3A66A3;
  --share-blue-bottom: #132A47;
  /* On the blue: white text, white 80% secondary (the share cards' sub), and the danger / good-news lines in the light
     tints (red50 / teal50) so they read on blue. */
  --on-blue-secondary: rgba(255, 255, 255, 0.88);
  --on-blue-danger: #FAECE7;  /* red50 */
  --on-blue-good: #E0F5F7;    /* teal50 */
  /* Glass (tokens.ts › glass) */
  --ink: #1E3A5F;                       /* glass.colour.inkPrimary */
  --accent-blue: #3A66A3;               /* glass.colour.accentBlue */
  --rim: rgba(255, 255, 255, 0.95);     /* glass.colour.rim */
  --chip: rgba(255, 255, 255, 0.55);    /* glass.colour.chip */
  --soft-button: #F3F6FA;               /* glass.colour.softButton */
  --on-photo-field: rgba(255, 255, 255, 0.16);
  --selected: linear-gradient(90deg, rgba(58, 102, 163, 0.90) 0%, rgba(30, 58, 95, 0.90) 100%); /* glass.gradient.selected */
  --shadow-selected: 2px 4px 10px rgba(30, 58, 95, 0.25);
  --shadow-chip: 2px 4px 10px rgba(30, 58, 95, 0.08);
  /* glass.shadow.softButton */
  /* Fields, code cells and cards on the water use the app's fieldOnWater (glass.shadow.onPhotoField): an inner shade, no
     white glow or drop (Dan, 26 Oct 2026; the old soft-button shadow is retired here). */
  --soft-button-fill: linear-gradient(-8deg, rgba(0, 0, 0, 0.03) 8.6%, rgba(0, 0, 0, 0) 89.8%), var(--soft-button);
  --shadow-on-photo-field: inset 0 1px 3px rgba(14, 42, 59, 0.15);
  /* Pro programme gold (tokens.ts › glass.gradient.proGold, glass.colour.proInk): the Booster page's one accent */
  --pro-gold-from: #DDB44E;
  --pro-gold-to: #A8822E;
  --pro-ink: #3A2C0A;
  --pro-gold: linear-gradient(90deg, var(--pro-gold-from) 0%, var(--pro-gold-to) 100%);
  /* Type sizes / line heights (tokens.ts type + lineHeight) */
  --type-caps: 9px;  --lh-caps: 10px;
  --type-caption: 10px; --lh-caption: 11px;
  --type-hint: 11px; --lh-hint: 12px;
  --type-body: 13px; --lh-body: 14px;
  --type-input-web: 16px; /* web page only: iOS Safari zooms into inputs under 16px (DESIGN.md › Redeem page) */
  --type-title-lg: 20px; --lh-title-lg: 22px;
  --type-label: 11px;  /* Courier caps 11 */
  --type-title: 22px; --lh-title: 30px;
  --type-headline: 22px; --lh-headline: 25px;
  --tracking-caps: 0.08em;
  /* Opacity rules */
  --op-secondary: 0.72;
  --op-placeholder: 0.5;
  --op-disabled: 0.35;
  /* Radius, space, layout */
  --radius-well: 16px;
  --radius-md: 20px;
  --radius-card: 24px;
  --space-sm: 8px; --space-md: 12px; --space-lg: 16px; --space-xl: 20px;
  --gutter: 20px;
  --column: 362px;
  --column-top: 120px;   /* the column's y on the 402 × 874 frame */
  --back-top: 56px;      /* the back disc's y on the frame */
  --footer-bottom: 46px; /* the foot line sits at y 814 on the 874 frame */
}

* { box-sizing: border-box; }

html { background: var(--share-blue-bottom); }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  font-family: 'Poppins', system-ui, sans-serif;
  font-weight: 400;
  font-size: var(--type-body);
  line-height: var(--lh-body);
  color: var(--text-inverse);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

/* The full-bleed water: the share cards' Blue background (29 Oct 2026; was the AuthBackdrop artwork). Dan tried and
   dropped the Malta coastline the same day. */
.water {
  position: fixed;
  inset: 0;
  z-index: -1; /* under the steps; html carries the fallback colour, so body must stay transparent */
  background: linear-gradient(180deg, var(--share-blue-top) 0%, var(--share-blue-mid) 22%, var(--share-blue-bottom) 100%); /* mid at 22%, not the cards' 45%, so the text column sits on the deeper blue (WCAG AA for white) */
}


.sprites { position: absolute; width: 0; height: 0; overflow: hidden; }

[hidden] { display: none !important; }

button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; }
button:focus-visible, a:focus-visible, .cells-input:focus-visible + * { outline: 2px solid var(--accent-blue); outline-offset: 3px; }
h1, p, ul { margin: 0; }

/* One step = one screen: the top row (back disc), the 362 column, and the foot line pinned near the bottom. */
.page {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: calc(var(--back-top) + env(safe-area-inset-top, 0px)) var(--gutter) calc(var(--footer-bottom) + env(safe-area-inset-bottom, 0px));
}
.top {
  width: 100%;
  max-width: var(--column);
  height: 44px;
  flex-shrink: 0;
  margin-bottom: calc(var(--column-top) - var(--back-top) - 44px);
}
.column {
  width: 100%;
  max-width: var(--column);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.footer {
  margin-top: auto;
  padding-top: 32px;
  font-weight: 400;
  color: var(--text-inverse);
  opacity: var(--op-secondary);
  text-align: center;
}
.footer-link { font-weight: 600; color: var(--text-inverse); }

/* Back disc: the 44 Glass / Icon button (white chip glass, rim, chip drop), 3 in from the column, ink glyph. */
.back {
  width: 44px; height: 44px; margin-left: 3px;
  border-radius: 22px;
  display: grid; place-items: center;
  background: var(--chip);
  border: 1px solid var(--rim);
  box-shadow: var(--shadow-chip);
  -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
  color: var(--ink);
}
.back svg { display: block; }

/* Heading: SemiBold 22 white over a Regular 13 line in white 80%. */
.head { display: flex; flex-direction: column; gap: 6px; }
.title { font-size: var(--type-title); line-height: var(--lh-title); font-weight: 600; }
.sub { color: var(--on-blue-secondary); line-height: 18px; }

/* Glass / Form Input on media: Courier caps 11 label in deep ink, a Glass/Soft button well 52 tall r22 (white edge
   35%, the soft-button shadows), Medium value in ink (16px on the web). */
.field { display: flex; flex-direction: column; gap: var(--space-sm); }
.label {
  font-family: 'Courier Prime', ui-monospace, monospace;
  font-size: var(--type-label); line-height: 12px; font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-inverse);
}
.well {
  display: flex; align-items: center; gap: var(--space-md);
  height: 52px;
  padding: 0 var(--space-lg) 0 17px;  /* 18 to the text: 17 + the 1px edge */
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 22px;
  background: var(--soft-button-fill);
  box-shadow: var(--shadow-on-photo-field);
}
.well:focus-within { border-color: var(--accent-blue); box-shadow: var(--shadow-on-photo-field), 0 0 0 0.5px var(--accent-blue); }
.field.error .well { border-color: var(--danger-text); }
.well input {
  flex: 1; min-width: 0; height: 100%;
  border: 0; outline: 0; background: transparent; padding: 0;
  font: inherit; font-weight: 500; font-size: var(--type-input-web); color: var(--ink);
}
.well input::placeholder { color: var(--ink); opacity: var(--op-placeholder); }
.well input.code-input::placeholder { opacity: var(--op-secondary); }
.toggle { font-weight: 600; color: var(--accent-teal-text); padding: 8px 0 8px 8px; }
.helper { font-size: var(--type-hint); line-height: var(--lh-hint); }
.helper:empty { display: none; }
.field.error .helper { color: var(--on-blue-danger); font-weight: 500; opacity: 1; }
/* Good news on the field (a code already on this account): the light teal, not danger. */
.field.note .helper { color: var(--on-blue-good); font-weight: 500; opacity: 1; }
.note-link { align-self: flex-start; font-weight: 600; color: var(--text-inverse); text-decoration: underline; text-underline-offset: 2px; padding: 4px 0; }

.terms { font-size: var(--type-caption); line-height: var(--lh-caption); text-align: center; }
.terms a { color: inherit; font-weight: 600; text-decoration: underline; }
.form-error { font-size: var(--type-hint); line-height: var(--lh-hint); font-weight: 500; color: var(--on-blue-danger); }
.form-error:empty { display: none; }

/* Primary: 50 tall r20, white with an ink SemiBold 15 label (29 Oct 2026: the blue Glass/Selected button disappeared
   into the share-card blue). Busy = an ink spinner in place of the label. */
.primary {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 50px;
  border-radius: 20px;
  border: 1px solid var(--rim);
  background: var(--text-inverse);
  box-shadow: 0 6px 16px rgba(10, 18, 24, 0.22);
  color: var(--ink);
  font-size: 15px; font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.primary:active { transform: scale(0.98); box-shadow: none; }
.primary[aria-busy='true'] span { visibility: hidden; }
.primary[aria-busy='true']::after {
  content: ''; position: absolute; width: 20px; height: 20px;
  border: 2px solid rgba(30, 58, 95, 0.25); border-top-color: var(--ink); border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
.primary:disabled { cursor: default; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .primary[aria-busy='true']::after { animation-duration: 2.4s; } }

.forgot {
  align-self: center;
  font-weight: 600; color: var(--text-inverse);
  text-decoration: underline; text-underline-offset: 2px;
}

/* R3: the account line with a teal Sign out. */
.account { font-weight: 500; }
.signout { font-weight: 600; color: var(--text-inverse); text-decoration: underline; text-underline-offset: 2px; }

/* Form / Code cell × 6: Glass/Soft button cells 60 tall r16, 10 apart, SemiBold 22 ink digit; one invisible input over them. */
.cells { position: relative; display: flex; gap: 10px; }
.cell {
  flex: 1; height: 60px;
  display: grid; place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: var(--radius-well);
  background: var(--soft-button-fill);
  box-shadow: var(--shadow-on-photo-field);
  font-size: var(--type-headline); line-height: var(--lh-headline); font-weight: 600; color: var(--ink);
}
.cell.active { border-color: var(--accent-blue); }
.cell.active:empty::after { content: ''; width: 2px; height: 24px; border-radius: 1px; background: var(--accent-blue); animation: blink 1s steps(1) infinite; }
.cells.error .cell { border-color: var(--danger-text); }
@keyframes blink { 50% { opacity: 0; } }
.cells-input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0.01; color: transparent; caret-color: transparent; background: transparent;
  border: 0; outline: 0; font-size: 16px; letter-spacing: 40px;
}
.code-line { font-size: var(--type-hint); line-height: var(--lh-hint); color: var(--on-blue-secondary); }
.code-line.danger { color: var(--on-blue-danger); font-weight: 500; }
.resend { font-weight: 500; }
.resend-link { font-weight: 600; color: var(--text-inverse); text-decoration: underline; text-underline-offset: 2px; }
.code-line .resend-link { margin-left: 8px; font-size: inherit; }
.resend-wait { }

/* R4: what Premium adds, a frosted on-photo card (white 16%, blur, white rim, a soft inner shade) with teal ticks. */
.adds {
  list-style: none; padding: var(--space-lg) 18px;
  display: flex; flex-direction: column; gap: var(--space-md);
  border-radius: var(--radius-card);
  border: 1px solid var(--rim);
  background: var(--on-photo-field);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: var(--shadow-on-photo-field);
}
.adds li { display: flex; align-items: center; gap: 10px; }
.tick { flex-shrink: 0; width: 22px; height: 22px; border-radius: 11px; display: grid; place-items: center; background: var(--accent-teal-tint); color: var(--accent-teal-text); }
.tick svg { display: block; }

/* Glass / System Inline error: a Glass/Soft button card r20, a 36 danger-tint disc with the warning glyph, SemiBold
   13 title, 11 body, accent-blue Retry. */
.inline-error {
  color: var(--ink);
  display: flex; align-items: center; gap: var(--space-md);
  min-height: 64px;
  padding: var(--space-md) var(--space-lg) var(--space-md) 14px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: var(--soft-button-fill);
  box-shadow: var(--shadow-on-photo-field);
}
.inline-error .disc { flex-shrink: 0; width: 36px; height: 36px; border-radius: 18px; display: grid; place-items: center; background: var(--danger-bg); box-shadow: inset 0 1px 3px rgba(30, 58, 95, 0.12); color: var(--danger-text); }
.inline-error .disc svg { display: block; }
.inline-error .stack { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.inline-error strong { font-weight: 600; }
.inline-error .body { font-size: var(--type-hint); line-height: var(--lh-hint); opacity: var(--op-secondary); }
.retry { font-weight: 600; color: var(--accent-blue); padding: 8px 0 8px 8px; }
.slot-offline:empty { display: none; }

/* Booster page (booster.html, specs/growth-and-data-programme.md §4b, 36-C6): one frosted card on the water, as R4's
   list card, holding the title, the code in a sunken Courier well, and the gold Pro primary. */
.glass-card {
  display: flex; flex-direction: column; gap: var(--space-lg);
  padding: var(--space-xl) 18px;
  border-radius: var(--radius-card);
  border: 1px solid var(--rim);
  background: var(--on-photo-field);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: var(--shadow-on-photo-field);
}
.glass-card .sub { margin-top: -10px; }
.code-well {
  display: flex; align-items: center; gap: var(--space-md);
  min-height: 60px;
  padding: var(--space-sm) var(--space-lg) var(--space-sm) 18px;
  border-radius: var(--radius-well);
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: var(--chip);
  box-shadow: var(--shadow-on-photo-field);
}
.code {
  flex: 1; min-width: 0;
  font-family: 'Courier Prime', ui-monospace, monospace;
  font-size: var(--type-title-lg); line-height: var(--lh-title-lg);
  letter-spacing: var(--tracking-caps);
  color: var(--ink);
  overflow-wrap: anywhere;
  user-select: all; -webkit-user-select: all;
}
.copied { color: var(--ink); }
.primary.gold {
  background: var(--pro-gold);
  color: var(--pro-ink);
  text-decoration: none;
}
.primary.gold[aria-busy='true']::after { border-color: rgba(58, 44, 10, 0.25); border-top-color: var(--pro-ink); }
.fine { font-size: 12px; line-height: 18px; opacity: 0.85; }
/* Booster page only: room between lines for the code and the "Copied" note (shared .helper keeps 12px). */
.glass-card .code { line-height: 1.35; }
.glass-card .helper.copied { line-height: 16px; }
.choices { display: flex; flex-direction: column; gap: var(--space-md); }
.choice {
  height: 52px; width: 100%;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: var(--soft-button-fill);
  box-shadow: var(--shadow-on-photo-field);
  font-weight: 600; font-size: 15px; color: var(--ink);
}
.choice:disabled { opacity: var(--op-disabled); cursor: default; }
/* R4 store buttons: the phone's store as the white primary, the other a clear button with a white edge and white label
   (an <a>, so centred here). */
.stores { display: flex; flex-direction: column; gap: var(--space-md); }
.stores a.choice {
  display: flex; align-items: center; justify-content: center; text-decoration: none; cursor: pointer;
  background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.7); box-shadow: none; color: var(--text-inverse);
}
.stores a[aria-disabled='true'] { cursor: default; }
.glass-card .inline-error { margin-top: -4px; }
.booster .column > .forgot { margin-top: 4px; }
.booster h1:focus { outline: none; } /* focused on each view change for screen readers, not for a ring */

/* The share cards' lockup, top centre on every step: the mask over THE DIVE JOURNAL in Courier caps, white 80%. */
.brand {
  position: absolute; top: calc(36px + env(safe-area-inset-top, 0px)); /* Dan, Figma 29 Oct 2026 */ left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  pointer-events: none;
}
.brand img { display: block; width: 58px; height: auto; }
.brand span {
  font-family: 'Courier Prime', ui-monospace, monospace;
  font-size: var(--type-hint); line-height: 13px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--on-blue-secondary); white-space: nowrap;
}
.noscript { padding: var(--gutter); color: var(--text-inverse); }

/* R3d desktop (1280): water stretched full width, the lockup larger at the top, the column centred at y 200. */
@media (min-width: 768px) {
  :root { --column-top: 200px; --back-top: 136px; }
  .brand { top: 40px; }
  .brand img { width: 76px; }
}