/* Staff ERP styles. Institutional calm (§10.7): plain, quiet, phone-shaped. Colour only when it means something. RETARGETED ONTO THE BRAND TOKENS, brand/BRAND.md v1.1 §13.2 — "load tokens.css globally; remove all conflicting colours and fonts". Every selector below is the one that was here before, so no template changed; only the VALUES moved, from literals to `var(--…)`. The literals this file used (#1f3a5f, #1a2330, #f4f5f7 and a dozen greys) were a near-miss of the brand palette, which is the worst kind: close enough to look intentional, far enough to be wrong beside a logo drawn in #1E2F5C. Two rules from §6 are load-bearing and easy to undo by accident: * saffron and gold are DECORATIVE — never text on a light background. The old `.tile.warn` used #d9822b as text at 3.1:1. It is now the warning token (#8A5A00, 6.3:1), which is a status colour and is what that tile always meant. * status colour is never the only signal; the tiles and flags below keep their text label, which is what actually carries the meaning. */ * { box-sizing: border-box; } /* THE PAGE IS A COLUMN: bar, content, footer. `min-height: 100dvh` with the main flexing means a two-row screen puts the footer at the bottom of the VIEWPORT rather than floating it under the last table — and a long screen pushes it below the fold where it belongs. `dvh` rather than `vh` so a phone's collapsing address bar does not leave a strip of background. */ body { margin: 0; min-height: 100dvh; display: flex; flex-direction: column; background: var(--surface-subtle); } /* ---- the shell -------------------------------------------------------- */ /* STICKY, bar and strip together, so the mark is on screen at every scroll position (owner, 11 Sep). `top: 0` on the WRAPPER: sticking the bar alone would slide the 3px accent strip up underneath it. */ .app-bar { position: sticky; top: 0; z-index: 20; background: var(--surface-page); box-shadow: var(--shadow-1); } /* ONE ROW, and as short as the 40px mark allows: 40 + 8 + 8 = 56px, of which the mark is 40 and the air is 16. The owner asked for no wasted space above or below it and this is the floor that keeps §4's 32px minimum mark. */ .bar { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-2) var(--space-5); } .bar__id { display: inline-flex; align-items: center; gap: var(--space-3); text-decoration: none; flex: none; } /* 40px BOX drawing a 32px MARK — §4's floor for a desktop top bar, and the measurement is the one `publicsite/static/site.css` records: the symbol file bakes 10% padding top and bottom into its 1000-unit box, so the flame is 80% of whatever box it is given. A 32px box would draw a 25.6px mark and be UNDER-size. The ERP bar is compact, so it takes the floor where the public masthead takes the top of the range. */ .bar__mark { display: block; width: 40px; height: 40px; flex: none; } /* Cormorant Garamond 500 at 22px clears §5's "display face, >= 20px only". `lining-nums` is the token file's default for this family; there are no numerals in the word, so it is not restated. */ .bar__name { font-family: var(--font-display); font-weight: 500; font-size: var(--text-xl); line-height: 1; letter-spacing: .01em; color: var(--text-heading); } /* The nav takes the middle and is the only thing allowed to overflow. It scrolls sideways rather than wrapping, because a wrapping nav changes the bar's HEIGHT — and a sticky bar that grows when the window narrows eats the content area it is pinned above. Below 1100px it moves to its own row (query at the foot of this block), which is the honest fix at that width. */ .bar__nav { display: flex; align-items: center; gap: var(--space-1); flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; } .bar__nav::-webkit-scrollbar { display: none; } .bar__nav a { position: relative; white-space: nowrap; text-decoration: none; color: var(--text-secondary); font-size: var(--text-sm); font-weight: 500; padding: var(--space-3) var(--space-3); border-radius: var(--radius-sm); transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); } .bar__nav a:hover { color: var(--text-heading); background: var(--indigo-50); } /* The current section is marked TWICE — weight and colour, plus a 2px rule sitting on the bar's own bottom edge. `aria-current="page"` carries it for anyone not looking at colour, which is §6's rule read past its own heading: colour is never the only signal. */ .bar__nav a.is-on { color: var(--text-heading); font-weight: 600; } .bar__nav a.is-on::after { content: ""; position: absolute; left: var(--space-3); right: var(--space-3); bottom: calc(-1 * var(--space-2)); height: 2px; background: var(--sddt-indigo); border-radius: 2px; } .bar__who { display: flex; align-items: center; gap: var(--space-3); flex: none; padding-left: var(--space-4); /* Rule gold, hairline, divider — §6's only sanctioned use of it. */ border-left: 1px solid var(--sddt-rule-gold); } .bar__user { font-size: var(--text-xs); color: var(--text-secondary); max-width: 15ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Secondary button per §8: white with a border, never a second indigo fill competing with the page's own primary action. */ .bar__out { display: inline-flex; align-items: center; height: 28px; padding: 0 var(--space-3); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface-page); color: var(--text-secondary); font-size: var(--text-xs); font-weight: 600; text-decoration: none; transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); } .bar__out:hover { border-color: var(--sddt-indigo); color: var(--text-heading); } /* The 3px context strip (§8). No institution is in context in this shell, so it takes `--inst-accent`'s default — indigo — and lights up on its own the day a screen sets `data-institution` on the body. */ .bar__strip { height: 3px; background: var(--inst-accent); } /* Below 1100px the nav takes its own row — and WRAPS there rather than scrolling. Sideways scroll is the right safety valve on the single-row layout above, where the bar's height is the thing being protected; once the nav has a row of its own that argument is gone, and a section silently parked off the right edge is worse than a second line of links. Tested at 1000px, where "Go live" was the item falling off. */ @media (max-width: 1100px) { .bar { flex-wrap: wrap; row-gap: var(--space-1); } .bar__who { margin-left: auto; } .bar__nav { order: 3; flex-basis: 100%; flex-wrap: wrap; overflow: visible; padding-bottom: var(--space-1); } .bar__nav a { padding: var(--space-2) var(--space-3); } .bar__nav a.is-on::after { bottom: 2px; } } /* On a phone the bar is the mark, the name and the way out; the nav is a wrapped block beneath. Nothing is hidden behind a control that would need JavaScript under `script-src 'self'`. */ @media (max-width: 560px) { .bar { padding: var(--space-2) var(--space-4); gap: var(--space-3); } /* 36px BOX drawing a 28.8px MARK — §4's mobile range is 28-30px, and the file's baked 10% padding is what makes the box larger than the mark. */ .bar__mark { width: 36px; height: 36px; } /* THE NAME DOES NOT SHRINK. §5 is absolute about the display face: "Cormorant Garamond 500, >= 20px ONLY". An 18px "Samidha" would be a smaller type crime than a slightly wide bar, and at 22px the whole lockup is about 140px — it fits 390 with room over. */ .bar__who { padding-left: var(--space-3); } .bar__user { max-width: 9ch; } /* AND THE NAV GOES BACK TO ONE SCROLLING ROW. Wrapping is right at 1000px and wrong at 390: twelve sections wrap to THREE rows there, and a sticky header 370px tall on an 820px screen leaves no body to scroll — which is the opposite of what the owner asked the sticky bar for. Sideways scroll is also the native idiom on a phone, where it is not on a desktop. The header settles at about 100px: identity, one nav row, the strip. */ .bar__nav { flex-wrap: nowrap; overflow-x: auto; } main { padding: var(--space-5) var(--space-4) var(--space-7); } } /* ---- content ---------------------------------------------------------- */ /* 1200px, not 960. This is a desktop-first application (§8) whose widest screens are tables of employees, salary lines and punch rows; 960 was the public site's measure, where a 68ch paragraph is the widest thing on the page. `flex: 1` is what holds the footer down on short screens. */ main { flex: 1; width: 100%; max-width: 1200px; margin: 0 auto; padding: var(--space-6) var(--space-5) var(--space-8); } /* The display face, same as the public site's bands: Cormorant 500, indigo, lining figures. `h1`/`h2` already take the family from tokens.css; the sizes and the rhythm are set here so every one of the 45 screens agrees. */ h1 { font-size: var(--text-2xl); margin: 0 0 var(--space-5); } h2 { font-size: var(--text-xl); margin: var(--space-7) 0 var(--space-4); } h1 + .muted, h2 + .muted { margin-top: calc(-1 * var(--space-3)); } .muted { color: var(--text-muted); font-size: var(--text-sm); } /* The flash notice. It keeps the warning token it always carried — these are refusals and confirmations, not decoration — but reads as a card now, with the colour on a 3px left edge rather than as a full border. The text stays `--warning` (#8A5A00, 6.3:1 on its own tint); saffron and gold are still nowhere near it (§6). */ .flash { background: var(--warning-bg); border: 1px solid var(--border); border-left: 3px solid var(--warning); color: var(--warning); padding: var(--space-3) var(--space-4); font-size: var(--text-sm); border-radius: var(--radius-sm); margin-bottom: var(--space-4); box-shadow: var(--shadow-1); } /* §8: radius 16px on cards, 10px on controls, shadows subtle. The card was at the control radius, which made a 900px panel read like a large button. */ .card { background: var(--gray-0); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-5); box-shadow: var(--shadow-1); } .card.narrow { max-width: 360px; } /* ---- fields: A BOX AS WIDE AS THE THING IT HOLDS ----------------------- */ /* A 1,300px input for a ten-character PAN is not a neutral default; it is a statement that nobody thought about the field (owner, 11 Sep). These four widths are the whole system, and they are named after the DATA rather than after the layout, so a template says what a field holds and the sheet decides how wide that is. They are declared HERE and not in tokens.css: that file is LOCKED and pinned by proof 358, and these are new names rather than overrides of it. */ :root { --f-xs: 8rem; /* a date, a time, a PIN code, a two-digit count */ --f-sm: 12rem; /* PAN, TAN, Aadhaar, a telephone number, a money amount */ --f-md: 20rem; /* THE DEFAULT: a person's name, a username, an email */ --f-lg: 30rem; /* an address, a note, anything that is prose */ } label { display: block; margin: var(--space-4) 0; font-size: var(--text-sm); color: var(--text-secondary); } /* `width: 100%` with a `max-width` rather than a fixed width: the field fills a narrow column on a phone and stops growing on a desktop. */ input, select, textarea { display: block; width: 100%; max-width: var(--f-md); margin-top: var(--space-2); height: var(--control-h); padding: 0 0.55rem; border: 1px solid var(--border-strong); border-radius: var(--radius-md); font: inherit; color: var(--text-primary); background: var(--gray-0); transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); } /* TYPES THE BROWSER ALREADY TELLS US ABOUT — 44 date inputs, 22 number, 7 time, 3 month across the templates, every one of them previously full width. This is the largest single improvement in the sheet and it needed no template touched. */ input[type="date"], input[type="time"], input[type="month"] { max-width: var(--f-xs); } input[type="number"] { max-width: var(--f-sm); } /* Prose is the one thing that genuinely wants the room. */ textarea { height: auto; min-height: calc(var(--control-h) * 2); max-width: var(--f-lg); padding: 0.55rem; resize: vertical; } /* The explicit scale, for a field whose length the template knows and the type attribute does not — a PAN, a registration number, a PIN code. Set on the LABEL, because the label is what wraps the control. */ .f-xs input, .f-xs select, input.f-xs, select.f-xs { max-width: var(--f-xs); } .f-sm input, .f-sm select, input.f-sm, select.f-sm { max-width: var(--f-sm); } .f-lg input, .f-lg select, input.f-lg, select.f-lg { max-width: var(--f-lg); } .f-full input, .f-full select, .f-full textarea { max-width: none; } /* A field under the cursor, and the one being typed in, should say so — the focus ring is saffron per §6 and is set globally by tokens.css; this is the quieter hover and typing state beneath it. */ input:hover, select:hover, textarea:hover { border-color: var(--indigo-300); } input:focus, select:focus, textarea:focus { border-color: var(--sddt-indigo); } /* Checkboxes are not text fields and must never take a text field's width. */ input[type="checkbox"], input[type="radio"] { display: inline-block; width: auto; max-width: none; height: auto; margin-top: 0; } /* A CARD THAT IS A FORM IS A COLUMN, NOT A CANVAS. * * Every field inside already stops at its own width, so a full-bleed card left * them huddled at the left of a 1,200px white box — the same defect as the wide * input, one level up (owner, 11 Sep, on the Add-institute screen). * * THIS IS THE DEFAULT BECAUSE THE CENSUS SAYS IT SHOULD BE: of the 37 card * forms in the tree, 36 are a single column of fields and exactly ONE carries * anything wide. So the rule is the common case and the exception is named, * rather than a dozen templates each remembering to opt in. * * NO `auto` MARGINS HERE, deliberately. A form that is a SECTION of a longer * page — the add-institute form under its list, a masters panel under its * table — belongs on the page's reading line, under its own heading. Centring * it would leave the heading at the left and the card adrift in the middle. * `.form-col` below is for the other shape: a page that is ONLY a form. */ form.card { max-width: 34rem; } /* The one exception, and it is named: the user-creation form carries a row per role — a checkbox, the role's name and a scope select of institute names — and those rows measured 494px inside a 496px content box. Fitting by two pixels is not fitting, and a longer role or institute name would wrap it. A WIDER COLUMN, not an unbounded one: `none` here would put the form back across 1,200px, which is the defect this whole block exists to remove. */ form.card--wide { max-width: 48rem; } /* A PAGE THAT IS ONLY A FORM is centred, and the column wraps the HEADING WITH the form rather than the form alone — a centred card under a title pinned to the far left reads as two unrelated things on one page. */ .form-col { max-width: 34rem; margin-left: auto; margin-right: auto; } .form-col form.card { max-width: none; } button { margin-top: 1rem; height: var(--control-h); background: var(--action-primary); color: var(--action-primary-text); border: 1px solid transparent; padding: 0 var(--space-5); border-radius: var(--radius-md); font: 600 var(--body-size)/1 var(--font-ui); cursor: pointer; transition: background var(--dur-base) var(--ease); } button:hover { background: var(--action-primary-hover); } table { width: 100%; border-collapse: collapse; background: var(--gray-0); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; font-size: var(--body-size); box-shadow: var(--shadow-1); } th, td { text-align: left; padding: 0 var(--space-4); height: var(--row-h); border-bottom: 1px solid var(--gray-100); } /* The last row carries the table's own border; a second hairline on top of it reads as a stray rule under the final entry. */ tbody tr:last-child td { border-bottom: 0; } tbody tr:hover td { background: var(--gray-25); } th { background: var(--gray-50); font-weight: 600; font-size: var(--text-xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-secondary); white-space: nowrap; } .tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0.7rem; margin: 1rem 0; } .tile { background: var(--gray-0); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-4); font-size: var(--text-sm); color: var(--text-secondary); box-shadow: var(--shadow-1); } a.tile { transition: box-shadow var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease); } a.tile:hover { box-shadow: var(--shadow-2); border-color: var(--border-strong); } .tile .num { font-size: var(--text-2xl); font-weight: 600; color: var(--text-primary); } .tile.warn { border-color: var(--warning); } .tile.warn .num { color: var(--warning); } code { background: var(--gray-100); padding: 0.1rem 0.35rem; border-radius: var(--radius-sm); font-size: var(--text-xs); /* A long link in a box wraps rather than pushing the page wide. */ overflow-wrap: anywhere; } .card.slim { margin: 0.5rem 0 1rem; } /* A25's BRAND §8 pass (report 337): "primary = indigo fill; secondary = white with border; destructive = danger colour". The bare `button` is and stays the PRIMARY; these are the other two kinds, named, so that a screen with nine per-row actions is not nine indigo fills — §6's proportion is ~20% indigo, and the users screen was inverting it. Tokens only. */ button.secondary { background: var(--surface-page); color: var(--text-heading); border-color: var(--border-strong); } button.secondary:hover { background: var(--indigo-50); border-color: var(--sddt-indigo); } button.danger { background: var(--danger); color: var(--action-primary-text); } button.danger:hover { background: var(--danger-bg); color: var(--danger); border-color: var(--danger); } /* §8: controls are 34px in compact. A "small" button is NARROWER, never SHORTER — it used to be 27px tall, under the density's own floor. */ button.small { margin-top: 0; height: var(--control-h); padding: 0 var(--space-3); font-size: var(--text-sm); } .filter-row button { margin-top: 0; } /* A form that is a ROW OF ACTIONS inside a table cell — a reason and its button — sits on one line at control height, rather than a block-width input with the button dropped underneath it. */ form.actions { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0 var(--space-2) var(--space-1) 0; vertical-align: middle; } form.actions input, form.actions select { display: inline-block; width: auto; flex: 1 1 8rem; min-width: 8rem; max-width: var(--f-sm); margin: 0; } form.actions button { margin: 0; } /* A date is one token: it never breaks at its own hyphens in a narrow column. */ td.date { white-space: nowrap; } /* Money is read from the right (§5's tabular figures; the styleguide's `.amount`, which tokens.css gives the figures and this gives the edge). */ th.amount, td.amount { text-align: right; } /* A wide table scrolls inside its OWN box — the page never scrolls sideways (§8; the phone view of a seven-column queue was doing exactly that). */ .tablewrap { overflow-x: auto; margin-bottom: var(--space-4); } tr.inactive td { color: var(--text-muted); } .flag { background: var(--danger-bg); color: var(--danger); border: 1px solid var(--danger); padding: 0.1rem 0.4rem; border-radius: var(--radius-sm); font-size: var(--text-xs); font-weight: 600; } .filter-row { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; margin-bottom: 1rem; } .filter-row input, .filter-row select { width: auto; display: inline-block; margin: 0; } a.btn { display: inline-flex; align-items: center; background: var(--action-primary); color: var(--action-primary-text); padding: 0 var(--space-4); height: var(--control-h); border-radius: var(--radius-md); text-decoration: none; font-size: var(--text-sm); font-weight: 600; margin-left: auto; } a.btn:hover { background: var(--action-primary-hover); } details { margin: 0.8rem 0; } details summary { cursor: pointer; padding: 0.5rem 0; } label.inline { display: inline-block; margin-right: 1rem; } label.inline input { display: inline; width: auto; height: auto; } a.tile { text-decoration: none; color: inherit; } a { color: var(--link); } /* Stage 4H §D.6, as ruled by RULING_Stage_4H_CSP_2026-08-27.md §A.1.2: the six inline style="display:inline" attributes on paired action forms moved here, so `style-src 'self'` needs no 'unsafe-inline' exception. Behaviour and appearance are identical — this is a relocation, not a restyle. */ form.inline { display: inline; } /* ---- the footer ------------------------------------------------------- */ /* TWO LINES, and the width spent on words rather than on air (owner, 11 Sep). * * `sddt.in`'s footer is a centred stack on a tall indigo band — right for a * page a visitor reaches the bottom of once. This is the same band, the same * token, the same on-dark lockup, laid out as a ROW: lockup, attribution and * links on line one; the copyright on line two. `--space-5` top and bottom * against the public site's `--space-8`, because on a working screen a footer * is a signature, not a destination. * * White type on indigo is 13:1 and gold is 7:1 (§6). Nothing here is saffron, * which fails on both counts, and nothing here is an institution accent, which * §6 says falls below 3:1 on indigo. */ .foot { background: var(--surface-dark); color: var(--text-on-dark); padding: var(--space-5) var(--space-5); } .foot__in { max-width: 1200px; margin: 0 auto; } .foot__line { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; margin: 0; } .foot__lockup { display: block; width: 150px; height: auto; flex: none; } .foot__by { font-size: var(--text-sm); color: var(--text-on-dark); } /* `margin-left: auto` pushes the links to the far edge, which is what keeps line one from spending the middle of a 1200px band on nothing. */ .foot__links { margin-left: auto; display: flex; gap: var(--space-4); } .foot__links a { color: var(--text-accent-on-dark); font-size: var(--text-sm); text-decoration: none; } .foot__links a:hover { text-decoration: underline; } /* Gold is legible on indigo and is the only place either warm colour appears in this shell — the ~10% of §6's proportion, spent on two links and a hairline divider in the bar. */ .foot__legal { margin: var(--space-3) 0 0; font-size: var(--text-xs); color: var(--indigo-200); } @media (max-width: 700px) { .foot__links { margin-left: 0; flex-basis: 100%; } } /* SRS §7 (work order A25) — the certificate frame. Tokens only: the seal and the rules are brand ink; the document is a printed thing, so it is centred, narrow and quiet, and the on-screen note hides in print. */ .certificate { max-width: 44rem; margin: 1rem auto; padding: 2rem; background: var(--surface-page); border: 1px solid var(--border); } .certificate__head { text-align: center; border-bottom: 2px solid var(--sddt-indigo); padding-bottom: 1rem; } .certificate__seal { display: block; margin: 0 auto .5rem; } .certificate__institute { margin: 0; font-size: 1.4rem; color: var(--sddt-indigo); } .certificate__title { margin: 1rem 0 0; font-size: 1.1rem; letter-spacing: .08em; text-transform: uppercase; } .certificate__body { line-height: 1.7; padding: 1.5rem 0; } .certificate__foot { border-top: 1px solid var(--border); padding-top: 1rem; } .certificate__trust { text-align: center; margin-top: 1.5rem; } @media print { .print-hide, .bar, .bar__strip, nav, footer.site { display: none !important; } .certificate { border: 0; margin: 0; } } /* SCAN-TO-RECORD PHASE A (12 Sep 2026): the filmstrip's thumbnails, the cover sheet's QR and its print break. Sizes only — every colour is a token. */ img.thumb { max-height: 120px; } img.thumb-sm { max-height: 100px; } img.qr-img { width: 220px; height: 220px; } .sheet { page-break-after: always; } /* 344 §H.5 — the verification marks (BRAND §6: the success token, never a literal): "Verified ✓" italic in the brand's green; "Not verified" muted. */ .mark-ok { color: var(--success); font-style: italic; } .mark-no { color: var(--text-muted); } /* --------------------------------------------------------------------------- THE SALARY APPROVAL QUEUE — ruling 431 §D, and 435 §D.4's mobile shape. IT IS A LIST AND NOT A TABLE, ON PURPOSE. 435 §D.4: "on a narrow viewport it renders as stacked cards, never as a table", and a nine-column table on a phone is unusable — which is the screen the owner says he will live on. Building it as a list means the narrow case is the natural one rather than a rescue, and there is no horizontal scroll to suppress because there is no fixed-width grid underneath. TOKENS ONLY. `brand/BRAND.md` §6: there are no literal colours in these stylesheets and no new one may be added. TAP TARGETS. 435 §D.7 asks after minimum touch-target size on the primary action. The tick-box row is `--control-h` tall at minimum and the whole label is the target, so the thing a thumb lands on is the row, not a 13px square. The compact density's control height is the staff ERP's, and this screen keeps it. --------------------------------------------------------------------------- */ .queue { list-style: none; margin: var(--space-4) 0; padding: 0; } .queue__group { font-family: var(--font-display); font-size: var(--text-sm); text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--text-secondary); margin: var(--space-5) 0 var(--space-2); padding-bottom: var(--space-1); border-bottom: 1px solid var(--border); } .queue__row { display: grid; gap: var(--space-2) var(--space-4); grid-template-columns: minmax(0, auto) minmax(0, 1fr) minmax(0, auto); grid-template-areas: "pick who was" "trail trail trail"; align-items: center; padding: var(--space-3) 0; border-bottom: 1px solid var(--border); } .queue__pick { grid-area: pick; display: flex; align-items: center; gap: var(--space-2); min-height: var(--control-h); cursor: pointer; } .queue__amount { font-weight: 600; color: var(--text-primary); white-space: nowrap; } .queue__who { grid-area: who; min-width: 0; } .queue__who a { overflow-wrap: anywhere; } .queue__who .muted { display: block; font-size: var(--text-xs); } .queue__was { grid-area: was; font-size: var(--text-sm); color: var(--text-secondary); white-space: nowrap; } .queue__trail { grid-area: trail; font-size: var(--text-xs); overflow-wrap: anywhere; } .queue-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); } /* A PHONE HELD IN ONE HAND (435 §D.1): everything stacks, nothing needs a sideways scroll, and no affordance on this screen depends on `:hover` — there is no hover on a touchscreen and a hover-only detail is invisible. */ @media (max-width: 560px) { .queue__row { grid-template-columns: minmax(0, 1fr); grid-template-areas: "pick" "who" "was" "trail"; } .queue__was { white-space: normal; } } /* --------------------------------------------------------------------------- TOUCH TARGETS ON A COARSE POINTER — ruling 453 §C.3. The staff ERP runs at `--control-h: 34px` (the compact density, §8); the portal's comfortable figure is 44px. **RULED: on a coarse pointer, control height meets 44px. On a fine pointer the compact density survives unchanged.** A MEDIA QUERY, NOT A GLOBAL CHANGE, and the distinction is the ruling: a global raise would be a visual change across every screen of a 45-template application and is NOT authorised. The desk user keeps his density; the driver approving leave on a phone gets a target his thumb can hit. `pointer: coarse` is the right test rather than a width breakpoint — it asks what the person is POINTING WITH, so a small laptop window keeps the compact density and a large tablet gets the bigger targets. Width would answer the wrong question for both. `--row-h` moves with it: a 44px control in a 36px row overflows its own cell, and the two are a pair. --------------------------------------------------------------------------- */ @media (pointer: coarse) { [data-density="compact"] { --control-h: 44px; --row-h: 52px; } }