/* LAYAWAY — app.css (shell). Tokens from mockup/v1/DESIGN.md §0-5, §10.
   PAGE SCALE (LUAT 50): build width is 1920. One page unit --u = 100vw / 1920, so at 1920 every
   calc(N * var(--u)) equals N CSS px = the mockup 1:1; 1280-2560 scale in proportion. No max-width cap.
   Text sizes use the --fs-* tokens (never below 12px). Hairlines use the --rule-* tokens (max(1px, ...)).
   BORDERS (LUAT 56): route files contain ZERO border/outline declarations -- use the .rule-* classes below,
   named after mockup/v1/DESIGN.md §4b (wallet-pill, price-card, item-thumb, punch-track, form-field,
   coming-soon-modal, card-panel, punch-btn, receipt-table, slip-ticket, slip-toggle, till-frame, style-chip,
   config-row).
   FRAME (LUAT 53, USER_FIXES): <main class="frame"> owns the page ground and the 40/40 gutters; routes
   never set their own max-width, side padding or page background. */

:root {
  --u: calc(100vw / 1920);

  /* colour (DESIGN.md §0/§2, USER_FIXES) */
  --paper: #53B4DC;
  --cream: #F7F0DF;
  --ink: #090909;
  --lime: #DAE44D;
  --rose: #AE5361;

  /* fonts (DESIGN.md §2/§3) */
  --font-display: "Paytone One", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Biryani", ui-sans-serif, system-ui, sans-serif;
  --font-num: "Pragati Narrow", ui-sans-serif, system-ui, sans-serif;

  /* type scale, @1920 px values (USER_FIXES: compact sizes, fill width via spacing not bigger type) */
  --fs-hero: max(14px, calc(40 * var(--u)));
  --fs-section-title: max(14px, calc(28 * var(--u)));
  --fs-price: max(14px, calc(34 * var(--u)));
  --fs-body: max(12px, calc(16 * var(--u)));
  --fs-label: max(12px, calc(13 * var(--u)));
  --fs-nav: max(12px, calc(15 * var(--u)));
  --fs-ticker: max(12px, calc(20 * var(--u)));
  --fs-table: max(12px, calc(14 * var(--u)));
  --fs-foot: max(12px, calc(13 * var(--u)));

  /* page frame (USER_FIXES: 40 / 40 @1920) */
  --gutter-l: calc(40 * var(--u));
  --gutter-r: calc(40 * var(--u));
  --gap-section: calc(64 * var(--u));

  /* rules (DESIGN.md §4b, widths @1920; hairlines never under 1px) */
  --rule-thin: max(1px, calc(1.6 * var(--u)));
  --rule-field: max(1px, calc(2.3 * var(--u)));
  --rule-card: max(1px, calc(2.5 * var(--u)));
  --rule-panel: max(1px, calc(3.4 * var(--u)));
  --rule-thumb: max(1px, calc(3.7 * var(--u)));
  --rule-track: max(1px, calc(4.5 * var(--u)));
  --rule-heavy: max(1px, calc(5.6 * var(--u)));
  --shadow-off: max(2px, calc(4 * var(--u)));

  --radius: 0;

  /* motion (DESIGN.md §10): stamp/punch bounce + plain ease-out for counting/rolling numbers */
  --ease-stamp: cubic-bezier(.34, 1.56, .64, 1);
  --ease-roll: ease-out;
  --t-punch: 220ms;
  --t-route: 220ms;
  --t-roll: 450ms;
  --t-count: 400ms;
  --t-reveal: 260ms;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--paper); scrollbar-gutter: stable; overflow-y: scroll; }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column; overflow-x: clip;
  color: var(--ink); font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.4;
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
img, svg, video, canvas { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
:where(button, input, select) { border: 0; background: none; }
table { border-collapse: collapse; width: 100%; }
td, th, .num { font-variant-numeric: tabular-nums; font-family: var(--font-num); }
:focus-visible { outline: max(2px, calc(2 * var(--u))) solid var(--ink); outline-offset: 2px; box-shadow: 0 0 0 max(4px, calc(4 * var(--u))) var(--lime); }
.skip { position: absolute; left: -9999px; top: 0; }
.skip:focus { left: 16px; top: 8px; z-index: 50; background: var(--cream); color: var(--ink); padding: 8px 12px; }
[hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* ---------- page frame (one container for every route) ---------- */
main.frame {
  flex: 1; width: 100%;
  padding: calc(40 * var(--u)) var(--gutter-r) calc(80 * var(--u)) var(--gutter-l);
  background: transparent; /* page ground = body paper, never set per route */
}
main.frame:focus { outline: none; }
main.is-leaving { opacity: 0; transform: translateX(-8px); transition: opacity var(--t-route) var(--ease-stamp), transform var(--t-route) var(--ease-stamp); }

/* ---------- rule classes (DESIGN.md §4b; route bodies use these, zero ad-hoc borders) ---------- */
.rule-wallet-pill { border: var(--rule-field) solid var(--ink); border-radius: var(--radius); box-shadow: var(--shadow-off) var(--shadow-off) 0 var(--ink); }
.rule-price-card { border: var(--rule-panel) solid var(--ink); border-radius: var(--radius); box-shadow: var(--shadow-off) var(--shadow-off) 0 var(--ink); background: var(--cream); }
.rule-item-thumb { border: var(--rule-thumb) solid var(--ink); border-radius: var(--radius); }
.rule-punch-track { border: var(--rule-track) solid var(--ink); border-radius: var(--radius); background: var(--cream); }
.rule-form-field { border: var(--rule-field) solid var(--ink); border-radius: var(--radius); background: #fff; }
.rule-coming-soon-modal { border: var(--rule-panel) solid var(--ink); border-radius: var(--radius); box-shadow: var(--shadow-off) var(--shadow-off) 0 var(--ink); background: var(--cream); }
.rule-card-panel { border: var(--rule-card) solid var(--ink); border-radius: var(--radius); box-shadow: var(--shadow-off) var(--shadow-off) 0 var(--ink); background: var(--cream); }
.rule-punch-btn { border: var(--rule-heavy) solid var(--ink); border-radius: var(--radius); background: var(--lime); box-shadow: var(--shadow-off) var(--shadow-off) 0 var(--ink); }
.rule-receipt-table { border: var(--rule-panel) solid var(--ink); border-radius: var(--radius); background: var(--cream); }
.rule-slip-ticket { border: var(--rule-panel) solid var(--ink); border-radius: var(--radius); box-shadow: var(--shadow-off) var(--shadow-off) 0 var(--ink); background: var(--cream); }
.rule-slip-toggle { border: var(--rule-panel) solid var(--ink); border-radius: var(--radius); background: #fff; }
.rule-till-frame { border: var(--rule-thin) solid var(--ink); border-radius: var(--radius); }
.rule-style-chip { border: var(--rule-panel) solid var(--ink); border-radius: var(--radius); background: #fff; }
.rule-config-row { border-bottom: var(--rule-field) solid var(--ink); }

/* ---------- nav (chrome/nav.html verbatim: black ticker strip + cream nav row) ---------- */
.site-nav { position: relative; z-index: 20; font-family: var(--font-body); background: var(--cream); color: var(--ink); border-bottom: var(--rule-panel) solid var(--ink); }
.ticker { height: calc(46 * var(--u)); min-height: 34px; background: var(--ink); color: var(--cream); overflow: hidden; display: flex; align-items: center; font-family: var(--font-num); font-size: var(--fs-ticker); }
.ticker-track { display: flex; align-items: center; gap: calc(28 * var(--u)); white-space: nowrap; padding-left: 100%; animation: marquee 18s linear infinite; }
.ticker:hover .ticker-track, .ticker:focus-within .ticker-track { animation-play-state: paused; }
.ticker .dot { opacity: .6; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.nav-row { height: calc(108 * var(--u)); min-height: 64px; display: flex; align-items: center; gap: calc(28 * var(--u)); padding: 0 var(--gutter-r) 0 var(--gutter-l); }
.brand { display: flex; align-items: center; gap: calc(14 * var(--u)); margin-right: calc(24 * var(--u)); }
.mark { height: calc(46 * var(--u)); min-height: 40px; width: auto; object-fit: contain; } /* >=36px visible ink @1920, ~1.4x wordmark cap (LUAT 56) */
.brand-word { font-family: var(--font-display); font-size: max(14px, calc(30 * var(--u))); line-height: 1; }
.nav-links { display: flex; align-items: center; gap: calc(26 * var(--u)); font-size: var(--fs-nav); font-weight: 700; }
.nav-links a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: max(2px, calc(2.3 * var(--u))); text-underline-offset: 4px; }
.nav-tools { margin-left: auto; display: flex; align-items: center; gap: calc(22 * var(--u)); font-weight: 700; font-size: var(--fs-nav); }
.wallet-btn { font: 700 var(--fs-nav) var(--font-body); background: var(--lime); padding: calc(14 * var(--u)) calc(20 * var(--u)); min-height: 44px; cursor: pointer; }
.wallet-btn:hover { transform: translate(-2px, -2px); box-shadow: calc(var(--shadow-off) + 2px) calc(var(--shadow-off) + 2px) 0 var(--ink); }
.nav-toggle { display: none; padding: 10px; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; }

.nav-drawer { display: none; flex-direction: column; gap: calc(18 * var(--u)); background: var(--cream); border-bottom: var(--rule-panel) solid var(--ink); padding: 20px var(--gutter-l); font-weight: 700; }
.nav-drawer a { padding: 10px 0; min-height: 44px; display: flex; align-items: center; }
.drawer-tools { display: flex; align-items: center; gap: 16px; padding-top: 8px; border-top: var(--rule-field) solid var(--ink); }

/* ---------- footer (chrome/footer.html verbatim: source table + boundary line) ---------- */
.site-foot { background: var(--cream); color: var(--ink); border-top: var(--rule-panel) solid var(--ink); margin-top: auto; }
.source-table { font-size: var(--fs-table); }
.source-table th, .source-table td { text-align: left; padding: calc(10 * var(--u)) var(--gutter-l); border-bottom: var(--rule-thin) solid var(--ink); }
.source-table thead th { background: var(--lime); font-weight: 700; }
.foot-boundary { margin: 0; padding: calc(12 * var(--u)) var(--gutter-l) calc(18 * var(--u)); border-top: var(--rule-field) solid var(--ink); font-size: var(--fs-foot); }

/* ---------- motion helpers (DESIGN.md §10) ---------- */
[data-reveal] { opacity: 0; transform: translateY(calc(10 * var(--u))); transition: opacity var(--t-reveal) var(--ease-stamp), transform var(--t-reveal) var(--ease-stamp); }
[data-reveal].is-in { opacity: 1; transform: translateY(0); }
[data-punch].is-punched { animation: punch-in var(--t-punch) var(--ease-stamp); }
@keyframes punch-in { from { transform: scale(0); } to { transform: scale(1); } }
[data-stamp].is-stamped { animation: stamp-drop var(--t-punch) var(--ease-stamp); }
@keyframes stamp-drop { from { transform: scale(1.2) rotate(-6deg); opacity: 0; } to { transform: scale(1) rotate(-6deg); opacity: 1; } }
.hm-sched-tag.hm-tag-punch { animation: tag-punch var(--t-punch) var(--ease-stamp); }
@keyframes tag-punch { 0% { transform: scale(.88); } 100% { transform: scale(1); } }

/* ---------- responsive ---------- */
@media (max-width: 1024px) {
  :root { --u: clamp(.35px, calc(100vw / 1100), .55px); }
  .nav-links { display: none; }
  .nav-tools { display: none; }
  .nav-toggle { display: inline-flex; margin-left: auto; }
  .nav-drawer:not([hidden]) { display: flex; }
  main.frame { padding-left: calc(20 * var(--u)); padding-right: calc(20 * var(--u)); }
  .source-table { display: block; overflow-x: auto; }
}
@media (max-width: 480px) {
  .brand-word { display: none; }
}

/* ---------- wallet modal + connected pill (wallet.js) ---------- */
html.wp-open { overflow: hidden; }
.wp-scrim { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 24px; background: rgba(9, 9, 9, .6); }
.wp-scrim.is-note { pointer-events: none; background: transparent; place-items: end; }
.wp-scrim.is-note .wp-box { pointer-events: auto; }
.wp-box { width: min(520px, 100%); max-height: calc(100vh - 48px); overflow: auto; background: var(--cream); color: var(--ink); border: var(--rule-panel) solid var(--ink); box-shadow: var(--shadow-off) var(--shadow-off) 0 var(--ink); padding: 28px 32px 24px; }
.wp-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding-bottom: 16px; border-bottom: var(--rule-field) solid var(--ink); }
.kicker { font-family: var(--font-num); font-weight: 700; font-size: var(--fs-label); letter-spacing: .06em; text-transform: uppercase; margin: 0 0 6px; }
.wp-title { margin: 0; font-family: var(--font-display); font-size: max(18px, calc(28 * var(--u))); line-height: 1.1; }
.wp-close { min-height: 44px; padding: 0 14px; font-size: 14px; cursor: pointer; border: var(--rule-thin) solid var(--ink); background: #fff; }
.wp-list { list-style: none; margin: 0; padding: 0; }
.wp-item { display: flex; align-items: center; gap: 16px; width: 100%; min-height: 44px; padding: 12px 4px; cursor: pointer; text-align: left; color: var(--ink); background: none; border: 0; border-bottom: var(--rule-thin) solid var(--ink); }
.wp-item:last-child { border-bottom: 0; }
.wp-item:hover, .wp-item:focus-visible { background: var(--lime); }
.wp-logo { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border: var(--rule-thin) solid var(--ink); background: #fff; }
.wp-logo img { width: 28px; height: 28px; }
.wp-name { flex: 1; font-size: 16px; font-weight: 700; }
.wp-state { font-family: var(--font-num); font-size: 13px; }
.wp-state.is-found { color: #0A6E3A; font-weight: 700; }
.wp-note { margin-top: 16px; font-size: 14px; line-height: 1.45; }
.wp-note:empty { display: none; }
.wp-note.is-warn { color: var(--rose); font-weight: 700; }
.wp-foot { margin: 18px 0 0; font-size: 13px; line-height: 1.5; }
.link-blue { color: #1D4ED8; text-decoration: underline; }
@media (max-width: 560px) { .wp-box { padding: 20px 18px; } .wp-title { font-size: 22px; } }

.wallet-pill { display: flex; align-items: center; gap: calc(10 * var(--u)); background: #fff; padding: calc(10 * var(--u)) calc(14 * var(--u)); min-height: 44px; }
.wallet-pill [data-wallet-address] { font-family: var(--font-num); font-size: var(--fs-nav); cursor: default; }
.wallet-pill [data-wallet-balance] { font-family: var(--font-num); font-size: var(--fs-label); white-space: nowrap; }
.wallet-pill [data-wallet-switch-network] { background: var(--rose); color: #fff; padding: calc(6 * var(--u)) calc(12 * var(--u)); min-height: 32px; font-size: var(--fs-label); font-weight: 700; cursor: pointer; border: var(--rule-thin) solid var(--ink); }
.wallet-pill [data-wallet-disconnect] { font-size: var(--fs-label); text-decoration: underline; cursor: pointer; background: none; min-height: 32px; }
@media (max-width: 1023px) { .wallet-pill { flex-wrap: wrap; } }

/* pre-launch X / Telegram note (app.js) */
a[data-launch][data-soon] { position: relative; }
a[data-launch][data-soon]::after { content: attr(data-soon); position: absolute; top: calc(100% + 6px); right: 0; z-index: 30; white-space: nowrap; background: var(--ink); color: var(--cream); font-size: var(--fs-label); font-weight: 700; padding: 4px 10px; pointer-events: none; }