/* ============================================================================ INNOVOTE INVENTORY — VIEW 2 OF 3: «لابتوب باللمس» · THE TOUCH LAPTOP / TABLET THE VIEW THAT DID NOT EXIST, AND THE PERSON IT WAS BEING SERVED WRONG. Until this file there were two: a phone and a mouse. An iPad on a desk, a Surface with the keyboard folded back, a 12.9-inch tablet on a bench — every one of them has a COARSE primary pointer and therefore got the phone: 64 px buttons, 17 px body and eleven rows of stock on a fifteen-inch screen. That is not a smaller phone. It is a desk with a finger on it. WHAT IS ACTUALLY DIFFERENT, AND IT IS NOT THE FINGER. The contact patch of a fingertip is about the same nine to eleven millimetres wherever it lands, so the target CANNOT come down to the mouse's 32 px. What changes is everything around it: · the screen is on a table, not in a hand — it does not move while you aim · two hands are free, and one of them is not holding the device steady · office light, not a dim aisle · no glove — a glove belongs to the phone and the forklift, and that is exactly the case this view must never be guessed for · the eye is 55–65 cm away rather than 35–45, so type may not shrink as far as the mouse's does even though the conditions are better SO THE TARGETS LAND ON 44 / 48 / 56, and 44 is not an arbitrary midpoint: it is WCAG 2.5.5 Target Size (Enhanced), level AAA, and Apple's own 44 pt. EVERY TARGET IN THIS VIEW CLEARS THE STRICTEST BAR IN THE STANDARD — which is a claim the mouse view deliberately does not make, because a mouse does not need it. That is the line this view is drawn on: a finger, so AAA; at a desk, so no more than AAA. `--tap-gap` DOES NOT MOVE. It is 8 px here as it is on the phone, because the gap between two adjacent targets is a property of the finger and not of the furniture. The mouse view halves it; this one must not. WHEN THIS FILE IS LOADED. The server writes exactly one of two things: · nobody has chosen a view · this person chose «لابتوب» THE CONDITION, AND THE ONE HONEST WEAKNESS IN IT. screen and (pointer: coarse) and (min-width: 1024px) `pointer: coarse` is the same primary-input signal the mouse view uses, read the other way: this is a device being TOUCHED. The width is then the only signal CSS has for "and it is sitting on something" — there is no media feature for the physical size of a screen, `min-width` in `cm` is anchored to the 96 dpi reference pixel and not to the glass, and nothing reports how far away a face is. 1024 px is where a touched device stops being holdable in one hand. iPad mini in landscape is 1024, iPad Air 1180, iPad Pro 1366. Every phone this warehouse owns is 360–430, and no phone in any orientation comes close. AND HERE IS THE CASE IT CAN GET WRONG, NAMED RATHER THAN HIDDEN. A rugged Android tablet on a forklift — a Zebra ET40, a Honeywell EDA10A — reports 1280 logical pixels in landscape and is touched THROUGH A GLOVE at arm's length. It crosses this bar and it should not. The cost of the mistake is bounded and small: 48 px becomes 44 px, still AAA, and the body goes 17 to 16. The fix is one tap and it sticks to the PERSON, not to the handset: /screen, «موبايل», and every device that person signs in on is back on the 48 px floor. That is the whole reason the override exists, and it is why the automatic answer is allowed to be a guess at all. `any-pointer: fine` was considered as a second signal — "a touch device that also has a mouse attached is a 2-in-1" — and rejected. It misses a plain iPad, which is the commonest device in this class, and it lets a phone paired with any pointing accessory fall out of the 48 px floor. One number that can be explained to a warehouse manager beats two that cannot. THE TWO CONDITIONS CANNOT BOTH MATCH. This one requires `pointer: coarse`; view-desk.css requires `pointer: fine` or `pointer: none`. There is no device and no emulation where both files apply, which is why neither has to know the other's source order. ========================================================================= */ /* --------------------------------------------------------------------------- 1. TOKENS ------------------------------------------------------------------------ */ :root { /* --- TARGETS ------------------------------------------------------- 44 px is a fingertip on a screen that is not moving, and it is WCAG 2.5.5 AAA. 48 px is a list row in a task flow — the phone gives that job 56, because on a phone the row is also the scroll handle for a thumb that is doing everything one-handed. 56 px for the one primary action per screen: it is still the biggest thing on the page and it is still, at a desk, an unmissable target. `--tap-gap` holds at 8. See the header: the gap belongs to the finger. */ --tap: 2.75rem; /* 48 -> 44 */ --tap-lg: 3rem; /* 56 -> 48 */ --tap-xl: 3.5rem; /* 64 -> 56 */ /* --- TYPE ---------------------------------------------------------- 16 px, not 15. The mouse view can sit at 15 because a desktop screen is a fixed distance from a seated eye AND the reading conditions are ideal; a tablet is at the same distance with the same conditions but is held at a shallower angle and is more often in a room with a window behind it. 16 px is the step this scale has between them, and it is the size the brand's own long-form marketing body sits at. micro / 2xs / xs and `--fs-sm` are deliberately absent: 11–15 px are already at their floor, and a 15 px dense table cell read at 60 cm is the smallest thing this system is willing to print. */ --fs-md: 1rem; /* 17 -> 16 — BODY DEFAULT */ --fs-lg: 1.125rem; /* 20 -> 18 — card titles, list primary */ --fs-xl: 1.375rem; /* 24 -> 22 — screen titles */ --fs-2xl: 1.75rem; /* 30 -> 28 — section headings */ --fs-3xl: 2.125rem; /* 38 -> 34 — page display */ /* The data sizes. They exist to out-rank the row they sit in, and the row got shorter. `--fs-addr` stays the most prominent monospaced thing on a search result — a shelf address is read from a metre away on any device. */ --fs-qty: 1.5rem; /* 28 -> 24 */ --fs-qty-lg: 2.375rem; /* 44 -> 38 */ --fs-addr: 1.25rem; /* 22 -> 20 */ /* Leading. 1.55 is written for a 17 px line read while walking. Seated, at 16 px, it is loose — and loose leading is the single biggest reason a list of forty rows only shows eleven. 1.5 rather than the mouse view's 1.45, because the line is a pixel longer and the eye is further away. */ --lh-snug: 1.3; --lh-body: 1.5; /* --- SPACE --------------------------------------------------------- sp-1 and sp-2 hold, for the same reason they hold in the mouse view: 4 px is not a gap that can be halved. Everything above them compresses about 15 %, which is half of what the mouse gets, hardest in the middle of the scale — sp-3 and sp-4 are the row and card padding and that is where the rows come from. */ --sp-3: 0.625rem; /* 12 -> 10 */ --sp-4: 0.875rem; /* 16 -> 14 */ --sp-5: 1.0625rem; /* 20 -> 17 */ --sp-6: 1.25rem; /* 24 -> 20 */ --sp-7: 1.6875rem; /* 32 -> 27 */ --sp-8: 2.125rem; /* 40 -> 34 */ --sp-9: 2.5rem; /* 48 -> 40 */ --sp-10: 3.25rem; /* 64 -> 52 */ /* --- SHAPE --------------------------------------------------------- `--r-sm` holds at 10 px: it is the radius of an input and a keypad key, and those are still finger-sized here. The two above it come in one step, because a 20 px radius on a card is a phone tell and this is not a phone. */ --r-md: 12px; /* 14 -> 12 */ --r-lg: 16px; /* 20 -> 16 */ /* --- CHROME -------------------------------------------------------- Each of these is a band of colour across the whole window, and on a tablet in landscape the window is short: 56 + 80 is 136 px of an 800 px viewport spent on furniture before a single row of stock. */ --appbar-h: 3.25rem; /* 56 -> 52 */ --tabbar-h: 3.75rem; /* 64 -> 60 */ --actionbar-h:4.5rem; /* 80 -> 72 */ /* --- MEASURE --------------------------------------------------------- The same argument as the mouse view's `--w-task` and two rem wider, because the type inside it is a pixel bigger: a task screen carries no sidebar and no content wrapper, so without this a receive form on a 1366 px iPad is 1326 px wide with a 1326 px amber button pinned under it. */ --w-task: 46rem; /* 736 px — one task, one glance */ } /* Arabic, restated — see the note in view-desk.css. Cairo needs the room named rather than inherited: 1.78 here rather than the phone's 1.85 and the mouse view's 1.7, which is the same one-step-of-three this whole file is. */ :root:lang(ar), [lang="ar"], [dir="rtl"] { --lh-arabic: 1.78; --lh-body: var(--lh-arabic); --lh-snug: 1.45; } /* --------------------------------------------------------------------------- 2. WHAT THE TOKEN LAYER COULD NOT REACH The residue, exactly as in view-desk.css §2: the numbers written in a component because they are a RATIO to something rather than a step on a scale. A 1.25rem glyph inside a 48 px button is 42 % of it; inside a 44 px button it is 45 %, which is fine — so these move LESS than the mouse view's do, and several deliberately do not move at all. `.logo--wordmark { min-width: 120px }` and `.logo--mark { width: 24px }` are the brand's published on-screen minimums and are not touched at any density. ------------------------------------------------------------------------ */ /* Glyphs. One step, not two. */ .iconbtn__glyph { font-size: 1.15rem; } .tabbar__glyph { font-size: 1.25rem; } .shortcut__glyph { font-size: 1.35rem; } .fromto__arrow { font-size: 1.35rem; } .notice__glyph { font-size: 1.15rem; } .who__go { font-size: 1.15rem; } .empty__glyph, .scan__glyph { font-size: 2.15rem; } .doccard--add .doccard__thumb { font-size: 1.55rem; } /* Fixed-size objects: a picture beside a name, a face, a page thumbnail. */ .pid--result .thumb { inline-size: 2.4rem; block-size: 2.4rem; } .pid--header .thumb { inline-size: 3.9rem; block-size: 3.9rem; } .who__face { inline-size: 2.4rem; block-size: 2.4rem; } .auth__mark { inline-size: 3.5rem; } .doccard { inline-size: 5.9rem; } .viewer__pagethumb { inline-size: 2.3rem; } .sw__chip { block-size: 3rem; } .colpick__row input { inline-size: 1.2rem; block-size: 1.2rem; } .dash__addslot { min-height: 6.75rem; } /* Auto-fit tracks. The minimum in each was chosen against 17 px type. */ .shortcuts { grid-template-columns: repeat(auto-fit, minmax(5rem, 1fr)); } .gal__swatches { grid-template-columns: repeat(auto-fit, minmax(7.25rem, 1fr)); } .pid--header .pid__stats{ grid-template-columns: repeat(auto-fit, minmax(6rem, 1fr)); } /* TWO RULES view-desk.css NEEDS AND THIS FILE DOES NOT, RECORDED SO THE GAP IS A DECISION RATHER THAN AN OVERSIGHT. `.seg__btn` is `calc(var(--tap) - 8px)`. At the mouse's 32 px that gives 24, which is EXACTLY the WCAG 2.2 AA minimum and no headroom, so the mouse view has to shrink the inset. At 44 px it gives 36 and the expression is fine. `.tbl--dense` is `--sp-2 --sp-3`. At the mouse's density `--sp-3` collapses to 8, which is `--sp-2`, so the dense variant and the default table render identically and the mouse view has to restate it. Here `--sp-3` is 10 and `--sp-2` is 8: the modifier still modifies. */ /* The picker's scroller was 17rem because six 64 px rows is 384 px. A row is 48 px here, so 16rem shows eight and still leaves the field under it on screen. */ .picker__list { max-block-size: 16rem; } /* A CONTROL IS NOT A CONTAINER — the same finding as view-desk.css §2, and it is a WIDTH problem rather than a density one, which is why the numbers below are identical in both files rather than scaled. A `