/* ═════════════════════════════════════════════════════════════════════ GDP — what the app needs that the S1 export did not deliver. Four things, each here because a real screen needs it and the delivered css/staff.css has no equivalent. Every one of them names why, so that when the next export lands it is obvious which of these it supersedes and which it does not. Linked AFTER css/staff.css and BEFORE css/staff-runner.css. ═════════════════════════════════════════════════════════════════════ */ /* 1. The grey flash iOS Safari paints over a tapped control. Carried over from the inline block this pass replaced — it applied to the whole staff surface then and still should, so it is here rather than in the runner-scoped file. */ * { -webkit-tap-highlight-color: transparent; } /* 2. The delivered .notice is display:flex, which beats the user agent's [hidden] { display: none }. Without this a notice built up front and held back until it has something to say is visible from first paint as an empty box. */ .notice[hidden] { display: none; } /* 3. An alert variant of the delivered .notice. The export dresses one notice — the calm accent-tinted one on the forced-password screen — and the login flow also has to say "that did not match". The tokens carry --ui-alert and --ui-alert-tint for exactly this and nothing in staff.css spends them, so this is the export's own palette rather than a new colour. #8C2317 on #F9EDEA measures 8.0:1, so unlike gold this one is legitimate as text on the light ground. The icon follows the text: staff.css pins .notice svg to --ui-text, which would leave a blue icon in a red box. */ .notice-alert { background: var(--ui-alert-tint); border-color: var(--ui-alert); color: var(--ui-alert); } .notice-alert svg { stroke: currentColor; } /* 4. A reveal control inside every password box. Not in the export. It is here because the screen that needs it most is the forced-password one: the requirement list asks for ten characters and an exact match between two boxes nobody can read, on a phone keyboard, and the alternative to showing the password is a person retyping it until the button lights up. The button is absolutely positioned inside the field rather than beside it, so the delivered .field keeps its own box: one control, no change to the shape staff.css draws. DIRECTION. The input carries dir="ltr" because a password is Latin, so ITS logical properties resolve left-to-right whatever the page is doing, while the button sits in the page's flow and mirrors with it. Those two disagree in Arabic — logical padding on the input would reserve space on the right while the button moved to the left, and the text would run underneath it. So the space is reserved in physical terms, per direction, which is the one place on this surface where that is the correct answer rather than a shortcut. */ .pw-field { position: relative; display: flex; } .pw-field input { flex: 1; min-width: 0; } .pw-field input[type="password"], .pw-field input[type="text"] { padding-right: 46px; } [dir="rtl"] .pw-field input[type="password"], [dir="rtl"] .pw-field input[type="text"] { padding-right: var(--space-4); padding-left: 46px; } .pw-reveal { position: absolute; inset-block: 0; inset-inline-end: 0; inline-size: 46px; display: flex; align-items: center; justify-content: center; padding: 0; border: none; background: none; cursor: pointer; color: var(--ui-text-3); } .pw-reveal:hover { color: var(--ui-text); } .pw-reveal svg { stroke: currentColor; } /* The ring goes inside the button. The tokens offset focus outlines by 2px, which on a control sitting flush in the corner of a field would draw the ring across the field's own border. */ .pw-reveal:focus-visible { outline-offset: -3px; } /* ── 5. the top bar (owner ruling 2026-08-10, items 1, 2 and 4) ── The header gains two rows: who is signed in with their controls, and the ruled autosave line under the progress bar. It is laid out as an explicit grid because the two new rows are APPENDED to the header in staff-app.js — a new static id would break the DOM shim every other suite renders this page through, so DOM order is [brand, meta, bar, idbar, saveline] and the grid puts them where they read instead. Every child is placed by name; nothing depends on document order. The controls are 44px tall on a handset. They are the two most consequential buttons on the surface — one leaves the account, one leaves the app — and a mis-tap on either is the kind a person does not forgive. */ .runner header { display: grid; grid-template-columns: 1fr auto; column-gap: 12px; align-items: start; } .runner .brand { grid-column: 1; grid-row: 1; min-width: 0; } .runner .brand h1 { overflow-wrap: anywhere; } .runner .idbar { grid-column: 2; grid-row: 1; justify-self: end; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; } .runner .meta { grid-column: 1 / -1; grid-row: 2; } .runner .bar { grid-column: 1 / -1; grid-row: 3; } .runner .saveline { grid-column: 1 / -1; grid-row: 4; } .runner .idbar[hidden] { display: none; } .runner .idbar .who { font-size: 12px; color: var(--ink-2); overflow-wrap: anywhere; } .runner .hdr-acts { display: flex; gap: 6px; } .runner .hdr-btn { font: inherit; font-size: 12.5px; line-height: 1; min-height: 44px; padding: 0 12px; background: transparent; border: 1px solid var(--line); border-radius: 8px; color: var(--ink-2); cursor: pointer; } .runner .hdr-btn:hover { color: var(--ink); border-color: var(--ink-2); } .runner .saveline { font-size: 12px; color: var(--ink-2); margin: 8px 0 0; } .runner .saveline[hidden] { display: none; } /* At a handset width the identity cannot share a line with the product name without one of them being squeezed to nothing, so it takes its own row and everything below it moves down one. */ @media (max-width: 520px) { .runner header { grid-template-columns: 1fr; } .runner .idbar { grid-column: 1; grid-row: 2; justify-self: start; justify-content: flex-start; margin-top: 8px; } .runner .meta { grid-row: 3; } .runner .bar { grid-row: 4; } .runner .saveline { grid-row: 5; } } /* ── handset tap targets (staff UX pass, 2026-08-01) ── The home card's "Continue →" is an inline text button; staff-runner.css gives it padding:0 and min-height:0, which leaves a ~20px strip to hit on a phone. This rule grows the touch area to ~44px (12px + ~20px text + 12px) without moving the visible text column: the +24px of vertical padding is cancelled by the -24px of vertical margin, so the card's exported rhythm is unchanged and the target is real. `button.cta` (0,3,1) beats staff-runner.css's `.runner .card .cta` (0,3,0), which is why this must out-specify rather than merely follow it — the .cta is always a