/* ============================================================================================================
BRANDS' LAB — DESIGN SYSTEM v1 · tokens.css (Design_Part1, A — Fable 5.1, 2026-09-13)
Built FROM the Illustrator brand master (brand_assets/BRAND_GUIDE_v2.md), never from the HTML prototypes.
Every value the components consume lives here. No component sheet carries a raw colour, size or duration.
The doc twin: 02_architecture/DESIGN_SYSTEM_v1.md.
============================================================================================================ */
/* ---- 0. The faces (THE FONT LAW: OFL only, self-hosted woff2, no Google Fonts request) ---------------------- */
@font-face {
font-family: "Outfit";
src: url("/assets/fonts/Outfit-Variable.woff2") format("woff2");
font-weight: 100 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "IBM Plex Sans Arabic";
src: url("/assets/fonts/PlexArabic-Regular.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F, U+2010-2011, U+204F, U+2E41; /* THE SMOOTHNESS LAW: an English page never downloads the Arabic faces */
}
@font-face {
font-family: "IBM Plex Sans Arabic";
src: url("/assets/fonts/PlexArabic-Medium.woff2") format("woff2");
font-weight: 500;
font-style: normal;
font-display: swap;
unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F, U+2010-2011, U+204F, U+2E41; /* THE SMOOTHNESS LAW: an English page never downloads the Arabic faces */
}
@font-face {
font-family: "IBM Plex Sans Arabic";
src: url("/assets/fonts/PlexArabic-SemiBold.woff2") format("woff2");
font-weight: 600;
font-style: normal;
font-display: swap;
unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F, U+2010-2011, U+204F, U+2E41; /* THE SMOOTHNESS LAW: an English page never downloads the Arabic faces */
}
:root {
/* ---- 1. Primitives: the brand's inks (brand guide §2) --------------------------------------------------- */
--ink: #000000; /* black — the marks' ink */
--paper: #E7DED1; /* brand cream — the owner's own paper, corner-median measured */
--white: #FFFFFF;
--ink-85: #23211F; /* pre-mixed 85 % ink on cream (print secondary text) */
--cream-85: #D9D9D9; /* pre-mixed 85 % cream on black */
--thread: #B3402B; /* thread red — the website's accent, never on a mark */
--thread-deep: #8F3222; /* hover / pressed */
/* the warm neutral ramp — one hue (the cream's, OKLCH h≈80), lightness steps perceptually even.
n-0 is the paper itself; the ramp darkens toward the ink without ever going cool. */
--n-0: #F5F0E8; /* lifted paper: inputs, raised cards on cream */
--n-1: #E7DED1; /* = --paper */
--n-2: #D6CCBD; /* pressed paper, table stripes */
--n-3: #C2B7A6; /* hairlines on cream */
--n-4: #9A9083; /* disabled ink only (exempt from AA) */
--n-4b: #857B6E; /* control boundaries on cream (3.1:1, the UI floor) */
--n-5: #625A50; /* muted text on cream (AA 5.1:1) */
--n-6: #4A443D; /* secondary text on cream */
--n-7: #2E2A26; /* hairlines on black */
--n-8: #1C1A17; /* raised surface on black */
--n-9: #110F0D; /* surface on black */
--n-10: #0A0908; /* the deepest neutral (the black band is the ink itself) */
/* thread red family (the semantic colours sit at matching lightness so they read as one family) */
--thread-soft: #F0D9D3; /* red tint on cream: error field backgrounds */
--ok: #3E6B3A; --ok-soft: #D9E3D2;
--warn: #7F5010; --warn-soft: #EFE0C2;
--info: #35506B; --info-soft: #D3DCE6;
/* ---- 2. Semantic aliases (what components consume) — ONE MODE: light, bright (dark mode removed by Sawy's ruling 2026-09-13) --- */
--bg: var(--n-0); /* the bright paper — the page ground (Sawy 2026-09-13: light, very bright) */
--bg-alt: var(--paper); /* the brand cream: alternating sections, the strip band */
--surface: var(--white); /* cards, tiles */
--surface-2: var(--white); /* inputs, the select's list, the notification sheet */
--surface-ink: var(--ink); /* the black band (footer, the stamp block) */
--text: var(--ink);
--text-2: var(--n-6);
--text-muted: var(--n-5);
--text-on-ink: var(--paper); /* text on the black band = cream, the emblem's own pairing */
--text-on-ink-2: var(--cream-85);
--placeholder: #7A736C; /* Sawy 2026-09-14 02:55: more faded — the lightest warm grey still AA on the white cell (4.67:1); n-5 read as text */ /* audit A4 (2026-09-14): 2.8:1 failed WCAG 1.4.3; n-5 reads ≥ 4.5:1 on the ground and on white and still fades */ /* THE PLACEHOLDER RULING: light and faded example text (Sawy 2026-09-13); labels carry the meaning, so AA is not required of a hint */
--disabled: var(--n-4);
--line: var(--n-3); /* decorative hairlines only */
--line-ui: var(--n-4b); /* boundaries of controls that are not ink-lined (3:1) */
--line-strong: var(--ink);
--line-on-ink: var(--n-7);
--accent: var(--thread);
--accent-hover: var(--thread-deep);
--accent-text: var(--thread); /* the accent as text (AA on cream at ≥ 18 px 600, guide §2) */
--on-accent: var(--white);
--focus: var(--thread);
--danger: var(--thread-deep); --danger-soft: var(--thread-soft); /* deep as text on the tint: 5.9:1 */
--success: var(--ok); --success-soft: var(--ok-soft);
--warning: var(--warn); --warning-soft: var(--warn-soft);
--note: var(--info); --note-soft: var(--info-soft);
--on-note: var(--white); --on-success: var(--white); --on-warning: var(--white); --on-danger: var(--white);
--track: var(--n-2); /* the meter's empty track */
--skel-bg: var(--n-2); --skel-sheen: rgb(255 255 255 / .55);
--chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
--scrim: rgb(0 0 0 / .45);
--shadow-hue: 40 30% 10%; /* warm shadow, never pure black */
/* ---- 3. Type ---------------------------------------------------------------------------------------------- */
--font-latin: "Outfit", "Avenir Next", "Segoe UI", system-ui, sans-serif;
--font-arabic: "IBM Plex Sans Arabic", "SF Arabic", "Noto Sans Arabic", "Geeza Pro", "Segoe UI", system-ui, sans-serif;
--font: var(--font-latin);
--font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
/* fluid scale: ratio ≈1.2 at 390 px → ≈1.25 at 1440 px; --step-0 is the body (16 → 18 px) */
/* Phase 1b (2026-09-13): each step keeps its approved curve to 1440 px, then a growth term (zero until 1440 px) lifts it to 4/3 at 2560 px — the shell grows 1.78×
there, the type 1.33×, the measure stays capped. max() of the two curves = never smaller than before at any width. */
--step--2: calc(clamp(0.72rem, 0.70rem + 0.10vw, 0.8rem) + clamp(0px, (100vw - 1440px) * 0.003814, 0.267rem));
--step--1: calc(clamp(0.84rem, 0.81rem + 0.14vw, 0.94rem) + clamp(0px, (100vw - 1440px) * 0.004471, 0.313rem));
--step-0: calc(clamp(1.00rem, 0.96rem + 0.19vw, 1.125rem) + clamp(0px, (100vw - 1440px) * 0.005357, 0.375rem));
--step-1: calc(clamp(1.20rem, 1.13rem + 0.35vw, 1.41rem) + clamp(0px, (100vw - 1440px) * 0.006714, 0.47rem));
--step-2: calc(clamp(1.44rem, 1.31rem + 0.62vw, 1.76rem) + clamp(0px, (100vw - 1440px) * 0.008386, 0.587rem));
--step-3: calc(clamp(1.73rem, 1.50rem + 1.05vw, 2.2rem) + clamp(0px, (100vw - 1440px) * 0.010471, 0.733rem));
--step-4: calc(clamp(2.07rem, 1.72rem + 1.60vw, 2.75rem) + clamp(0px, (100vw - 1440px) * 0.0131, 0.917rem));
--step-5: calc(clamp(2.49rem, 1.95rem + 2.45vw, 3.43rem) + clamp(0px, (100vw - 1440px) * 0.016329, 1.143rem));
--step-6: calc(clamp(2.99rem, 2.20rem + 3.60vw, 4.29rem) + clamp(0px, (100vw - 1440px) * 0.020429, 1.43rem)); /* the hero */
--lh-tight: 1.05; /* Latin display */
--lh-snug: 1.2;
--lh-body: 1.55;
--lh-loose: 1.7;
--track-display: -0.02em;
--track-caps: 0.22em; /* the marks' wide tracking, for Latin eyebrows only — never on [lang=ar] */
--w-body: 400; --w-medium: 500; --w-head: 600;
--measure: 62ch;
/* ---- 4. Space (4 px base; compresses at the small end, jumps at the large) -------------------------------- */
--s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-5: 1.25rem; --s-6: 1.5rem;
--s-8: 2rem; --s-10: 2.5rem; --s-12: 3rem; --s-14: 3.5rem; --s-16: 4rem; --s-20: 5rem; --s-24: 6rem; --s-32: 8rem;
/* THE FLUID SHELL — Phase 1 (Sawy 2026-09-13, the 32-inch ruling; research: Utopia's clamp() maths, apple.com's 2560 px outer cap, the readable
measure kept ≤ 75 characters). Below 1440 every value is byte-identical to before; above it the shell keeps growing: the wrap 1200 → 2560
(83.4 % of the viewport), the gutter to 72 px, the section rhythm to 160 px, the prose columns to 960 / 800 px. The type scale is untouched
on purpose (one variable at a time — PERFECTION_LAWS); the measure never fills a wide screen. */
--gutter: max(clamp(1rem, 4vw, 2.5rem), clamp(1rem, 0.371rem + 2.58vw, 4.5rem));
--section: clamp(4rem, 6vw + 2rem, 10rem);
--wrap: clamp(75rem, 83.4vw, 160rem);
--wrap-narrow: clamp(47.5rem, 44vw, 60rem);
--wrap-text: clamp(42.5rem, 38vw, 50rem);
/* ---- 5. Shape (DECIDED 2026-09-12: 0 on blocks, full round on pills) ------------------------------------ */
--r-0: 0;
--r-block: 12px; /* THE CORNERS LAW v2 (Sawy 2026-09-13, the soft system): every cell, field, card, menu and row */
--r-block-sm: 8px; /* the small blocks inside a block (file type squares, menu rows, checkboxes 4px) */
--r-pill: 999px;
--r-mark: 50%; /* avatars and the emblem's own circle */
--line-w: 1px;
--line-w-strong: 1.5px;
--stitch-w: 1.5px; /* the stitch rule: dash 4.4 × w, gap 2.0 × w — the emblem's own ratio, unrolled */
--stitch-dash: 6.6px;
--stitch-gap: 3px;
--stitch-w-strong: 2.5px; /* the header's edge stitch: the same ratio, a heavier thread (Sawy 2026-09-13) */
--stitch-dash-strong: 11px;
--stitch-gap-strong: 5px;
/* ---- 6. Elevation (two levels; marks never carry a shadow) ------------------------------------------------ */
--shadow-1: 0 1px 2px hsl(var(--shadow-hue) / .10), 0 4px 12px hsl(var(--shadow-hue) / .08);
--shadow-2: 0 2px 6px hsl(var(--shadow-hue) / .12), 0 16px 40px hsl(var(--shadow-hue) / .16);
/* ---- 7. Motion ------------------------------------------------------------------------------------------- */
--dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 320ms; --dur-entrance: 420ms;
--ease-out: cubic-bezier(.16, 1, .3, 1);
--ease-in-out: cubic-bezier(.65, 0, .35, 1);
/* ---- 8. Controls ----------------------------------------------------------------------------------------- */
--control-h: 3rem; /* 48 px: every button and field, the tap floor with room */
--control-h-sm: 2.75rem; /* 44 px: the small button is still a full tap target */
--tap: 44px;
/* THE FLUID SHELL, Phase 2 (A, 2026-09-13): the layout primitives. Every value equals its 1440-and-below constant (the floors are the old
numbers), then grows with the viewport to a cap at 2560 — the gutters between split columns, the grid gaps, the fixed side panes. */
--gap-split: clamp(2.5rem, 2.5vw, 4rem); /* the two-column splits (hero, services, details, the door, the footer) */
--gap-grid: clamp(1.5rem, 1.6vw, 2.5rem); /* the four-across grids (the process thread, the stations) */
--pane-aside: clamp(20rem, 21vw, 26rem); /* the door's side column */
--pane-list: clamp(24rem, 22vw, 30rem); /* the desk's list column */
--pane-pad: clamp(2rem, 2.2vw, 3.5rem); /* the desk pane's side padding */
--pane-max: 80rem; /* the desk pane's reading width: content stays left, the spare stays air (Gmail's rule) */
--measure-beat: clamp(17rem, 14vw, 22rem); /* a process beat's paragraph */
--hdr-bar: 4.5rem; /* 72 px (Sawy 2026-09-13: a thicker bar) */
--hdr-h: calc(var(--hdr-bar) + env(safe-area-inset-top, 0px)); /* the bar + the notch inset: every sticky offset and the drawer start below the whole header */
--z-hdr: 40; --z-drawer: 50; --z-sheet: 60; --z-toast: 70;
color-scheme: light;
}
/* ---- 9. The Arabic face: same scale, Arabic rhythm (line-height up, tracking 0, no italics) ---------------- */
:lang(ar), [lang="ar"] {
--font: var(--font-arabic);
--lh-tight: 1.25;
--lh-snug: 1.35;
--lh-body: 1.75;
--lh-loose: 1.9;
--track-display: 0;
--track-caps: 0;
--measure: 58ch;
}
/* ============================================================================================================
BRANDS' LAB — DESIGN SYSTEM v1 · base.css (Design_Part1, A — Fable 5.1, 2026-09-13)
The reset, the type, the page grid, the stitch rule, RTL by design (logical properties everywhere), motion.
Consumes tokens.css only.
============================================================================================================ */
/* ---- reset ---------------------------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
/* THE FLUID SHELL, Phase 3 — the iOS layer (A, 2026-09-13): every control answers the first tap (no double-tap-zoom wait), no grey flash,
no long-press callout on buttons; the drawer and the desk measure the small viewport so nothing hides behind Safari's bars. */
a, button, [role="button"], input, select, textarea, label, summary { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
button, [role="button"], summary { -webkit-touch-callout: none; }
html { scroll-padding-top: calc(var(--hdr-h) + var(--s-4)); background: linear-gradient(var(--ink) 50%, var(--ink) 50%); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; } /* THE OVERSCROLL GROUND (TAL's rule): the root is black at both ends — the header at the top, the footer at the bottom — so Safari's rubber-band never shows a white gap */
html.is-restoring { scroll-behavior: auto; }
body {
margin: 0;
min-height: 100svh; /* svh, never dvh: THE VIEWPORT RULE (Sawy 2026-09-14 04:18) — on iPhone Safari the dynamic viewport unit grows as the toolbar collapses while you scroll, so every page grew under the thumb */
background: var(--bg);
background-clip: border-box;
color: var(--text);
font-family: var(--font);
font-size: var(--step-0);
line-height: var(--lh-body);
font-weight: var(--w-body);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
overflow-x: clip;
}
h1, h2, h3, h4, h5, h6, p, ul, ol, dl, figure, blockquote { margin: 0; }
ul[class], ol[class] { list-style: none; padding: 0; }
img, svg, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration-thickness: from-font; text-underline-offset: .14em; }
strong, b { font-weight: var(--w-head); }
hr { border: 0; height: var(--stitch-w); margin: var(--s-8) 0; background: var(--stitch-img); }
[hidden] { display: none !important; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
::selection { background: var(--ink); color: var(--paper); }
:lang(ar) { letter-spacing: 0; font-style: normal; }
:lang(ar) em, :lang(ar) i { font-style: normal; font-weight: var(--w-head); } /* Plex Sans Arabic has no italic */
bdi, [dir="ltr"] { unicode-bidi: isolate; }
[dir="rtl"] { text-align: start; }
/* ---- the stitch rule (the emblem's dashed ring, unrolled: dash 4.4 w, gap 2.0 w) -------------------------- */
:root {
--stitch-img: repeating-linear-gradient(90deg, currentColor 0 var(--stitch-dash), transparent var(--stitch-dash) calc(var(--stitch-dash) + var(--stitch-gap)));
--stitch-img-v: repeating-linear-gradient(180deg, currentColor 0 var(--stitch-dash), transparent var(--stitch-dash) calc(var(--stitch-dash) + var(--stitch-gap)));
--stitch-img-strong: repeating-linear-gradient(90deg, currentColor 0 var(--stitch-dash-strong), transparent var(--stitch-dash-strong) calc(var(--stitch-dash-strong) + var(--stitch-gap-strong)));
}
.stitch { position: relative; }
.stitch::before { content: ""; position: absolute; inset-inline: 0; top: 0; height: var(--stitch-w); background: var(--stitch-img); color: var(--line-strong); opacity: .9; }
.stitch-b::after { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: var(--stitch-w); background: var(--stitch-img); color: var(--line-strong); opacity: .9; }
.rule { height: var(--stitch-w); background: var(--stitch-img); color: var(--line-strong); opacity: .9; }
/* THE ONE-SEAM RULE (Sawy 2026-09-13, after the footer glitch): where a section meets a black bar (the header above, the footer
below) only the BAR's white stitch exists — the section never carries its own stitch on that edge. Two stitches within a few
pixels read as a broken seam. Enforced here for every page: the first section under the header loses its top stitch, the last
section above the footer loses its bottom stitch. */
main > :first-child.stitch::before { display: none; }
main > :last-child.stitch-b::after { display: none; }
main > :last-child.section-ink::after { display: none; }
.rule-soft { color: var(--line-ui); }
/* ---- type ------------------------------------------------------------------------------------------------- */
.display, h1, h2, h3, h4 { font-weight: var(--w-head); line-height: var(--lh-snug); letter-spacing: var(--track-display); text-wrap: balance; overflow-wrap: anywhere; }
h1, .h1 { font-size: var(--step-5); line-height: var(--lh-tight); }
.display { font-size: var(--step-6); line-height: var(--lh-tight); }
h2, .h2 { font-size: var(--step-4); }
h3, .h3 { font-size: var(--step-2); }
h4, .h4 { font-size: var(--step-1); }
:lang(ar) h1, :lang(ar) .h1, :lang(ar) .display { line-height: var(--lh-tight); }
p { text-wrap: pretty; max-width: var(--measure); }
.lead { font-size: var(--step-1); line-height: var(--lh-body); color: var(--text-2); max-width: var(--measure); }
.small { font-size: var(--step--1); }
.tiny { font-size: var(--step--2); }
.muted { color: var(--text-muted); }
.eyebrow {
display: inline-block;
font-size: var(--step--1);
font-weight: var(--w-head);
letter-spacing: var(--track-caps);
text-transform: uppercase;
color: var(--text-2);
}
:lang(ar) .eyebrow { text-transform: none; letter-spacing: 0; font-weight: var(--w-medium); }
.num, .tabnum { font-variant-numeric: tabular-nums; }
.ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; }
.accent { color: var(--accent-text); }
.link { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; }
.link:hover { text-decoration-thickness: 2px; }
.prose > * + * { margin-block-start: var(--s-4); }
.prose h2 { margin-block-start: var(--s-10); }
.prose h3 { margin-block-start: var(--s-8); }
.prose ul, .prose ol { padding-inline-start: 1.25em; }
.prose li + li { margin-block-start: var(--s-2); }
.prose a { text-decoration: underline; }
/* ---- page grid ------------------------------------------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.wrap-narrow { max-width: var(--wrap-narrow); }
.wrap-text { max-width: var(--wrap-text); }
.section { padding-block: var(--section); }
.section-tight { padding-block: calc(var(--section) * .6); }
.section-alt { background: var(--bg-alt); }
.section-ink { background: var(--surface-ink); color: var(--text-on-ink); }
.section-ink .lead, .section-ink .muted, .section-ink .eyebrow { color: var(--text-on-ink-2); }
.section-ink .rule, .section-ink .stitch::before, .section-ink .stitch-b::after { color: var(--text-on-ink); }
.head { display: grid; gap: var(--s-4); margin-block-end: var(--s-10); max-width: var(--wrap-narrow); }
.head-center { margin-inline: auto; text-align: center; justify-items: center; }
.head-center p, .head-center .lead { margin-inline: auto; }
.grid { display: grid; gap: var(--s-4); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1023px) { .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); } }
.stack > * + * { margin-block-start: var(--s-4); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
.row { display: flex; align-items: center; gap: var(--s-3); }
.between { justify-content: space-between; }
.center { text-align: center; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; inset-inline-start: var(--s-4); top: -100px; z-index: calc(var(--z-drawer) + 1); padding: var(--s-2) var(--s-4); background: var(--ink); color: var(--paper); border-radius: var(--r-pill); }
.skip:focus, .skip:focus-visible { top: var(--s-4); }
main { display: block; }
#top { outline: none; }
#top:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
/* ---- direction-carrying icons flip in RTL; the marks never do ----------------------------------------------- */
[dir="rtl"] .i-dir { transform: scaleX(-1); }
.i { display: inline-flex; width: 1.25em; height: 1.25em; flex: none; vertical-align: -0.3em; }
.i svg { width: 100%; height: 100%; }
/* ---- the marks (guide §1: minimum sizes; never stretched, never recoloured) ------------------------------- */
.mark { display: block; height: auto; }
.mark-emblem { width: clamp(120px, 28vw, 220px); aspect-ratio: 1; }
.mark-lockup { height: 28px; width: auto; }
.mark-strip { height: 14px; width: auto; }
.mark-icon { height: 24px; width: auto; }
/* ---- reveals (once per load, transform + opacity only) ----------------------------------------------------- */
html.js .reveal { opacity: 0; transform: translateY(10px); transition: opacity var(--dur-entrance) var(--ease-out), transform var(--dur-entrance) var(--ease-out); }
html.js .reveal.is-in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: 50ms; } .reveal[data-delay="2"] { transition-delay: 100ms; }
.reveal[data-delay="3"] { transition-delay: 120ms; } .reveal[data-delay="4"] { transition-delay: 150ms; }
.reveal[data-delay="5"] { transition-delay: 180ms; } .reveal[data-delay="6"] { transition-delay: 210ms; }
html.no-io .reveal, html.is-restoring .reveal { opacity: 1; transform: none; transition: none; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
.reveal { transform: none; transition: opacity var(--dur-base) linear; }
*, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
}
/* THE SMOOTHNESS LAW (Sawy, 2026-09-13): page-to-page, the header and the footer stay put and the content between them crossfades —
the platform's own cross-document view transition (Chrome 126+, Safari 18.2+; every other browser navigates as before). Nothing to
script, nothing to load; reduced motion turns it off. The dock on the desk is a page-level element and rides the crossfade. */
@view-transition { navigation: auto; }
.hdr { view-transition-name: bl-header; }
.ft { view-transition-name: bl-footer; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 180ms; }
::view-transition-group(bl-header), ::view-transition-group(bl-footer) { animation-duration: 0s; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }
/* audit A3 (2026-09-14, WCAG 2.4.11): nothing scrolled-to or focused lands under the sticky header — every anchor target keeps the bar's height clear */
[id] { scroll-margin-top: calc(var(--hdr-h) + var(--s-4)); }
/* ============================================================================================================
BRANDS' LAB — DESIGN SYSTEM v1 · components.css (Design_Part1, A — Fable 5.1, 2026-09-13)
Every component in both directions (logical properties; nothing assumes left = start), light + dark, with
default / hover / active / focus / disabled / busy states, loading, empty and error states.
Consumes tokens.css + base.css only. Sections: buttons · fields · slot picker · cards and tiles · chips ·
header + drawer · footer · the desk shell · notifications · status tiles · alerts · skeleton/empty · table ·
the page patterns (hero, formula, services, process, details, sizes, about, cta band).
============================================================================================================ */
/* ---- buttons: pills (DECIDED 2026-09-12) ------------------------------------------------------------------ */
.btn {
--btn-bg: transparent; --btn-fg: var(--text); --btn-line: var(--line-strong);
display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
min-height: var(--control-h); padding: 0 var(--s-6);
border-radius: var(--r-pill);
border: var(--line-w-strong) solid var(--btn-line);
background: var(--btn-bg); color: var(--btn-fg);
font-weight: var(--w-medium); font-size: var(--step-0); line-height: 1.2;
text-decoration: none; white-space: nowrap; user-select: none;
transition: background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
:lang(ar) .btn { font-weight: var(--w-medium); }
.btn:hover { --btn-bg: var(--text); --btn-fg: var(--bg); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.btn-p { --btn-bg: var(--accent); --btn-fg: var(--on-accent); --btn-line: var(--accent); }
.btn-p:hover { --btn-bg: var(--accent-hover); --btn-fg: var(--on-accent); --btn-line: var(--accent-hover); }
.btn-o { --btn-bg: transparent; }
.btn-g { --btn-line: transparent; padding-inline: var(--s-4); }
.btn-g:hover { --btn-bg: var(--surface); --btn-fg: var(--text); }
.btn-ink { --btn-bg: var(--ink); --btn-fg: var(--paper); --btn-line: var(--ink); }
.btn-ink:hover { --btn-bg: var(--paper); --btn-fg: var(--ink); --btn-line: var(--paper); }
.section-ink .btn-o, .ft .btn-o { --btn-fg: var(--text-on-ink); --btn-line: var(--text-on-ink); }
.section-ink .btn-o:hover, .ft .btn-o:hover { --btn-bg: var(--text-on-ink); --btn-fg: var(--ink); }
.btn-ghost { --btn-bg: transparent; --btn-line: transparent; }
.btn-ghost:hover { --btn-bg: var(--bg-alt); }
.btn-sm { min-height: var(--control-h-sm); padding-inline: var(--s-4); font-size: var(--step--1); }
.btn-lg { min-height: 3.5rem; padding-inline: var(--s-8); font-size: var(--step-1); }
.btn-block { display: flex; width: 100%; }
.btn .i { width: 1.15em; height: 1.15em; }
.btn[disabled], .btn[aria-disabled="true"] { --btn-bg: var(--surface); --btn-fg: var(--disabled); --btn-line: var(--line); cursor: not-allowed; transform: none; }
.btn.is-busy { position: relative; color: transparent !important; pointer-events: none; }
.btn.is-busy::after { content: ""; position: absolute; width: 1.1em; height: 1.1em; border-radius: var(--r-mark); border: 2px solid var(--btn-fg); border-inline-end-color: transparent; animation: spin .8s linear infinite; }
.btn-p.is-busy::after { border-color: var(--on-accent); border-inline-end-color: transparent; }
@keyframes spin { to { transform: rotate(360deg); } }
.ctas { display: flex; flex-wrap: wrap; gap: var(--s-3); }
@media (max-width: 479px) { .ctas .btn { flex: 1 1 100%; } }
/* ---- fields: radius 0, an ink line (the ID card's own block), label above, helper below ------------------- */
.field { display: grid; gap: var(--s-2); }
.label { font-weight: var(--w-medium); font-size: var(--step--1); color: var(--text); }
.label .opt { font-weight: var(--w-body); color: var(--text-muted); }
.input, .select, .textarea {
width: 100%; min-height: var(--control-h); padding: var(--s-3) var(--s-4);
background: var(--surface-2); color: var(--text);
border: var(--line-w-strong) solid var(--line-ui); border-radius: var(--r-0);
transition: border-color var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out);
-webkit-appearance: none; appearance: none;
}
.input::placeholder, .textarea::placeholder, .input::-webkit-input-placeholder, .textarea::-webkit-input-placeholder { color: var(--placeholder); -webkit-text-fill-color: var(--placeholder); opacity: 1; font-weight: var(--w-body); }
/* THE LTR CELL RULE (Sawy 2026-09-14 02:55, an auto rule): on an Arabic page a cell that must type left-to-right (an email, a link, a
card id, a code) keeps LTR typing but sits on the page's reading edge — its text AND its placeholder align right like every other cell,
so a column of cells never shows one stray left-aligned line. Latin still reads left-to-right inside the cell. */
[dir="rtl"] :is(.input, .textarea, .select)[dir="ltr"], [dir="rtl"] :is(input, textarea)[dir="ltr"] { text-align: right; }
/* a legal table wider than the phone scrolls inside its own box; the page never does (production 390: the cookies v4 table ran 42 px over) */
.legal table { display: block; inline-size: 100%; max-inline-size: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* THE PLACEHOLDER RULING (Sawy 2026-09-13): the example text in every cell is light and faded, simple — one colour on every browser; iOS Safari
paints placeholders through -webkit-text-fill-color and its own opacity, so both are pinned (the TAL website's fix, ported). */
.input:hover, .select:hover, .textarea:hover { border-color: var(--line-strong); }
.input:focus-visible, .select:focus-visible, .textarea:focus-visible { border-color: var(--line-strong); outline: 2px solid var(--focus); outline-offset: 1px; }
.input[disabled], .select[disabled], .textarea[disabled] { background: var(--surface); color: var(--disabled); border-color: var(--line); cursor: not-allowed; }
.textarea { min-height: 9rem; resize: vertical; line-height: var(--lh-body); }
.select { padding-inline-end: var(--s-10); background-image: var(--chev); background-repeat: no-repeat; background-position: right var(--s-4) center; background-size: 1rem; }
[dir="rtl"] .select { background-position: left var(--s-4) center; }
.help { font-size: var(--step--1); color: var(--text-muted); }
.error { font-size: var(--step--1); color: var(--danger); font-weight: var(--w-medium); display: flex; gap: var(--s-2); align-items: flex-start; }
.field.is-invalid .input, .field.is-invalid .select, .field.is-invalid .textarea { border-color: var(--danger); background: var(--danger-soft); }
.field.is-invalid .label { color: var(--danger); }
.field.is-valid .input { border-color: var(--success); }
.form { display: grid; gap: var(--s-6); }
.form-row { display: grid; gap: var(--s-4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 639px) { .form-row { grid-template-columns: minmax(0, 1fr); } }
.check { display: grid; grid-template-columns: auto 1fr; gap: var(--s-3); align-items: start; cursor: pointer; font-size: var(--step--1); }
.check input { width: 1.25rem; height: 1.25rem; margin: .1rem 0 0; accent-color: var(--accent); border-radius: var(--r-0); }
.check input[type="radio"] { border-radius: var(--r-mark); }
.code {
font-family: var(--font-mono); font-size: var(--step-2); letter-spacing: .3em; text-align: center; direction: ltr;
font-variant-numeric: tabular-nums; padding-inline-start: calc(var(--s-4) + .3em);
}
.fieldset { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: var(--s-3); }
.legend { padding: 0; font-weight: var(--w-medium); font-size: var(--step--1); margin-block-end: var(--s-1); }
.seg { display: inline-grid; grid-auto-flow: column; border: var(--line-w-strong) solid var(--line-strong); border-radius: var(--r-pill); padding: 3px; gap: 2px; }
.seg > * { min-height: calc(var(--tap) - 6px); padding: 0 var(--s-4); border-radius: var(--r-pill); display: inline-flex; align-items: center; justify-content: center; font-size: var(--step--1); font-weight: var(--w-medium); color: var(--text); text-decoration: none; }
.seg > [aria-pressed="true"], .seg > [aria-current], .seg > .is-on { background: var(--text); color: var(--bg); }
/* ---- the slot picker (the booking door; /api/slots → days as tabs, times as pills) ---------------------- */
.slots { display: grid; gap: var(--s-4); }
.slots-days { display: flex; gap: var(--s-2); overflow-x: auto; scroll-snap-type: x mandatory; padding-block: 2px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.slots-days::-webkit-scrollbar { display: none; }
.day {
flex: 0 0 auto; scroll-snap-align: start; display: grid; justify-items: center; gap: 2px; min-width: 4.25rem; min-height: var(--tap);
padding: var(--s-2) var(--s-3); border: var(--line-w-strong) solid var(--line-ui); border-radius: var(--r-0); background: var(--surface-2); color: var(--text);
}
.day b { font-size: var(--step-1); line-height: 1; font-weight: var(--w-head); }
.day span { font-size: var(--step--2); color: var(--text-muted); }
.day:hover { border-color: var(--line-strong); }
.day[aria-checked="true"] { background: var(--text); color: var(--bg); border-color: var(--text); }
.day[aria-checked="true"] span { color: inherit; opacity: .8; }
.day[disabled] { color: var(--disabled); border-color: var(--line); background: var(--surface); cursor: not-allowed; }
.slots-times { display: grid; grid-template-columns: repeat(auto-fill, minmax(6.25rem, 1fr)); gap: var(--s-2); }
.slot { min-height: var(--tap); border: var(--line-w-strong) solid var(--line-ui); border-radius: var(--r-pill); background: var(--surface-2); color: var(--text); font-variant-numeric: tabular-nums; direction: ltr; }
.slot:hover { border-color: var(--line-strong); }
.slot[aria-checked="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.slot[disabled] { color: var(--disabled); border-color: var(--line); background: var(--surface); text-decoration: line-through; cursor: not-allowed; }
.slots-empty { padding: var(--s-6); text-align: center; color: var(--text-muted); border: var(--line-w) dashed var(--line-ui); }
/* ---- cards and tiles (blocks: radius 0) ------------------------------------------------------------------- */
.card { background: var(--surface); border: var(--line-w) solid var(--line); padding: var(--s-6); }
.card-ink { background: var(--surface-ink); color: var(--text-on-ink); border-color: var(--line-on-ink); }
.card-stitch { position: relative; border: 0; padding: calc(var(--s-6) + var(--stitch-w)); }
.card-stitch::before { content: ""; position: absolute; inset: 0; pointer-events: none; color: var(--line-strong); opacity: .85;
background: var(--stitch-img) top / 100% var(--stitch-w) no-repeat, var(--stitch-img) bottom / 100% var(--stitch-w) no-repeat,
var(--stitch-img-v) left / var(--stitch-w) 100% no-repeat, var(--stitch-img-v) right / var(--stitch-w) 100% no-repeat; }
.card-h { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4); margin-block-end: var(--s-4); }
.card-h h3, .card-h h4 { margin: 0; }
.tile {
display: grid; grid-template-rows: auto 1fr auto; gap: var(--s-3); min-height: 11rem;
padding: var(--s-5); background: var(--surface); border: var(--line-w) solid var(--line);
color: inherit; text-decoration: none; position: relative;
transition: border-color var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.tile-n { font-size: var(--step--1); font-weight: var(--w-head); letter-spacing: var(--track-caps); color: var(--text-muted); font-variant-numeric: tabular-nums; }
:lang(ar) .tile-n { letter-spacing: 0; }
.tile h3 { font-size: var(--step-1); line-height: var(--lh-snug); }
.tile p { font-size: var(--step--1); color: var(--text-2); }
.tile-go { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--step--1); font-weight: var(--w-medium); color: var(--accent-text); align-self: end; }
.tile-go .i { transition: transform var(--dur-base) var(--ease-out); }
a.tile:hover, a.tile:focus-visible { border-color: var(--line-strong); background: var(--surface-2); }
a.tile:hover .tile-go .i { transform: translateX(3px); }
[dir="rtl"] a.tile:hover .tile-go .i { transform: translateX(-3px) scaleX(-1); }
a.tile:active { transform: translateY(1px); }
/* the ink tile: the one black block on the bright page (the emblem's own white-on-black world, as an accent) */
.tile-ink { background: var(--surface-ink); color: var(--text-on-ink); border-color: var(--surface-ink); }
.tile-ink p, .tile-ink .tile-n { color: var(--text-on-ink-2); }
.tile-ink .tile-go { color: var(--text-on-ink); }
a.tile-ink:hover, a.tile-ink:focus-visible { background: var(--n-8); border-color: var(--n-8); }
.step { display: grid; grid-template-columns: auto 1fr; gap: var(--s-4); align-items: start; padding-block: var(--s-6); border-block-start: var(--line-w) solid var(--line); }
.step-n { width: 2.75rem; height: 2.75rem; border-radius: var(--r-mark); border: var(--line-w-strong) solid var(--line-strong); display: grid; place-items: center; font-weight: var(--w-head); font-variant-numeric: tabular-nums; font-size: var(--step-0); }
.step h3 { font-size: var(--step-1); }
.step p { color: var(--text-2); margin-block-start: var(--s-1); }
.section-ink .step { border-color: var(--line-on-ink); }
.section-ink .step-n { border-color: var(--text-on-ink); }
.section-ink .step p { color: var(--text-on-ink-2); }
/* the black band carries the ID card's stitch seam: a dashed line set INSIDE the block (the card's border is 3 mm inside the trim) */
.section-ink { position: relative; }
.section-ink::before, .section-ink::after { content: ""; position: absolute; inset-inline: var(--gutter); height: var(--stitch-w); background: var(--stitch-img); color: var(--text-on-ink); opacity: .55; pointer-events: none; }
.section-ink::before { top: var(--s-4); } .section-ink::after { bottom: var(--s-4); }
/* ---- chips, badges, dots ---------------------------------------------------------------------------------- */
.chip { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 2rem; padding: 0 var(--s-3); border-radius: var(--r-pill); border: var(--line-w) solid var(--line-ui); font-size: var(--step--1); font-weight: var(--w-medium); color: var(--text); background: var(--surface-2); text-decoration: none; }
.chip:hover { border-color: var(--line-strong); }
button.chip, a.chip { min-height: var(--tap); } /* an interactive chip is a full tap target; a static one stays compact */
.chip.is-on { background: var(--text); color: var(--bg); border-color: var(--text); }
.badge { display: inline-flex; align-items: center; gap: .4em; min-height: 1.5rem; padding: 0 var(--s-2); border-radius: var(--r-pill); font-size: var(--step--2); font-weight: var(--w-medium); background: var(--surface); color: var(--text-2); border: var(--line-w) solid var(--line); }
.badge::before { content: ""; width: .5em; height: .5em; border-radius: var(--r-mark); background: currentColor; }
.badge-ok { background: var(--success-soft); color: var(--success); border-color: transparent; }
.badge-warn { background: var(--warning-soft); color: var(--warning); border-color: transparent; }
.badge-danger { background: var(--danger-soft); color: var(--danger); border-color: transparent; }
.badge-note { background: var(--note-soft); color: var(--note); border-color: transparent; }
.dot { display: inline-block; width: .5rem; height: .5rem; border-radius: var(--r-mark); background: var(--accent); }
.avatar { width: 2.5rem; height: 2.5rem; border-radius: var(--r-mark); background: var(--text); color: var(--bg); display: inline-grid; place-items: center; font-weight: var(--w-head); font-size: var(--step--1); overflow: hidden; flex: none; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
/* ---- header: THE BLACK BAR (Sawy 2026-09-13: "the header black, with the 3D shadow animation") — the emblem's
white-on-black world at the top of a bright page; stuck = it lifts off the page (a deepening warm shadow + a cream
stitch seam), the TAL header's "things slide under it" made physical ------------------------------------------- */
.hdr-sentinel { position: absolute; top: 0; height: 1px; width: 1px; }
.hdr {
position: sticky; top: 0; z-index: var(--z-hdr);
padding-block-start: env(safe-area-inset-top, 0px); /* viewport-fit=cover: the bar's ink extends under the status bar, the content stays below it (the iOS jump under the notch, seen 2026-09-13) */
background: var(--surface-ink); color: var(--text-on-ink);
box-shadow: 0 0 0 hsl(var(--shadow-hue) / 0), 0 0 0 hsl(var(--shadow-hue) / 0);
transition: box-shadow var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
will-change: box-shadow;
}
/* the bar's LOWER edge carries a heavier WHITE stitch, flush with the edge — the seam between the bar and the page (Sawy 2026-09-13) */
.hdr::after { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: var(--stitch-w-strong); background: var(--stitch-img-strong); color: var(--white); pointer-events: none; }
/* the bar's two ends: the lockup at the inline start, the actions (nav · language · quote · burger) at the inline end — right in English, left in Arabic */
.hdr .wrap { justify-content: space-between; }
.hdr.is-stuck { box-shadow: 0 2px 6px hsl(var(--shadow-hue) / .22), 0 18px 44px hsl(var(--shadow-hue) / .28); }
.hdr .wrap { display: flex; align-items: center; gap: var(--s-6); min-height: var(--hdr-bar); }
.hdr .wm { display: inline-flex; align-items: center; flex: none; min-height: var(--tap); }
.hdr .wm:focus-visible { outline-color: var(--text-on-ink); }
.nav { display: flex; gap: var(--s-1); margin-inline-start: auto; }
.nav + .hdr-acts { margin-inline-start: 0; }
.nav a { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 var(--s-3); text-decoration: none; font-weight: var(--w-medium); font-size: var(--step--1); color: var(--text-on-ink-2); border-radius: var(--r-pill); transition: color var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out); }
.nav a:hover { color: var(--text-on-ink); background: var(--n-8); }
.nav a:focus-visible { outline-color: var(--text-on-ink); }
.nav a[aria-current="page"] { color: var(--text-on-ink); }
.hdr-acts { display: flex; align-items: center; gap: var(--s-2); flex: none; margin-inline-start: auto; } /* the actions hug the inline end: right in English, left in Arabic; the lockup takes the other side */
.hdr-cta .short { display: none; }
.hdr .btn:focus-visible, .hdr .lang a:focus-visible, .hdr .burger:focus-visible { outline-color: var(--text-on-ink); }
.lang { display: inline-grid; grid-auto-flow: column; border: var(--line-w-strong) solid var(--line-strong); border-radius: var(--r-pill); padding: 2px; }
.lang a { min-width: 2.5rem; min-height: calc(var(--tap) - 4px); padding: 0 var(--s-2); display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-pill); text-decoration: none; font-size: var(--step--1); font-weight: var(--w-medium); color: var(--text); }
.lang a[aria-current] { background: var(--text); color: var(--bg); }
.lang a[lang="ar"] { font-family: var(--font-arabic); }
.lang a[lang="en"] { font-family: var(--font-latin); letter-spacing: .04em; }
.hdr .lang { border-color: var(--text-on-ink-2); }
.hdr .lang a { color: var(--text-on-ink); }
.hdr .lang a[aria-current] { background: var(--text-on-ink); color: var(--ink); }
.burger { display: none; width: var(--tap); height: var(--tap); border-radius: var(--r-pill); position: relative; color: var(--text-on-ink); }
.burger span { position: absolute; inset-inline: 12px; height: 2px; background: currentColor; transition: transform var(--dur-base) var(--ease-in-out), top var(--dur-base) var(--ease-in-out); }
.burger span:nth-child(1) { top: 17px; } .burger span:nth-child(2) { top: 25px; }
.burger[aria-expanded="true"] span:nth-child(1) { top: 21px; transform: rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { top: 21px; transform: rotate(-45deg); }
@media (max-width: 1023px) {
.nav { display: none; }
.burger { display: block; }
.hdr-cta .full { display: none; } .hdr-cta .short { display: inline; }
}
/* THE BAR'S NUMBERS: height 72 · the gutter each side · every control 44 px tall · cluster gaps 12 px (8 px on phones).
≥ 1024: lockup 28 · nav · the two-language pill · Quote · (no burger). 560–1023: lockup 28 · pill · Quote · burger.
< 560 (phones): the lockup stays, at 24 px (206 px wide) · a COMPACT language pill that shows only the other language (one tap
switches) · the burger. The quote pill leaves the bar here: it is the first item of the drawer and the hero's first button. */
.hdr-acts { gap: var(--s-3); }
.hdr-icon { display: none; }
@media (max-width: 559px) {
.hdr .wrap { gap: var(--s-2); }
.hdr-acts { gap: var(--s-2); }
.hdr-lockup { height: 24px; }
.hdr-cta { display: none; }
.hdr .lang { padding: 0; border: 0; }
.hdr .lang a[aria-current] { display: none; }
.hdr .lang a { min-width: 3.25rem; min-height: var(--tap); padding-inline: var(--s-3); border: var(--line-w-strong) solid var(--text-on-ink-2); }
}
@media (max-width: 359px) { /* Phase 3, the 320 shell (iPhone SE, the folded Fold): the lockup gives way first — the actions never leave the screen */
.hdr-lockup { height: 20px; }
.hdr .wm { flex: 0 1 auto; min-width: 0; }
.hdr .wm img { max-width: 100%; height: auto; }
}
/* ---- THE PORTALS — the sign-in chooser (Design_Part3, 2026-09-14). ONE quiet trigger in the bar, ONE card of three rows; the same
rows again at the top of the drawer (THE ONE DESIGN RULE). Corners: the card and its rows are blocks (12 / 8 px, CORNERS LAW v2),
the trigger is a pill like the language switch. Namespace `.gate-*`: `.dock-*` is THE USER DOCK and `.blsel-*` is THE MENU. */
.gate { position: relative; flex: none; }
.gate-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); min-height: var(--tap); padding-inline: var(--s-3); border: var(--line-w-strong) solid var(--text-on-ink-2); border-radius: var(--r-pill); background: transparent; color: var(--text-on-ink); font-size: var(--step--1); font-weight: var(--w-medium); cursor: pointer; transition: background-color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); }
.gate-btn:hover { background: var(--n-8); border-color: var(--text-on-ink); }
.gate-btn[aria-expanded="true"] { background: var(--n-8); border-color: var(--text-on-ink); }
.gate-btn .i { width: 1.15em; height: 1.15em; }
.gate-chev { transition: transform var(--dur-base) var(--ease-out); }
.gate-btn[aria-expanded="true"] .gate-chev { transform: rotate(180deg); }
.gate-card { position: absolute; inset-inline-end: 0; inset-block-start: calc(100% + var(--s-2)); z-index: var(--z-drawer); width: min(21rem, calc(100vw - 2 * var(--gutter))); display: grid; gap: 2px; padding: var(--s-1); background: var(--surface); color: var(--text); border: var(--line-w-strong) solid var(--line-strong); border-radius: var(--r-block); box-shadow: var(--shadow-2); opacity: 0; transform: translateY(-4px); transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.gate-card.is-in { opacity: 1; transform: none; }
.gate-card[hidden] { display: none; } /* an author `display` beats the UA's [hidden] rule — say it here or the closed card stays on screen */
.gate-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--s-3); min-height: var(--tap); padding: var(--s-2) var(--s-3); border-radius: var(--r-block-sm); text-decoration: none; color: var(--text); -webkit-tap-highlight-color: transparent; transition: background-color var(--dur-fast) var(--ease-out); }
.gate-row:hover { background: var(--bg-alt); }
.gate-ic { display: inline-flex; width: 1.5rem; height: 1.5rem; flex: none; }
.gate-ic svg { width: 100%; height: 100%; }
.gate-t { display: grid; gap: 1px; min-width: 0; }
.gate-t b { font-size: var(--step-0); font-weight: var(--w-head); line-height: var(--lh-snug); }
.gate-t span { font-size: var(--step--2); color: var(--text-muted); line-height: var(--lh-snug); }
.gate-row.is-quiet .gate-t b { font-weight: var(--w-medium); color: var(--text-2); }
.gate-go { width: 1rem; height: 1rem; color: var(--text-muted); }
.gate-h { margin: var(--s-1) 0 0; padding: var(--s-3) var(--s-3) var(--s-1); border-block-start: var(--line-w) solid var(--line); font-size: var(--step--2); font-weight: var(--w-medium); color: var(--text-muted); }
/* the drawer's block: the same three rows, the sheet's ink skin, under the sheet's own heading */
.gate-block { display: grid; gap: var(--s-1); }
.gate-h2 { font-size: var(--step--1); font-weight: var(--w-medium); color: var(--text-on-ink-2); margin: 0 0 var(--s-1); }
.drawer .gate-row { padding: var(--s-3) var(--s-4); border: var(--line-w) solid var(--line-on-ink); border-radius: var(--r-block); color: var(--text-on-ink); }
.drawer .gate-row:hover { background: var(--n-8); border-color: var(--text-on-ink); }
.drawer .gate-t span { color: var(--text-on-ink-2); }
.drawer .gate-row.is-quiet .gate-t b { color: var(--text-on-ink); }
.drawer .gate-go { color: var(--text-on-ink-2); }
.drawer .gate-h { padding-inline: 0; border-block-start-color: var(--line-on-ink); color: var(--text-on-ink-2); }
@media (max-width: 1023px) { /* 560–1023: the trigger is an icon-only pill — the aria-label carries the word */
.gate-btn { width: var(--tap); padding-inline: 0; }
.gate-btn .gate-btn-t, .gate-btn .gate-chev { display: none; }
}
@media (max-width: 743px) { .hdr .gate { display: none; } } /* below the iPad mini the bar is full (lockup + language + quote + burger): the drawer carries the same three rows */ /* the bar is full at 320: the drawer carries the same three rows */
@media (prefers-reduced-motion: reduce) { .gate-card, .gate-chev, .gate-row { transition: none; } }
/* the drawer: a sheet under the header, its own scroller (TAL drawer.js v3 mechanics) */
.drawer {
position: fixed; inset-inline: 0; top: var(--hdr-h); bottom: 0; z-index: var(--z-drawer);
background: var(--surface-ink); color: var(--text-on-ink); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
transform: translateY(-8px); opacity: 0; visibility: hidden;
transition: transform var(--dur-slow) var(--ease-out), opacity var(--dur-slow) var(--ease-out), visibility 0s linear var(--dur-slow);
}
.drawer.is-open { transform: none; opacity: 1; visibility: visible; transition-delay: 0s; }
.drawer-in { padding: var(--s-10) var(--gutter) calc(var(--s-10) + env(safe-area-inset-bottom)); /* the sheet's first pill sits a full breath under the header's stitch (Sawy 2026-09-14 01:2x) */ display: grid; gap: var(--s-3); min-height: calc(100% + 1px); align-content: start; max-width: var(--wrap-narrow); margin-inline: auto; }
.drawer .btn { justify-content: space-between; }
.drawer .btn-o { --btn-fg: var(--text-on-ink); --btn-line: var(--text-on-ink); }
.drawer .btn-o:hover { --btn-bg: var(--text-on-ink); --btn-fg: var(--ink); }
.drawer .btn-ink { --btn-bg: var(--text-on-ink); --btn-fg: var(--ink); --btn-line: var(--text-on-ink); }
.drawer .btn-ink:hover { --btn-bg: var(--n-2); --btn-line: var(--n-2); }
.drawer .help { color: var(--text-on-ink-2); }
.drawer .lang { border-color: var(--text-on-ink-2); }
.drawer .lang a { color: var(--text-on-ink); }
.drawer .lang a[aria-current] { background: var(--text-on-ink); color: var(--ink); }
.drawer .btn:focus-visible, .drawer .lang a:focus-visible, .drawer a:focus-visible { outline-color: var(--text-on-ink); }
.drawer-mails { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-slow) var(--ease-out); }
.drawer-mails-in { overflow: hidden; display: grid; gap: var(--s-2); visibility: hidden; transition: visibility 0s linear var(--dur-slow); }
[aria-expanded="true"] + .drawer-mails { grid-template-rows: 1fr; }
[aria-expanded="true"] + .drawer-mails .drawer-mails-in { visibility: visible; transition-delay: 0s; }
/* THE ENVELOPE (Sawy 2026-09-14 02:1x, perfected 03:59): one envelope in four strokes — the body, the pocket seam (a V that never moves),
the flap (the same V, which flips about the fold line to a ^ above it, passing edge-on halfway like paper) and the letter's two inner
edges, which DRAW themselves from the bottom corners up to the seam once the flap is up, and undraw first when it closes. Closed, the
flap lies exactly on the seam so the icon is the plain envelope. State → CSS transitions only: a rapid tapper reverses everything
from wherever it is, never a jump, never a queue. Reduced motion: the states swap. */
.mail-morph .mail-flap { transform-box: view-box; transform-origin: 12px 7px; transition: transform 380ms var(--ease-out) 120ms; }
.drawer-contact[aria-expanded="true"] .mail-flap { transform: scaleY(-1); transition-delay: 0ms; }
.mail-morph .mail-inner { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 220ms var(--ease-out) 0ms; }
.drawer-contact[aria-expanded="true"] .mail-inner { stroke-dashoffset: 0; transition-delay: 260ms; }
@media (prefers-reduced-motion: reduce) { .mail-morph .mail-flap, .mail-morph .mail-inner { transition: none; } }
.drawer-mails a { display: grid; gap: 2px; padding: var(--s-3) var(--s-4); text-decoration: none; border: var(--line-w) solid var(--line-on-ink); color: var(--text-on-ink); }
.drawer-mails a:hover { border-color: var(--text-on-ink); }
.drawer-mails .ft-role { color: var(--text-on-ink-2); }
.ft-role { font-size: var(--step--2); color: var(--text-muted); }
.drawer-mails a > span:last-child, .ft-mails a > span:last-child { font-weight: var(--w-medium); direction: ltr; unicode-bidi: isolate; text-align: start; }
.drawer .lang { justify-self: start; margin-block-start: var(--s-8); }
/* ---- FOOTER — the black band that closes the page (Sawy 2026-09-13). THE NUMBERS: the top edge = the heavier white stitch
(the header's twin: the page is stitched between the two bars) · padding 56 / 32 (40 / 24 on phones) · desktop: brand 1.2fr +
pages 1fr + contact 1.1fr, gap 40 · phones: the brand block, then PAGES and CONTACT as accordions (44 px heads, the panel
opens on grid rows, the chevron turns) · the bottom block: a thin stitch, THE POLICIES ROW (always the very bottom, wrapping,
centred on phones), then the strip · © · the Lab's credit. --------------------------------------------------------- */
.ft { position: relative; background: var(--surface-ink); color: var(--text-on-ink); padding-block: var(--s-10) calc(var(--s-8) + env(safe-area-inset-bottom)); } /* the air above the emblem trimmed 56 → 40 px (Sawy 2026-09-14 01:3x); the footer's inner spacing untouched */
.ft::before { content: ""; position: absolute; inset-inline: 0; top: 0; height: var(--stitch-w-strong); background: var(--stitch-img-strong); color: var(--white); pointer-events: none; }
.ft a { color: inherit; }
.ft a:focus-visible, .ft button:focus-visible { outline-color: var(--text-on-ink); }
.ft-top { display: grid; gap: var(--gap-split); grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1.1fr); padding-block-end: var(--s-10); }
.ft-brand { display: grid; gap: var(--s-4); align-content: start; }
.ft-brand .mark-emblem { width: 148px; image-rendering: auto; shape-rendering: geometricPrecision; } /* larger and crisp: the SVG master, no raster */
.ft-brand p { color: var(--text-on-ink-2); font-size: var(--step--1); max-width: 30ch; }
.ft-brand p b { color: var(--text-on-ink); }
.ft-col { display: grid; gap: 0; align-content: start; }
.ft-col h3 { margin: 0; }
.ft-acc { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); width: 100%; min-height: var(--tap); text-align: start; font-size: var(--step--2); font-weight: var(--w-head); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--text-on-ink-2); cursor: default; }
:lang(ar) .ft-acc { text-transform: none; letter-spacing: 0; font-size: var(--step--1); }
.ft-chev { display: none; width: 1.25rem; height: 1.25rem; transition: transform var(--dur-slow) var(--ease-out); }
.ft-chev svg { width: 100%; height: 100%; }
.ft-panel { display: grid; grid-template-rows: 1fr; }
.ft-panel-in { min-width: 0; display: grid; gap: 0; align-content: start; }
.ft-col a { text-decoration: none; font-size: var(--step--1); min-height: var(--tap); display: inline-flex; align-items: center; color: var(--text-on-ink-2); transition: color var(--dur-base) var(--ease-out); }
.ft-col a:hover { color: var(--text-on-ink); text-decoration: underline; text-underline-offset: .2em; }
.ft-mails { display: grid; gap: var(--s-2); }
.ft-mails a { display: grid; grid-template-columns: 1fr; gap: 1px; min-height: 3rem; padding: var(--s-2) var(--s-3); border: var(--line-w) solid var(--line-on-ink); color: var(--text-on-ink); text-decoration: none; align-content: center; }
.ft-mails a:hover { border-color: var(--text-on-ink); text-decoration: none; }
.ft-mails .ft-role { font-size: var(--step--2); color: var(--text-on-ink-2); }
.ft-mails a > span:last-child { font-weight: var(--w-medium); font-size: var(--step--1); direction: ltr; unicode-bidi: isolate; text-align: start; }
.ft-meet { margin-block-start: var(--s-3); color: var(--text-on-ink-2); }
/* the Instagram mark: under the emblem and the tagline, at the inline start, bare and large (Sawy 2026-09-13) */
.ft-social { display: flex; gap: var(--s-2); justify-content: flex-start; margin-block-start: var(--s-2); }
.ft-social a { width: 3.25rem; height: 3.25rem; display: inline-grid; place-items: center; color: var(--text-on-ink); transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base); margin-inline-start: -0.4rem; }
.ft-social a:hover { opacity: .8; transform: translateY(-1px); }
.ft-social svg { width: 44px; height: 44px; fill: currentColor; }
.ft-bottom { display: grid; gap: var(--s-4); padding-block-start: var(--s-6); position: relative; }
.ft-bottom::before { content: ""; position: absolute; inset-inline: 0; top: 0; height: var(--stitch-w); background: var(--stitch-img); color: var(--text-on-ink); opacity: .9; }
.ft-legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 var(--s-5); font-size: var(--step--2); } /* centred at every width (Sawy 2026-09-13) */
.ft-legal a { text-decoration: none; color: var(--text-on-ink-2); min-height: var(--tap); display: inline-flex; align-items: center; }
.ft-legal a:hover { color: var(--text-on-ink); text-decoration: underline; text-underline-offset: .2em; }
.ft-line { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3) var(--s-6); font-size: var(--step--2); color: var(--text-on-ink-2); }
.ft-strip img { height: 14px; width: auto; }
.ft-credit { display: inline-flex; align-items: center; gap: var(--s-2); min-height: var(--tap); text-decoration: none; color: var(--text-on-ink-2); }
.ft-credit img { height: 14px; width: auto; }
@media (max-width: 1023px) {
.ft-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-8); }
.ft-brand { grid-column: 1 / -1; }
}
@media (max-width: 639px) {
.ft { padding-block: var(--s-10) calc(var(--s-6) + env(safe-area-inset-bottom)); }
.ft-top { grid-template-columns: minmax(0, 1fr); gap: 0; padding-block-end: var(--s-6); }
.ft-brand { padding-block-end: var(--s-6); }
.ft-col { border-block-start: var(--line-w) solid var(--line-on-ink); }
.ft-acc { cursor: pointer; min-height: 3.25rem; color: var(--text-on-ink); }
.ft-chev { display: inline-flex; }
.ft-acc[aria-expanded="true"] .ft-chev { transform: rotate(180deg); }
.ft-panel { grid-template-rows: 0fr; transition: grid-template-rows var(--dur-slow) var(--ease-out); }
.ft-panel-in { overflow: hidden; visibility: hidden; transition: visibility 0s linear var(--dur-slow); padding-block-end: 0; }
.ft-panel.is-open { grid-template-rows: 1fr; }
.ft-panel.is-open .ft-panel-in { visibility: visible; transition-delay: 0s; }
.ft-panel-in > * { padding-block-end: var(--s-4); }
/* the bottom block on phones: ONE rhythm — every row 44 px tall, content centred, gap 0 — so the air above the strip equals the air below it */
.ft-bottom { justify-items: center; text-align: center; gap: 0; padding-block-start: var(--s-4); }
.ft-legal { justify-content: center; gap: 0 var(--s-4); }
.ft-line { justify-content: center; flex-direction: column; gap: 0; }
.ft-line > * { min-height: var(--tap); display: inline-flex; align-items: center; }
.ft-strip { min-height: var(--tap); display: inline-flex; align-items: center; }
}
/* ---- status tiles (limits, lanes, the meter) ------------------------------------------------------------- */
.stats { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); }
.stat { display: grid; gap: var(--s-2); padding: var(--s-4); background: var(--surface); border: var(--line-w) solid var(--line); align-content: start; }
.stat-l { font-size: var(--step--2); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--text-muted); font-weight: var(--w-medium); }
:lang(ar) .stat-l { text-transform: none; letter-spacing: 0; }
.stat-v { font-size: var(--step-3); line-height: 1; font-weight: var(--w-head); font-variant-numeric: tabular-nums; direction: ltr; text-align: start; }
.stat-s { font-size: var(--step--2); color: var(--text-muted); }
.meter { height: .5rem; background: var(--track); position: relative; overflow: hidden; }
.meter > i { position: absolute; inset-block: 0; inset-inline-start: 0; width: var(--v, 0%); background: var(--text); transition: width var(--dur-slow) var(--ease-out); }
.meter.is-warn > i { background: var(--warning); }
.meter.is-danger > i { background: var(--danger); }
.meter::after { content: ""; position: absolute; inset-block: 0; inset-inline-start: 70%; width: 1px; background: var(--bg); opacity: .8; }
.section-ink .meter { background: var(--n-7); }
.stat.is-paused { border-color: var(--danger); }
.stat.is-paused .stat-v { color: var(--danger); }
/* ---- alerts and toasts ------------------------------------------------------------------------------------ */
.alert { display: grid; grid-template-columns: auto 1fr; gap: var(--s-3); padding: var(--s-4); border: var(--line-w) solid transparent; background: var(--surface); color: var(--text); font-size: var(--step--1); }
.alert .i { width: 1.25rem; height: 1.25rem; margin-block-start: .1em; }
.alert b { display: block; font-weight: var(--w-head); }
.alert-ok { background: var(--success-soft); color: var(--success); }
.alert-warn { background: var(--warning-soft); color: var(--warning); }
.alert-danger { background: var(--danger-soft); color: var(--danger); }
.alert-note { background: var(--note-soft); color: var(--note); }
.alert a { color: inherit; text-decoration: underline; }
/* A8 — THE ERROR SUMMARY (GOV.UK's pattern): the alert's own column holds the sentence and, when more than one answer is
missing, the list of them; every row is a link that opens its group and focuses its field, at the tap size the rest
of the site keeps. The bullets are the list's own, logical-property indented, so RTL needs nothing extra. */
.alert .err-body { min-width: 0; }
.err-sum { margin: var(--s-2) 0 0; padding-inline-start: var(--s-5); display: grid; gap: var(--s-2); }
.err-sum a { display: inline-block; padding-block: var(--s-1); font-weight: var(--w-medium); }
.toast { position: fixed; bottom: calc(var(--s-4) + env(safe-area-inset-bottom)); inset-inline: var(--s-4); z-index: var(--z-toast); margin-inline: auto; max-width: 30rem; padding: var(--s-3) var(--s-4); background: var(--text); color: var(--bg); box-shadow: var(--shadow-2); display: flex; align-items: center; gap: var(--s-3); font-size: var(--step--1); transform: translateY(8px); opacity: 0; visibility: hidden; transition: transform var(--dur-slow) var(--ease-out), opacity var(--dur-slow), visibility 0s linear var(--dur-slow); }
.toast.is-open { transform: none; opacity: 1; visibility: visible; transition-delay: 0s; }
.toast .btn { --btn-fg: var(--bg); --btn-line: var(--bg); margin-inline-start: auto; }
/* ---- loading, empty, error states ------------------------------------------------------------------------ */
.skel { position: relative; overflow: hidden; background: var(--skel-bg); color: transparent !important; border-color: transparent !important; min-height: 1em; }
.skel::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, var(--skel-sheen), transparent); animation: shimmer 1.4s var(--ease-in-out) infinite; }
[dir="rtl"] .skel::after { animation-name: shimmer-rtl; }
@keyframes shimmer { to { transform: translateX(100%); } }
@keyframes shimmer-rtl { from { transform: translateX(100%); } to { transform: translateX(-100%); } }
.skel-line { height: .9em; margin-block: .35em; }
.skel-line.w-60 { width: 60%; } .skel-line.w-40 { width: 40%; } .skel-line.w-80 { width: 80%; }
.empty { display: grid; justify-items: center; gap: var(--s-3); padding: var(--s-12) var(--s-6); text-align: center; border: var(--line-w) dashed var(--line-ui); color: var(--text-2); }
.empty .mark-icon { height: 32px; }
.empty b { font-size: var(--step-1); font-weight: var(--w-head); color: var(--text); }
.empty p { font-size: var(--step--1); margin-inline: auto; }
.busy { position: relative; }
.busy::after { content: ""; position: absolute; inset: 0; background: var(--bg); opacity: .5; }
/* ---- tables (the owner's lists on desktop; rows become cards under 640) ---------------------------------- */
.table { width: 100%; border-collapse: collapse; font-size: var(--step--1); }
.table th, .table td { text-align: start; padding: var(--s-3) var(--s-3); border-block-end: var(--line-w) solid var(--line); vertical-align: top; }
.table th { font-size: var(--step--2); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--text-muted); font-weight: var(--w-medium); }
:lang(ar) .table th { text-transform: none; letter-spacing: 0; }
.table tbody tr:hover { background: var(--surface-2); }
.table .num { text-align: end; font-variant-numeric: tabular-nums; }
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* ============================================================================================================
THE PAGE PATTERNS — the home page on the TAL landing's rhythm (hero → stack → sections → cta → footer)
============================================================================================================ */
.hero { padding-block: var(--section) clamp(3rem, 7vw, 5rem); position: relative; } /* THE PAGE AIR: the hero opens with the page's one air token */
.hero .wrap { display: grid; gap: var(--gap-split); align-items: center; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
.hero-t { display: grid; gap: var(--s-5); }
.hero .display { max-width: min(18ch, 100%); } /* Phase 1: the headline may take its natural two lines at 2560, never a hole */
:lang(ar) .hero .display { max-width: 16ch; }
.hero .lead { max-width: 48ch; }
.hero-note { font-size: var(--step--1); color: var(--text-muted); }
.hero-m { display: grid; justify-items: center; }
.hero-m .mark-emblem { width: clamp(220px, 32vw, 640px); } /* Sawy 2026-09-13 23:1x: much larger on the desktop — a third of the viewport, capped at the 2560 shell */
@media (max-width: 1023px) {
.hero .wrap { grid-template-columns: minmax(0, 1fr); gap: var(--s-8); }
.hero-m { order: -1; justify-items: start; }
.hero-m .mark-emblem { width: clamp(132px, 34vw, 200px); }
}
/* ---- THE RIBBON (Sawy 2026-09-13): the band under the hero moves — a seamless loop of the three facts with a shirt-button
bullet (game-icons "shirt-button", CC BY 3.0, credited on /legal/credits/), the signature strip riding along, and the two
stitch rules running at exactly the same speed. Everything moves by TRANSFORM only (composited, no repaint): the stitches
are 2 px lines on a 10 px integer pitch (dash 7 · gap 3) that slide one pitch per step; the track's duration is set by
site.js from its width so the ribbon runs at the same 30 px/s. RTL runs the other way. It never pauses on hover; only reduced
motion stops it and lets the band scroll by hand. --------------------------------------------------------------------------------- */
.strip-band { padding-block: var(--s-4); position: relative; background: var(--bg-alt); overflow: hidden; --ribbon-speed: 30; --ribbon-dur: 38s; --run-pitch: 10px; --run-step: .3333s; }
.strip-band::before, .strip-band::after {
content: ""; position: absolute; inset-inline-start: calc(-2 * var(--run-pitch)); width: calc(100% + 4 * var(--run-pitch)); height: 2px;
background: repeating-linear-gradient(90deg, var(--line-strong) 0 7px, transparent 7px var(--run-pitch));
animation: stitch-run var(--run-step) linear infinite; will-change: transform;
}
.strip-band::before { top: 0; } .strip-band::after { bottom: 0; }
[dir="rtl"] .strip-band::before, [dir="rtl"] .strip-band::after { animation-name: stitch-run-rtl; }
@keyframes stitch-run { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(calc(-1 * var(--run-pitch)), 0, 0); } }
@keyframes stitch-run-rtl { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(var(--run-pitch), 0, 0); } }
.ribbon { position: relative; overflow: hidden; touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; } /* a finger on the band scrolls the page, never grabs or selects the ribbon */
.ribbon::before, .ribbon::after { content: ""; position: absolute; inset-block: 0; width: 3rem; z-index: 1; pointer-events: none; }
.ribbon::before { inset-inline-start: 0; background: linear-gradient(to right, var(--bg-alt), transparent); }
.ribbon::after { inset-inline-end: 0; background: linear-gradient(to left, var(--bg-alt), transparent); }
[dir="rtl"] .ribbon::before { background: linear-gradient(to left, var(--bg-alt), transparent); }
[dir="rtl"] .ribbon::after { background: linear-gradient(to right, var(--bg-alt), transparent); }
.ribbon-track { display: flex; width: max-content; animation: ribbon var(--ribbon-dur) linear infinite; will-change: transform; backface-visibility: hidden; }
[dir="rtl"] .ribbon-track { animation-name: ribbon-rtl; }
/* the ribbon never stops: no pause on hover or focus (Sawy 2026-09-13: "never lock them") */
@keyframes ribbon { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(var(--ribbon-shift, -50%), 0, 0); } }
@keyframes ribbon-rtl { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(calc(-1 * var(--ribbon-shift, -50%)), 0, 0); } }
/* the numbers: item · 40 px · button 32 px · 40 px · item; the strip mark rides as an item at 14 px; the loop seam is the same 40 px */
.ribbon-set { display: flex; align-items: center; gap: 40px; margin: 0 40px 0 0; padding: 0; flex: none; font-size: var(--step--1); color: var(--text-2); white-space: nowrap; line-height: 1; }
.ribbon-set li { display: inline-flex; align-items: center; height: 32px; }
.ribbon-sep { width: 32px; justify-content: center; }
.ribbon-btn { width: 32px; height: 32px; color: var(--text); flex: none; }
.ribbon-mark .mark-strip { height: 14px; }
[dir="rtl"] .ribbon-set { margin: 0 0 0 40px; }
@media (prefers-reduced-motion: reduce) {
.ribbon { overflow-x: auto; }
.ribbon::before, .ribbon::after { display: none; }
.ribbon-track, .strip-band::before, .strip-band::after { animation: none; }
}
/* ============================================================================================================
THE HOME PAGE ON THE ILLUSTRATION MASTER (Sawy 2026-09-13: "no lifeless chips; use the assets we have")
============================================================================================================ */
/* the glyph disc: the client's own device (post 05: icons in soft cream discs), the glyph traced in Illustrator */
/* the disc: a square ink box centred in the circle (every glyph SVG is squared around its ink centre by prep_illustration.py) */
.disc { width: 6rem; height: 6rem; border-radius: var(--r-mark); background: var(--bg-alt); display: inline-grid; place-items: center; flex: none; }
.disc img { width: 2.75rem; height: 2.75rem; object-fit: contain; display: block; }
.disc .disc-mark { width: 2.9rem; height: auto; }
.disc-svg { width: 2.75rem; height: 2.75rem; color: var(--ink); display: block; } /* the DELIVER tee: Tabler shirt (MIT) retuned to the traced weight */ /* the brand scissors: wider than tall, sits on the same optical centre */
.section-alt .disc { background: var(--surface); }
/* THE FORMULA: four beats on one thread — the stitch runs through the discs; 4 across → 2 × 2 → 1 column */
.thread { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-8) var(--gap-grid); position: relative; padding-block-start: var(--s-4); --disc: clamp(7rem, 5.5vw, 9rem); } /* Phase 2: the disc and the column gap grow past ~2040 px */
.thread::before { content: ""; position: absolute; inset-inline: 12.5%; top: calc(var(--disc) / 2 - var(--stitch-w) / 2); height: var(--stitch-w); background: var(--stitch-img); color: var(--line-strong); opacity: .55; } /* through the disc centres: the disc row starts at the grid's top edge */
.beat { display: grid; grid-template-rows: var(--disc) auto auto; justify-items: center; text-align: center; align-items: start; gap: var(--s-3); position: relative; } /* centred on the thread: the disc row is fixed so every label sits on the same line */
.beat .disc { width: var(--disc); height: var(--disc); } .beat .disc img, .beat .disc-svg { width: calc(var(--disc) * .46); height: calc(var(--disc) * .46); } .beat .disc .disc-mark { width: calc(var(--disc) * .5); }
.beat p { max-width: var(--measure-beat); }
.beat .disc { position: relative; z-index: 1; }
.beat h3 { font-size: var(--step--1); letter-spacing: var(--track-caps); text-transform: uppercase; font-weight: var(--w-head); }
:lang(ar) .beat h3 { letter-spacing: 0; text-transform: none; font-size: var(--step-0); }
.beat p { color: var(--text-2); }
@media (max-width: 1023px) { .thread { --disc: 5.5rem; gap: var(--s-8) var(--s-3); } .beat p { font-size: var(--step--1); } }
@media (max-width: 479px) {
.thread { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); --disc: 5.5rem; }
.thread::before { inset-inline: auto; inset-inline-start: calc(var(--disc) / 2 - var(--stitch-w) / 2); top: 0; bottom: 0; width: var(--stitch-w); height: auto; background: var(--stitch-img-v); }
.beat { text-align: start; justify-items: start; }
.beat { position: relative; padding: 0 0 0 calc(5.5rem + var(--s-4)); min-height: 5.5rem; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; align-content: center; row-gap: 0; }
[dir="rtl"] .beat { padding: 0 calc(5.5rem + var(--s-4)) 0 0; }
.beat .disc { position: absolute; inset-inline-start: 0; top: 50%; transform: translateY(-50%); width: 5.5rem; height: 5.5rem; }
.beat .disc img, .beat .disc-svg { width: 2.6rem; height: 2.6rem; }
.beat p { font-size: var(--step--1); line-height: 1.4; margin-block-start: var(--s-1); }
}
/* OUR SERVICES: the hanger rail (post 03, traced) beside the stamped list — every row a door to the quote with that service chosen */
.svc-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gap-split); align-items: start; }
.svc-art { margin: 0; position: sticky; top: calc(var(--hdr-h) + var(--s-6)); }
.svc-art img { width: 100%; height: auto; }
.svc-body .head { margin-block-end: var(--s-6); }
.svc-list { display: grid; gap: var(--s-2); } /* no separator lines (Sawy 2026-09-13): the rows breathe by their discs */
.svc-row { display: grid; grid-template-columns: 3.5rem auto minmax(0, 1fr); align-items: center; gap: var(--s-4); min-height: 4rem; padding: var(--s-2) 0; color: inherit; }
.svc-disc { width: 3.5rem; height: 3.5rem; } .svc-disc .disc-svg { width: 1.6rem; height: 1.6rem; } .svc-disc img { width: 1.9rem; height: 1.9rem; }
.svc-n { font-size: var(--step--1); font-weight: var(--w-head); color: var(--accent-text); font-variant-numeric: tabular-nums; letter-spacing: var(--track-caps); }
:lang(ar) .svc-n { letter-spacing: 0; }
.svc-t { font-size: var(--step-2); font-weight: var(--w-head); line-height: var(--lh-snug); }
.svc-session { margin-block-start: var(--s-6); display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "n t go" "n p go"; gap: var(--s-2) var(--s-4); align-items: center; min-height: 0; }
.svc-session .tile-n { grid-area: n; font-size: var(--step-2); line-height: 1; } .svc-session .tile-n .i { width: 1.4em; height: 1.4em; }
.svc-session h3 { grid-area: t; font-size: var(--step-1); } .svc-session p { grid-area: p; margin: 0; } .svc-session .tile-go { grid-area: go; align-self: center; }
@media (max-width: 1023px) { .svc-split { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); } .svc-art { position: static; max-width: 30rem; } }
@media (max-width: 639px) {
.svc-row { grid-template-columns: 3.25rem auto minmax(0, 1fr); gap: var(--s-3); min-height: 3.75rem; }
.svc-disc { width: 3.25rem; height: 3.25rem; }
.svc-t { font-size: var(--step-1); }
.svc-session { grid-template-columns: auto 1fr; grid-template-areas: "n t" "p p" "go go"; } .svc-session .tile-go { justify-self: end; }
}
/* FROM START TO FINISH: the heading beside the machine (post 05, traced), four stations, the fabric label */
.process-head { margin-block-end: var(--s-8); }
.process-head .head { margin-block-end: 0; }
.stations { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap-grid); }
.station { display: grid; gap: var(--s-2); justify-items: start; align-content: start; padding-inline-end: var(--s-4); } /* no vertical separators between the stations at any width (Sawy 2026-09-13: "not clean") */
.station .disc { width: 5rem; height: 5rem; } .station .disc img { width: 2.4rem; height: 2.4rem; } .station .disc .disc-mark { width: 2.5rem; }
.station-n { font-size: var(--step--1); font-weight: var(--w-head); color: var(--accent-text); letter-spacing: var(--track-caps); margin-block-start: var(--s-2); }
:lang(ar) .station-n { letter-spacing: 0; }
.station h3 { font-size: var(--step-1); } .station p { color: var(--text-2); font-size: var(--step--1); }
@media (max-width: 1023px) { .stations { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--s-8); } }
@media (max-width: 639px) {
/* THE BAR RULE (Sawy 2026-09-13): each station is an invisible bar exactly one disc tall; the number rides the title's line,
the sentence sits under it, and the text block is centred inside the disc's diameter — nothing above or below it */
.stations { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
.station { position: relative; border: 0; padding: 0 0 0 calc(6rem + var(--s-3)); min-height: 6rem; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "n t" "p p"; grid-template-rows: auto auto; align-content: center; align-items: start; column-gap: var(--s-3); row-gap: 0; }
[dir="rtl"] .station { padding: 0 calc(6rem + var(--s-3)) 0 0; }
.station .disc { position: absolute; inset-inline-start: 0; top: 50%; transform: translateY(-50%); width: 6rem; height: 6rem; }
.station .disc img { width: 2.9rem; height: 2.9rem; } .station .disc .disc-mark { width: 3rem; }
.station-n { grid-area: n; margin: 0; font-size: var(--step-0); line-height: 1.3; }
.station h3 { grid-area: t; font-size: var(--step-0); line-height: 1.3; }
.station p { grid-area: p; font-size: var(--step--1); line-height: 1.4; margin: var(--s-1) 0 0; }
}
/* THE DETAILS: the thread chart (post 04, traced) beside the four details with their glyphs */
.details-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gap-split); align-items: start; }
.details-split .head { margin-block-end: 0; position: sticky; top: calc(var(--hdr-h) + var(--s-6)); }
.details-list { display: grid; }
.detail { display: grid; grid-template-columns: auto 1fr; gap: var(--s-4); align-items: center; padding-block: var(--s-3); } /* no separator lines (Sawy 2026-09-13) */
.detail .disc { width: 4.5rem; height: 4.5rem; } .detail .disc img { width: 2.2rem; height: 2.2rem; } .detail .disc .disc-mark { width: 2.3rem; }
.detail h3 { font-size: var(--step-1); } .detail p { color: var(--text-2); font-size: var(--step--1); }
@media (max-width: 1023px) { .details-split { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); } .details-split .head { position: static; } }
/* EVERY SIZE: THE TAILOR'S TAPE — the tapes drawn by scripts/build_tape.py (Codex Astra 6's design, 2026-09-13: brushed tip with the zero at the seam, both-edge ticks, the tens in red, Arabic-Indic face); — a real measuring tape (scripts/build_tape.py: cream strip, mm/half/cm ticks, Outfit numerals outlined,
the metal tip at 0; 1 cm = 28 px, never scaled: the ![]()
is cropped by its box with object-fit cover, so the tape runs off the edge
like one lying on the bench). Three files: LTR, RTL (0 at the right), vertical (phones). The S · M · L · XL pins are thread-red lines
the grid centres in its four columns (at the 1120 px wrap they land on 4 · 14 · 24 · 34 cm); the letter above, the tier name below. */
.scale { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: auto 3.5rem auto; row-gap: var(--s-3); position: relative; padding-block-start: var(--s-4); }
/* the pin: a dressmaker's pin stuck into the tape — a 7 px head 16 px above the edge, a 2 px shaft 20 px into the tape (never a full-height cursor over the numerals) */
.scale-marks, .mark-size { display: contents; }
.tape { grid-row: 2; grid-column: 1 / -1; position: relative; overflow: clip; view-timeline: --tape block; } /* THE STILL SUBJECT: the timeline is read from this box, which never moves; the image inside is what slides (a transformed subject feeds its own timeline and oscillates — seen on iOS, 2026-09-13) */
.tape-img { display: none; position: absolute; inset: 0; width: 100%; max-width: none; max-height: none; height: 100%; object-fit: cover; object-position: left top; will-change: transform; backface-visibility: hidden; transform: translateZ(0); } /* its own compositor layer: the slide is transform-only and never re-rasterizes (iOS smoothness, Sawy 2026-09-13) */ /* max-width none: the base img cap would stop the grown box at 100 % and the slide would expose the paper (seen at 960 px, 2026-09-13) */
.tape-ltr { display: block; }
[dir="rtl"] .tape-ltr { display: none; } [dir="rtl"] .tape-ar { display: block; object-position: right top; } /* the Arabic tape: 0 at the right, Arabic-Indic numerals */
.size-letter { grid-row: 1; align-self: end; justify-self: center; padding-block-end: 22px; font-size: var(--step-6); line-height: 1; font-weight: var(--w-head); letter-spacing: var(--track-display); }
.size-tick { grid-row: 2; justify-self: center; align-self: start; width: 1.5px; height: 26px; margin-block-start: -14px; background: var(--n-4b); box-shadow: 1px 1px 1px hsl(var(--shadow-hue) / .18); position: relative; z-index: 1; } /* a dressmaker's pin: a steel shaft 12 px into the tape, an enamel head above (Codex Astra 6, 2026-09-13) */
.size-tick::before { content: ""; position: absolute; inset-inline-start: 50%; top: 0; width: 8px; height: 8px; border-radius: 50%; background: radial-gradient(circle at 28% 28%, var(--bg), var(--accent) 58%, var(--accent-hover) 100%); box-shadow: 0 1px 1px hsl(var(--shadow-hue) / .24); transform: translate(-50%, -50%); }
.mark-size h3 { grid-row: 3; justify-self: center; text-align: center; margin-block-start: 4px; font-size: var(--step-0); font-weight: var(--w-medium); color: var(--text-2); }
/* explicit columns (desktop and tablet only): auto-placement would push the ticks past the full-width tape */
@media (min-width: 640px) { .mark-size:nth-child(1) > * { grid-column: 1; } .mark-size:nth-child(2) > * { grid-column: 2; } .mark-size:nth-child(3) > * { grid-column: 3; } .mark-size:nth-child(4) > * { grid-column: 4; } }
/* THE TAPE MOVES (Sawy, 2026-09-13): as the section crosses the viewport the tape slides 10 cm along its length under the fixed pins, so the
numbers under S · M · L · XL change as you scroll — a scroll-driven CSS animation (no scroll listener), the image box grown by the travel so
the strip never runs out; reduced motion and browsers without view() timelines get the still tape. LTR slides left, RTL right, phones up. */
@keyframes tape-slide-ltr { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-280px, 0, 0); } }
@keyframes tape-slide-rtl { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(280px, 0, 0); } }
@keyframes tape-slide-v { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, -280px, 0); } }
@supports (animation-timeline: view()) and (view-timeline: --t block) {
@media (prefers-reduced-motion: no-preference) {
.tape-ltr, [dir="rtl"] .tape-ar { inset-inline-end: -280px; width: calc(100% + 280px); animation: tape-slide-ltr linear both; animation-timeline: --tape; animation-range: entry 100% exit 0%; } /* the pull happens while the tape is fully in view: it starts the moment it has entered and ends before it starts to leave */
[dir="rtl"] .tape-ar { animation-name: tape-slide-rtl; }
.tape-vert, .tape-vert-ar { inset-block-end: -280px; height: calc(100% + 280px); animation: tape-slide-v linear both; animation-timeline: --tape; animation-range: entry 100% exit 0%; } /* the container's box is the visible crop, so no inset is needed */
}
}
.sizes-note { margin-block-start: var(--s-8); }
@media (max-width: 639px) {
/* phones: the tape hangs down the inline-start side; each size is a bar (THE BAR RULE): the pin crosses the tape at the centre of its letter + name */
.scale { display: block; position: relative; padding: 0 0 0 calc(3.5rem + var(--s-5)); }
[dir="rtl"] .scale { padding: 0 calc(3.5rem + var(--s-5)) 0 0; }
.tape { position: absolute; inset-block: 0; inset-inline-start: 0; width: 3.5rem; overflow: clip; view-timeline: --tape block; }
.tape-ltr, .tape-ar, [dir="rtl"] .tape-ar { display: none; } .tape-vert { display: block; object-position: left top; }
[dir="rtl"] .tape-vert { display: none; } [dir="rtl"] .tape-vert-ar { display: block; object-position: left top; }
.scale-marks { display: grid; gap: var(--s-6); }
.mark-size { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto; column-gap: var(--s-3); align-items: center; position: relative; min-height: 3rem; } /* one line: the letter and the name, the pin at its centre */
.size-letter { grid-row: 1; grid-column: 1; justify-self: start; align-self: center; font-size: var(--step-4); line-height: 1; }
.mark-size h3 { grid-row: 1; grid-column: 2; justify-self: start; align-self: center; text-align: start; }
.size-letter { padding-block-end: 0; } .mark-size h3 { margin-block-start: 0; }
.size-tick { grid-row: 1; grid-column: 1 / -1; position: absolute; inset-inline-start: calc(-1 * (var(--s-5) + 20px)); top: 50%; transform: translateY(-50%); width: 30px; height: 1.5px; margin: 0; } /* grid-row 1: an absolute grid child takes its grid AREA as containing block — the desktop's row 2 pushed the pin below the row */ /* 20 px into the tape, the head 10 px out, 6 px clear of the name */
.size-tick::before { inset-inline-start: auto; inset-inline-end: 0; top: 50%; transform: translate(50%, -50%); }
[dir="rtl"] .size-tick::before { transform: translate(-50%, -50%); }
}
}
/* THE CTA BAND: centred, the tape rings and the spool (post 01 / 04, traced) at the two ends on desktop */
.cta-band .wrap { position: relative; display: grid; justify-items: start; text-align: start; } /* left-aligned like every other section (Sawy 2026-09-13: the heading, the lead and the buttons on one edge) */
.cta-in { display: grid; justify-items: start; gap: var(--s-6); max-width: 44rem; }
.cta-band h2 { max-width: 22ch; } :lang(ar) .cta-band h2 { max-width: 26ch; }
.cta-band .ctas { justify-content: start; }
.notfound { min-height: calc(100svh - var(--hdr-h)); display: grid; place-items: center; text-align: center; padding-block: var(--s-16); }
.notfound .wrap { display: grid; justify-items: center; gap: var(--s-5); }
.notfound .mark-icon { height: 40px; }
/* ---- the design-system page itself (/design/, noindex): the two-direction proof ----------------------------- */
.ds .ds-h { margin-block-end: var(--s-6); display: flex; gap: var(--s-3); align-items: baseline; flex-wrap: wrap; }
.ds .ds-h [lang="ar"] { font-family: var(--font-arabic); }
.ds-pair { align-items: start; }
.ds-demo { display: grid; gap: var(--s-4); align-content: start; padding: var(--s-6); border: var(--line-w) solid var(--line); background: var(--bg); min-width: 0; }
.ds-demo.cluster { display: flex; }
.ds-demo p { max-width: none; }
.ds-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: var(--s-2); }
.ds-sw { background: var(--sw); color: var(--fg); padding: var(--s-4); min-height: 5.5rem; display: grid; align-content: end; gap: 2px; border: var(--line-w) solid var(--line); font-size: var(--step--2); font-variant-numeric: tabular-nums; }
.ds-sw b { font-size: var(--step--1); }
.ds-rule { display: grid; gap: var(--s-3); margin-block-start: var(--s-6); }
.ds-desk .desk { min-height: 0; border: var(--line-w) solid var(--line); }
.ds-desk .desk-list { max-height: 24rem; }
.ds-desk .desk-pane { max-height: 32rem; }
@media (max-width: 1023px) { .ds-desk .desk-rail { grid-auto-flow: column; } }
/* ---- small utilities the pages use instead of inline styles ------------------------------------------------ */
.u-center { margin-inline: auto; }
.u-mt-1 { margin-block-start: var(--s-1); } .u-mt-3 { margin-block-start: var(--s-3); } .u-mt-4 { margin-block-start: var(--s-4); } .u-mt-6 { margin-block-start: var(--s-6); }
.rule-sm { width: 6rem; margin-block: var(--s-4); }
.toast.is-static { position: static; transform: none; }
.reply .textarea { min-height: 5rem; }
/* ---------- THE THREE DOORS (Design_Part2, A, 2026-09-13): /quote/ · /session/ · /contact/ — one shell: the head, the form on the left,
a stitched aside on the right (what happens next + the mailboxes); phones stack the aside under the form. The success panel
replaces the form in place (the reference in tabular numerals); the busy button shows the spinner; errors sit under their field
and in one live region above the buttons. Turnstile mounts in .door-turnstile (the site key from GET /api/config). ---------- */
.door { display: grid; grid-template-columns: minmax(0, 1fr) var(--pane-aside); gap: var(--gap-split); align-items: start; }
.door-form { max-width: var(--wrap-text); }
.door-aside { position: sticky; top: calc(var(--hdr-h) + var(--s-6)); display: grid; gap: var(--s-6); }
.door-aside .card-stitch { background: var(--surface); display: grid; gap: var(--s-4); }
.door-aside h2 { font-size: var(--step-1); }
.door-steps { display: grid; gap: var(--s-3); counter-reset: door; }
.door-steps li { display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: var(--s-3); align-items: center; font-size: var(--step--1); color: var(--text-2); } /* THE AXIS RULE (Sawy 2026-09-13): the disc sits on the text block's own centre line, one line or two */
.door-steps li::before { counter-increment: door; content: counter(door); width: 2rem; height: 2rem; border-radius: var(--r-pill); border: var(--line-w-strong) solid var(--text); color: var(--text); font-weight: var(--w-head); font-size: var(--step--1); display: grid; place-items: center; font-variant-numeric: tabular-nums; }
.door-steps.has-ic { counter-reset: none; }
.door-steps.has-ic li::before { content: none; }
.door-step-i { width: 2rem; height: 2rem; border-radius: var(--r-pill); border: var(--line-w-strong) solid var(--text); color: var(--text); display: grid; place-items: center; }
.door-step-i svg { width: 1.1rem; height: 1.1rem; }
.door-mails { display: grid; gap: var(--s-2); font-size: var(--step--1); }
.door-mails a { color: var(--text); font-weight: var(--w-medium); text-decoration: none; border-block-end: var(--line-w) solid var(--line-ui); }
.door-mails a:hover { border-color: var(--text); }
.door-mails span { color: var(--text-muted); }
.door-legal { font-size: var(--step--2); color: var(--text-muted); }
.door-live { min-height: 0; }
.door-turnstile { min-height: 0; } /* interaction-only: invisible until a challenge is needed — no reserved hole (Sawy's perfection loop, 2026-09-14) */
.door-turnstile:not(:empty) { margin-block-start: var(--s-2); }
.door-turnstile iframe { display: block; }
.door-ok { display: grid; gap: var(--s-4); background: var(--surface); }
.door-ok .ref { font-size: var(--step-2); font-weight: var(--w-head); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.door-ok .ctas { margin-block-start: var(--s-2); }
/* the mode chooser (session): two pressable cards, radio semantics */
.modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
.mode { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-3); align-items: center; padding: var(--s-4); background: var(--surface); border: var(--line-w-strong) solid var(--line-ui); cursor: pointer; min-height: var(--tap); }
.mode:hover { border-color: var(--line-strong); }
.mode input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.mode .disc { width: 3rem; height: 3rem; } .mode .disc svg { width: 1.5rem; height: 1.5rem; }
.mode b { display: block; font-weight: var(--w-head); } .mode span { display: block; font-size: var(--step--1); color: var(--text-muted); }
.mode:has(input:checked) { border-color: var(--text); background: var(--bg-alt); }
.mode:has(input:focus-visible) { outline: 2px solid var(--text); outline-offset: 2px; }
.slots-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); flex-wrap: wrap; }
.slots-nav { display: flex; gap: var(--s-2); }
.slots-nav button { min-width: var(--tap); }
.slots-tz { font-size: var(--step--1); color: var(--text-muted); }
.slot-chosen { font-size: var(--step--1); color: var(--text-2); font-variant-numeric: tabular-nums; }
@media (max-width: 1023px) { .door { grid-template-columns: minmax(0, 1fr); gap: var(--s-10); } .door-aside { position: static; } .door-form { max-width: none; } }
@media (max-width: 639px) { .modes { grid-template-columns: minmax(0, 1fr); } }
/* ---------- PREMIUM FABRICS — designed by Codex (gpt-6-astra) on Sawy's order 2026-09-13, ported by A: three overlapping cloth lengths (woven, twill, rib) drawn as CSS textures on the paper, the property on a cloth label, one thread-red selvage. ---------- */
/* Premium fabrics: three folded lengths on an atelier's paper. */
/* THE INK ART (Sawy 2026-09-14 02:2x: "use all of these assets throughout the homepage"): the four Codex ink illustrations in the traced
style of the hanger rail (brand_assets/exports/illustration/codex/), one per section, each cropped off one edge of its canvas. The
figure sits so the cropped edge faces the wrap's edge (--start: left-cropped art in the start column, --end: right-cropped art in the
end column); in RTL the columns mirror, so the art mirrors with them (no text in it, so a mirror is free). No frame, no shadow, no ground:
the ink sits on the paper like the rail. */
.ink-split { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gap-split); align-items: end; margin-block-end: var(--s-8); }
.ink-split .head { margin-block-end: 0; }
.ink-art { margin: 0; min-inline-size: 0; inline-size: 100%; } /* a justify-self figure shrinks to its lazy image = 0 px and never loads; the width is the column's, capped below */
.ink-art img { display: block; width: 100%; height: auto; }
.ink-art--end { justify-self: end; max-inline-size: 26rem; }
.ink-art--start { justify-self: start; max-inline-size: 26rem; }
.ink-art--under { margin-block-start: var(--s-6); max-inline-size: 22rem; }
[dir="rtl"] .ink-art img { transform: scaleX(-1); }
@media (max-width: 1023px) { .ink-split { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); } .ink-art--end, .ink-art--start { max-inline-size: 22rem; } .ink-art--end { justify-self: end; } }
/* PREMIUM FABRICS: the stack of bolts is the art, the three properties are a list beside it — a knot of thread marks each */
.fab-block {
display: grid;
grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
grid-template-areas: "art title" "art props" "art caption";
grid-template-rows: auto auto 1fr;
column-gap: var(--s-12);
row-gap: var(--s-4);
align-items: start;
margin-block-start: var(--s-12);
}
.fab-art { grid-area: art; max-inline-size: none; align-self: end; }
/* THE TAGGED STACK: the image carries the threads and the blank tags; the labels are type laid on the tag faces by measured percentages
(container units keep the type in step with the image at every width; the eyelet's end of each tag is left to the eyelet) */
.fab-block { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "title" "caption" "art"; gap: var(--s-3); margin-block-start: var(--s-12); } /* the caption sits under its title, always (Sawy 03:18); the art below */
.fab-block .fab-art { grid-area: art; inline-size: min(100%, 44rem); max-inline-size: none; margin-block-start: 0; } /* the image carries its own air above the stack */
.fab-tagged { position: relative; container-type: inline-size; }
.fab-labels { list-style: none; margin: 0; padding: 0; }
.fab-label { position: absolute; inset-inline-start: calc(var(--x) * 1%); inset-block-start: calc(var(--y) * 1%); inline-size: calc(var(--w) * 1%); block-size: calc(var(--h) * 1%); display: flex; align-items: center; font-size: 3.1cqi; font-weight: var(--w-medium); line-height: 1.1; color: var(--ink); white-space: nowrap; overflow: hidden; }
@media (max-width: 1023px) { .fab-block { margin-block-start: var(--s-8); } .fab-art { max-inline-size: 100%; } }
.fab-title {
grid-area: title;
margin: 0;
font-size: var(--step-4);
font-weight: var(--w-medium);
line-height: var(--lh-tight);
letter-spacing: var(--track-display);
}
.fab-caption {
grid-area: caption;
align-self: start;
margin: 0;
margin-block-start: calc(-1 * var(--s-2)); /* the caption sits under the title, not at the bottom of the cloth column (Sawy 2026-09-13) */
max-inline-size: 40rem;
font-size: var(--step-0);
line-height: var(--lh-body);
color: var(--text-2);
}
@media (max-width: 639px) {
.fab-title { font-size: var(--step-3); }
.fab-caption { max-inline-size: none; font-size: var(--step--1); }
}
/* ---------- THE LEGAL PAGES: the policy list beside the text on desktop (sticky), above it on phones; the prose measure from the tokens ---------- */
.legal { display: grid; grid-template-columns: 16rem minmax(0, 1fr); gap: var(--s-12); align-items: start; }
.legal-nav { position: sticky; top: calc(var(--hdr-h) + var(--s-6)); display: grid; gap: var(--s-3); }
.legal-nav-h { font-size: var(--step--1); font-weight: var(--w-head); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--text-muted); }
:lang(ar) .legal-nav-h { letter-spacing: 0; text-transform: none; }
.legal-nav ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; border-block-start: var(--line-w) solid var(--line-ui); }
.legal-nav a { display: block; padding: var(--s-3) 0; border-block-end: var(--line-w) solid var(--line-ui); color: var(--text-2); text-decoration: none; font-size: var(--step--1); }
.legal-nav a:hover { color: var(--text); } .legal-nav a[aria-current="page"] { color: var(--text); font-weight: var(--w-head); }
.legal-body .head { margin-block-end: var(--s-8); }
.prose { max-width: var(--wrap-text); display: grid; gap: var(--s-4); }
.prose h2 { font-size: var(--step-2); margin-block-start: var(--s-6); } .prose h3 { font-size: var(--step-1); margin-block-start: var(--s-3); }
.prose p, .prose li { line-height: var(--lh-body); color: var(--text-2); } .prose strong { color: var(--text); }
.prose ul, .prose ol { padding-inline-start: 1.25rem; display: grid; gap: var(--s-2); } .prose ul { list-style: disc; } .prose ol { list-style: decimal; }
.prose a { color: var(--text); }
.prose table { border-collapse: collapse; width: 100%; font-size: var(--step--1); } .prose th, .prose td { text-align: start; padding: var(--s-2) var(--s-3); border-block-end: var(--line-w) solid var(--line-ui); vertical-align: top; }
.prose th { font-weight: var(--w-head); color: var(--text); }
.legal-governs { margin-block-start: var(--s-10); padding-block-start: var(--s-4); border-block-start: var(--line-w) solid var(--line-ui); max-width: var(--wrap-text); }
@media (max-width: 1023px) { .legal { grid-template-columns: minmax(0, 1fr); gap: var(--s-8); } .legal-nav { position: static; } .legal-nav ul { display: flex; flex-wrap: wrap; gap: var(--s-2); border: 0; } .legal-nav a { border: var(--line-w) solid var(--line-ui); border-radius: var(--r-pill); padding: var(--s-2) var(--s-4); } }
/* ---------- THE MEETING PAGE: one stitched card per meeting, the cancel sheet ---------- */
.meetings { display: grid; gap: var(--s-4); margin-block-end: var(--s-8); }
.meeting { background: var(--surface); display: grid; gap: var(--s-3); }
.meeting.is-past { opacity: .7; }
.meeting-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2) var(--s-4); }
.meeting-when { font-size: var(--step-1); font-weight: var(--w-head); font-variant-numeric: tabular-nums; }
.status-chip { display: inline-flex; align-items: center; min-height: 1.6rem; padding-inline: var(--s-3); border-radius: var(--r-pill); font-size: var(--step--2); font-weight: var(--w-head); letter-spacing: var(--track-caps); text-transform: uppercase; background: var(--bg-alt); color: var(--text); }
:lang(ar) .status-chip { letter-spacing: 0; text-transform: none; }
.status-booked, .status-rescheduled { background: var(--success-soft); color: var(--success); }
.status-cancelled { background: var(--bg-alt); color: var(--text-muted); text-decoration: line-through; }
.book { display: grid; gap: var(--s-4); margin-block-start: var(--s-6); }
.book .h2 { font-size: var(--step-2); }
.mt-sheet { position: fixed; inset: 0; z-index: 50; display: grid; place-items: end center; background: rgb(26 26 26 / .45); padding: var(--s-4); }
.sheet-card { background: var(--surface); width: min(100%, 28rem); display: grid; gap: var(--s-4); }
@media (min-width: 640px) { .mt-sheet { place-items: center; } }
.door-emblem { width: 8rem; height: auto; }
/* ---------- THE DESK v2 — OMAR'S DESK /manage/ and AHMED'S FLOOR /floor/ (Design_Part2, A, 2026-09-13): ONE vocabulary (.desk-*), the Apple
split-view / Material list-detail pattern: the rail (icons, count bubbles at the inline end), the list pane (sticky head, rows with
the unread dot + the selected accent), the detail pane (a sticky bar with the full Back button on phones). Phones: the rail is a
scrolling strip under the header; list and pane swap by data-view; the pane's Back button and the hardware Back both return. ---------- */
.desk-page main.is-app { min-height: 0; } /* THE APP HEIGHT RULE (Sawy 2026-09-14 04:3x): an app page never claims a viewport — it is exactly its content plus the dock's room, so a short tab is shorter than the screen and cannot scroll a pixel; the ground behind is the body's own cream */ /* the app fills the viewport ONLY when signed in; signed out the page is a door: THE PAGE AIR, sized to its content */ /* the small viewport: Safari's toolbar never stretches the page (Sawy 2026-09-14 01:4x) */
.desk { display: grid; grid-template-columns: minmax(0, 1fr); min-height: 0; box-sizing: border-box; } /* no viewport claim: THE APP HEIGHT RULE (the dead space under a short tab, Sawy 04:3x) */
.desk-main { display: grid; grid-template-columns: var(--pane-list) minmax(0, 1fr); } /* THE ENGINE RULE (Sawy 2026-09-14, iPhone Safari + iPhone Chrome): never a percentage height here — WebKit resolved `min-height: 100%` against the grid row's PREVIOUS height, so the page kept the tallest tab's height under every shorter one (a 5,434 px void on the Lab); Chromium never met it. Deleted, not zeroed: `min-height: 0` on a grid item has its own open WebKit bug (309736, the row fails to grow when text rewraps). `scripts/app_height_gate.mjs` measures it in both engines */
.desk-main.is-single { grid-template-columns: minmax(0, 1fr); }
.desk-list { border-inline-end: var(--line-w) solid var(--line-ui); display: grid; align-content: start; }
.desk-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-4) var(--s-5); min-height: 4.5rem; position: sticky; top: var(--hdr-h); background: var(--bg); z-index: 2; border-block-end: var(--line-w) solid var(--line-ui); }
.desk-head h2 { font-size: var(--step-1); }
.desk-head-pane { position: static; padding-inline: 0; border-block-end: 0; min-height: 0; padding-block: 0 var(--s-2); }
.desk-head-pane h2 { font-size: var(--step-2); }
.desk-head .ctas { margin: 0; }
.desk-check-inline { font-size: var(--step--1); align-items: center; }
.desk-rows { display: grid; }
.desk-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--s-1) var(--s-3); padding: var(--s-4) var(--s-5); border: 0; border-block-end: var(--line-w) solid var(--line-ui); background: transparent; text-align: start; font: inherit; color: inherit; cursor: pointer; width: 100%; align-items: start; -webkit-tap-highlight-color: transparent; }
.desk-row:hover { background: var(--surface); }
.desk-row:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.desk-row[aria-current="true"] { background: var(--surface); box-shadow: inset 3px 0 0 var(--accent); }
[dir="rtl"] .desk-row[aria-current="true"] { box-shadow: inset -3px 0 0 var(--accent); }
.desk-dot { width: .5rem; height: .5rem; border-radius: var(--r-mark); background: transparent; margin-block-start: .55rem; }
.desk-row.is-unread .desk-dot { background: var(--accent); }
.desk-row-main { min-width: 0; display: grid; gap: 2px; }
.desk-row b { display: block; font-weight: var(--w-medium); color: var(--text-2); }
.desk-row.is-unread b { font-weight: var(--w-head); color: var(--text); }
.desk-row-sub { font-size: var(--step--1); color: var(--text-muted); display: block; }
.desk-row-prev { font-size: var(--step--1); color: var(--text-2); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.desk-row time { font-size: var(--step--2); color: var(--text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.desk-list-foot { padding: var(--s-4) var(--s-5); }
.desk-list-foot .btn[hidden] { display: none; }
.desk-empty { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-6) var(--s-5); color: var(--text-muted); max-width: none; }
.desk-pane { padding: var(--s-6) var(--pane-pad); display: grid; align-content: start; gap: var(--s-6); min-width: 0; container-type: inline-size; }
.desk-pane > * { max-width: var(--pane-max); } /* Phase 2: a thread or a form never stretches to 2,000 px on a monitor; the pane is a container, its forms fold by its own width */
@container (width < 36rem) { .form-row { grid-template-columns: minmax(0, 1fr); } .modes { grid-template-columns: minmax(0, 1fr); } }
.desk-pane-bar { display: none; align-items: center; justify-content: space-between; gap: var(--s-3); }
.desk-pane-bar[hidden] { display: none; }
.desk-pane-ref { font-size: var(--step--1); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.desk-back { min-height: var(--control-h-sm); }
.desk-screen { display: grid; gap: var(--s-6); align-content: start; }
.desk-screen[hidden] { display: none; }
.desk-gap-top { margin-block-start: var(--s-4); }
.desk-select-auto, .desk-input-auto { width: auto; }
.desk-confirm { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); padding: var(--s-3) var(--s-4); background: var(--bg-alt); border-radius: var(--r-block-sm); font-size: var(--step--1); margin-block-start: var(--s-2); }
.desk-confirm .select { min-height: var(--control-h-sm); }
.seg { display: inline-flex; border: var(--line-w-strong) solid var(--line-ui); border-radius: var(--r-pill); padding: 2px; }
.seg button { border: 0; background: transparent; color: var(--text-2); font: inherit; font-size: var(--step--1); font-weight: var(--w-medium); padding: 0 var(--s-4); min-height: 2rem; border-radius: var(--r-pill); cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--text); color: var(--bg); }
/* the thread */
.th { display: grid; gap: var(--s-5); }
.th-head { display: grid; gap: var(--s-1); padding-block-end: var(--s-4); border-block-end: var(--line-w) solid var(--line-ui); }
.th-head h2 { font-size: var(--step-2); outline: none; } .th-head .small { font-variant-numeric: tabular-nums; }
.th-h { display: flex; align-items: center; gap: var(--s-3); font-size: var(--step-0); font-weight: var(--w-head); }
.th-hi { width: 2rem; height: 2rem; border-radius: var(--r-pill); border: var(--line-w-strong) solid var(--text); display: grid; place-items: center; flex: 0 0 auto; }
.th-hi svg { width: 1rem; height: 1rem; }
.msg { max-width: 44rem; padding: var(--s-4) var(--s-5); background: var(--surface); border: var(--line-w) solid var(--line-ui); display: grid; gap: var(--s-2); }
.msg.is-out { background: var(--bg-alt); border-color: var(--bg-alt); margin-inline-start: auto; }
.msg-meta { font-size: var(--step--2); color: var(--text-muted); display: flex; gap: var(--s-3); flex-wrap: wrap; font-variant-numeric: tabular-nums; }
.msg-subject:empty { display: none; }
.msg pre { white-space: pre-wrap; word-break: break-word; font: inherit; line-height: var(--lh-body); color: var(--text-2); margin: 0; }
.composer { display: grid; gap: var(--s-3); padding-block-start: var(--s-4); border-block-start: var(--line-w) solid var(--line-ui); }
.composer .ctas { align-items: center; }
.th-brief, .th-files { display: grid; gap: var(--s-3); }
.th-send { gap: var(--s-4); }
.th-pick { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.th-relink { display: grid; gap: var(--s-1); justify-items: start; padding-block-start: var(--s-4); border-block-start: var(--line-w) solid var(--line-ui); }
.mt-row .mt-row-acts { grid-area: go; display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; justify-content: end; }
.mt-row.is-off { opacity: .6; }
.mt-row .mt-row-name .badge { margin-inline-start: var(--s-2); }
/* THE FUNNEL */
.fn-lanes { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: var(--s-4); }
.fn-lane { display: grid; gap: var(--s-3); padding: var(--s-4) var(--s-5); }
.fn-lane-h { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.fn-line { display: flex; justify-content: space-between; gap: var(--s-3); font-size: var(--step--1); color: var(--text-2); }
.fn-line-v { color: var(--text); font-weight: var(--w-medium); }
.fn-meter { position: relative; height: 6px; background: var(--track); border-radius: var(--r-pill); overflow: visible; }
.fn-meter i { display: block; height: 100%; inline-size: 0; background: var(--success); border-radius: var(--r-pill); transition: inline-size var(--dur-slow) var(--ease-out); }
.fn-meter.is-alarm i { background: var(--warning); } .fn-meter.is-valve i { background: var(--danger); }
.fn-mark { position: absolute; top: -3px; width: 1.5px; height: 12px; background: var(--line-strong); }
.fn-mark-70 { inset-inline-start: 70%; } .fn-mark-90 { inset-inline-start: 90%; background: var(--danger); }
.fn-held, .fn-workers { display: grid; gap: var(--s-2); }
.fn-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--s-3); align-items: center; padding: var(--s-3) var(--s-4); background: var(--surface); border: var(--line-w) solid var(--line-ui); border-radius: var(--r-block); }
.fn-item.is-dead { opacity: .7; }
.fn-item-p { font-size: var(--step--2); font-weight: var(--w-head); color: var(--text-muted); min-width: 7rem; }
.fn-item[data-priority="0"] .fn-item-p, .fn-item[data-priority="1"] .fn-item-p { color: var(--accent-text); }
.fn-item-main { display: grid; gap: 2px; min-width: 0; } .fn-item-main b { font-size: var(--step--1); overflow-wrap: anywhere; }
.fn-item-sub { font-size: var(--step--2); color: var(--text-muted); }
.fn-item-when { font-size: var(--step--2); color: var(--text-2); white-space: nowrap; }
.state-chip { display: inline-flex; align-items: center; min-height: 1.5rem; padding-inline: var(--s-3); border-radius: var(--r-pill); font-size: var(--step--2); font-weight: var(--w-head); background: var(--bg-alt); }
.state-ok { background: var(--success-soft); color: var(--success); } .state-alarm { background: var(--warning-soft); color: var(--warning); } .state-valve { background: var(--danger-soft); color: var(--danger); } .state-unknown { background: var(--bg-alt); color: var(--text-muted); }
/* employees */
.em-form { padding: var(--s-5); gap: var(--s-4); border-block-start: 0; }
.em-pin { display: grid; gap: var(--s-3); background: var(--surface); }
.em-pin-code { font-size: var(--step-4); font-weight: var(--w-head); letter-spacing: .3em; font-variant-numeric: tabular-nums; }
.em-detail { grid-column: 1 / -1; display: grid; gap: var(--s-4); padding-block-start: var(--s-4); margin-block-start: var(--s-3); border-block-start: var(--line-w) solid var(--line-ui); }
.em-acts { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.mt-row.desk-employee .mt-row-ic, .mt-row.desk-meeting .mt-row-ic, .mt-row.desk-session .mt-row-ic { font-size: var(--step--1); }
.mt-row.desk-meeting .mt-row-ic svg, .mt-row.desk-session .mt-row-ic svg { width: 1.25rem; height: 1.25rem; }
/* the notification centre as a screen */
.nc { display: grid; gap: var(--s-2); }
.nc-day { font-size: var(--step--2); font-weight: var(--w-head); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--text-muted); padding-block: var(--s-3) var(--s-1); }
:lang(ar) .nc-day { letter-spacing: 0; text-transform: none; }
.nc-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--s-3); padding: var(--s-3) var(--s-4); background: var(--surface); border: var(--line-w) solid var(--line-ui); border-radius: var(--r-block); align-items: start; cursor: default; }
.nc-item.is-unread { border-color: var(--text); }
.nc-ic { width: 2.25rem; height: 2.25rem; border-radius: var(--r-pill); border: var(--line-w-strong) solid var(--text); display: grid; place-items: center; }
.nc-ic svg { width: 1.1rem; height: 1.1rem; }
.nc-item.is-unread .nc-ic { background: var(--text); color: var(--bg); }
.nc-main { display: grid; gap: 2px; min-width: 0; }
.nc-main b { font-size: var(--step--1); } .nc-main p { font-size: var(--step--1); color: var(--text-2); margin: 0; } .nc-main time { font-size: var(--step--2); color: var(--text-muted); }
.nc-acts { display: flex; gap: var(--s-1); align-items: center; }
/* availability */
.avail { display: grid; gap: var(--s-3); }
.avail-day { display: grid; grid-template-columns: 7rem minmax(0, 1fr) auto; gap: var(--s-3); align-items: center; padding: var(--s-3) 0; border-block-end: var(--line-w) solid var(--line-ui); }
.avail-day b { font-weight: var(--w-head); }
.windows { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }
.window { display: inline-flex; align-items: center; gap: var(--s-1); }
.window .select { min-height: 2.25rem; padding-block: 0; font-size: var(--step--1); width: 6.5rem; }
.exc { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: var(--s-3); align-items: center; padding: var(--s-2) 0; border-block-end: var(--line-w) solid var(--line-ui); font-size: var(--step--1); }
/* the sign-in + the floor */
.signin { max-width: 26rem; margin: 0 auto; padding: var(--section) var(--gutter); display: grid; gap: var(--s-6); box-sizing: content-box; }
.app-wait { max-width: 26rem; margin: 0 auto; padding: var(--section) var(--gutter) 0; box-sizing: content-box; } /* THE PATIENT CALL's note sits where the sign-in's title would, on the same axis */ /* THE PAGE AIR: the same token above the title and under the button */
.signin .head > h1:first-child { margin-block-start: -.2em; }
.signin .code { letter-spacing: .4em; font-size: var(--step-2); text-align: center; }
.desk-note { font-size: var(--step--1); color: var(--text-muted); }
.log { display: grid; gap: var(--s-3); }
.log-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--s-3); align-items: center; padding: var(--s-4); background: var(--surface); border: var(--line-w) solid var(--line-ui); }
.log-row b { display: block; } .log-row .row-sub { display: block; font-size: var(--step--1); color: var(--text-muted); }
.counter { display: inline-flex; align-items: center; border: var(--line-w-strong) solid var(--line-ui); border-radius: var(--r-pill); }
.counter button { width: var(--tap); height: var(--tap); border: 0; background: transparent; font: inherit; font-size: var(--step-1); cursor: pointer; }
.counter output { min-width: 3.5rem; text-align: center; font-size: var(--step-2); font-weight: var(--w-head); font-variant-numeric: tabular-nums; }
.floor-bar { position: sticky; bottom: 0; background: var(--surface-ink); color: var(--text-on-ink); padding: var(--s-3) var(--gutter); display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); }
@media (max-width: 1023px) {
.desk-main { grid-template-columns: minmax(0, 1fr); }
.desk-list { border-inline-end: 0; } .desk[data-view="pane"] .desk-list { display: none; } .desk[data-view="list"] .desk-pane { display: none; }
.desk-pane { padding: var(--s-4) var(--gutter); }
.desk-pane-bar { display: flex; }
.desk-pane-bar[hidden] { display: none; }
}
/* ---------- THE MENU (Design_Part2, A, 2026-09-13; ported from the TAL website's select.js on Sawy's ruling): every select is our
dropdown on every device — never iOS Safari's native wheel. Blocks, so radius 0 (THE CORNERS LAW); logical sides for RTL. ---------- */
.blsel { position: relative; min-width: 0; max-width: 100%; }
.blsel .blsel-native { position: absolute; inset-block-start: 0; inset-inline-start: 0; width: 1px; height: 1px; min-height: 0; padding: 0; border: 0; opacity: 0; pointer-events: none; }
.blsel-b { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); width: 100%; min-height: var(--control-h); padding: 0 var(--s-4); border: var(--line-w-strong) solid var(--line-ui); border-radius: var(--r-0); background: var(--surface); color: var(--text); font: inherit; font-size: var(--step-0); line-height: var(--lh-snug); text-align: start; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: border-color var(--dur-fast) var(--ease-out); }
.blsel-b:hover { border-color: var(--line-strong); }
.blsel-b:focus-visible, .blsel.is-open .blsel-b { outline: 2px solid var(--focus); outline-offset: 1px; border-color: var(--line-strong); }
.blsel-b:disabled { color: var(--disabled); cursor: not-allowed; background: var(--surface); }
.blsel-b.is-empty .blsel-v { color: var(--placeholder); }
.blsel-b[aria-invalid="true"] { border-color: var(--danger); background: var(--danger-soft); }
.blsel-v { flex: 1 1 0; width: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.blsel-c { flex: 0 0 1rem; width: 1rem; height: 1rem; color: var(--text); transition: transform var(--dur-base) var(--ease-out); }
.blsel.is-open .blsel-c { transform: rotate(180deg); }
.blsel-p { position: absolute; inset-inline: 0; inset-block-start: calc(100% + 4px); z-index: var(--z-drawer); margin: 0; padding: var(--s-1); list-style: none; background: var(--surface); border: var(--line-w-strong) solid var(--line-strong); border-radius: var(--r-0); box-shadow: var(--shadow-2); overflow: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; opacity: 0; transform: translateY(-4px); transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.blsel-p.is-up { inset-block-start: auto; inset-block-end: calc(100% + 4px); transform: translateY(4px); }
.blsel-p.is-in { opacity: 1; transform: none; }
.blsel-p:focus { outline: none; }
.blsel-p:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.blsel-o { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); min-height: var(--tap); padding: var(--s-2) var(--s-4); font-size: var(--step-0); line-height: var(--lh-snug); color: var(--text); cursor: pointer; -webkit-tap-highlight-color: transparent; outline: none; }
.blsel-o span { min-width: 0; overflow-wrap: anywhere; }
.blsel-o.is-active { background: var(--bg-alt); }
.blsel-o[aria-selected="true"] { background: var(--text); color: var(--bg); }
.blsel-o[aria-selected="true"].is-active { background: var(--text); color: var(--bg); }
.blsel-o.is-off { color: var(--disabled); cursor: default; }
.blsel-k { flex: 0 0 1rem; width: 1rem; height: 1rem; }
@media (prefers-reduced-motion: reduce) { .blsel-p, .blsel-c { transition: none; } }
/* ---------- THE QUOTE DOOR (Design_Part2, A, 2026-09-13 — Sawy's ruling: the customer's own brief, every field, uploads, Turnstile perfected):
six numbered groups on ONE design — the desktop is the bench (every group on the page, the aside's rail ticking as groups complete),
the phone is the same six groups one at a time with Back / Next (the progress line replaces the rail). Namespace .qd-*. ---------- */
.qd .door-form { display: grid; }
.qd-progress { display: none; }
.qd-step { display: grid; gap: var(--s-5); }
.qd-step + .qd-step { margin-block-start: var(--s-12); } /* groups breathe by their discs and spacing — no lines inside a section (PERFECTION_LAWS §B.7) */
.qd-t { display: flex; align-items: center; gap: var(--s-3); font-size: var(--step-2); line-height: var(--lh-tight); outline: none; }
.qd-n { flex: 0 0 auto; width: 2.5rem; height: 2.5rem; border-radius: var(--r-pill); border: var(--line-w-strong) solid var(--text); display: grid; place-items: center; }
.qd-n svg { width: 1.25rem; height: 1.25rem; }
.qd-step.is-done .qd-n { background: var(--text); color: var(--bg); }
.qd-fields { display: grid; gap: var(--s-5); }
.qd-short { min-height: 5rem; }
.qd-group { gap: var(--s-3); }
.qd-group > .help { margin-block-start: calc(-1 * var(--s-1)); }
.qd-group.is-invalid .legend { color: var(--danger); }
/* the service chips: pills, several at once, the chosen ones in ink */
.qd-chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.qd-chip { position: relative; display: inline-flex; align-items: center; gap: var(--s-2); min-height: var(--tap); padding: 0 var(--s-5); border-radius: var(--r-pill); border: var(--line-w-strong) solid var(--line-ui); background: var(--surface); color: var(--text); font-size: var(--step--1); font-weight: var(--w-medium); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.qd-chip input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; width: 100%; height: 100%; }
.qd-chip:hover { border-color: var(--line-strong); }
.qd-chip:has(input:checked) { background: var(--text); color: var(--bg); border-color: var(--text); }
.qd-chip:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.qd-chip-sm { min-height: var(--control-h-sm); padding-inline: var(--s-4); }
.qd-group.is-invalid .qd-chip { border-color: var(--danger); }
/* the answers: equal cells with air between them, each its own 12 px block (THE CORNERS LAW v2), the chosen one in ink; three answers on a
phone = two cells and the last one across the row — never a joined table whose inner borders break when the row wraps (Sawy 2026-09-14 03:2x) */
.qd-seg { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: var(--s-2); }
.qd-opt { position: relative; display: grid; place-items: center; min-height: var(--control-h); padding: 0 var(--s-3); font-size: var(--step--1); font-weight: var(--w-medium); text-align: center; cursor: pointer; -webkit-tap-highlight-color: transparent; border: var(--line-w) solid var(--line-ui); background: var(--surface); border-radius: var(--r-block); }
.qd-opt:last-child:nth-child(odd) { grid-column: 1 / -1; }
.qd-opt:hover { border-color: var(--line-strong); }
.qd-opt input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; width: 100%; height: 100%; }
.qd-opt:has(input:checked) { background: var(--text); color: var(--bg); border-color: var(--text); }
.qd-opt:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: -2px; }
.qd-dec-note { margin-block-start: var(--s-2); }
.qd-dec:has(input[value="none"]:checked) .qd-dec-note, .qd-dec:not(:has(input:checked)) .qd-dec-note { display: none; }
.qd-qty { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-2); align-items: center; }
.qd-qty .input[disabled] { color: var(--text-muted); }
/* the files: a drop area with the button, then one row per file with its own progress bar */
.qd-drop { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-4); padding: var(--s-5); border: var(--line-w-strong) dashed var(--line-strong); background: var(--surface); transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); }
.qd-drop.is-over { background: var(--bg-alt); border-style: solid; border-color: var(--text); }
.qd-drop-hint { font-size: var(--step--1); color: var(--text-muted); }
.qd-drop-count { margin-inline-start: auto; font-variant-numeric: tabular-nums; }
.qd-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.qd-list:empty { display: none; }
.qd-file { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "ic name x" "ic meta x" "ic bar x" "ic retry x"; column-gap: var(--s-3); row-gap: var(--s-1); align-items: center; padding: var(--s-3) var(--s-4); background: var(--surface); border: var(--line-w) solid var(--line-ui); }
.qd-file-ic { grid-area: ic; width: 2.5rem; height: 2.5rem; display: grid; place-items: center; border: var(--line-w-strong) solid var(--text); font-size: var(--step--2); font-weight: var(--w-head); letter-spacing: var(--track-caps); }
.qd-file-name { grid-area: name; font-weight: var(--w-medium); font-size: var(--step--1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; direction: ltr; text-align: start; unicode-bidi: isolate; }
.qd-file-meta { grid-area: meta; font-size: var(--step--2); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.qd-file-bar { grid-area: bar; display: block; height: 3px; background: var(--track); overflow: hidden; }
.qd-file-bar i { display: block; height: 100%; inline-size: 0; background: var(--text); transition: inline-size var(--dur-base) var(--ease-out); }
.qd-file[data-state="done"] .qd-file-bar { display: none; }
.qd-file[data-state="done"] .qd-file-meta { color: var(--success); }
.qd-file[data-state="error"] { border-color: var(--danger); }
.qd-file[data-state="error"] .qd-file-bar { display: none; }
.qd-file[data-state="error"] .qd-file-meta { color: var(--danger); }
.qd-file-retry { grid-area: retry; justify-self: start; margin-block-start: var(--s-1); } /* its own row: it sat on top of the error line (Sawy 03:2x) */
.qd-file-x { grid-area: x; display: grid; place-items: center; width: var(--tap); height: var(--tap); border: 0; background: transparent; color: var(--text-2); cursor: pointer; font: inherit; }
.qd-file-x:hover { color: var(--text); }
.qd-file-x:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.qd-file-retry { grid-area: meta; justify-self: start; }
.qd-meet b { display: block; font-weight: var(--w-medium); }
.qd-meet .help { display: block; margin-block-start: var(--s-1); }
.qd-ts { display: grid; gap: var(--s-2); }
.qd-ts-state { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); font-size: var(--step--1); color: var(--danger); font-weight: var(--w-medium); }
.qd-nav { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; margin-block-start: var(--s-4); }
.qd-nav .qd-back, .qd-nav .qd-next { display: none; }
/* the aside's rail: the six groups, the current one in ink, the completed ones ticked */
ol.qd-rail { list-style: none; margin: 0; padding: calc(var(--s-6) + var(--stitch-w)); display: grid; gap: var(--s-2); background: var(--surface); }
.qd-rail li { display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: var(--s-3); align-items: center; min-height: 2.25rem; font-size: var(--step--1); color: var(--text-muted); }
.qd-rail li.is-current { color: var(--text); font-weight: var(--w-medium); }
.qd-rail-n { width: 2rem; height: 2rem; border-radius: var(--r-pill); border: var(--line-w-strong) solid var(--line-ui); display: grid; place-items: center; font-size: var(--step--2); font-weight: var(--w-head); font-variant-numeric: tabular-nums; color: var(--text); }
.qd-rail li.is-current .qd-rail-n { border-color: var(--text); }
.qd-rail li.is-done .qd-rail-n { background: var(--text); color: var(--bg); border-color: var(--text); }
.qd-rail-n svg { width: 1rem; height: 1rem; }
.qd-rail-n i { display: grid; place-items: center; }
.qd-rail-n > svg { display: none; }
.qd-rail li.is-done .qd-rail-n > svg { display: block; }
.qd-rail li.is-done .qd-rail-n i { display: none; }
/* the phone (and the iPad in portrait): one group at a time, the progress line on top, Back / Next below; every group stays in the DOM */
@media (max-width: 767px) {
.qd-step + .qd-step { margin-block-start: 0; }
html.js .qd-progress { display: grid; gap: var(--s-2); font-size: var(--step--1); font-weight: var(--w-medium); color: var(--text-2); margin-block-end: var(--s-2); }
.qd-progress-bar { display: block; height: 3px; background: var(--track); overflow: hidden; }
.qd-progress-bar i { display: block; height: 100%; background: var(--text); inline-size: 0; transition: inline-size var(--dur-slow) var(--ease-out); }
html.js .qd-step:not(.is-current) { display: none; }
html.js .qd-nav .qd-back, html.js .qd-nav .qd-next { display: inline-flex; }
html.js .qd-nav .qd-next, html.js .qd-nav .qd-submit { flex: 1 1 auto; }
html.js .qd:not(.is-last) .qd-submit { display: none; }
html.js .qd.is-last .qd-next { display: none; }
.qd-nav { justify-content: space-between; }
.door-aside .qd-rail { display: none; }
.qd-seg { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.qd-qty { grid-template-columns: minmax(0, 1fr); }
.qd-qty .qd-chip { justify-self: start; }
}
@media (prefers-reduced-motion: reduce) { .qd-file-bar i, .qd-progress-bar i, .qd-chip, .qd-drop { transition: none; } }
/* ---------- THE CUSTOMER'S PAGE /m/ (Design_Part2, A, 2026-09-13 — Sawy: "a mini owner page for the client"): the documents from
Brands' Lab first (the quote lands here), then the brief they sent, their files, the sessions, and booking. Namespace .mt-*. ---------- */
.mt-main { display: grid; gap: var(--s-10); }
.mt-block { display: grid; gap: var(--s-4); }
.mt-h { display: flex; align-items: center; gap: var(--s-3); font-size: var(--step-2); line-height: var(--lh-tight); }
.mt-hi { flex: 0 0 auto; width: 2.5rem; height: 2.5rem; border-radius: var(--r-pill); border: var(--line-w-strong) solid var(--text); display: grid; place-items: center; }
.mt-hi svg { width: 1.25rem; height: 1.25rem; }
.mt-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.mt-list:empty { display: none; }
.mt-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "ic name go" "ic meta go" "ic note go"; column-gap: var(--s-3); row-gap: var(--s-1); align-items: center; padding: var(--s-3) var(--s-4); background: var(--surface); border: var(--line-w) solid var(--line-ui); }
.mt-row.is-new { border-color: var(--text); }
.mt-row-ic { grid-area: ic; width: 2.5rem; height: 2.5rem; display: grid; place-items: center; border: var(--line-w-strong) solid var(--text); font-size: var(--step--2); font-weight: var(--w-head); letter-spacing: var(--track-caps); }
.mt-row-name { grid-area: name; font-weight: var(--w-medium); font-size: var(--step--1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; gap: var(--s-2); min-width: 0; }
.mt-row-name > span { overflow: hidden; text-overflow: ellipsis; direction: ltr; unicode-bidi: isolate; }
.mt-row-name .badge { flex: 0 0 auto; }
.mt-row-meta { grid-area: meta; font-size: var(--step--2); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.mt-row-note { grid-area: note; font-size: var(--step--1); color: var(--text-2); }
.mt-row-note:empty { display: none; }
.mt-row .btn { grid-area: go; }
.mt-empty { max-width: none; display: flex; align-items: center; gap: var(--s-3); padding: var(--s-4) var(--s-5); background: var(--surface); border: var(--line-w) dashed var(--line-strong); color: var(--text-2); font-size: var(--step--1); }
.mt-empty-i { flex: 0 0 auto; width: 2rem; height: 2rem; display: grid; place-items: center; color: var(--text); }
.mt-empty-i svg { width: 1.1rem; height: 1.1rem; }
.mt-brief { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: var(--s-2) var(--s-4); margin: 0; padding: var(--s-4) var(--s-5); background: var(--surface); border: var(--line-w) solid var(--line-ui); }
.mt-brief dt { font-size: var(--step--1); color: var(--text-muted); }
.mt-brief dd { margin: 0; font-size: var(--step--1); color: var(--text); overflow-wrap: anywhere; }
.mt-brief dd.mt-brief-chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.mt .meetings { margin-block-end: 0; }
@media (max-width: 767px) {
.mt-brief { grid-template-columns: minmax(0, 1fr); gap: var(--s-1); }
.mt-brief dt { margin-block-start: var(--s-3); } .mt-brief dt:first-child { margin-block-start: 0; }
.mt-row { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "ic name" "ic meta" "note note" "go go"; }
.mt-row .btn { justify-self: start; }
}
/* the desk's thread gains the brief, the files, the documents and the send form (Design_Part2) — the .mt-* rows are shared with the customer's page */
.th-h { font-size: var(--step-0); font-weight: var(--w-head); }
.th-brief, .th-files { display: grid; gap: var(--s-3); }
.th-files .desk-note:not(:only-child) { display: none; }
.th-files .mt-list:empty + .desk-note { display: block; }
.th-send { gap: var(--s-4); }
.th-pick { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.th-relink { display: grid; gap: var(--s-1); justify-items: start; padding-block-start: var(--s-4); border-block-start: var(--line-w) solid var(--line-ui); }
.mt-row .mt-row-acts { grid-area: go; display: flex; gap: var(--s-2); align-items: center; }
/* ---------- THE CORNERS LAW v2 (Sawy, 2026-09-13 22:1x: "the cell box sharp and the buttons rounded is not clean — settle on one design"):
THE SOFT SYSTEM. Every block that holds content — field, select, textarea, THE MENU, card, stitched card, tile, message, stat, alert,
empty state, mode, sheet, log row, segmented answer, drop area, file row, brief table — carries ONE radius (--r-block, 12 px);
the small squares inside a block carry --r-block-sm (8 px); buttons, chips, badges and the language pill stay pills; the emblem
and avatars stay circles. Supersedes "radius 0 on blocks" (2026-09-12). Applied as one override block so the audit is one grep. ---------- */
.input, .select, .textarea, .blsel-b, .blsel-p, .card, .card-stitch, .card-stitch::before, .tile, .msg, .stat, .alert, .empty, .slots-empty, .mode, .sheet-card,
.log-row, .qd-seg, .qd-drop, .qd-file, .mt-row, .mt-empty, .mt-brief, .door-ok, .drawer-mails a, .ft-mails a, .desk-list, .desk-pane,
.avail-day, .window, .exc, .table-wrap, .ds-demo, .ds-sw, .code, .th-head + .th .msg, .composer .textarea, .meeting, .slots, .qd-progress-bar, .qd-file-bar, .meter { border-radius: var(--r-block); }
.qd-file-ic, .mt-row-ic, .blsel-o, .qd-progress-bar i, .qd-file-bar i { border-radius: var(--r-block-sm); }
.check input:not([type="radio"]) { border-radius: 4px; }
.blsel-p { overflow: hidden auto; }
/* THE ROUNDED STITCH: the SVG thread replaces the CSS stitch once site.js has sewn it (see site.js); the CSS stitch is the no-JS fallback */
.card-stitch.has-svg::before { display: none; }
.card-stitch > .stitch-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; display: block; }
.card-stitch > .stitch-svg rect { fill: none; stroke: var(--line-strong); stroke-linecap: round; opacity: .85; }
/* ---------- THE USER DOCK (Sawy, 2026-09-13 22:4x + 22:5x): one black bar at the bottom of the desks, full width, the footer's white edge stitch on its
top, padded by the home indicator, fixed. Desktop: every item in one row of equal cells (icon over label). Phones: NO "More" — the same items
become CHIPS (icon beside label, a hairline pill) that wrap into stacked rows under the finger. THE COUNT BUBBLE: a white circle on the black bar
at the icon's corner; one digit = a circle, two = a pill, three = a wider pill, 99+ is the cap (a realistic number, never a wall of digits);
on the active item the icon pill is white so the bubble inverts to ink. site.js/owner.js set --dock-h so the page never hides under it. ---------- */
:root { --dock-h: 0px; }
.dock { position: fixed; inset-inline: 0; inset-block-end: 0; z-index: var(--z-hdr); background: var(--surface-ink); color: var(--text-on-ink); padding-block-end: env(safe-area-inset-bottom); }
.dock::before { content: ""; position: absolute; inset-inline: 0; inset-block-start: 0; height: var(--stitch-w-strong); background: var(--stitch-img-strong, var(--stitch-img)) top / 100% var(--stitch-w-strong) no-repeat; color: var(--text-on-ink); }
.dock-in { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); max-width: var(--wrap); margin-inline: auto; padding: calc(var(--stitch-w-strong) + 9px) var(--s-2) 0; } /* the stitch is drawn inside the bar; + 4 px so the active pill's top clears it by as much as the label's baseline clears the bottom edge: the air above the icons starts under it, so it equals the air below the labels (Sawy 2026-09-14 00:2x) */
.dock-item { display: grid; justify-items: center; align-content: center; gap: var(--s-1); min-height: 4rem; padding: var(--s-2) var(--s-1); border: 0; background: transparent; color: var(--text-on-ink-2); font: inherit; font-size: var(--step--2); font-weight: var(--w-medium); cursor: pointer; -webkit-tap-highlight-color: transparent; border-radius: var(--r-block-sm); position: relative; touch-action: manipulation; }
.dock-item:hover { color: var(--text-on-ink); }
.dock-item:focus-visible { outline: 2px solid var(--bg); outline-offset: -4px; }
.dock-item[aria-current="page"] { color: var(--text-on-ink); }
.dock-item[aria-current="page"] .dock-ic { background: var(--bg); color: var(--text); }
.dock-ic { position: relative; width: 2.5rem; height: 1.75rem; border-radius: var(--r-pill); display: grid; place-items: center; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.dock-ic svg { width: 1.25rem; height: 1.25rem; }
.dock-l { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
/* THE COUNT BUBBLE */
.dock-ic .desk-count { position: absolute; inset-block-start: -.4rem; inset-inline-end: -.45rem; display: inline-grid; place-items: center; min-width: 1.25rem; height: 1.25rem; padding-inline: .3rem; border-radius: var(--r-pill); background: var(--bg); color: var(--text); font-size: 11px; font-weight: var(--w-head); line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: 0; direction: ltr; unicode-bidi: isolate; box-shadow: 0 0 0 2px var(--surface-ink); transition: min-width var(--dur-fast) var(--ease-out); }
.dock-ic .desk-count:empty { display: none; } /* a bubble with nothing in it is a defect, not a zero (the Lab's dock showed six empty rings, 2026-09-14) */
.dock-ic .desk-count.is-2 { min-width: 1.6rem; }
.dock-ic .desk-count.is-3 { min-width: 2rem; }
.dock-ic .desk-count-quiet { background: var(--bg); color: var(--text); }
.dock-item[aria-current="page"] .dock-ic .desk-count { background: var(--text); color: var(--bg); box-shadow: 0 0 0 2px var(--bg); }
.dock-more, .dock-sheet { display: none; }
.has-dock { padding-block-end: calc(var(--dock-h) + var(--s-6)); }
.desk-page .floor-bar { inset-block-end: var(--dock-h); }
@media (max-width: 767px) {
/* the chips: icon beside label, a hairline pill, wrapping into stacked rows; every item present, no sheet */
/* a 3-column grid of equal chips: every row full, every cell the same width — never a ragged last row. The desk brings nine
(3 × 3) and THE LAB'S PORTAL six (3 × 2); a dock whose item count is not a multiple of three needs its own rule here. */
.dock-in { display: grid; grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2); padding: calc(var(--s-4) + var(--stitch-w-strong) + var(--s-4)) var(--s-3) var(--s-4); } /* equal air above and below the chips (Sawy 23:0x) — the bubbles' 8 px overhang stays inside the 16 px */
.dock-item { display: inline-flex; flex-direction: row; align-items: center; justify-content: center; gap: var(--s-2); min-height: 2.5rem; padding: 0 var(--s-2); border: var(--line-w) solid var(--line-on-ink, rgba(255 255 255 / .28)); border-radius: var(--r-pill); font-size: var(--step--2); min-width: 0; }
.dock-l { flex: 0 1 auto; }
.dock-item[aria-current="page"] { background: var(--bg); color: var(--text); border-color: var(--bg); }
.dock-item[aria-current="page"] .dock-ic { background: transparent; }
.dock-ic { width: 1.5rem; height: 1.5rem; }
.dock-ic svg { width: 1.1rem; height: 1.1rem; }
/* the bubble sits on the CHIP's top-end corner (the icon's corner collides with the label when the icon is at the start) */
.dock-ic { position: static; }
.dock-ic .desk-count { inset-block-start: -.5rem; inset-inline-end: -.35rem; }
.dock-item[aria-current="page"] .dock-ic .desk-count { box-shadow: 0 0 0 2px var(--bg); }
.dock-item-2 { display: inline-flex; }
}
@media (max-width: 767px) { .dock-in .dock-more { display: none; } }
/* ============================================================================================================
THE ONE SCREEN — Ahmed's floor on the real floor API (Design_Part2, A, 2026-09-13). One card per person, the lines inside;
desktop: a line is one row of five fields; phone: the fields stack two per row, the count last. THE CORNERS LAW v2, THE MENU.
============================================================================================================ */
.floor .section-tight { padding-block-end: var(--s-8); }
#floor.has-dock[data-screen="today"] { padding-block-end: var(--dock-h); } /* Today ends on the day bar: at the page's end it rests exactly where it sticks while scrolling — flush on the dock's stitch, never a cream band between two black bars */ /* the dock's room is the floor's own (.has-dock) — counted twice it was a dead band above the day bar once --dock-h was really measured (2026-09-14) */
.fl-people { display: grid; gap: var(--s-4); }
.fl-emp { background: var(--surface); border: var(--line-w) solid var(--line-ui); border-radius: var(--r-block); padding: var(--s-4) var(--s-5); display: grid; gap: var(--s-4); }
.fl-emp.is-away { opacity: .6; }
.fl-emp-h { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--s-3); align-items: center; }
.fl-emp-ic { width: 2.5rem; height: 2.5rem; display: grid; place-items: center; border: var(--line-w-strong) solid var(--text); border-radius: var(--r-block-sm); font-size: var(--step--2); font-weight: var(--w-head); }
.fl-att { justify-self: end; }
.fl-emp-n { display: grid; gap: 2px; min-width: 0; }
.fl-emp-n b { font-size: var(--step-0); }
.fl-att button { min-width: 4.5rem; }
.fl-lines { display: grid; gap: var(--s-3); }
.fl-line { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.2fr) minmax(0, 1fr) auto minmax(5.5rem, 7rem) auto; gap: var(--s-3); align-items: end; padding: var(--s-3) var(--s-4); background: var(--bg); border: var(--line-w) solid var(--line-ui); border-radius: var(--r-block-sm); }
.fl-line .field { gap: var(--s-1); }
.fl-line .label { font-size: var(--step--2); }
.fl-line.is-prefill { border-style: dashed; }
.fl-line.is-bad { border-color: var(--danger); }
.fl-line .counter { background: var(--surface); }
.fl-line .fl-num { width: 4.5rem; border: 0; background: transparent; text-align: center; font: inherit; font-size: var(--step-1); font-weight: var(--w-head); -moz-appearance: textfield; appearance: textfield; min-height: var(--tap); color: var(--text); }
.fl-line .fl-num::-webkit-outer-spin-button, .fl-line .fl-num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.fl-line .fl-num:focus-visible { outline: none; }
.fl-f-min .input { min-height: var(--tap); }
.fl-line-s { display: grid; grid-template-columns: auto auto; align-items: center; gap: var(--s-2); min-height: var(--tap); justify-content: end; }
.fl-state { color: var(--text-muted); white-space: nowrap; min-width: 3.5rem; text-align: end; }
.fl-line.is-bad .fl-state { color: var(--danger); }
.fl-rm { width: var(--tap); height: var(--tap); padding: 0; display: grid; place-items: center; }
.fl-rm svg { width: 1rem; height: 1rem; }
.fl-emp-f { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.fl-add .i svg { width: 1rem; height: 1rem; }
.floor-bar { gap: var(--s-4) var(--s-6); flex-wrap: wrap; }
.fl-sum { display: inline-flex; align-items: baseline; gap: var(--s-2); }
.fl-sum b { font-size: var(--step-1); }
.fl-bar-acts { margin-inline-start: auto; display: inline-flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.fl-confirm { display: inline-flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
@media (max-width: 1023px) {
.fl-line { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "o o" "s s" "m m" "p n" "x x"; }
.fl-f-order { grid-area: o; } .fl-f-step { grid-area: s; } .fl-f-mach { grid-area: m; } .fl-f-pieces { grid-area: p; } .fl-f-min { grid-area: n; } .fl-line-s { grid-area: x; }
}
@media (max-width: 559px) {
.fl-emp { padding: var(--s-4); }
.fl-emp-h { grid-template-columns: auto minmax(0, 1fr); }
.fl-att { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fl-att button { min-width: 0; }
.fl-bar-acts { margin-inline-start: 0; width: 100%; }
}
/* OMAR'S FLOOR SCREEN (the desk): the day · the orders · the setup · the standards */
.fl-tabs { margin-block: 0 var(--s-2); }
.fl-day-nav { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.fl-day-nav .btn svg { width: 1rem; height: 1rem; }
/* THE FLOOR DAY SUMMARY's note only exists while it says something (it clears after 2 s) */
.fl-day-nav #flCopyNote:empty { display: none; }
.fl-table { width: 100%; border-collapse: collapse; font-size: var(--step--1); }
.fl-table th, .fl-table td { text-align: start; padding: var(--s-2) var(--s-3); border-block-end: var(--line-w) solid var(--line-ui); vertical-align: middle; }
.fl-table th { font-size: var(--step--2); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--text-muted); font-weight: var(--w-medium); }
:lang(ar) .fl-table th { letter-spacing: 0; text-transform: none; }
.fl-table td.num, .fl-table th.num { text-align: end; font-variant-numeric: tabular-nums; direction: ltr; }
.fl-table tr:last-child td { border-block-end: 0; }
.fl-table .input { min-height: 2.25rem; width: 6rem; padding-inline: var(--s-2); }
.fl-wrap { overflow-x: auto; background: var(--surface); border: var(--line-w) solid var(--line-ui); border-radius: var(--r-block); padding: var(--s-2) var(--s-3); }
.fl-order { display: grid; gap: var(--s-3); padding: var(--s-4) var(--s-5); background: var(--surface); border: var(--line-w) solid var(--line-ui); border-radius: var(--r-block); }
.fl-order-h { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-3); align-items: start; }
.fl-order-h b { font-size: var(--step-0); }
.fl-order-meta { font-size: var(--step--2); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.fl-steps { display: grid; gap: var(--s-2); }
.fl-step { display: grid; grid-template-columns: minmax(7rem, 12rem) minmax(0, 1fr) auto; gap: var(--s-3); align-items: center; font-size: var(--step--1); }
.fl-step-n { display: flex; align-items: center; gap: var(--s-2); min-width: 0; }
.fl-step-n span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fl-bar { height: .5rem; background: var(--bg-alt); border-radius: var(--r-pill); overflow: hidden; }
.fl-bar i { display: block; height: 100%; background: var(--text); border-radius: var(--r-pill); }
.fl-step.is-blocked .fl-bar i { background: var(--line-strong); }
.fl-step-v { font-variant-numeric: tabular-nums; color: var(--text-2); white-space: nowrap; direction: ltr; }
.fl-order-acts { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.fl-add-step-row { display: grid; grid-template-columns: auto minmax(0, 1.4fr) minmax(0, 1fr) minmax(5rem, 7rem) auto; gap: var(--s-2); align-items: end; }
.fl-add-step-row .seqn { width: 2rem; height: 2rem; border-radius: var(--r-pill); border: var(--line-w-strong) solid var(--text); display: grid; place-items: center; font-size: var(--step--2); font-weight: var(--w-head); align-self: end; margin-block-end: .35rem; }
.fl-list { display: grid; gap: var(--s-3); }
.fl-form { display: grid; gap: var(--s-3); padding: var(--s-4) var(--s-5); background: var(--surface); border: var(--line-w) solid var(--line-ui); border-radius: var(--r-block); }
.fl-form h3 { font-size: var(--step-0); }
.fl-chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.fl-trust { font-size: var(--step--2); }
@media (max-width: 639px) {
.fl-step { grid-template-columns: minmax(0, 1fr); gap: var(--s-1); }
.fl-add-step-row { grid-template-columns: auto minmax(0, 1fr); }
.fl-add-step-row .fl-type, .fl-add-step-row .fl-guess { grid-column: 2; }
}
/* the desk's Floor screen on the phone (THE ONE DESIGN RULE, 2026-09-14): the tabs drop under the title full-width; a table becomes cards
(each cell keeps its column name from data-l); a screen part never widens the pane */
.desk-screen-part { min-width: 0; display: grid; gap: var(--s-4); align-content: start; } /* one breath between every block of a Floor tab — the nav, the stats, the tables (Sawy 00:50) */
.desk-screen-part > .desk-head-pane { padding-block-end: 0; }
.desk-screen h2[tabindex="-1"]:focus { outline: none; }
.fl-table td[data-l]::before { content: none; }
@media (max-width: 767px) {
#screen-floor > .desk-head-pane { flex-wrap: wrap; }
#screen-floor > .desk-head-pane h2 { flex: 1 0 100%; }
.fl-tabs, .fl-r-presets { display: grid; width: 100%; }
.fl-tabs { grid-template-columns: repeat(5, minmax(0, 1fr)); } /* five tabs since the reports (2026-09-14) */
.fl-r-presets { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fl-tabs button, .fl-r-presets button { padding-inline: var(--s-1); }
}
@media (max-width: 639px) {
.fl-wrap { padding: var(--s-2); }
.fl-table, .fl-table tbody { display: block; }
.fl-table thead { display: none; }
.fl-table tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-1) var(--s-3); padding: var(--s-3); border-block-end: var(--line-w) solid var(--line-ui); }
.fl-table tr:last-child { border-block-end: 0; }
.fl-table td { display: grid; gap: 1px; padding: 0; border: 0; text-align: start; }
.fl-table td.num { text-align: start; direction: inherit; }
.fl-table td[data-l]::before { content: attr(data-l); display: block; font-size: var(--step--2); color: var(--text-muted); letter-spacing: var(--track-caps); text-transform: uppercase; }
:lang(ar) .fl-table td[data-l]::before { letter-spacing: 0; text-transform: none; }
.fl-table td.fl-wide { grid-column: 1 / -1; }
.fl-table .input { width: 100%; }
}
.fl-table td > .badge { justify-self: start; width: fit-content; }
@media (max-width: 639px) {
/* a third row for THE FLOOR DAY SUMMARY's button, "c c c"; the day's own rows ("p l n" / "t s s") are untouched.
The note is NOT given an area: it auto-places full width in the implicit row under the button, so a long failure
line can never sit on top of it — and while it is empty it generates no box, so it costs no row and no gap. */
.fl-day-nav { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "p l n" "t s s" "c c c"; gap: var(--s-2) var(--s-3); align-items: center; }
.fl-day-nav #flPrev { grid-area: p; } .fl-day-nav #flDayLabel { grid-area: l; text-align: center; } .fl-day-nav #flNext { grid-area: n; }
.fl-day-nav #flToday { grid-area: t; justify-self: start; } .fl-day-nav #flDayState { grid-area: s; justify-self: start; } .fl-day-nav #flReopen { grid-area: s; justify-self: end; }
.fl-day-nav #flCopyDay { grid-area: c; justify-self: start; } .fl-day-nav #flCopyNote { grid-column: 1 / -1; justify-self: start; text-align: start; }
#flDayStats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2); }
#flDayStats .stat { padding: var(--s-3); }
}
/* an icon-only button (Sawy 2026-09-14 00:2x: the notification's × is a real round button, the mark a readable size) */
.btn-icon { width: var(--tap); height: var(--tap); min-height: var(--tap); padding: 0; display: inline-grid; place-items: center; }
.btn-icon svg { width: 1.15rem; height: 1.15rem; }
.fl-rm { border: var(--line-w-strong) solid var(--line-ui); border-radius: var(--r-pill); }
.fl-rm svg { width: 1.15rem; height: 1.15rem; }
/* THE APP PAGES (Sawy 2026-09-14 00:5x): the desk, the floor and the customer's page are the business's app — no footer, no selling; the
page fills the viewport and ends on the black ground (THE OVERSCROLL GROUND), so on iOS Safari it reads as an app, not a site */
main.app-page.door-page { min-height: calc(100svh - var(--hdr-h)); } /* the door keeps its air; the signed-in app is its content (THE APP HEIGHT RULE) */
/* REPORTS (Opus build, 2026-09-14): the range bar, the three folded tables. One design at every width — the stats and the presets
reflow, nothing changes shape; logical properties only, so the whole block mirrors itself in Arabic. */
.fl-r-bar { display: flex; flex-wrap: wrap; align-items: end; gap: var(--s-3); margin-block-end: var(--s-3); }
.fl-r-dates { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.fl-r-dates .input { min-height: 2.25rem; }
#flRStats { margin-block-end: var(--s-3); }
#flRStats:empty { margin-block-end: 0; }
.fl-r-blocks { display: grid; gap: var(--s-3); }
.fl-r-h { font-size: var(--step-0); padding: var(--s-2) var(--s-3) 0; }
.fl-r-prog { display: grid; gap: var(--s-1); align-content: center; justify-items: end; min-width: 6rem; }
.fl-r-prog .fl-bar { display: block; width: 100%; }
@media (max-width: 639px) {
.fl-r-dates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
.fl-r-prog { justify-items: start; }
#flRStats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); }
#flRStats .stat { padding: var(--s-3); }
}
/* A1/A7 the quote rail as buttons (Opus, 2026-09-14) — every row is a real