/* ==========================================================================
   JAD APP — "Chalk on Cloth" (طباشير على قماش). Layer 2. Load AFTER jad.css.
   Extends the brand system; replaces nothing. Every jad.css token stays valid.

   THREE LAWS, encoded rather than remembered:
   1. Gold is THREAD. It may appear in border, stroke, outline, box-shadow
      spread <=2px, or as a gradient stop. It may NEVER be a background.
   2. Gold may carry TEXT on dark grounds only (7.97:1 on onyx) and never on
      paper (2.15:1 on ivory). Verified by computation, not by eye.
   3. Text is inset; images never are. No image carries padding on 4 sides.
   ========================================================================== */

@font-face{ font-family:'Expo Arabic'; src:url('../fonts/expo-light.woff2') format('woff2'),url('../fonts/expo-light.ttf') format('truetype'); font-weight:300; font-display:swap; }
@font-face{ font-family:'Expo Arabic'; src:url('../fonts/expo-book.woff2') format('woff2'),url('../fonts/expo-book.ttf') format('truetype'); font-weight:400; font-display:swap; }
@font-face{ font-family:'Expo Arabic'; src:url('../fonts/expo-semibold.woff2') format('woff2'),url('../fonts/expo-semibold.ttf') format('truetype'); font-weight:600; font-display:swap; }

:root{
  /* ---- GROUNDS — the 60 ---------------------------------------------- */
  --paper:      #F5F1E8;   /* pattern paper. app ground                    */
  --paper-2:    #EDE6D8;   /* pressed paper, alt rows                      */
  --paper-3:    #E3DACB;   /* kraft. wells, watermark numerals             */
  --paper-4:    #D9CFC0;
  --calico:     #D9CFC0;   /* toile, swatch backs                          */
  --table:      #0E0E0E;   /* the cutting table (bands)                    */
  --table-2:    #171412;

  /* ---- CLOTH — the 30. The only saturated fills in the product. ------- */
  --bolt:       #6E1F2B;   /* the ONLY primary-action colour               */
  --bolt-deep:  #54141F;
  --bolt-tint:  rgba(110,31,43,.08);
  --bolt-line:  rgba(110,31,43,.28);

  /* ---- THREAD & CHALK — the 10. STROKES ONLY, NEVER AREAS. ------------ */
  --thread:       #C6A15B;
  --thread-soft:  #DCC08A;
  --thread-line:  rgba(198,161,91,.34);
  --thread-ghost: rgba(198,161,91,.14);
  --chalk:        rgba(245,241,232,.22);
  --chalk-hot:    rgba(245,241,232,.55);

  /* ---- INK. Ratios computed against --paper, not estimated. ----------- */
  --ink:      #2A2724;   /* 13.2:1  body                                   */
  --graphite: #6B6355;   /*  5.3:1  small secondary text                   */
  --pencil:   #8C8371;   /*  3.3:1  FAILS AA. >=19px ONLY.                 */

  /* ---- STATE. Derived from the house, not imported from a UI kit. ----- */
  --st-wait: #8C8371;
  --st-work: #6E1F2B;
  --st-done: #4A5D4E;
  --st-late: #8E3B22;
  /* accent for small labels: burgundy on paper, GOLD on the table —
     gold is the one colour licensed to carry text on dark (7.97:1). */
  --accent-text: #6E1F2B;

  /* ---- GEOMETRY: cut, not rounded ------------------------------------- */
  --r-nick:  2px;
  --r-piece: 6px;
  --r-fold: 18px;
  --r-seal: 999px;
  --notch:  14px;
  --cut-lead: polygon(var(--notch) 0, 100% 0, 100% 100%, 0 100%, 0 var(--notch));

  /* ---- SPACE. 4px stitch unit + a FIXED seam allowance. --------------- */
  --seam:     20px;
  --selvedge: 28px;
  --gutter:   12px;
  --s1:4px; --s2:8px;  --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px;
  --strip: 12px;
  --tap:    48px;
  --tap-lg: 56px;
  --bar-h:  64px;
  --hem-h:  36px;
  --thumb:  45vh;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  --maxw: 1200px;

  /* ---- TYPE. rem intercepts so clamp() honours user font scaling. ----- */
  --ff: 'Expo Arabic','Tajawal','Segoe UI',Tahoma,sans-serif;
  --t-tick:    0.6875rem;
  --t-label:   0.8125rem;
  --t-cap:     0.8125rem;
  --t-meta:    clamp(0.875rem,  0.693rem + 0.91vw, 0.9375rem);
  --t-body:    clamp(1rem,      0.818rem + 0.91vw, 1.0625rem);
  --t-lead:    clamp(1.1875rem, 0.824rem + 1.82vw, 1.3125rem);
  --t-title:   clamp(1.5625rem, 0.653rem + 4.55vw, 1.875rem);
  --t-screen:  clamp(2rem,      0.546rem + 7.27vw, 2.5rem);
  --t-display: clamp(2.5rem,   -0.409rem + 14.55vw, 3.5rem);
  --t-figure:  clamp(3.25rem,  -0.386rem + 18.18vw, 4.5rem);
  --track-latin: .18em;
  --track-tight: -.02em;

  /* ---- DEPTH: warm, paper-on-table. No neutral drop shadows anywhere. -- */
  --sh-lift:  0 1px 0 rgba(42,39,36,.05), 0 2px 6px -2px rgba(42,39,36,.12);
  --sh-piece: 0 2px 0 rgba(42,39,36,.04), 0 10px 22px -14px rgba(42,39,36,.34);
  --sh-sheet: 0 -1px 0 rgba(198,161,91,.20), 0 -20px 44px -22px rgba(0,0,0,.55);
  --sh-press: inset 0 1px 2px rgba(42,39,36,.18);

  /* ---- MOTION: mechanism and cloth. Never springy UI. ----------------- */
  --e-draw: cubic-bezier(.22,.61,.36,1);
  --e-fold: cubic-bezier(.32,.72,0,1);
  --e-pin:  cubic-bezier(.20,.90,.30,1.06);
  --d-tap: 120ms; --d-state: 220ms; --d-sheet: 340ms; --d-draw: 640ms;

  /* ---- TEXTURE: zero image files. ONE layer only. --------------------- */
  --weave: repeating-linear-gradient(45deg, rgba(42,39,36,.028) 0 1px, transparent 1px 3px);
  --baste: repeating-linear-gradient(to left, var(--thread) 0 6px, transparent 6px 16px);
  --ticks: repeating-linear-gradient(to left, var(--thread-line) 0 1px, transparent 1px 8px);

  --z-bar: 60; --z-hem: 55; --z-sheet: 80; --z-scrim: 70; --z-pill: 65;
}

/* ==========================================================================
   TABLE GROUND — staff mode AND dark mode. One mechanism, two callers.
   Elevation is onyx veiled with GOLD, never with white.
   ========================================================================== */
[data-ground="table"]{
  --accent-text: var(--thread);
  --st-done: #93BA9B;   /* readable on onyx */
  --st-late: #E58A64;
  --st-wait: rgba(245,241,232,.6);
  --paper:    #0E0E0E;
  --paper-2:  #171412;
  --paper-3:  #1D1A14;
  --paper-4:  #242017;
  --calico:   #211D1A;
  --ink:      rgba(245,241,232,.86);
  --graphite: rgba(245,241,232,.62);
  --pencil:   rgba(245,241,232,.52);
  --thread-line:  rgba(198,161,91,.40);
  --thread-ghost: rgba(198,161,91,.18);
  --weave: repeating-linear-gradient(45deg, rgba(245,241,232,.038) 0 1px, transparent 1px 3px);
  --sh-lift:  0 1px 0 rgba(0,0,0,.40), 0 2px 8px -2px rgba(0,0,0,.60);
  --sh-piece: 0 2px 0 rgba(0,0,0,.40), 0 10px 22px -14px rgba(0,0,0,.70);
  --sh-press: inset 0 1px 3px rgba(0,0,0,.75);
}

/* System dark mode maps to the table ground, but an explicit choice wins. */
@media (prefers-color-scheme: dark){
  :root:not([data-ground="paper"]){
      --accent-text: var(--thread);
    --st-done: #93BA9B;   /* readable on onyx */
    --st-late: #E58A64;
    --st-wait: rgba(245,241,232,.6);
    --paper:#0E0E0E; --paper-2:#171412; --paper-3:#1D1A14; --paper-4:#242017;
    --calico:#211D1A;
    --ink:rgba(245,241,232,.86); --graphite:rgba(245,241,232,.62);
    --pencil:rgba(245,241,232,.52);
    --thread-line:rgba(198,161,91,.40); --thread-ghost:rgba(198,161,91,.18);
    --weave: repeating-linear-gradient(45deg, rgba(245,241,232,.038) 0 1px, transparent 1px 3px);
    --sh-lift:0 1px 0 rgba(0,0,0,.40), 0 2px 8px -2px rgba(0,0,0,.60);
    --sh-piece:0 2px 0 rgba(0,0,0,.40), 0 10px 22px -14px rgba(0,0,0,.70);
    --sh-press:inset 0 1px 3px rgba(0,0,0,.75);
  }
}

/* Staff always runs on the table + one notch more contrast, bigger targets,
   and no reveals — data is present, never revealed. */
[data-ground="table"][data-role="staff"]{
  --ink:      rgba(245,241,232,.92);
  --graphite: rgba(245,241,232,.78);
  --pencil:   rgba(245,241,232,.66);
  --tap: 56px; --tap-lg: 60px;
  --s5:18px; --s6:24px; --s7:32px;
  --d-draw: 1ms;
}

/* The design studio pins to PAPER even in table mode — a lit worktable, and
   it sidesteps the invert() halo on the antialiased option art. */
[data-surface="studio"]{ --paper:#F5F1E8; --paper-2:#EDE6D8; --paper-3:#E3DACB;
  --ink:#2A2724; --graphite:#6B6355; --pencil:#8C8371;
  background: var(--paper); color: var(--ink); }

html{ background: var(--paper); }
body{
  background: var(--paper); color: var(--ink);
  font-family: var(--ff); font-size: var(--t-body);
  margin:0; text-align: start;
  -webkit-font-smoothing: antialiased;
}

/* ==========================================================================
   THE THREE STRUCTURAL PRIMITIVES
   ========================================================================== */

/* 1. The selvedge grid. Every screen. The whole identity in one rule. */
.sheet{
  display: grid;
  grid-template-columns: var(--selvedge) 1fr;
  padding-inline: var(--seam);
  column-gap: var(--gutter);
}
.sheet > *{ grid-column: 2; }
.sheet > .bleed{
  grid-column: 1 / -1;
  margin-inline: calc(var(--seam) * -1);
}
.sheet > .selv{ grid-column: 1; }

/* 2. The leader-dot spec row. The ONLY key/value device in the product. */
.spec{ display: grid; grid-template-columns: auto 1fr auto;
       align-items: baseline; gap: var(--s2); padding-block: var(--s2); }
.spec__k{ font-size: var(--t-label); font-weight:600; color: var(--graphite); }
.spec__lead{ border-block-end: 1px dotted var(--thread-line);
             transform: translateY(-.28em); }
.spec__v{ font-size: var(--t-meta); font-weight:600;
          font-variant-numeric: tabular-nums; color: var(--ink); }

/* 3. The chalk bracket. Selection WITHOUT a gold fill, ever. */
.pick{ position: relative; background: none; }
.pick[aria-selected="true"]::before,
.pick[aria-selected="true"]::after{
  content:''; position:absolute; inline-size:12px; block-size:12px;
  border: 2px solid var(--thread); pointer-events:none;
}
.pick[aria-selected="true"]::before{ inset-block-start:0; inset-inline-start:0;
  border-inline-end:0; border-block-end:0; }
.pick[aria-selected="true"]::after{ inset-block-end:0; inset-inline-end:0;
  border-inline-start:0; border-block-start:0; }

/* Design option art: crop the baked-in caption, multiply onto paper. */
.opt__art{
  aspect-ratio: 200 / 127;
  object-fit: cover; object-position: top;
  mix-blend-mode: multiply;
  inline-size: 100%;
}

/* ==========================================================================
   ARABIC CORRECTNESS.
   ========================================================================== */
:lang(ar) .eyebrow, :lang(ar) .cap, :lang(ar) .pill,
:lang(ar) .label, :lang(ar) .btn, [dir="rtl"] .label{
  letter-spacing: 0;
  word-spacing: .12em;
  text-transform: none;
}
:lang(ar){ line-height: 1.85; hyphens: none; }
:lang(en){ line-height: 1.62; }
:lang(ar) .label{ font-size: var(--t-label); font-weight: 600; }
:lang(en) .label{ font-size: var(--t-tick); letter-spacing: var(--track-latin);
                  text-transform: uppercase; font-weight: 600; }

/* Numbers are data: Western digits inside a bidi isolate, always. */
.num{ direction: ltr; unicode-bidi: isolate; font-variant-numeric: tabular-nums; }

/* Currency: U+FDFC and U+20C0 are ABSENT from Expo Arabic → tofu.
   ر.س as letters is fully covered. */
.sar::after{ content:'\00A0ر.س'; font-size:.78em; font-weight:400;
             color: var(--graphite); }

@media (prefers-reduced-motion: reduce){
  :root{ --d-state:1ms; --d-sheet:1ms; --d-draw:1ms; }
  .crawl{ animation: none !important; }
}