/* vietnamese */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 300 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/bricolagegrotesque-3y9K6as8bTXq_nANBjzKo3IeZx8z6up5BeSl9D4dj_x9PpZBMlGHInHEVA.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;
}
/* latin-ext */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 300 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/bricolagegrotesque-3y9K6as8bTXq_nANBjzKo3IeZx8z6up5BeSl9D4dj_x9PpZBMlGGInHEVA.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;
}
/* latin */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 300 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/bricolagegrotesque-3y9K6as8bTXq_nANBjzKo3IeZx8z6up5BeSl9D4dj_x9PpZBMlGIInE.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;
}
/* latin-ext */
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/instrumentsans-pxiTypc9vsFDm051Uf6KVwgkfoSxQ0GsQv8ToedPibnr0She1YmV.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;
}
/* latin */
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/instrumentsans-pxiTypc9vsFDm051Uf6KVwgkfoSxQ0GsQv8ToedPibnr0SZe1Q.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;
}
/* latin-ext */
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/instrumentsans-pxiTypc9vsFDm051Uf6KVwgkfoSxQ0GsQv8ToedPibnr0She1YmV.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;
}
/* latin */
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/instrumentsans-pxiTypc9vsFDm051Uf6KVwgkfoSxQ0GsQv8ToedPibnr0SZe1Q.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;
}
/* latin-ext */
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/instrumentsans-pxiTypc9vsFDm051Uf6KVwgkfoSxQ0GsQv8ToedPibnr0She1YmV.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;
}
/* latin */
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/instrumentsans-pxiTypc9vsFDm051Uf6KVwgkfoSxQ0GsQv8ToedPibnr0SZe1Q.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;
}

/* cyrillic-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/plexmono--F63fjptAgt5VM-kVkqdyU8n1iIq129k.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/plexmono--F63fjptAgt5VM-kVkqdyU8n1isq129k.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/plexmono--F63fjptAgt5VM-kVkqdyU8n1iAq129k.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;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/plexmono--F63fjptAgt5VM-kVkqdyU8n1iEq129k.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;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/plexmono--F63fjptAgt5VM-kVkqdyU8n1i8q1w.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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/plexmono--F6qfjptAgt5VM-kVkqdyU8n3twJwl1FgtIU.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/plexmono--F6qfjptAgt5VM-kVkqdyU8n3twJwlRFgtIU.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/plexmono--F6qfjptAgt5VM-kVkqdyU8n3twJwl9FgtIU.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;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/plexmono--F6qfjptAgt5VM-kVkqdyU8n3twJwl5FgtIU.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;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/plexmono--F6qfjptAgt5VM-kVkqdyU8n3twJwlBFgg.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;
}

/* ================================================================================================
   RODEO — the greenfield token sheet (canon §6, T30). Dusk on a working range.
   Two layers: primitives -> semantics. No raw hex below the semantic layer in any surface file.
   ================================================================================================ */
:root{
  /* Tell the browser this is a dark surface, so the controls WE don't paint are dark too:
     checkboxes, scrollbars, autofill, date and select popups. Without it the browser assumes light
     and draws them for a white page — the private-key tick rendered as a bright white square in the
     middle of the dusk palette the moment it was made large enough to hit on a phone.
     `offline.html` already declared this on its own; now the whole app agrees. */
  color-scheme: dark;

  /* primitives — the range at blue hour */
  --p-soil:#1A1512; --p-soil-deep:#120E0B; --p-leather:#3B2A22; --p-leather-hi:#4A362B;
  --p-ember:#E4562B; --p-ember-hi:#FF7A4D; --p-turquoise:#2CA6A4; --p-turquoise-dim:#1E7472;
  /* struck iron — the ember deepened just enough to carry white text at WCAG-AA (4.9:1 / hover 4.7:1);
     the bright --p-ember stays for large display + decorative accents where contrast is already ample */
  --p-ember-cta:#C8431C; --p-ember-cta-hi:#CC4620;
  /* the ember burnt down to its cooling edge — the far stop of every ember sphere/gradient */
  --p-ember-deep:#7A2B17;
  --p-bone:#EDE4D3; --p-dust:#B8A98F; --p-shadow:rgba(10,7,5,.55);
  --p-white:#FFFFFF;                        /* pure white: ink ON ember only, where AA needs the full step */

  /* semantics */
  --range:var(--p-soil); --range-deep:var(--p-soil-deep);
  --surface:var(--p-leather); --surface-raised:var(--p-leather-hi);
  --ember:var(--p-ember); --ember-hi:var(--p-ember-hi); --ember-deep:var(--p-ember-deep);
  --ember-cta:var(--p-ember-cta); --ember-cta-hi:var(--p-ember-cta-hi);
  --ink-on-ember:var(--p-white);   /* white ink is a CONTRAST decision, not a colour choice — name it */
  --verified:var(--p-turquoise); --verified-dim:var(--p-turquoise-dim);
  --ink:var(--p-bone); --ink-soft:var(--p-dust);
  --glass:rgba(59,42,34,.42); --glass-edge:rgba(237,228,211,.14);
  --shadow:0 18px 50px var(--p-shadow);

  /* type */
  --f-display:"Bricolage Grotesque",system-ui,sans-serif;
  --f-body:"Instrument Sans",system-ui,sans-serif;
  --f-ledger:"IBM Plex Mono",ui-monospace,monospace;
  --fs-hero:clamp(2.2rem,6vw,4.4rem); --fs-h1:clamp(1.5rem,3.2vw,2.3rem);
  --fs-body:clamp(.98rem,1.1vw,1.06rem); --fs-small:.86rem;

  /* motion — the rope-ease: decisive settle, a hair of overshoot */
  --ease-rope:cubic-bezier(.22,1.28,.36,1); --t-quick:.18s; --t-settle:.42s;
  --radius:14px; --radius-lg:22px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--range);color:var(--ink);
  font-family:var(--f-body);font-size:var(--fs-body);line-height:1.6;
  -webkit-font-smoothing:antialiased}
::selection{background:var(--ember);color:var(--range-deep)}
:focus-visible{outline:2px solid var(--ember);outline-offset:2px;border-radius:4px}

/* the grain — dust and printed paper are literally the subject (canon §6.3) */
.grain::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:9990;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='0.9'/%3E%3C/svg%3E")}

/* lantern glass — western-material, with a job (canon §6.5); falls back to solid leather */
.glass{background:var(--glass);border:1px solid var(--glass-edge);border-radius:var(--radius-lg);
  box-shadow:var(--shadow)}
@supports (backdrop-filter:blur(14px)){.glass{backdrop-filter:blur(14px) saturate(1.05)}}
@supports not (backdrop-filter:blur(14px)){.glass{background:var(--surface)}}

/* buttons — the ember does the work, spent rarely */
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.72rem 1.25rem;min-height:44px;
  border-radius:var(--radius);border:1px solid var(--glass-edge);background:transparent;
  color:var(--ink);font-family:var(--f-body);font-weight:600;font-size:var(--fs-body);
  cursor:pointer;transition:transform var(--t-quick) var(--ease-rope),background var(--t-quick),border-color var(--t-quick)}
.btn:hover{background:rgba(237,228,211,.06);transform:translateY(-1px)}
.btn:active{transform:translateY(0) scale(.985)}
.btn-ember{background:var(--ember-cta);border-color:transparent;color:var(--ink-on-ember)}
.btn-ember:hover{background:var(--ember-cta-hi);box-shadow:0 8px 24px rgba(228,86,43,.30)}

/* ---- <rodeo-nav> — the one shell every surface shares (nav.js) ---- */
rodeo-nav{display:block;position:relative;z-index:5}
.rnav{display:flex;align-items:center;gap:22px;max-width:1240px;margin:0 auto;
  padding:16px 24px;border-bottom:1px solid var(--glass-edge)}
.rnav-brand{font-family:var(--f-display);font-weight:780;font-size:1.05rem;letter-spacing:.02em;
  color:var(--ink);text-decoration:none;white-space:nowrap}
.rnav-brand span{color:var(--ember)}
/* the disclosure toggle — hidden on desktop, the mobile door to the whole trail (nav.js) */
.rnav-burger{display:none;align-items:center;justify-content:center;flex:none;width:44px;height:44px;
  margin-left:auto;padding:0;color:var(--ink);cursor:pointer;background:transparent;
  border:1px solid var(--glass-edge);border-radius:var(--radius)}
.rnav-burger:hover{background:rgba(237,228,211,.06);border-color:var(--ink-soft)}
.rnav-burger-i{position:relative}
.rnav-burger-i,.rnav-burger-i::before,.rnav-burger-i::after{display:block;width:18px;height:2px;
  background:currentColor;border-radius:2px;transition:transform var(--t-quick),opacity var(--t-quick)}
.rnav-burger-i::before,.rnav-burger-i::after{content:"";position:absolute;left:0}
.rnav-burger-i::before{top:-6px}
.rnav-burger-i::after{top:6px}
.rnav-burger[aria-expanded="true"] .rnav-burger-i{background:transparent}
.rnav-burger[aria-expanded="true"] .rnav-burger-i::before{top:0;transform:rotate(45deg)}
.rnav-burger[aria-expanded="true"] .rnav-burger-i::after{top:0;transform:rotate(-45deg)}
.rnav-trail{display:flex;gap:18px;flex:1;min-width:0;overflow-x:auto}
.rnav-trail a{color:var(--ink-soft);text-decoration:none;font-weight:560;font-size:.93rem;
  white-space:nowrap;padding:.2rem 0;border-bottom:2px solid transparent;
  transition:color var(--t-quick),border-color var(--t-quick)}
.rnav-trail a:hover{color:var(--ink)}
.rnav-trail a.on{color:var(--ink);border-bottom-color:var(--ember)}
.rnav-side{display:flex;align-items:center;gap:14px;white-space:nowrap}
.rnav-who{color:var(--ink-soft);font-size:.86rem;max-width:18ch;overflow:hidden;text-overflow:ellipsis}
.rnav-out,.rnav-in{font:inherit;font-size:.9rem;font-weight:600;color:var(--ink);cursor:pointer;
  background:transparent;border:1px solid var(--glass-edge);border-radius:var(--radius);
  padding:.4rem .95rem;min-height:36px;text-decoration:none;display:inline-flex;align-items:center;
  transition:background var(--t-quick),border-color var(--t-quick)}
.rnav-out:hover,.rnav-in:hover{background:rgba(237,228,211,.06);border-color:var(--ink-soft)}
/* ≤900: the trail folds behind the disclosure toggle — every item stays reachable, keyboard-first,
   no horizontal scroll strip. Desktop (>900) keeps the inline trail exactly as above. */
@media (max-width:900px){
  .rnav{position:relative;flex-wrap:wrap;gap:12px;padding:14px 16px}
  .rnav-burger{display:inline-flex}
  .rnav-trail{position:absolute;top:100%;left:0;right:0;z-index:30;flex:none;flex-direction:column;
    gap:0;margin:0;padding:6px 0;overflow:visible;display:none;
    background:var(--surface);border:1px solid var(--glass-edge);border-top:none;
    border-radius:0 0 var(--radius) var(--radius);box-shadow:var(--shadow)}
  .rnav-trail.open{display:flex}
  .rnav-trail a{width:100%;padding:.8rem 18px;border-bottom:none;font-size:1rem}
  .rnav-trail a:hover{background:rgba(237,228,211,.06)}
  .rnav-trail a.on{border-bottom:none;background:rgba(228,86,43,.10);box-shadow:inset 3px 0 0 var(--ember)}
}
@media (max-width:640px){.rnav-who{display:none}}

/* ---- <rodeo-foot> — the shared slim footer (nav.js) ---- */
rodeo-foot{display:block;position:relative;z-index:1}
.rfoot{max-width:1240px;margin:40px auto 0;padding:22px 24px 34px;border-top:1px solid var(--glass-edge);
  text-align:center}
.rfoot-nav{display:flex;flex-wrap:wrap;gap:18px;justify-content:center;margin-bottom:8px}
.rfoot-nav a{color:var(--ink-soft);text-decoration:none;font-size:.88rem}
.rfoot-nav a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.rfoot-line{color:var(--ink-soft);font-size:.8rem;margin:0}

/* ---- the receipt's grandma layer (value-language law): what a person reads FIRST ---- */
.receipt-plain{font-family:var(--f-body);margin:.2rem 0 .4rem}
.receipt-plain .rp-line{margin:.2rem 0;font-size:.93rem;line-height:1.5}
.receipt-plain .rp-line b{color:var(--verified);font-weight:680}
.receipt-plain .rp-free{color:var(--verified);font-weight:680}
.receipt-details{margin-top:.5rem}
.receipt-details summary{cursor:pointer;color:var(--ink-soft);font-size:.8rem;list-style:none;
  text-decoration:underline;text-underline-offset:3px}
.receipt-details summary::-webkit-details-marker{display:none}
.receipt-details[open] summary{color:var(--ink)}

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