/* ═══════════════════════════════════════════════════════════════════════════
   SLABHUB DESIGN SYSTEM — TOKENS
   Every value below is the value shipped in the approved design.
   Nothing here is a suggestion; changing a number changes the design.
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  /* ── colour ── */
  --ink:            #141A0B;  /* everything structural: bars, borders, offsets */
  --paper:          #F2F1EA;  /* app background, cards on ink */
  --canvas:         #E9E8E0;  /* this document's ground only, not in-app */
  --white:          #FFFFFF;  /* slab card face */
  --lime:           #D8FF4F;  /* THE lit element. PSA 10 squares + active chrome */
  --leaf:           #8CCC00;  /* money, and money only. never a grade, never chrome */
  --sage:           #8FA79B;  /* inactive on ink: labels, icons, body copy on dark */
  --slate:          #3C463F;  /* secondary text on paper */
  --ink-line:       #2A3B24;  /* hairline inside ink surfaces */
  --avatar-ink:     #2A3B24;  /* seller avatar on ink */
  --rule:           #E2E1D8;  /* hairline on paper */
  --rule-strong:    #C9C8BE;  /* device edge, section rule, dashed +N box */
  --hatch-a:        #DAD8CD;  /* image placeholder, dark stripe */
  --hatch-b:        #E7E5DA;  /* image placeholder, light stripe */
  --grey-chrome:    #DAD8CD;  /* browser chrome on the share link */
  --cam-black:      #0C1108;  /* camera view base */
  --dot-off:        #3C463F;  /* inactive progress dot */
  --link:           #4F6F00;

  /* ── type families ── */
  --font-display: 'Archivo', system-ui, sans-serif;      /* titles + all money */
  --font-mono:    'IBM Plex Mono', monospace;            /* technical labels only */
  --font-ui:      'Public Sans', system-ui, sans-serif;  /* body, chips, buttons */

  /* ── type scale (px, as used) ── */
  --t-66: 66px;  /* lock-screen clock */
  --t-48: 48px;  /* document h1 */
  --t-42: 42px;  /* type specimen */
  --t-38: 38px;  /* screen title, ink header (Discover) */
  --t-36: 36px;  /* hero title (Vault) */
  --t-30: 30px;  /* hero slab name, seller handle, tour headline */
  --t-27: 27px;  /* scanner found name */
  --t-26: 26px;  /* section h2, specimen money */
  --t-23: 23px;  /* featured slab name */
  --t-21: 21px;  /* hero price */
  --t-19: 19px;  /* featured price, seller handle in row, avatar letter */
  --t-18: 18px;  /* stat number */
  --t-17: 17px;  /* push notification title */
  --t-16: 16px;  /* slab card name, tour button */
  --t-15: 15px;  /* search placeholder, CTA label, Confirm */
  --t-14: 14px;  /* card price, tour body */
  --t-13: 13px;  /* grade square, push body, doc body */
  --t-125: 12.5px;/* captions */
  --t-12: 12px;  /* chips, url pill */
  --t-11: 11px;  /* status bar, cert line */
  --t-10: 10px;  /* mono labels */
  --t-9:  9px;   /* mono micro labels, SOLD tag */
  --t-8:  8px;   /* peek grade, SCAN label */

  /* ── weights ── */
  --w-800: 800;  /* display titles, avatar letters */
  --w-700: 700;  /* money, card names, h2 */
  --w-600: 600;  /* mono labels, chips, buttons */
  --w-400: 400;

  /* ── tracking ── */
  --tr-tight-35: -.035em; /* 36px+ display */
  --tr-tight-30: -.03em;  /* 23–30px display */
  --tr-tight-25: -.025em; /* 19px display */
  --tr-tight-20: -.02em;  /* 16–17px display */
  --tr-tight-10: -.01em;  /* money */
  --tr-mono-08:  .08em;
  --tr-mono-10:  .10em;
  --tr-mono-12:  .12em;
  --tr-mono-14:  .14em;
  --tr-mono-16:  .16em;
  --tr-mono-18:  .18em;

  /* ── spacing (8pt grid; the four off-grid values are inside card padding
        and are deliberate — they are what makes a 375px card breathe) ── */
  --sp-2:  2px;
  --sp-3:  3px;
  --sp-4:  4px;
  --sp-6:  6px;
  --sp-8:  8px;
  --sp-10: 10px;  /* off-grid: card body padding-top */
  --sp-11: 11px;  /* off-grid: card body padding-x */
  --sp-12: 12px;
  --sp-13: 13px;  /* off-grid: seller card, featured card padding */
  --sp-14: 14px;  /* off-grid: grid gutter, stack gap */
  --sp-16: 16px;  /* screen inset */
  --sp-18: 18px;
  --sp-20: 20px;
  --sp-22: 22px;
  --sp-24: 24px;
  --sp-26: 26px;
  --sp-32: 32px;
  --sp-36: 36px;
  --sp-44: 44px;
  --sp-56: 56px;

  /* ── radii ── NAMED ONCE. There is exactly one value and it is zero.
        Square corners are load-bearing in this system: the slab is a
        rectangle in a rectangle, and nothing on screen may look softer
        than the object being sold. ── */
  --radius: 0;

  /* ── elevation ── flat law: hard ink offsets, never a blurred shadow ── */
  --offset-card: 5px 5px 0 0 var(--ink);  /* grid slab card */
  --offset-hero: 6px 6px 0 0 var(--ink);  /* featured slab, scanner found card */

  /* ── fixed geometry ── */
  --screen-w: 375px;
  --screen-h: 812px;
  --bar-h: 66px;          /* tab bar height */
  --bar-inset: 16px;      /* tab bar floats this far off each edge */
  --bar-bottom: 22px;     /* and this far off the bottom */
  --scan-key: 66px;       /* square, overlaps the bar's top edge */
  --tap-min: 44px;        /* nothing tappable is smaller */
  --img-hero: 316px;      /* vault hero image zone */
  --img-card: 186px;      /* slab card image, 2-up grid */
  --img-card-sm: 160px;   /* slab card image, share link 2-up */
  --img-feature: 194px;   /* featured slab, horizontal */
  --img-peek-w: 62px;
  --img-peek-h: 86px;     /* 0.72 portrait, the shared image ratio */
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESET
   ═══════════════════════════════════════════════════════════════════════════ */
/* 230a. The mock's document reset (body/html/a/p/svg + the global * box-sizing)
   is REMOVED. This file is served into the live product, where those global
   element rules are scaffolding that leaks: the body background painted the
   vault light on overscroll, and a/p/svg would recolour and re-margin any page
   that links the skin. What remains below is ONLY the :root tokens and the
   component classes — a design system, not a page reset. Each product surface
   already owns its own body, links and margins. */

/* ═══════════════════════════════════════════════════════════════════════════
   PRIMITIVES — the six classes a builder will use on every screen
   ═══════════════════════════════════════════════════════════════════════════ */

/* --- image placeholder. Replace .hatch-* with the PSA scan; keep the box. --- */
.hatch-6  { background: repeating-linear-gradient(135deg, var(--hatch-a) 0 6px,  var(--hatch-b) 6px 12px); }
.hatch-7  { background: repeating-linear-gradient(135deg, var(--hatch-a) 0 7px,  var(--hatch-b) 7px 14px); }
.hatch-8  { background: repeating-linear-gradient(135deg, var(--hatch-a) 0 8px,  var(--hatch-b) 8px 16px); }
.hatch-9  { background: repeating-linear-gradient(135deg, var(--hatch-a) 0 9px,  var(--hatch-b) 9px 18px); }
.hatch-11 { background: repeating-linear-gradient(135deg, var(--hatch-a) 0 11px, var(--hatch-b) 11px 22px); }

/* --- money. One class, four sizes. Never any colour but leaf. --- */
.price {
  font-family: var(--font-display);
  font-weight: var(--w-700);
  letter-spacing: var(--tr-tight-10);
  font-variant-numeric: tabular-nums;
  color: var(--leaf);
  white-space: nowrap;
}
.price--card  { font-size: var(--t-14); }
.price--stat  { font-size: var(--t-18); }
.price--row   { font-size: var(--t-19); }
.price--hero  { font-size: var(--t-21); }
.price--spec  { font-size: var(--t-26); }

/* --- grade square. Lime is PSA 10 and nothing else. --- */
.grade {
  position: absolute;
  left: var(--sp-8);
  top: var(--sp-8);
  font-family: var(--font-mono);
  font-size: var(--t-13);
  font-weight: var(--w-600);
  padding: 6px var(--sp-8);
  background: var(--ink);
  color: var(--lime);
}
.grade--10 { background: var(--lime); color: var(--ink); }
.grade--hero {                        /* vault hero: sits above the caption block */
  left: var(--sp-16);
  top: auto;
  bottom: 112px;
  font-size: 15px;
  padding: var(--sp-8) var(--sp-10);
}
.grade--found { left: 5px; top: 5px; font-size: var(--t-11); padding: 5px 6px; }
.grade--peek  { left: var(--sp-4); top: var(--sp-4); font-size: var(--t-8); padding: var(--sp-3) var(--sp-4); }

/* --- status tag. The vocabulary is two words: AVAILABLE and SOLD. --- */
.tag {
  position: absolute;
  right: var(--sp-8);
  top: var(--sp-8);
  font-family: var(--font-mono);
  font-size: var(--t-9);
  font-weight: var(--w-600);
  letter-spacing: var(--tr-mono-10);
  padding: var(--sp-4) 7px;
  background: var(--ink);
  color: var(--paper);
}

/* --- cert line. The proof is the PSA image plus this number. Nothing else. --- */
.cert-line {
  font-family: var(--font-mono);
  font-size: var(--t-10);
  letter-spacing: var(--tr-mono-12);
  color: var(--slate);
  line-height: 1.8;
}

/* --- chip. Filter, single-select row. --- */
.chip-row { display: flex; gap: var(--sp-8); }
.chip {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  padding: 0 var(--sp-12);
  background: var(--white);
  border: 1px solid var(--ink);
  font-size: var(--t-12);
  font-weight: var(--w-600);
  color: var(--ink);
}
.chip--on { background: var(--ink); border-color: var(--ink); color: var(--white); }

/* --- mono label, three sizes. Small technical labels are ALWAYS mono. --- */
.label    { font-family: var(--font-mono); font-size: var(--t-10); font-weight: var(--w-600); letter-spacing: var(--tr-mono-16); color: var(--slate); }
.label-sm { font-family: var(--font-mono); font-size: var(--t-9);  letter-spacing: var(--tr-mono-10); color: var(--slate); }
.label-on-ink { color: var(--sage); }

/* --- the tri-rule. 3px, under every ink header, never anywhere else. --- */
.tri-rule {
  height: 3px;
  flex: none;
  background: linear-gradient(90deg, var(--lime) 0 24%, var(--leaf) 24% 30%, var(--ink) 30% 100%);
}

/* ═══════════════════════════════════════════════════════════════════════════
   SLAB CARD — "5A". Image zone, grade top-left, status top-right,
   name and price below. Same object on all three surfaces.
   ═══════════════════════════════════════════════════════════════════════════ */
.slab-card {
  background: var(--white);
  border: 1px solid var(--ink);
  box-shadow: var(--offset-card);
}
.slab-card__img {
  position: relative;
  height: var(--img-card);
  border-bottom: 1px solid var(--ink);
}
.slab-card__img--sm { height: var(--img-card-sm); }
.slab-card__body { padding: var(--sp-10) var(--sp-11); }
.slab-card__name {
  font-family: var(--font-display);
  font-size: var(--t-16);
  font-weight: var(--w-700);
  letter-spacing: var(--tr-tight-20);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.slab-card__price { margin-top: var(--sp-4); }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-14); }
.grid-2--pushed { margin-top: var(--sp-14); }

/* featured slab — horizontal, share link only */
.feature-card {
  background: var(--white);
  border: 1px solid var(--ink);
  box-shadow: var(--offset-hero);
  display: flex;
}
.feature-card__img {
  position: relative;
  width: 140px;
  height: var(--img-feature);
  flex: none;
  border-right: 1px solid var(--ink);
}
.feature-card__body { flex: 1; min-width: 0; padding: var(--sp-13); display: flex; flex-direction: column; }
.feature-card__name { font-family: var(--font-display); font-size: var(--t-23); font-weight: var(--w-800); letter-spacing: var(--tr-tight-30); line-height: .95; }
.feature-card__cert { margin-top: var(--sp-8); }
.feature-card__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-8); }

/* ═══════════════════════════════════════════════════════════════════════════
   PHONE FRAME + STATUS BAR
   ═══════════════════════════════════════════════════════════════════════════ */
.phone {
  position: relative;
  width: var(--screen-w);
  height: var(--screen-h);
  overflow: hidden;
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  display: flex;
  flex-direction: column;
  color: var(--ink);
}
.status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: var(--t-11);
  font-weight: var(--w-600);
}
.status__sig { letter-spacing: var(--tr-mono-10); }
.status--over { position: absolute; top: 14px; left: var(--sp-18); right: var(--sp-18); z-index: 6; color: var(--white); }
.status--tour { z-index: 8; }
.status--ink  { background: var(--ink); color: var(--white); padding: 14px var(--sp-18) 0; flex: none; }
.status--web  { color: var(--ink); padding-bottom: var(--sp-10); }

/* ═══════════════════════════════════════════════════════════════════════════
   TAB BAR — app only. The share link never shows it.
   Floats at 16px inset; content runs underneath.
   ═══════════════════════════════════════════════════════════════════════════ */
.tab-bar {
  background: var(--ink);
  height: var(--bar-h);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: center;
}
.tab-bar--floating {
  position: absolute;
  left: var(--bar-inset);
  right: var(--bar-inset);
  bottom: var(--bar-bottom);
  z-index: 5;
}
.tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  min-height: var(--tap-min);
  position: relative;
}
.tab__icon {
  width: 34px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sage);
}
.tab__label {
  font-family: var(--font-mono);
  font-size: var(--t-9);
  font-weight: var(--w-600);
  letter-spacing: var(--tr-mono-08);
  color: var(--sage);
}
.tab--on .tab__icon  { background: var(--lime); color: var(--ink); }
.tab--on .tab__label { color: var(--lime); }
.tab__badge {
  position: absolute;
  top: var(--sp-2);
  right: 14px;
  min-width: 17px;
  height: 17px;
  background: var(--leaf);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--t-10);
  font-weight: var(--w-700);
  display: flex;
  align-items: center;
  justify-content: center;
}
.tab-scan-slot { display: flex; justify-content: center; align-items: flex-end; height: 100%; }
.tab-scan {
  width: var(--scan-key);
  height: var(--scan-key);
  background: var(--lime);
  color: var(--ink);
  margin-bottom: var(--bar-bottom);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
}
.tab-scan__label { font-family: var(--font-mono); font-size: var(--t-8); font-weight: var(--w-600); letter-spacing: var(--tr-mono-10); }

/* ═══════════════════════════════════════════════════════════════════════════
   HERO — vault only. A seller has exactly one newest slab.
   ═══════════════════════════════════════════════════════════════════════════ */
.hero { position: relative; height: var(--img-hero); flex: none; }
.hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20,26,11,.52) 0%, rgba(20,26,11,0) 36%, rgba(20,26,11,0) 52%, rgba(20,26,11,.82) 100%);
}
.hero__top {
  position: absolute;
  top: 50px;
  left: var(--sp-16);
  right: var(--sp-16);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-12);
}
.hero__top--low { top: 92px; display: block; }
.hero__url {
  font-family: var(--font-mono);
  font-size: var(--t-10);
  font-weight: var(--w-600);
  letter-spacing: var(--tr-mono-18);
  color: rgba(255,255,255,.72);
}
.hero__url-chip {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 var(--sp-11);
  background: var(--ink);
  font-family: var(--font-mono);
  font-size: var(--t-12);
  font-weight: var(--w-600);
  letter-spacing: var(--tr-mono-14);
  color: var(--lime);
}
.hero__title {
  font-family: var(--font-display);
  font-size: var(--t-36);
  font-weight: var(--w-800);
  letter-spacing: var(--tr-tight-35);
  line-height: .95;
  color: var(--white);
  margin-top: 7px;
}
.hero__share {
  min-width: var(--tap-min);
  min-height: var(--tap-min);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--paper);
  color: var(--ink);
  font-size: var(--t-19);
  flex: none;
}
.hero__foot { position: absolute; left: var(--sp-16); right: var(--sp-16); bottom: var(--sp-16); }
.hero__meta { font-family: var(--font-mono); font-size: var(--t-10); letter-spacing: var(--tr-mono-14); color: rgba(255,255,255,.72); }
.hero__line { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-12); margin-top: var(--sp-6); }
.hero__name { font-family: var(--font-display); font-size: var(--t-30); font-weight: var(--w-800); letter-spacing: var(--tr-tight-30); line-height: 1; color: var(--white); }

/* stat bar — vault only */
.stat-bar { flex: none; background: var(--ink); padding: var(--sp-13) var(--sp-16); display: flex; align-items: center; gap: var(--sp-18); }
.stat__num { font-family: var(--font-display); font-size: var(--t-18); font-weight: var(--w-700); font-variant-numeric: tabular-nums; color: var(--white); }
.stat__label { font-family: var(--font-mono); font-size: var(--t-9); letter-spacing: var(--tr-mono-14); color: var(--sage); margin-top: var(--sp-3); }

/* ═══════════════════════════════════════════════════════════════════════════
   SCREEN BODY
   ═══════════════════════════════════════════════════════════════════════════ */
.screen-body { flex: 1; min-height: 0; overflow: hidden; padding: var(--sp-16) var(--sp-16) 0; }
.screen-body--tabbed { padding-bottom: 106px; }  /* clears the floating bar */
.screen-body--flush { padding: 0 var(--sp-16); }
.screen-stack { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }

/* ── Discover: an ink header, a search field, then sellers ── */
.ink-head { flex: none; background: var(--ink); padding: var(--sp-18) var(--sp-16) var(--sp-16); }
.screen-title { font-family: var(--font-display); font-size: var(--t-38); font-weight: var(--w-800); letter-spacing: var(--tr-tight-35); line-height: .95; color: var(--white); }
.search {
  display: flex;
  align-items: center;
  gap: var(--sp-10);
  margin-top: var(--sp-14);
  border: 1px solid var(--ink-line);
  padding: 0 var(--sp-13);
  min-height: 46px;
  color: var(--sage);
}
.search__text { font-size: var(--t-15); color: var(--sage); }
.section-label { font-family: var(--font-mono); font-size: var(--t-10); font-weight: var(--w-600); letter-spacing: var(--tr-mono-16); color: var(--slate); margin-top: var(--sp-18); }
.seller-list { display: flex; flex-direction: column; gap: var(--sp-14); margin-top: var(--sp-12); }

/* ── seller row: the subject of Discover is the person ── */
.seller-card { background: var(--white); border: 1px solid var(--ink); box-shadow: var(--offset-card); padding: var(--sp-13); }
.seller-card__head { display: flex; align-items: center; gap: var(--sp-12); }
.avatar {
  width: var(--tap-min);
  height: var(--tap-min);
  flex: none;
  background: var(--ink);
  color: var(--paper);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: var(--t-19);
  font-weight: var(--w-800);
}
.avatar--lg { width: 54px; height: 54px; background: var(--avatar-ink); font-size: 24px; }
.seller-card__id { flex: 1; min-width: 0; }
.seller-card__handle {
  font-family: var(--font-display);
  font-size: var(--t-19);
  font-weight: var(--w-700);
  letter-spacing: var(--tr-tight-25);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.seller-card__meta { font-family: var(--font-mono); font-size: var(--t-9); letter-spacing: var(--tr-mono-10); color: var(--slate); margin-top: var(--sp-4); }
.btn-follow {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  padding: 0 var(--sp-12);
  flex: none;
  font-family: var(--font-mono);
  font-size: var(--t-10);
  font-weight: var(--w-600);
  letter-spacing: var(--tr-mono-10);
  background: var(--ink);
  color: var(--lime);
}
.btn-follow--on { background: var(--white); border: 1px solid var(--ink); color: var(--ink); }

/* peeks — deliberately too small to shop from. Ink chip, never lime. */
.peek-row { display: flex; gap: 7px; margin-top: var(--sp-12); }
.peek { position: relative; width: var(--img-peek-w); height: var(--img-peek-h); flex: none; border: 1px solid var(--ink); }
.peek-more {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: var(--t-10);
  font-weight: var(--w-600);
  letter-spacing: var(--tr-mono-08);
  color: var(--slate);
  border: 1px dashed var(--rule-strong);
}

/* ═══════════════════════════════════════════════════════════════════════════
   SHARE LINK — a web page. Browser chrome, no tabs, no account.
   ═══════════════════════════════════════════════════════════════════════════ */
.browser-bar { flex: none; background: var(--grey-chrome); padding: var(--sp-12) var(--sp-12) var(--sp-10); border-bottom: 1px solid var(--rule-strong); }
.url-pill {
  background: var(--white);
  border: 1px solid var(--rule-strong);
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-8);
  font-family: var(--font-mono);
  font-size: var(--t-12);
  color: var(--slate);
}
.seller-hero { flex: none; background: var(--ink); padding: var(--sp-20) var(--sp-16); }
.seller-hero__head { display: flex; align-items: center; gap: var(--sp-14); }
.seller-hero__handle { font-family: var(--font-display); font-size: var(--t-30); font-weight: var(--w-800); letter-spacing: var(--tr-tight-35); line-height: .95; color: var(--white); }
.seller-hero__meta { font-family: var(--font-mono); font-size: var(--t-10); letter-spacing: var(--tr-mono-12); color: var(--sage); margin-top: var(--sp-6); }
.cta-row { display: flex; gap: var(--sp-10); margin-top: var(--sp-18); }
.btn-leaf {
  flex: 1;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--leaf);
  color: var(--ink);
  font-size: var(--t-15);
  font-weight: var(--w-600);
}
.btn-outline-on-ink {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--sp-16);
  border: 1px solid var(--ink-line);
  color: var(--white);
  font-size: var(--t-15);
  font-weight: var(--w-600);
}
.filter-row { flex: none; padding: var(--sp-14) var(--sp-16) var(--sp-12); display: flex; align-items: center; justify-content: space-between; }
.sort { font-family: var(--font-mono); font-size: var(--t-10); font-weight: var(--w-600); letter-spacing: var(--tr-mono-10); color: var(--slate); }
.btn-offer {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  padding: 0 var(--sp-11);
  background: var(--ink);
  color: var(--lime);
  font-family: var(--font-mono);
  font-size: var(--t-10);
  font-weight: var(--w-600);
  letter-spacing: var(--tr-mono-10);
}

/* ═══════════════════════════════════════════════════════════════════════════
   SCANNER — found state (used as tour screen 2)
   ═══════════════════════════════════════════════════════════════════════════ */
.cam { position: absolute; inset: 0; background: var(--cam-black); }
.cam__glow { position: absolute; inset: 0; background: radial-gradient(120% 66% at 50% 34%, #2A3324 0%, var(--ink) 56%, #080B05 100%); }
.slab-ghost {
  position: absolute;
  left: 50%;
  top: 268px;
  transform: translate(-50%, -50%);
  width: 218px;
  height: 322px;
  background: linear-gradient(158deg, rgba(255,255,255,.16), rgba(255,255,255,.05));
  border: 1px solid rgba(255,255,255,.2);
}
.slab-ghost__label { position: absolute; left: var(--sp-10); right: var(--sp-10); top: var(--sp-12); height: 52px; background: rgba(245,244,239,.92); }
.slab-ghost__art { position: absolute; left: var(--sp-22); right: var(--sp-22); top: 76px; bottom: var(--sp-18); background: repeating-linear-gradient(135deg, rgba(255,255,255,.13) 0 6px, rgba(255,255,255,.06) 6px 12px); }
.guide-frame { position: absolute; left: 62px; right: 62px; top: 116px; height: var(--bar-h); border: 3px solid var(--lime); }
.read-state {
  position: absolute;
  left: 0;
  right: 0;
  top: 200px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--t-10);
  font-weight: var(--w-600);
  letter-spacing: var(--tr-mono-16);
  color: var(--lime);
}
.found-card {
  position: absolute;
  left: var(--sp-16);
  right: var(--sp-16);
  bottom: 286px;
  z-index: 6;
  background: var(--paper);
  border: 1px solid var(--ink);
  box-shadow: var(--offset-hero);
  padding: var(--sp-16);
}
.found-card__head { display: flex; align-items: flex-start; gap: var(--sp-13); }
.found-card__img { position: relative; width: 74px; height: 104px; flex: none; border: 1px solid var(--ink); }
.found-card__body { flex: 1; min-width: 0; }
.found-card__set { font-family: var(--font-mono); font-size: var(--t-9); letter-spacing: var(--tr-mono-14); color: var(--slate); }
.found-card__name { font-family: var(--font-display); font-size: var(--t-27); font-weight: var(--w-800); letter-spacing: var(--tr-tight-30); line-height: 1; margin-top: var(--sp-6); }
.found-card__cert { font-family: var(--font-mono); font-size: var(--t-11); letter-spacing: var(--tr-mono-08); color: var(--slate); margin-top: var(--sp-8); }
.found-card__market { font-family: var(--font-mono); font-size: var(--t-10); letter-spacing: var(--tr-mono-08); color: var(--slate); margin-top: var(--sp-4); }
.btn-confirm {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-display);
  font-size: var(--t-15);
  font-weight: var(--w-700);
  margin-top: var(--sp-14);
}

/* ═══════════════════════════════════════════════════════════════════════════
   LOCK SCREEN + PUSH
   ═══════════════════════════════════════════════════════════════════════════ */
.lock { position: absolute; inset: 0; background: linear-gradient(168deg, #20281A 0%, var(--ink) 46%, #0A0E06 100%); }
.lock__clock { position: absolute; left: 0; right: 0; top: 78px; text-align: center; color: var(--white); }
.lock__date { font-family: var(--font-mono); font-size: var(--t-12); letter-spacing: var(--tr-mono-16); color: rgba(255,255,255,.66); }
.lock__time { font-family: var(--font-display); font-size: var(--t-66); font-weight: var(--w-700); letter-spacing: var(--tr-tight-30); line-height: 1.02; margin-top: var(--sp-4); }
.push-stack { position: absolute; left: 14px; right: 14px; top: 236px; display: flex; flex-direction: column; gap: var(--sp-10); }
.push { background: rgba(242,241,234,.95); padding: 14px 15px; display: flex; gap: var(--sp-12); }
.push--older { background: rgba(242,241,234,.88); }
.push__icon { width: 38px; height: 38px; flex: none; background: var(--ink); position: relative; overflow: hidden; }
.push__icon-face { position: absolute; left: 7px; right: 7px; top: 7px; bottom: 7px; background: var(--paper); }
.push__icon-band { position: absolute; left: 7px; right: 7px; top: 7px; height: var(--sp-11); background: var(--lime); }
.push__body { flex: 1; min-width: 0; }
.push__meta { display: flex; justify-content: space-between; align-items: baseline; }
.push__app { font-family: var(--font-mono); font-size: var(--t-10); font-weight: var(--w-600); letter-spacing: var(--tr-mono-14); color: var(--slate); }
.push__time { font-family: var(--font-mono); font-size: var(--t-10); color: var(--slate); }
.push__title { font-family: var(--font-display); font-size: var(--t-17); font-weight: var(--w-700); letter-spacing: var(--tr-tight-20); margin-top: var(--sp-4); }
.push__sub { font-size: var(--t-13); color: var(--slate); margin-top: var(--sp-3); }

/* ═══════════════════════════════════════════════════════════════════════════
   FIRST-RUN TOUR
   ═══════════════════════════════════════════════════════════════════════════ */
.btn-skip {
  position: absolute;
  top: 40px;
  right: var(--sp-16);
  z-index: 8;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  padding: 0 var(--sp-12);
  background: rgba(242,241,234,.14);
  border: 1px solid rgba(242,241,234,.45);
  font-family: var(--font-mono);
  font-size: var(--t-10);
  font-weight: var(--w-600);
  letter-spacing: var(--tr-mono-14);
  color: var(--white);
}
.tour-panel { position: absolute; left: 0; right: 0; bottom: 0; z-index: 7; background: var(--ink); padding: var(--sp-22) var(--sp-20) var(--sp-26); }
.dots { display: flex; gap: 5px; }
.dot { width: var(--sp-8); height: var(--sp-4); background: var(--dot-off); }
.dot--on { width: var(--sp-22); background: var(--paper); }
.tour__head {
  font-family: var(--font-display);
  font-size: var(--t-30);
  font-weight: var(--w-800);
  letter-spacing: var(--tr-tight-35);
  line-height: 1.02;
  color: var(--white);
  margin-top: var(--sp-16);
  text-wrap: balance;
}
.tour__sub { font-size: var(--t-14); line-height: 1.5; color: var(--sage); margin-top: 9px; }
.tour__cta-row { display: flex; align-items: center; gap: var(--sp-12); margin-top: var(--sp-18); }
.btn-tour {
  flex: 1;
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--t-16);
  font-weight: var(--w-700);
  letter-spacing: var(--tr-tight-10);
}
.btn-tour--leaf { background: var(--leaf); }
.tour__note { font-family: var(--font-mono); font-size: var(--t-9); letter-spacing: var(--tr-mono-12); color: var(--sage); margin-top: var(--sp-12); text-align: center; }

/* ═══════════════════════════════════════════════════════════════════════════
   DOCUMENT CHROME — this spec page only. Not part of the product.
   ═══════════════════════════════════════════════════════════════════════════ */
.doc-section { padding: var(--sp-44) var(--sp-56) 52px; display: flex; flex-direction: column; gap: var(--sp-26); }
.doc-section--canvas { background: var(--canvas); }
.doc-section--paper { background: var(--paper); }
.doc-section--intro { padding: var(--sp-56) var(--sp-56) var(--sp-44); gap: var(--sp-20); }
.doc-intro { max-width: 900px; display: flex; flex-direction: column; gap: var(--sp-12); }
.doc-eyebrow { font-family: var(--font-mono); font-size: var(--t-11); font-weight: var(--w-600); letter-spacing: var(--tr-mono-18); color: var(--slate); }
.doc-h1 { font-family: var(--font-display); font-size: var(--t-48); font-weight: var(--w-800); letter-spacing: var(--tr-tight-35); line-height: .98; }
.doc-lede { font-size: var(--t-15); line-height: 1.6; color: var(--slate); max-width: 64ch; text-wrap: pretty; }
.doc-head { display: flex; align-items: baseline; gap: var(--sp-14); border-bottom: 1px solid var(--rule-strong); padding-bottom: var(--sp-12); flex-wrap: wrap; }
.doc-num { font-family: var(--font-mono); font-size: var(--t-11); font-weight: var(--w-600); letter-spacing: var(--tr-mono-18); color: var(--slate); }
.doc-h2 { font-family: var(--font-display); font-size: var(--t-26); font-weight: var(--w-700); }
.doc-sub { font-size: var(--t-13); color: var(--slate); }
.row { display: flex; gap: var(--sp-36); flex-wrap: wrap; align-items: flex-start; }
.row--tight { gap: var(--sp-32); }
.row--type { gap: var(--sp-20); }
.frame-col { display: flex; flex-direction: column; gap: var(--sp-12); width: var(--screen-w); }
.frame-cap { font-family: var(--font-mono); font-size: var(--t-10); letter-spacing: var(--tr-mono-12); color: var(--slate); }
.frame-desc { font-size: var(--t-125); line-height: 1.55; color: var(--slate); }
.notes { width: 300px; display: flex; flex-direction: column; gap: var(--sp-14); font-size: var(--t-13); line-height: 1.6; color: var(--slate); }
.notes__h { font-family: var(--font-mono); font-size: var(--t-10); font-weight: var(--w-600); letter-spacing: var(--tr-mono-16); color: var(--ink); }
.notes__h--spaced { margin-top: var(--sp-6); }
.notes b { color: var(--ink); }
.note-ink { background: var(--ink); color: var(--sage); padding: var(--sp-14); font-size: var(--t-125); line-height: 1.55; }
.panel { background: var(--white); border: 1px solid var(--rule); padding: var(--sp-16); font-size: var(--t-13); line-height: 1.6; color: var(--slate); }
.panel__h { font-family: var(--font-mono); font-size: var(--t-10); font-weight: var(--w-600); letter-spacing: var(--tr-mono-14); color: var(--ink); margin-bottom: var(--sp-8); }
.panel--ink { background: var(--ink); color: var(--sage); border: 0; }
.panel--ink .panel__h { color: var(--lime); }
.col-grow { flex: 1; min-width: 320px; display: flex; flex-direction: column; gap: var(--sp-14); }
.bar-stage { width: 470px; background: var(--grey-chrome); padding: 30px var(--sp-16) var(--sp-20); }
.bar-stage__note { font-family: var(--font-mono); font-size: var(--t-9); letter-spacing: var(--tr-mono-14); color: #6B6D5E; text-align: center; margin-top: var(--sp-14); }

/* token reference */
.token-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: var(--sp-12); }
.token { background: var(--white); border: 1px solid var(--rule); padding: var(--sp-12); display: flex; gap: var(--sp-12); align-items: center; }
.token__chip { width: 40px; height: 40px; flex: none; border: 1px solid var(--rule-strong); }
.token__chip--ink { background: var(--ink); }
.token__chip--paper { background: var(--paper); }
.token__chip--lime { background: var(--lime); }
.token__chip--leaf { background: var(--leaf); }
.token__chip--sage { background: var(--sage); }
.token__chip--slate { background: var(--slate); }
.token__chip--rule { background: var(--rule); }
.token__chip--hatch { background: repeating-linear-gradient(135deg, var(--hatch-a) 0 8px, var(--hatch-b) 8px 16px); }
.token__name { font-family: var(--font-mono); font-size: var(--t-10); font-weight: var(--w-600); letter-spacing: var(--tr-mono-08); }
.token__val { font-family: var(--font-mono); font-size: var(--t-9); color: var(--slate); margin-top: var(--sp-3); }
.token__use { font-size: 11px; color: var(--slate); margin-top: var(--sp-4); line-height: 1.4; }

/* type specimens */
.type-card { width: 250px; background: var(--white); border: 1px solid var(--rule); padding: var(--sp-20); display: flex; flex-direction: column; gap: var(--sp-10); }
.type-card--main { width: 300px; background: var(--ink); padding: var(--sp-22); gap: var(--sp-12); }
.type-card__row { display: flex; align-items: baseline; justify-content: space-between; }
.type-card__tag { font-family: var(--font-mono); font-size: var(--t-10); font-weight: var(--w-600); letter-spacing: var(--tr-mono-16); }
.type-card__tag--lime { color: var(--lime); }
.type-card__pick { font-family: var(--font-mono); font-size: var(--t-10); letter-spacing: var(--tr-mono-10); color: var(--lime); }
.spec-archivo { font-family: var(--font-display); font-size: var(--t-42); font-weight: var(--w-800); letter-spacing: var(--tr-tight-35); line-height: .92; color: var(--white); }
.spec-name { font-size: 34px; font-weight: var(--w-700); letter-spacing: var(--tr-tight-30); line-height: .95; }
.spec-name--grotesk { font-family: 'Space Grotesk', system-ui, sans-serif; }
.spec-name--chivo { font-family: 'Chivo', system-ui, sans-serif; font-weight: 900; }
.spec-name--instrument { font-family: 'Instrument Sans', system-ui, sans-serif; }
.spec-money { font-size: var(--t-26); font-weight: var(--w-700); font-variant-numeric: tabular-nums; color: var(--leaf); }
.spec-money--alt { font-size: 22px; }
.spec-money--grotesk { font-family: 'Space Grotesk', system-ui, sans-serif; }
.spec-money--chivo { font-family: 'Chivo', system-ui, sans-serif; }
.spec-money--instrument { font-family: 'Instrument Sans', system-ui, sans-serif; }
.spec-cert { font-family: var(--font-mono); font-size: var(--t-10); letter-spacing: var(--tr-mono-14); color: var(--sage); }
.spec-note { border-top: 1px solid var(--rule); padding-top: var(--sp-10); font-size: var(--t-125); line-height: 1.5; color: var(--slate); }
.spec-note--ink { border-top-color: var(--ink-line); padding-top: var(--sp-12); line-height: 1.55; color: var(--sage); }