/* ============================================================================
   ASAS POS — BASE
   Reset, typography, layout primitives, global chrome.
   No literal colours: everything resolves through tokens.css.
   ========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: auto; /* Lenis owns smooth scrolling */
  overflow-x: clip;
}

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: 400;
  font-variation-settings: "wdth" 100, "wght" 400;
  line-height: var(--lh-body);
  letter-spacing: var(--tr-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  min-height: 100svh;
}

/* Lock scroll while the boot curtain or the mobile menu is up. */
body[data-scroll-locked="true"] { overflow: hidden; height: 100svh; }

/* --------------------------------------------------------------------------
   Held for the one frame the appearance changes on.

   A transition does not merely animate the change — it OWNS the property
   while it runs, and changing `color-scheme` is not a change the engine
   re-resolves it against: every element carrying `transition: color` kept the
   colour it had computed under the mode being left. The nav links, the FAQ
   questions and the footer stayed night-blue on a day-white page.

   So the swap happens with nothing transitioning anywhere, and the attribute
   comes off again on the far side. `!important` and the universal selector
   are both deliberate: this has to beat every transition on the page for
   exactly one reflow, and it is never live while the visitor is reading.
   -------------------------------------------------------------------------- */
[data-swapping] *,
[data-swapping] *::before,
[data-swapping] *::after {
  transition: none !important;
}

img,
picture,
svg,
video { display: block; max-width: 100%; }

img { height: auto; }

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  background: none;
  border: 0;
}

button { cursor: pointer; }

a {
  color: inherit;
  text-decoration: none;
  text-underline-offset: 0.25em;
}

ul, ol { list-style: none; }

:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--r-xs);
}

::selection {
  background: var(--brand-accent);
  color: var(--fg-on-accent);
}

.skip-link {
  position: fixed;
  inset-block-start: var(--s-3);
  inset-inline-start: var(--s-3);
  z-index: calc(var(--z-boot) + 10);
  padding: var(--s-3) var(--s-5);
  border-radius: var(--r-pill);
  background: var(--brand-accent);
  color: var(--fg-on-accent);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  transform: translateY(-160%);
  transition: transform var(--d-mid) var(--e-out);
}
.skip-link:focus-visible { transform: translateY(0); }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: var(--lh-heading);
  letter-spacing: var(--tr-heading);
  text-wrap: balance;
}

.t-mega,
.t-display {
  font-family: var(--font-display);
  font-weight: 800;
  font-variation-settings: "wdth" 112, "wght" 800;
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-mega);
  text-transform: uppercase;
  text-wrap: balance;
}

.t-mega { font-size: var(--fs-mega); }
.t-display { font-size: var(--fs-4xl); }

.t-h2 {
  font-size: var(--fs-3xl);
  font-weight: 800;
  font-variation-settings: "wdth" 105, "wght" 800;
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-display);
}

.t-h3 {
  font-size: var(--fs-xl);
  font-weight: 700;
  font-variation-settings: "wdth" 100, "wght" 700;
  letter-spacing: var(--tr-heading);
}

.t-lead {
  font-size: var(--fs-md);
  line-height: 1.58;
  color: var(--fg-muted);
  max-width: var(--maxw-text);
  text-wrap: pretty;
}

.t-body { color: var(--fg-muted); text-wrap: pretty; }

.t-mono {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  font-weight: 500;
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  font-variation-settings: "wdth" 87.5, "wght" 500;
}

.t-num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

.accent { color: var(--fg-accent); }
.positive { color: var(--fg-positive); }
.negative { color: var(--fg-negative); }

/* Arabic swaps the whole type system to Tajawal and relaxes the tracking,
   because Arabic letterforms connect and negative tracking breaks them. */
[lang="ar"] {
  --font-display: "Tajawal", "Archivo", system-ui, sans-serif;
  --font-body: "Tajawal", "Archivo", system-ui, sans-serif;
  /* The mono face goes too, and this is not a preference — Martian Mono,
     Archivo and every generic `monospace` on the platform ship zero Arabic
     glyphs, so any Arabic set in --font-mono was silently falling through to
     whatever system font the browser could find. Every mono-styled label on
     the page (chips, tabs, tags, group labels, kickers, states, captions)
     therefore rendered in a different typeface from the Tajawal beside it.
     Latin runs inside Arabic keep the mono face — they are tagged .lat /
     .t-num and take it back below. */
  --font-mono: "Tajawal", "Archivo", system-ui, sans-serif;
  --tr-mega: 0em;
  --tr-display: 0em;
  --tr-heading: 0em;
  --tr-body: 0em;
  /* Positive tracking is worse for Arabic than negative tracking is. Arabic
     letters JOIN, and letter-spacing is inserted between them after shaping —
     0.14em on a 12px label prises every connected stroke apart and the word
     stops reading as a word. Both mono tracks go to zero for the same reason
     the display tracks above already do. */
  --tr-mono: 0em;
  --tr-label: 0em;
  --lh-tight: 1.16;
  --lh-snug: 1.2;
  --lh-heading: 1.32;
  --lh-body: 1.85;
}

[lang="ar"] .t-mega,
[lang="ar"] .t-display,
[lang="ar"] .t-h2 { text-transform: none; font-weight: 900; }

/* Latin figures and product/brand strings stay Latin inside Arabic text.
   Being Latin, they can also keep a little tracking back, which the token
   above took away from the page as a whole.

   .t-mono is deliberately NOT in this list. .t-num and .lat mark a run of
   Latin; .t-mono marks a TYPE STYLE, and it sits on five fully translated
   Arabic paragraphs. Forcing them to direction:ltr made `text-align: start`
   resolve to the left, so those sentences hugged the wrong edge of an
   otherwise right-aligned page — and forcing them into a Latin face was the
   font problem above. .t-mono now simply follows --font-mono, which Arabic
   has already redefined. */
[lang="ar"] .t-num,
[lang="ar"] .lat {
  font-family: "Martian Mono", "Archivo", monospace;
  letter-spacing: 0.04em;
  direction: ltr;
  unicode-bidi: isolate;
}
[lang="ar"] .lat-sans { font-family: "Archivo", sans-serif; direction: ltr; unicode-bidi: isolate; }

/* Arabic has no case, so uppercasing is a no-op on the letters themselves —
   but these are running sentences, not labels, and they read as sentences. */
[lang="ar"] .t-mono { text-transform: none; }

/* --------------------------------------------------------------------------
   Layout primitives
   -------------------------------------------------------------------------- */

.shell {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.shell-wide {
  width: 100%;
  max-width: 110rem;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { position: relative; padding-block: var(--section-y); }
.section-tight { padding-block: clamp(2.25rem, 4vw, 4rem); }

.rule {
  block-size: 1px;
  inline-size: 100%;
  background: var(--line);
  transform-origin: left center;
  border: 0;
}

/* Perforated tear line — the receipt world's own divider. */
.perf {
  position: relative;
  block-size: 1px;
  inline-size: 100%;
  background-image: repeating-linear-gradient(
    to right,
    var(--line-strong) 0 6px,
    transparent 6px 14px
  );
  opacity: 0.65;
}

.stack { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; }
.grow { flex: 1 1 auto; }

/* --------------------------------------------------------------------------
   Section header — the one named kicker system, a ledger line.
   The index is not decoration: the page is a numbered ledger of ten entries.
   -------------------------------------------------------------------------- */

.ledger-head {
  display: grid;
  gap: var(--s-4);
  margin-block-end: var(--s-6);
}

.ledger-line {
  display: flex;
  align-items: baseline;
  gap: var(--s-4);
  padding-block-end: var(--s-3);
  border-block-end: 1px solid var(--line);
  color: var(--fg-muted);
}

.ledger-line__idx {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  font-variant-numeric: tabular-nums;
  color: var(--fg-accent);
  letter-spacing: var(--tr-mono);
}

.ledger-line__label {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  font-variation-settings: "wdth" 87.5;
}

.ledger-line__rule {
  flex: 1 1 auto;
  block-size: 1px;
  background: var(--line);
  transform-origin: inline-start;
}

.ledger-head__title { max-width: 26ch; }
.ledger-head__sub { max-width: 64ch; }

/* --------------------------------------------------------------------------
   Global chrome: film grain, custom cursor, boot curtain
   -------------------------------------------------------------------------- */

.grain {
  position: fixed;
  inset: 0;
  z-index: var(--z-grain);
  pointer-events: none;
  opacity: 0.035;
  mix-blend-mode: overlay;
  background-image: var(--grain-src);
  background-size: 180px 180px;
}

/* A ring that TRAILS the real pointer — the native cursor is never hidden.
   Hiding it made a decorative effect load-bearing: any fault in the cursor
   code left the visitor with no pointer at all.
   It also starts fully transparent and is revealed only once a real
   pointermove has positioned it, so it can never sit parked in a corner. */
/* Anchored PHYSICALLY, never logically. The Motion layer writes
   translate3d(clientX, clientY, 0) — raw viewport coordinates — so the origin
   this translate starts from has to be the viewport's top-left in every
   direction. `inset-inline-start` resolves to right:0 under dir="rtl", which
   put the ring a full viewport width off the screen in Arabic. */
.cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--z-cursor);
  pointer-events: none;
  inline-size: 28px;
  block-size: 28px;
  margin: -14px 0 0 -14px;
  border-radius: var(--r-pill);
  border: 1px solid var(--cursor-ring);
  box-shadow: var(--cursor-halo);
  display: none;
  opacity: 0;
  transition: opacity var(--d-mid) var(--e-out);
  will-change: transform;
}

.cursor__label {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--fg-on-accent);
  white-space: nowrap;
  opacity: 0;
}

.cursor__ring {
  position: absolute;
  inset: 0;
  border-radius: var(--r-pill);
  background: var(--brand-accent);
  scale: 0;
}

@media (hover: hover) and (pointer: fine) {
  .cursor { display: block; }
}

.boot {
  position: fixed;
  inset: 0;
  z-index: var(--z-boot);
  background: var(--bg);
  display: grid;
  place-items: center;
  clip-path: inset(0 0 0 0);
}

.boot__inner {
  display: grid;
  gap: var(--s-5);
  justify-items: center;
  inline-size: min(30rem, 82vw);
}

.boot__tape {
  inline-size: 100%;
  display: grid;
  gap: 6px;
}

.boot__tape span {
  block-size: 1px;
  background: var(--line-strong);
  transform-origin: inline-start;
  transform: scaleX(0);
  display: block;
}

.boot__meta {
  display: flex;
  justify-content: space-between;
  inline-size: 100%;
  font-family: var(--font-mono);
  font-size: var(--fs-mono-xs);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--fg-dim);
}

.boot__count { color: var(--fg-accent); font-variant-numeric: tabular-nums; }

.boot__word {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 9vw, 5.5rem);
  font-weight: 800;
  font-variation-settings: "wdth" 118, "wght" 800;
  letter-spacing: var(--tr-mega);
  text-transform: uppercase;
  overflow: hidden;
  display: block;
}

.boot__word > span { display: block; }

/* --------------------------------------------------------------------------
   Reduced motion — kill both animation layers, show everything.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Touch targets. On a coarse pointer every control clears 44px, which is what
   a thumb needs — the compact desktop sizing is not safe on a phone.
   -------------------------------------------------------------------------- */

@media (pointer: coarse) {
  .seg__btn { min-block-size: 44px; padding-inline: 1.2rem; }
  .cred__copy { min-block-size: 44px; display: inline-flex; align-items: center; }
  .btn--sm .btn__pull { padding-block: 0.8rem; }
  .nav__link { padding-block: 0.75rem; }
  .footer__col a { padding-block: 0.35rem; }
  .acc__btn { padding-block: var(--s-5); }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .boot { display: none; }
  .cursor { display: none !important; }
}