/* ============================================================
   CartPicker — receipt landing page
   Tokens → base → layout → components → utilities → a11y
   ============================================================ */

/* ---- Space Mono, self-hosted (Google Fonts), split by unicode range ---- */
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/space-mono-400-vietnamese.a748973d.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/space-mono-400-latin-ext.44ad50c7.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/space-mono-400-latin.fb4a81a2.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/space-mono-700-vietnamese.97f6df05.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/space-mono-700-latin-ext.52edd9a8.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/space-mono-700-latin.2d46bd15.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------------------------- Tokens ---------------------------- */
:root {
  --ink: #22221f;          /* primary text / borders          */
  --paper: #fbfbf7;        /* receipt paper (warm white)      */
  --paper-alt: #f5f5ef;    /* inset panels (hero box)         */
  --paper-line: #22221f22; /* hairline border on paper        */
  --muted: #55554f;        /* secondary text                  */
  --faint: #6f6f68;        /* de-emphasised text (AA on paper)*/
  --white: #fdfdf8;        /* lightbox chrome / inverted text */
  --accent: #b3543a;       /* hover / interactive             */
  --page-bg: #ebe6d8;      /* page background                 */
}

/* ---------------------------- Base ----------------------------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: 'Space Mono', ui-monospace, monospace;
  color: var(--ink);
  background:
    radial-gradient(#00000016 1px, transparent 1.5px) 0 0/16px 16px,
    var(--page-bg);
  background-attachment: fixed;
}
img { display: block; max-width: 100%; }
/* <picture> is only a format switch — keep it out of the layout so the rules
   written for the inner <img> (flex sizing, max-height) still apply directly */
picture { display: contents; }
a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--accent); }
h1, h2, h3 { margin: 0; font-weight: 700; }
p { margin: 0; }
sup { font-size: 9px; }
section { scroll-margin-top: 12px; }
::selection { background: var(--ink); color: var(--white); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------------------------- Layout --------------------------- */
.page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* viewport-fit=cover means the notch/rounded corners can overlap the sides */
  padding: clamp(14px, 4vw, 56px)
           calc(10px + env(safe-area-inset-right))
           calc(40px + env(safe-area-inset-bottom))
           calc(10px + env(safe-area-inset-left));
}

#receipt-wrap { width: 100%; max-width: 520px; }

.receipt-shadow {
  position: relative;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .10));
}

/* older-version notice — a short torn slip tossed above the receipt */
.notice {
  width: 100%;
  max-width: 520px;
  margin-bottom: clamp(18px, 5vw, 30px);
  transform: rotate(-1.5deg);
  transform-origin: center;
  touch-action: pan-y;
}
.notice[hidden] { display: none; }
.notice-paper { padding-top: 20px; }
.notice-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: none;
  font: inherit;
  font-size: 20px;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
}
.notice-close:hover { color: var(--accent); }
.notice-head { text-align: center; font-size: 19px; font-weight: 700; letter-spacing: .1em; font-variant-emoji: text; }
.notice-body { font-size: 13px; line-height: 1.7; margin-top: 4px; text-align: center; }
.notice-cta  { margin-top: 14px; }

/* dragging/tearing move .notice via inline transform/opacity — the entrance
   animation must fully let go of those properties, not just finish, or its
   filled end value keeps outranking the inline style */
.notice.notice--dragging, .notice.notice--snapping, .notice.notice--tearing, .notice.notice--collapsing { animation: none; }

@media (prefers-reduced-motion: no-preference) {
  .notice:not([hidden]) { animation: notice-settle .4s ease-out; }
  @keyframes notice-settle {
    from { opacity: 0; transform: translateY(-8px) rotate(-3deg); }
    to   { opacity: 1; transform: translateY(0) rotate(-1.5deg); }
  }
  .notice.notice--snapping { transition: transform .32s cubic-bezier(.34, 1.3, .64, 1), opacity .32s ease-out; }
  .notice.notice--tearing  { transition: transform .48s cubic-bezier(.4, 0, .7, 1), opacity .48s ease-in .08s; }
  .notice.notice--collapsing { transition: height .3s ease-out, margin-bottom .3s ease-out; }
}

/* zig-zag torn edges */
.zz-top, .zz-bot {
  height: 18px;
  background-size: 18px 18px;
  background-repeat: repeat-x;
}
.zz-top {
  background-image:
    linear-gradient(45deg, var(--paper) 9px, transparent 0),
    linear-gradient(-45deg, var(--paper) 9px, transparent 0);
  background-position: bottom;
}
.zz-bot {
  background-image:
    linear-gradient(135deg, var(--paper) 9px, transparent 0),
    linear-gradient(225deg, var(--paper) 9px, transparent 0);
  background-position: top;
}

.paper {
  position: relative;
  background: var(--paper);
  padding: 26px clamp(16px, 5vw, 30px) 24px;
}

/* ---------------------------- Rules ---------------------------- */
.rule { border-top: 1px dashed var(--ink); margin: 16px 0; }
.rule--wide  { margin: 20px 0 16px; }
.rule--sub   { margin: 6px 0 0; }
.rule--solid { border-top-style: solid; margin: 10px 0 8px; }

/* dashed top+bottom callout box */
.note-box {
  margin-top: 14px;
  border-top: 1px dashed var(--ink);
  border-bottom: 1px dashed var(--ink);
  padding: 10px 2px;
  font-size: 13.5px;
  line-height: 1.7;
}
.note-box--specs { margin-top: 12px; }

/* the two lock-type reference photos, side by side inside the note box */
.lock-types {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 12px;
}
.lock-type { margin: 0; }
.lock-type img { width: 100%; height: auto; aspect-ratio: 4/5; object-fit: cover; }
.lock-type figcaption {
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  margin-top: 6px;
}

/* --------------------------- Headings -------------------------- */
.rc-head { text-align: center; }
.brand { font-size: 22px; font-weight: 700; letter-spacing: .12em; font-variant-emoji: text; }
/* inside the <h1>, so the only heading on the page carries the keywords —
   block display keeps it looking like the separate line it used to be */
.brand-sub {
  display: block;
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: normal;
  margin-top: 6px;
  line-height: 1.7;
}
.rc-meta { font-size: 12px; margin-top: 10px; color: var(--muted); }

/* language switch, set as another line of receipt metadata */
.rc-lang { font-size: 12px; margin-top: 6px; color: var(--muted); letter-spacing: .04em; }
.rc-lang-on { font-weight: 700; color: var(--ink); }
.rc-lang a { text-decoration: underline; text-underline-offset: 2px; }

.section-title { text-align: center; font-size: 15px; font-weight: 700; letter-spacing: .1em; font-variant-emoji: text; }
.section-sub   { text-align: center; font-size: 12px; margin-top: 3px; color: var(--muted); }

/* --------------------------- Line rows ------------------------- */
.row { display: flex; justify-content: space-between; gap: 10px; }
.row--center { align-items: center; }
.row--total  { font-size: 16px; font-weight: 700; }
.row--pay    { font-size: 12px; margin-top: 4px; color: var(--muted); }
.row--saved  { font-size: 13px; font-weight: 700; margin-top: 4px; }

.items   { font-size: 14px; line-height: 2; }
.specs   { font-size: 14px; line-height: 2; margin-top: 10px; }
.history { font-size: 14px; line-height: 2; margin-top: 12px; }

/* --------------------------- Hero ------------------------------ */
.hero-box {
  margin-top: 18px;
  border: 1px solid var(--paper-line);
  padding: 18px 14px 10px;
  background: var(--paper-alt);
}
.hero-img { width: 100%; height: auto; filter: invert(.87); }
.caption { text-align: center; font-size: 11px; color: var(--faint); margin-top: 8px; letter-spacing: .08em; }
.tagline { margin: 14px 0 0; font-size: 13px; line-height: 1.7; text-align: center; }

/* --------------------------- Buttons --------------------------- */
.btn-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 14px;
  min-height: 48px;
  border: 2px solid var(--ink);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .08em;
  background: var(--ink);
  color: var(--white);
}
.btn-cta:hover { background: var(--accent); border-color: var(--accent); color: var(--white); }

.btn-secondary {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 8px;
  min-height: 46px;
  border: 2px dashed var(--ink);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
}
.btn-secondary:hover { border-color: var(--accent); color: var(--accent); }

/* --------------------------- How-to steps ---------------------- */
.step-head { display: flex; justify-content: space-between; align-items: baseline; margin-top: 22px; }
.step-head--b { margin-top: 26px; }
.step-name  { font-size: 15px; font-weight: 700; }
.step-count { font-size: 12px; color: var(--muted); font-weight: 400; }

.step { display: flex; gap: 12px; margin-top: 14px; align-items: flex-start; cursor: zoom-in; }
.step-img { width: 148px; aspect-ratio: 4/5; object-fit: cover; flex: none; }
.step-text { font-size: 14px; line-height: 1.65; }
.step-label { display: block; font-weight: 700; }

.tip { text-align: center; font-size: 12px; color: var(--faint); margin-top: 14px; }
/* the hint belongs before the steps — after them, nobody learns the photos
   are tappable until they have already scrolled past all six */
.tip--lead { margin-top: 12px; }

/* --------------------------- Coupons --------------------------- */
.coupon-link { display: block; border: 2px dashed var(--ink); padding: 14px 16px; margin-top: 14px; }
.coupon-link + .coupon-link { margin-top: 10px; }
.coupon-link:hover { border-color: var(--accent); color: var(--ink); background: var(--paper-alt); }
.coupon-store { display: flex; align-items: center; gap: 10px; }
/* flex: none keeps every logo in the same 26px slot, so the names line up */
.store-logo { width: 26px; height: 26px; object-fit: contain; flex: none; }
.coupon-name { font-size: 14px; font-weight: 700; }
.coupon-price { font-size: 14px; font-weight: 700; }
.coupon-desc { font-size: 12px; margin-top: 4px; margin-left: 12px; color: var(--muted); }

/* --------------------------- Specs ----------------------------- */
.footnote { font-size: 11.5px; line-height: 1.7; color: var(--muted); margin-top: 8px; }

/* --------------------------- History --------------------------- */
.facility { text-align: center; font-size: 11px; margin-top: 14px; color: var(--faint); letter-spacing: .06em; }

/* --------------------------- Footer ---------------------------- */
.foot { font-size: 12px; line-height: 1.9; text-align: center; }
/* a real heading rather than just bolded body copy — matches the ✳✳✳ section
   titles in size, but without the stars it still reads as subordinate to them */
.foot-title {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .1em;
  line-height: 1.5;
  margin-bottom: 6px;
}
.foot-policy { color: var(--muted); }
.barcode-wrap { display: flex; justify-content: center; margin: 18px auto 0; }
#barcode-svg { display: block; max-width: 100%; height: 46px; }
.foot-code { text-align: center; font-size: 11px; margin-top: 6px; letter-spacing: .14em; }
.foot-thanks { text-align: center; font-size: 13px; margin-top: 14px; font-weight: 700; }
.foot-by { text-align: center; font-size: 11.5px; margin-top: 12px; color: var(--muted); }
.link-strong { font-weight: 700; text-decoration: underline; }

/* Easter egg: a link that must read as ordinary text. It inherits the colour of
   whatever wraps it (so a .strike parent keeps striking through it) and drops
   the hover tint every other link gets — the cursor is the only tell. Keyboard
   focus is deliberately left alone so :focus-visible can still reach it. */
.egg, .egg:hover { color: inherit; text-decoration: none; }

.take-receipt { margin-top: 26px; font-size: 11px; color: var(--faint); letter-spacing: .12em; }

/* --------------------------- 404 empty state ------------------- */
.story {
  min-height: 180px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 10px;
  color: var(--faint);
}
.story-tbd { font-size: 20px; font-weight: 700; letter-spacing: .12em; color: var(--ink); }
.story-sub { font-size: 12px; letter-spacing: .08em; }

/* --------------------------- Lightbox (swipeable receipt gallery) -- */
#lightbox {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(20, 20, 17, .93);
  align-items: center;
  justify-content: center;
  padding: clamp(12px, 4vw, 28px);
  cursor: zoom-out;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  /* visibility is stepped, not eased: on close it waits out the fade, on open
     it flips at once. Easing it in both directions leaves the dialog hidden —
     and so unfocusable — for the whole opening frame, which silently strands
     keyboard and screen-reader users outside the modal. */
  transition: opacity .22s ease, visibility 0s linear .22s;
}
#lightbox.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity .22s ease, visibility 0s linear 0s;
}

/* the enlarged photo sits on a page torn from the receipt */
.lb-card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 420px;
  max-height: 100%;
  cursor: default;
  background: var(--paper);
  padding: 18px clamp(14px, 5vw, 24px) 16px;
  filter: drop-shadow(0 10px 30px rgba(0, 0, 0, .35));
  transform: scale(.96);
  transition: transform .22s cubic-bezier(.4, 0, .2, 1);
  touch-action: pan-y;
}
#lightbox.open .lb-card { transform: scale(1); }

.lb-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.lb-title { flex: 1 1 auto; min-width: 0; font-size: 15px; font-weight: 700; letter-spacing: .06em; }

/* close button, worked into the header where the step counter used to sit */
.lb-close {
  flex: none;
  width: 34px;
  height: 34px;
  border: 2px solid var(--ink);
  background: var(--ink);
  color: var(--white);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  font-family: inherit;
}
.lb-close:hover { background: var(--accent); border-color: var(--accent); }

/* borderless image well — the photo sits straight on the receipt paper.
   NO padding here: overflow clips at the padding box, so any padding would let
   the neighbouring slides bleed in at the edges. */
.lb-figure {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}
/* the track holds every photo in the set side by side and slides as one piece,
   so an adjacent image is visibly dragged in during a swipe */
.lb-track {
  display: flex;
  transition: transform .28s cubic-bezier(.4, 0, .2, 1);
  will-change: transform;
}
.lb-slide {
  flex: 0 0 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;         /* a small gutter so swiped photos read as separate */
}
.lb-slide img {
  max-width: 100%;
  max-height: 52vh;
  object-fit: contain;
  cursor: zoom-out;
  pointer-events: none;   /* let touch gestures land on the track, not the image */
}

/* the instruction sits above the photo now */
.lb-cap { margin: 0 0 12px; font-size: 13px; line-height: 1.65; color: var(--ink); }

.lb-nav { display: flex; gap: 10px; margin-top: 14px; }
.lb-arrow {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border: 2px dashed var(--ink);
  background: transparent;
  color: var(--ink);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  cursor: pointer;
}
.lb-arrow:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.lb-arrow:disabled { opacity: .32; cursor: default; }

.lb-dots { display: flex; justify-content: center; gap: 7px; margin-top: 12px; }
.lb-dot { width: 7px; height: 7px; background: var(--paper-line); border: 1px solid var(--ink); }
.lb-dot.is-active { background: var(--ink); }

/* on bigger screens the viewer gets more room — phones already fill the width */
@media (min-width: 700px) {
  .lb-card { max-width: 620px; }
  .lb-slide img { max-height: 68vh; }
}


/* --------------------------- Utilities ------------------------- */
.b { font-weight: 700; }
.mt-18 { margin-top: 18px; }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.strike { text-decoration: line-through; color: var(--faint); }
.indent { padding-left: 3ch; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------- Reduced motion -------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* keep the gentle opacity fade on the lightbox; only drop the zoom/scale/slide */
  .lb-card { transition: none; transform: none; }
  .lb-track { transition: none; }
  * { scroll-behavior: auto; }
}