/* Garage waiting-engine prototype — Analytics AIML. * Page shell = Analytics AIML house system (paper white, teal #0F766E, ochre #C27310, * Poppins/Inter/IBM Plex Mono) — this is US, the vendor, speaking. * Tablet interior = the garage's own namespaced palette (--g-*) — used ONLY inside the * device frame. Never mixed with the page shell on one surface (design-doctrine rule 2). * Zero ad-hoc hex/px in components — everything composes the :root tokens below, including * opacity ramps via color-mix() rather than new hand-picked hexes. * Logical properties throughout (margin-inline, padding-inline, inset-inline, text-align: * start/end) so `dir="rtl"` on works with this one stylesheet — no second file. */ /* ================================================================== tokens */ :root{ /* OURS — Analytics AIML, the vendor speaking */ --teal:#0F766E; --teal-d:#0B5A54; --teal-dd:#07322F; --teal-p:#E9F5F3; --bright:#2DD4BF; --ochre:#C27310; --ochre-p:#FDF4E7; --ink:#0F1729; --body:#26303F; --slate:#3D4451; --slate-l:#6B7480; --line:#D8DDE3; --line-d:#C2C8D2; --paper:#F5F7F8; --white:#fff; /* THE GARAGE — used ONLY inside the tablet frame */ --g-bg:#0E1512; --g-panel:#16201C; --g-line:#233029; --g-accent:#F59E0B; --g-ink:#F7FAF8; /* data / delay-owner colours — the enum that makes the pitch */ --own-insurer:#EF4444; --own-surveyor:#F59E0B; --own-supplier:#8B5CF6; --own-customer:#0EA5E9; --own-garage:#14B8A6; --ok:#3D5F2E; --warn:#8A5307; --bad:#B3261E; /* type: display / sans / mono — mono is DATA ONLY (timestamps, AED, table cells, the log) */ --disp:'Poppins',system-ui,-apple-system,Segoe UI,sans-serif; --sans:'Inter',system-ui,-apple-system,Segoe UI,sans-serif; --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; --r:12px; --sh:0 2px 10px rgba(15,23,41,.06),0 12px 34px rgba(15,23,41,.07); /* system extensions (design-doctrine rule 1 — radius scale, two easings, three durations) */ --radius-sm:8px; --radius-md:14px; --radius-lg:22px; --radius-pill:999px; --ease-out:cubic-bezier(.16,.9,.28,1); --ease-in-out:cubic-bezier(.65,0,.35,1); --dur-fast:.18s; --dur-med:.45s; --dur-slow:.9s; --page-max:1240px; --gutter:clamp(20px,4vw,56px); --section-y:clamp(64px,8vw,128px); } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} html,body{max-width:100%;overflow-x:hidden} body{margin:0;background:var(--white);color:var(--body);font-family:var(--sans); font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased} h1,h2,h3,h4{font-family:var(--disp);color:var(--ink);margin:0;line-height:1.15;font-weight:700} a{color:var(--teal)} img,svg{max-width:100%} button,input,textarea,select{font:inherit} .wrap{max-width:var(--page-max);margin-inline:auto;padding-inline:var(--gutter)} /* opacity-ramp utilities — one hue, five levels, on the garage's dark surface */ .on-g-100{color:var(--g-ink)} .on-g-86{color:color-mix(in srgb,var(--g-ink) 86%,transparent)} .on-g-70{color:color-mix(in srgb,var(--g-ink) 70%,transparent)} .on-g-55{color:color-mix(in srgb,var(--g-ink) 55%,transparent)} .g-line-14{border-color:color-mix(in srgb,var(--g-ink) 14%,transparent)} .g-line-8{border-color:color-mix(in srgb,var(--g-ink) 8%,transparent)} .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} :focus-visible{outline:3px solid var(--bright);outline-offset:2px;border-radius:6px} /* ================================================================== topbar */ .topbar{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.94); backdrop-filter:saturate(150%) blur(9px);border-block-end:1px solid var(--line)} .topbar .wrap{display:flex;align-items:center;gap:16px;block-size:62px} .topbar img{block-size:30px;inline-size:auto;display:block} .tb-sep{inline-size:1px;block-size:24px;background:var(--line)} .tb-txt{font-size:12.5px;color:var(--slate);line-height:1.3} .tb-txt b{color:var(--ink);font-weight:600} .tb-spacer{flex:1} .pill{display:inline-flex;align-items:center;gap:6px;border-radius:var(--radius-pill); padding:4px 11px;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase; white-space:nowrap} .pill-conf{background:var(--ochre-p);color:#8B5310;border:1px solid #EFD6AE} .pill-proto{background:var(--teal-p);color:var(--teal-d);border:1px solid #BFE0DB} .lang-seg{display:inline-flex;border:1px solid var(--line-d);border-radius:var(--radius-sm);overflow:hidden} .lang-seg button{border:0;background:#fff;padding:7px 12px;font-family:var(--sans);font-size:12px; font-weight:700;color:var(--slate);cursor:pointer} .lang-seg button+button{border-inline-start:1px solid var(--line)} .lang-seg button[aria-pressed="true"]{background:var(--teal);color:#fff} @media(max-width:640px){.tb-txt{display:none}} @media(max-width:480px){ .topbar .wrap{flex-wrap:wrap;block-size:auto;padding-block:10px;row-gap:8px;gap:10px} .topbar .tb-spacer{display:none} .topbar img{block-size:24px} } /* ================================================================== hero */ .hero{padding-block:44px 26px;border-block-end:1px solid var(--line)} .eyebrow{font-size:.8rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--teal); display:flex;align-items:center;gap:8px} .eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--teal);flex:0 0 6px; animation:pulse-dot 1.8s var(--ease-in-out) infinite} .hero h1{font-size:clamp(1.75rem,1.3rem+2.2vw,2.75rem);margin-block-start:10px;letter-spacing:-.02em} .hero h1 em{font-style:normal;color:var(--teal)} .rule{inline-size:62px;block-size:3px;background:var(--ochre);margin-block:16px 14px;border-radius:2px} .hero .lead{max-width:74ch;font-size:15.5px;color:var(--slate);margin:0;opacity:.92} .chips{display:flex;flex-wrap:wrap;gap:10px;margin-block-start:22px} .chip{border:1px solid var(--line);border-radius:10px;padding:9px 14px;background:var(--paper); min-inline-size:150px} .chip b{display:block;font-family:var(--disp);font-size:19px;color:var(--ink);line-height:1.1} .chip span{font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--slate-l); font-weight:600;display:block} /* ================================================================== stage layout */ .stage{display:grid;grid-template-columns:minmax(0,440px) minmax(0,1fr);gap:34px; align-items:start;padding-block:34px 10px} .tablet-col{position:sticky;top:80px;min-width:0} @media(max-width:1000px){ .stage{grid-template-columns:minmax(0,1fr);gap:26px} .tablet-col{position:static} } /* ================================================================== tablet device frame */ .device{width:100%;max-width:440px;margin-inline:auto} .bezel{background:#0A0A0A;border-radius:var(--radius-lg);padding:14px;box-shadow:var(--sh); border:1px solid #23262B;position:relative} .screen{position:relative;background:var(--g-bg);border-radius:var(--radius-md);overflow:hidden; isolation:isolate;height:620px;font-family:var(--sans);color:var(--g-ink);display:flex; flex-direction:column} .home-ind{position:absolute;inset-inline:0;bottom:6px;display:flex;justify-content:center;z-index:40; pointer-events:none} .home-ind i{display:block;width:96px;height:4px;border-radius:2px;background:rgba(247,250,248,.28)} .statusbar{block-size:34px;flex:0 0 34px;display:flex;align-items:center;justify-content:space-between; padding-inline:18px;font-size:11px;font-weight:600;letter-spacing:.02em;z-index:30;position:relative; font-family:var(--mono)} .statusbar .sb-r{display:flex;gap:6px;align-items:center;opacity:.85} .viewport{flex:1;overflow:hidden;position:relative;min-height:0} .scr{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch; display:none;flex-direction:column} .scr.on{display:flex} .scr::-webkit-scrollbar{width:0} .t-pad{padding:16px 18px} .tabbar{flex:0 0 60px;background:#111916;border-block-start:1px solid var(--g-line);display:flex; align-items:center;justify-content:space-around;padding-block-end:5px} .tab{background:none;border:0;color:color-mix(in srgb,var(--g-ink) 55%,transparent);font-family:var(--sans); font-size:9.5px;font-weight:600;display:flex;flex-direction:column;align-items:center;gap:3px; cursor:pointer;padding:6px 4px;letter-spacing:.03em} .tab i{font-style:normal;font-size:16px;line-height:1} .tab.on{color:var(--g-accent)} .t-lbl{font-size:10px;font-weight:700;letter-spacing:.13em;text-transform:uppercase; color:color-mix(in srgb,var(--g-ink) 55%,transparent)} .screen h2{font-family:var(--sans);color:var(--g-ink);font-size:19px;font-weight:700;letter-spacing:-.01em} .screen h3{font-family:var(--sans);color:var(--g-ink);font-size:13.5px;font-weight:700} .screen p{margin:0;font-size:12.5px;color:color-mix(in srgb,var(--g-ink) 70%,transparent);line-height:1.5} /* tablet form + button + card kit */ .t-btn{display:block;width:100%;border:0;border-radius:var(--radius-sm);padding:13px; font-family:var(--sans);font-size:13.5px;font-weight:700;cursor:pointer;letter-spacing:.03em; text-align:center;transition:filter var(--dur-fast) var(--ease-out)} .t-btn:hover{filter:brightness(1.08)} .t-btn:active{filter:brightness(.94)} .t-btn-primary{background:var(--g-accent);color:#241703} .t-btn-ghost{background:none;border:1px solid var(--g-line);color:color-mix(in srgb,var(--g-ink) 70%,transparent)} .t-field{margin-bottom:11px} .t-field label{display:block;font-size:10.5px;font-weight:600; color:color-mix(in srgb,var(--g-ink) 70%,transparent);margin-bottom:5px} .t-inp{width:100%;background:#101815;border:1px solid var(--g-line);border-radius:var(--radius-sm); padding:11px 12px;color:var(--g-ink);font-family:var(--sans);font-size:13.5px} .t-inp:focus{outline:2px solid color-mix(in srgb,var(--g-accent) 55%,transparent);outline-offset:-1px; border-color:var(--g-accent)} .t-inp::placeholder{color:color-mix(in srgb,var(--g-ink) 40%,transparent)} .t-card{background:var(--g-panel);border:1px solid var(--g-line);border-radius:var(--radius-md); padding:13px 14px} .t-card+.t-card{margin-block-start:9px} .t-row{display:flex;align-items:center;gap:10px} .t-row-b{display:flex;align-items:center;justify-content:space-between;gap:10px} .t-divider{block-size:1px;background:var(--g-line);margin-block:11px} .t-toggle{width:42px;height:24px;border-radius:var(--radius-pill);background:#2A332D;border:0; position:relative;cursor:pointer;flex:0 0 42px;transition:background var(--dur-fast) var(--ease-out)} .t-toggle::after{content:"";position:absolute;top:3px;inset-inline-start:3px;width:18px;height:18px; border-radius:50%;background:#fff;transition:transform var(--dur-fast) var(--ease-out)} .t-toggle.on{background:var(--g-accent)} .t-toggle.on::after{transform:translateX(18px)} html[dir="rtl"] .t-toggle.on::after{transform:translateX(-18px)} /* status + owner tags */ .stbadge{display:inline-flex;align-items:center;border-radius:var(--radius-pill);padding:3px 9px; font-size:9.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase; background:color-mix(in srgb,var(--g-ink) 12%,transparent); color:color-mix(in srgb,var(--g-ink) 86%,transparent)} .owner-tag{display:inline-flex;align-items:center;gap:5px;font-size:9.5px;font-weight:700; letter-spacing:.05em;text-transform:uppercase;color:color-mix(in srgb,var(--g-ink) 86%,transparent)} .owner-tag::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--dot,var(--slate-l)); flex:0 0 7px} .wait-fig{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:12px; color:color-mix(in srgb,var(--g-ink) 70%,transparent)} .aed{font-family:var(--mono);font-variant-numeric:tabular-nums} /* SLA burn-down ring — the one bit of motion that demonstrates the product */ @property --pct{syntax:'';inherits:true;initial-value:0} .sla-ring{--pct:0;width:46px;height:46px;border-radius:50%;flex:0 0 46px; background:conic-gradient(var(--dot,var(--own-insurer)) calc(var(--pct)*1%), var(--g-line) 0); transition:--pct var(--dur-slow) var(--ease-out);display:flex;align-items:center;justify-content:center} .sla-ring::after{content:'';width:34px;height:34px;border-radius:50%;background:var(--g-panel)} .sla-ring b{position:relative;z-index:1;font-family:var(--mono);font-size:9.5px;color:var(--g-ink)} /* yard board */ .t-search{width:100%;background:#101815;border:1px solid var(--g-line);border-radius:var(--radius-sm); padding:10px 12px;color:var(--g-ink);font-family:var(--sans);font-size:13px;margin-bottom:11px} .yard-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px} .yard-stats .ys{background:var(--g-panel);border:1px solid var(--g-line);border-radius:var(--radius-sm); padding:8px 9px} .yard-stats .ys b{display:block;font-family:var(--mono);font-size:15px;color:var(--g-ink)} .yard-stats .ys span{font-size:8.5px;letter-spacing:.08em;text-transform:uppercase; color:color-mix(in srgb,var(--g-ink) 55%,transparent);font-weight:700} #yard-board{display:grid;gap:8px} .job-card{background:var(--g-panel);border:1px solid var(--g-line);border-radius:var(--radius-md); padding:12px 13px;display:flex;flex-direction:column;gap:7px;cursor:pointer;text-align:start; width:100%;font-family:inherit;color:inherit} .job-card .jc-top{display:flex;align-items:center;justify-content:space-between;gap:8px} .job-card .plate{font-family:var(--mono);font-size:13.5px;font-weight:600;letter-spacing:.04em; color:var(--g-ink)} .job-card .cust{font-size:11.5px;color:color-mix(in srgb,var(--g-ink) 70%,transparent)} .job-card .jc-meta{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin-top:1px} /* default (light-surface) variant — used inside the white simulator panel */ .empty-hint{border:1px dashed var(--line-d);border-radius:var(--radius-md);padding:16px; text-align:center;font-size:12px;color:var(--slate-l)} /* dark-surface variant — automatically applies inside the tablet's --g-* screens */ .screen .empty-hint{border-color:var(--g-line);color:color-mix(in srgb,var(--g-ink) 55%,transparent)} /* job detail */ .job-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:12px} .job-head .jh-plate{font-family:var(--mono);font-size:17px;font-weight:600;color:var(--g-ink); letter-spacing:.03em} .kv{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:2px} .kv .k{font-size:10px;letter-spacing:.08em;text-transform:uppercase; color:color-mix(in srgb,var(--g-ink) 55%,transparent);font-weight:700;margin-bottom:2px} .kv .v{font-size:12.5px;color:var(--g-ink)} table.gt{width:100%;border-collapse:collapse;font-size:11.5px;margin-top:4px} table.gt th{text-align:start;padding:6px 7px;font-size:9px;letter-spacing:.08em;text-transform:uppercase; color:color-mix(in srgb,var(--g-ink) 55%,transparent);border-block-end:1px solid var(--g-line); font-weight:700} table.gt td{padding:7px;border-block-end:1px solid var(--g-line);color:var(--g-ink);vertical-align:top} table.gt td.num{font-family:var(--mono);text-align:end;font-variant-numeric:tabular-nums} #job-events{display:flex;flex-direction:column;gap:6px;margin-top:8px} .jev{font-size:11px;color:color-mix(in srgb,var(--g-ink) 70%,transparent);display:flex;gap:8px} .jev .jt{font-family:var(--mono);color:color-mix(in srgb,var(--g-ink) 45%,transparent);flex:0 0 auto; font-size:10px} /* actions centre */ .owner-filters{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:11px} .owner-filter{border:1px solid var(--g-line);background:transparent;border-radius:var(--radius-pill); padding:5px 10px;font-size:10.5px;font-weight:700;color:color-mix(in srgb,var(--g-ink) 70%,transparent); cursor:pointer;display:inline-flex;align-items:center;gap:6px} .owner-filter::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--dot)} .owner-filter[aria-pressed="true"]{background:var(--g-panel);color:var(--g-ink)} #actions-list{display:flex;flex-direction:column;gap:8px} .action-row{background:var(--g-panel);border:1px solid var(--g-line);border-radius:var(--radius-md); padding:11px 12px;display:flex;align-items:center;gap:11px; animation:action-drop var(--dur-med) var(--ease-out)} .action-row .at{flex:1;min-width:0} .action-row .at b{display:block;font-size:12.5px;color:var(--g-ink)} .action-row .at span{font-size:10.5px;color:color-mix(in srgb,var(--g-ink) 55%,transparent)} /* invoice */ .inv-lines{display:grid;gap:8px;margin:12px 0} .inv-line{display:flex;align-items:center;justify-content:space-between;font-size:12.5px; color:color-mix(in srgb,var(--g-ink) 86%,transparent)} .inv-line b{font-family:var(--mono);color:var(--g-ink);font-variant-numeric:tabular-nums} .inv-line.total{border-block-start:1px solid var(--g-line);padding-top:9px;margin-top:2px} .inv-line.total b{font-size:15px} .inv-split{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:12px} .inv-split .sp{background:var(--g-panel);border:1px solid var(--g-line);border-radius:var(--radius-md); padding:11px 12px} .inv-split .sp span{font-size:9.5px;letter-spacing:.08em;text-transform:uppercase; color:color-mix(in srgb,var(--g-ink) 55%,transparent);font-weight:700} .inv-split .sp b{display:block;font-family:var(--mono);font-size:16px;color:var(--g-ink);margin-top:3px} /* settings */ .conf-card{background:#111916;border:1px solid var(--g-line);border-radius:var(--radius-md); padding:13px;margin-top:9px} .conf-card .t-lbl{color:var(--g-accent)} .conf-card p{font-size:11px;color:color-mix(in srgb,var(--g-ink) 60%,transparent);margin-top:6px; line-height:1.55} /* ================================================================== simulator */ .sim{display:flex;flex-direction:column;gap:16px;min-width:0} .sim>*{flex:0 0 auto} .panel{border:1px solid var(--line);border-radius:var(--r);background:var(--white);overflow:hidden} .panel>header{padding:12px 16px;border-block-end:1px solid var(--line);background:var(--paper); display:flex;align-items:center;gap:10px;flex-wrap:wrap} .panel>header h3{font-size:13.5px;letter-spacing:-.01em} .panel>header .hint{font-size:11.5px;color:var(--slate-l);margin-inline-start:auto} .panel .bd{padding:16px} .scenarios{display:grid;gap:8px} .scenario{border:1px solid var(--line);border-radius:10px;padding:11px 13px;background:#fff; cursor:pointer;text-align:start;font-family:var(--sans);display:block;width:100%; transition:border-color var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out)} .scenario:hover{border-color:var(--line-d);background:var(--paper)} .scenario.on{border-color:var(--teal);background:var(--teal-p);box-shadow:inset 0 0 0 1px var(--teal)} .scenario b{display:block;font-size:13.5px;color:var(--ink);font-weight:600} .scenario .sub{display:block;font-size:11px;color:var(--slate-l);letter-spacing:.02em;margin-top:2px} .scenario .bl{display:block;font-size:12px;color:var(--slate);margin-top:7px;line-height:1.45} .scenario .control-tag{display:inline-block;margin-top:8px;font-size:10px;font-weight:800; letter-spacing:.08em;text-transform:uppercase;color:var(--ochre)} .ctl{display:flex;flex-wrap:wrap;gap:8px;align-items:center} .b{border:1px solid var(--line-d);background:#fff;border-radius:9px;padding:9px 14px;cursor:pointer; font-family:var(--sans);font-size:12.5px;font-weight:600;color:var(--ink); transition:all var(--dur-fast) var(--ease-out)} .b:hover{background:var(--paper)} .b:disabled{opacity:.42;cursor:not-allowed} .b[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff} .b-primary{background:var(--teal);border-color:var(--teal);color:#fff} .b-primary:hover{background:var(--teal-d)} .b-warn{background:var(--ochre);border-color:var(--ochre);color:#fff} .b-warn:hover{filter:brightness(1.06);background:var(--ochre)} .seg{display:inline-flex;border:1px solid var(--line-d);border-radius:9px;overflow:hidden} .seg button{border:0;background:#fff;padding:8px 11px;font-family:var(--sans);font-size:12px; font-weight:600;color:var(--slate);cursor:pointer} .seg button+button{border-inline-start:1px solid var(--line)} .seg button.on{background:var(--teal);color:#fff} .tele{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:1px; background:var(--line);border:1px solid var(--line);border-radius:10px;overflow:hidden} .tele div{background:#fff;padding:10px 12px} .tele b{display:block;font-family:var(--mono);font-size:16px;color:var(--ink);line-height:1.2; font-variant-numeric:tabular-nums} .tele span{font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--slate-l); font-weight:700} .tele .hot b{color:var(--ochre)} .tele .good b{color:var(--teal)} .logbox{height:220px;overflow-y:auto;border-block-start:1px solid var(--line);background:#0F1729; font-family:var(--mono);font-size:11px;padding:10px 12px} .logbox div{color:#A7B4C4;padding:1.5px 0;display:flex;gap:9px;line-height:1.45} .logbox .t{color:#5B6B80;flex:0 0 92px} .logbox .k-breach{color:#FCA5A5} .logbox .k-quiet{color:#5EEAD4} .logbox .k-daily{color:#FCD34D} .logbox .k-sys{color:#C4B5FD} .logbox .k-info{color:#A7B4C4} .tables-wrap{display:grid;gap:16px} .tbl-block h4{font-size:11.5px;font-family:var(--mono);color:var(--slate);letter-spacing:.02em; margin-bottom:6px;text-transform:lowercase} table.t{width:100%;border-collapse:collapse;font-size:12px;background:#fff;border:1px solid var(--line); border-radius:var(--r);overflow:hidden} table.t th{background:var(--teal);color:#fff;text-align:start;padding:8px 10px;font-size:10.5px; letter-spacing:.09em;text-transform:uppercase;font-weight:700} table.t td{padding:8px 10px;border-block-start:1px solid var(--line);vertical-align:top;color:var(--body); font-family:var(--mono);font-size:11.5px} table.t tr:nth-child(even) td{background:var(--paper)} table.t td:first-child{font-weight:600;color:var(--ink)} /* ================================================================== document sections */ section.blk{padding-block:var(--section-y);border-block-start:1px solid var(--line)} section.blk.alt{background:var(--paper)} .blk h2{font-size:clamp(1.25rem,1.05rem+1vw,1.75rem);letter-spacing:-.02em;margin-top:10px} .blk .lead{max-width:78ch;color:var(--slate);margin:10px 0 0;font-size:14.5px;opacity:.92} @keyframes pulse-dot{0%,100%{opacity:1}50%{opacity:.35}} /* wide-content scroll containers — the page itself must never scroll horizontally, but a table or evidence grid may scroll inside its own box (design-doctrine "Responsive" rule) */ .tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:22px;border-radius:var(--r)} .tbl-scroll table{margin-top:0} /* checks table */ table.checks{width:100%;min-width:640px;border-collapse:collapse;font-size:13px;background:#fff; border:1px solid var(--line);border-radius:var(--r);overflow:hidden} table.checks th{background:var(--teal);color:#fff;text-align:start;padding:10px 13px;font-size:10.5px; letter-spacing:.09em;text-transform:uppercase;font-weight:700} table.checks td{padding:11px 13px;border-block-start:1px solid var(--line);vertical-align:top; color:var(--body)} table.checks tr:nth-child(even) td{background:var(--paper)} table.checks td:first-child{font-weight:600;color:var(--ink);white-space:nowrap;font-family:var(--mono)} .tick{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:11px;letter-spacing:.05em; text-transform:uppercase;white-space:nowrap} .tick.pass{color:var(--teal)} .tick.wait{color:var(--slate-l)} .tick.dev{color:var(--ochre)} /* screens jump map */ .screenmap{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px} .sc-chip{border:1px solid var(--line);background:#fff;border-radius:9px;padding:8px 12px;font-size:12.5px; cursor:pointer;font-family:var(--sans);color:var(--ink);display:flex;align-items:center;gap:8px; transition:all var(--dur-fast) var(--ease-out)} .sc-chip:hover{border-color:var(--teal);background:var(--teal-p)} .sc-chip i{font-style:normal;width:19px;height:19px;border-radius:50%;background:var(--teal-p); color:var(--teal-d);font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center} /* architecture chain */ .chain{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:12px;margin-top:24px} .step{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:15px;position:relative} .step.key{border-color:var(--ochre);background:var(--ochre-p)} .step .n{width:24px;height:24px;border-radius:50%;background:var(--teal);color:#fff;font-size:11px; font-weight:800;display:flex;align-items:center;justify-content:center;margin-bottom:9px} .step.key .n{background:var(--ochre)} .step b{display:block;font-family:var(--disp);font-size:13.5px;color:var(--ink);margin-bottom:4px} .step p{margin:0;font-size:12.5px;color:var(--slate)} .step .key-tag{display:inline-block;margin-top:8px;font-size:9.5px;font-weight:800;letter-spacing:.08em; text-transform:uppercase;color:#8B5310} /* findings + generic cards */ .grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:16px;margin-top:24px} .crd{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:18px;position:relative} .crd::before{content:"";position:absolute;inset-block-start:0;inset-inline:0;height:3px; background:var(--teal);border-radius:var(--r) var(--r) 0 0} .crd.o::before{background:var(--ochre)} .crd h4{font-size:15px;margin-bottom:7px} .crd p{margin:0;font-size:13.5px;color:var(--slate)} .crd .fnum{font-family:var(--mono);font-size:11px;color:var(--slate-l);letter-spacing:.04em; display:block;margin-bottom:6px} .callout{border-inline-start:4px solid var(--ochre);background:var(--ochre-p); border-radius:0 10px 10px 0;padding:15px 18px;margin-top:24px} html[dir="rtl"] .callout{border-inline-start:4px solid var(--ochre)} .callout b{color:#8B5310} .callout p{margin:5px 0 0;font-size:13.5px;color:#5C4212} .note{font-size:12px;color:var(--slate-l);font-style:italic;margin-top:14px} /* arabic demo */ .ar-demo{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;margin-top:24px} .ar-card{background:var(--g-bg);border:1px solid var(--g-line);border-radius:var(--r);padding:18px; color:var(--g-ink)} .ar-card .ar-cap{font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase; color:color-mix(in srgb,var(--g-ink) 55%,transparent);margin-bottom:10px} .ar-card[dir="rtl"]{font-family:var(--sans);text-align:start} .ar-card .jc-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px} .ar-card .plate{font-family:var(--mono);font-size:14px;color:var(--g-ink)} /* footer */ footer.site{background:var(--teal-dd);color:#BDD6D1;padding-block:34px;margin-top:0} footer.site .wrap{display:flex;flex-wrap:wrap;gap:18px;align-items:center} footer.site b{color:#fff} footer.site .fl{flex:1;min-width:260px;font-size:13px;line-height:1.6} footer.site .fr{font-size:11.5px;color:#7FAFA6;text-align:end} @media(max-width:640px){footer.site .fr{text-align:start}} /* ================================================================== responsive */ @media(max-width:1023px){ .screen{height:560px} } @media(max-width:640px){ .wrap{padding-inline:16px} .screen{height:520px} .yard-stats{grid-template-columns:1fr 1fr} .kv{grid-template-columns:1fr} .inv-split{grid-template-columns:1fr} } @media(max-width:389px){ .chip{min-inline-size:0;flex:1 1 128px} .tele{grid-template-columns:repeat(2,1fr)} } /* ================================================================== motion */ @keyframes action-drop{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}} @keyframes flip-breach{0%{background:transparent}30%{background:color-mix(in srgb,var(--bad) 18%,transparent)}100%{background:transparent}} .row-breach{animation:flip-breach 1.1s var(--ease-out)} @keyframes blink-live{0%,100%{opacity:1}50%{opacity:.25}} .blink{width:6px;height:6px;border-radius:50%;background:var(--g-accent);animation:blink-live 1.4s infinite} @media(prefers-reduced-motion:reduce){ *{animation-duration:.001ms!important;transition-duration:.001ms!important} } /* ================================================================== i18n numeral safety UI-HOOKS finding: under dir="rtl" the phone field's leading "+" reorders against the digit runs (Unicode bidi), and the same risk applies to any other field that always holds Western numerals/codes. Scope kept narrow and precise — only elements guaranteed to hold numerals or short Western codes (never Arabic prose) get their direction pinned; item names, statuses, owner labels and log/event messages are left to flow naturally RTL. */ html[dir="rtl"] #in-phone, html[dir="rtl"] .num, html[dir="rtl"] .aed, html[dir="rtl"] .wait-fig, html[dir="rtl"] .tele b, html[dir="rtl"] #sb-time, html[dir="rtl"] #yard-clock-badge, html[dir="rtl"] .yard-stats .ys b, html[dir="rtl"] .sla-ring b, html[dir="rtl"] .logbox .t, html[dir="rtl"] .jev .jt{direction:ltr;unicode-bidi:isolate}