@layer utilities {
/* static/css/mobile.css — shared portrait/small-screen rules.
*
* Loaded by the admin panel, the provider portal and the public base template.
* Shell-specific mobile behaviour (the admin sidebar drawer, the tab overlay)
* stays inline in templates/admin/base.html — this file is only the rules that
* are identical everywhere.
*
* Breakpoint is Bootstrap's md (767.98px) so it lines up with col-md-*.
*/
@media (max-width: 767.98px) {
/* THE PAGE FRAME ON A PHONE (tokens.css owns the desktop values). A desk
gutter on a 390px screen spends a fifth of the width on air and pushes
the first row below the 140px chrome budget; 2px, which `.page-shell`
used before this, put cards against the glass. One small step each. */
:root {
--page-inset-block: var(--space-2);
--page-inset-inline: var(--space-3);
--page-gap: var(--gap-group);
}
/* ── Release the desktop viewport lock ────────────────────────────────
All three shells (admin, provider, HHN portal) pin the page to the
viewport — `height: 100%/100vh` with `overflow: hidden` — and delegate
scrolling to an inner container. That is a desktop layout. On a phone it
cuts off the bottom of every page (100vh excludes the browser chrome) and
stops the URL bar auto-hiding on scroll.
Below md the page scrolls normally instead. The admin shell also declares
this in its own block; repeating it here is deliberate so the HHN portal —
a standalone document with no base template — gets it too. */
html, body {
height: auto !important;
min-height: 100%;
overflow: visible !important;
}
/* ── Tables ───────────────────────────────────────────────────────────
Default treatment is a SCROLL CONTAINER, not a card transform. NN/g's
eye-tracking work on data tables finds a card presentation "requires
users to spatially reorient each time they move their eyes from one card
to another, making comparison tasks cognitively effortful and slow" —
and comparison, outlier-scanning and sorting are what this app's users
actually do. W3C SC 1.4.10 exempts data tables from reflow for the same
reason: the two-dimensional relationship carries meaning.
So wide tables scroll, inside a focusable labelled region, and only the
tables whose ROWS ARE ENTITIES YOU OPEN become `.rowcard` (below).
See plans/ui-revamp/RESEARCH-RESULTS-tables.md §1 and §3. */
.rt-scroll {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
/* Scroll must be DISCOVERABLE. A table sliced mid-column with no cue reads
as broken, not as "there is more this way" — which is the complaint that
every reachability check passes while the user still sees a defect.
W3C exempts data tables from reflow, so scrolling is correct; NN/g's
caveat is that it only works if the user can see that it scrolls.
Komarov's scrolling-shadows technique: the two white gradients are
`background-attachment: local` so they ride WITH the content and cover
the shadow when you are at that end; the two radial shadows are `scroll`
so they stay pinned to the edges. Net effect — a shadow appears only on
the side that has content off-screen. Pure CSS, no JS, no scroll
listener to keep in sync. */
.rt-scroll,
.table-responsive {
background: var(--scroll-cue-background);
background-repeat: no-repeat;
background-size: 36px 100%, 36px 100%, 12px 100%, 12px 100%;
background-attachment: local, local, scroll, scroll;
}
.rt-scroll:focus-visible {
outline: 2px solid var(--status-primary);
outline-offset: 2px;
}
/* Scrolling must be discoverable: a table cut off with no cue reads as a
broken layout rather than as more content. */
.rt-scroll { scrollbar-width: thin; }
/* ── .rowcard — the CPO/CCM entry row, generalised ─────────────────────
Cells declare a ROLE; the card composes them. The generic
`data-label` + `::before` stack — "ADDRESS 5500 Oakton St" on its own
line, once per column — is what the research offers cheaply and it reads
like a form dump. CPO/CCM does not label its lines, it composes them:
Abigail Osei 143
5500 Oakton St min
Dr. Smith · Demo Home Health C
Roles, applied to the | (DataTables copies them to every | ) or to
the cells directly:
.card-title identity — full width, carries the weight, opens the record
.card-line the one secondary fact worth a line of its own
.card-meta attribution — several of these sit on ONE line, joined by ·
.card-value the number that matters, pinned right in a fixed column
A cell with no role is HIDDEN. That makes "would a phone user act on
this?" an explicit decision per column rather than something that happens
by default — the opposite of stacking all eight and hoping. */
table.rowcard,
table.rowcard thead,
table.rowcard tbody,
table.rowcard tr,
table.rowcard td { display: block; width: 100%; }
table.rowcard thead { display: none; }
table.rowcard tr {
display: flex; flex-wrap: wrap; align-items: baseline;
gap: 2px var(--space-2);
padding: var(--space-3) var(--space-2);
border-bottom: 1px solid var(--border);
min-height: var(--control-height);
}
/* Unroled cells are cut, not stacked.
`background: transparent` is load-bearing: Bootstrap paints every cell
(`.table > :not(caption) > * > *` sets `--bs-table-bg`) while DataTables
tints the ROW, so opaque cells sat on a tinted row and every text block
came out with its own visible grey box. A card is one surface. */
table.rowcard td {
display: none; width: auto; border: none; padding: 0;
background: transparent !important;
/* DataTables 2.x paints stripe/hover/sorted-column with an INSET
BOX-SHADOW (`inset 0 0 0 9999px rgba(0,0,0,.02)`) on the CELL, not a
background — deliberately, so it composites over row colours. So
`background: transparent` alone left every value sitting in its own
grey box while computed `backgroundColor` read as transparent on all
375 elements. Both properties have to go. */
box-shadow: none !important;
}
/* `.rowcard` + `.table-dense` on the same table, which is the combination
PAGE-STANDARD §2 actually asks for: dense grid on desktop, card on a
phone. It did not work, and the reason is pure specificity.
`.table-dense > tbody > tr > td` is (0,1,3); `table.rowcard td` above is
(0,1,2). So the DESKTOP rule won inside the mobile media query and every
cell kept `height: var(--tbl-row-h)`, its cell padding and its own
bottom border — a card whose parts were each boxed and 34px tall. It
looked like the transform had not loaded at all.
Matching (0,1,3) and relying on mobile.css loading after tables.css is
enough; `!important` is not needed and would be harder to override on a
page that legitimately needs to. Nothing used `.rowcard` before the
provider portal, which is why this never surfaced. */
table.rowcard > tbody > tr > td {
height: auto;
padding: 0;
border: none;
vertical-align: baseline;
}
/* Zebra off in card mode — the border already separates cards, and a stripe
under a three-line card reads as a highlight rather than a row. */
table.rowcard tbody tr,
table.rowcard tbody tr.odd,
table.rowcard tbody tr.even { background: transparent !important; }
table.rowcard tbody tr:hover { background: var(--surface-sunken) !important; }
table.rowcard td.card-title {
/* Shares line one with the value: `flex: 0 0 100%` forced the value to
wrap onto its own row ABOVE the name, which read as a floating date. */
display: block; flex: 1 1 auto; min-width: 0;
order: 0;
font-size: var(--fs-md); font-weight: var(--fw-medium); color: var(--text);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Line one is `title … value` and ENDS there. Without this the break was
decided by how long the patient's name happened to be: flex breaks lines
on content width, and `margin-left: auto` on the value is applied AFTER
lines are formed, so short names left room and the metas rode up onto
line one — "Nolan, Dominic 07/28/2026 DEMO-0216 01/21/1934" — while
long names pushed them down. Same markup, two layouts, decided by data.
A zero-height full-width flex item is the only thing that forces a break
at a chosen point. Its `order` sits between the value (1) and everything
below (3, 4), which is why those two were renumbered. */
table.rowcard tr::after {
content: ''; flex: 0 0 100%; height: 0; order: 2;
}
table.rowcard td.card-line {
display: block; flex: 0 0 100%; order: 3;
font-size: var(--fs-sm); color: var(--text-muted);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Several metas share one line, separated the way prose would separate
them — not stacked with a label each. */
table.rowcard td.card-meta {
display: inline-block; flex: 0 0 auto; order: 4;
font-size: var(--fs-2xs); color: var(--text-subtle);
}
/* Separator BEFORE each meta after the first. `:last-of-type` counts every
| in the row — including the hidden ones — so it left a trailing `·`
on the last visible meta. A sibling combinator only sees the class. */
table.rowcard td.card-meta ~ td.card-meta::before {
content: '· '; color: var(--text-subtle);
}
/* The number, in a fixed column so values align down the list. */
/* Explicit order, because DOM order is column order and the value is rarely
column two. Line one is title + value; everything else wraps beneath. */
table.rowcard td.card-value {
display: block; flex: 0 0 auto; order: 1; margin-left: auto;
text-align: right; white-space: nowrap;
font-size: var(--fs-md); color: var(--text);
font-variant-numeric: tabular-nums;
}
/* One link colour per card, on the identity. The server renders most cells
as anchors, so a card came out with four blue values and nothing read as
more clickable than anything else — colour means "click here" only while
it is rare. Everything except the title inherits its cell's colour; the
whole row is the tap target anyway. */
table.rowcard td a { color: inherit; text-decoration: none; }
table.rowcard td.card-title a { color: var(--status-primary); }
/* `.cell-truncate` sets `max-width: 0` — the idiom that makes a cell
truncate under the AUTO TABLE layout algorithm, where 0 is read as "as
narrow as possible" and the column then takes its share. A `.rowcard` row
is `display: flex`, where `max-width: 0` means exactly what it says, so
the patient's name rendered at zero width and the card showed a bare
"45 min" with no idea who it belonged to.
The card roles already truncate (nowrap + ellipsis), so the table idiom is
simply switched off here rather than fought. */
table.rowcard td.cell-truncate { max-width: none; }
/* Labels belong to the generic stack, not to a composed card. */
table.rowcard td[data-label]::before { content: none !important; }
table.rowcard td:empty { display: none; }
/* ── Outer gutters ────────────────────────────────────────────────────
Two nested containers each add horizontal padding before a page's own
components add theirs: `.container-fluid` 9px + `.main-content` 12px, so
a list row starting with 12px of its own padding began 33px from the edge
— 42px of a 390px screen spent on margin, twice.
The outer two go to zero and components keep their own padding, which is
the phone convention (full-bleed surfaces, padded content) and gives the
width back to the data. Desktop is untouched. */
.container-fluid,
.main-content,
/* Bootstrap sizes every grid child with `.row > *` (specificity 0,1,1), which
outranks a bare `.main-content` and was the rule actually setting the 12px.
Matching its shape is what beats it. */
.row > .main-content,
.row > .col-12 {
padding-left: 0 !important;
padding-right: 0 !important;
}
/* The framed case is handled at the shell (admin/base.html,
`html.in-iframe .main-content-wrapper`) because it applies at every width,
not just here. Its rule is (0,2,1) with !important, which is why nothing
targeting `.main-content` alone could reach it. */
/* Bootstrap's grid is a MATCHED PAIR: `.container-*` adds horizontal padding
and `.row` cancels it with an equal negative margin, so the first and last
columns sit flush with the container's content box. Zeroing the padding
above without zeroing the margin left every `.row` hanging half a gutter
past the viewport — which is exactly why nine pages drifted by a uniform
6px or 9px (the two gutter values in use).
Columns keep their own padding, so content is still inset from the screen
edge; what is gone is the container's outer band, which is the point. */
.row {
margin-left: 0 !important;
margin-right: 0 !important;
}
/* Prose pages have no component padding of their own, so they keep a gutter. */
.main-content > .alert,
.main-content > .card,
.main-content > p,
.main-content > h1, .main-content > h2, .main-content > h3,
.main-content > h4, .main-content > h5, .main-content > h6 {
margin-left: var(--space-2);
margin-right: var(--space-2);
}
/* ── Touch targets ────────────────────────────────────────────────────
The 12px root leaves controls around 30px tall, under the ~44px needed for
a reliable finger target, so floor the interactive controls.
Deliberately NOT bumping the root font-size. That was tried and reverted:
73 form controls across 31 templates carry hardcoded pixel widths
(`style="width: 180px"`) calibrated against the 12px root. Scaling type by
~17% overflows those fixed widths and makes Bootstrap input-groups wrap
into a broken staircase — the toolbar on the Timetable page was the
clearest case. Type scale has to wait until those widths are tokenised. */
/* THE CONTROL FLOOR IS NOT HERE — it keys on POINTER, in tokens.css.
This block used to floor `.btn`/`.form-control`/`.form-select` to
`var(--touch-target)` by WIDTH, which is the wrong condition and the note
directly above already said so ("a touch device is a touch device at any
viewport width"). tokens.css line ~283 already applies
`min-height: var(--control-height)` under `@media (any-pointer: coarse)`,
so this was the duplicate that note warns about — two rules setting one
property.
What the duplicate actually did: browser zoom shrinks the CSS-px viewport,
so zooming a DESKTOP past ~190% drops it under 768px and fired a finger
floor at a mouse. MEASURED on the HDForms fill surface, no touch device:
input min-height 34px at 100-175% zoom, then 44px from ~190% on, with the
text still 16px — the box inflating around unchanged text. That is what
"if i zoom in too much, the textbox gets too big" was.
Real phones are unaffected: they match `any-pointer: coarse` at every zoom
level, so the 44px target comes from tokens.css exactly as before. */
/* THE 32px ROW-BUTTON FLOOR IS GONE, and it must not come back here.
`.table .btn, .btn-group-sm > .btn { min-height: 32px }` used to sit at
this point. Both selectors outrank the (0,1,0) floor in tokens.css, and
this sheet loads last, so it won: every table row action and every
segmented control measured 32px under a finger. The visual harness
measured the pair on /admin/patients and /provider/patients — the Card
and Table buttons, 32.0px tall at 390px with a coarse pointer — while
tokens.css already named `.table .btn` and `.btn-group-sm > .btn` in its
own floor list at var(--touch-target).
tokens.css floors them at 44px now, and it is the only rule that does.
Do NOT re-add a control height here, and do NOT key one on viewport
width: the block above records what that costs. Browser zoom shrinks the
CSS-px viewport, so a width-keyed floor fires a finger target at a
zoomed desktop mouse. The floor keys on pointer. */
/* NOTE: control font-size (the iOS zoom fix), control heights and the
standalone-action-link floor are NOT here. They live in tokens.css under
`@media (any-pointer: coarse)`, which is the better condition — a touch
device is a touch device at any viewport width. Adding a second copy here
was tried during the mobile audit and reverted: two rules setting the same
property is exactly what `check_shared_components.py` exists to stop, and
the duplicate silently lost to Bootstrap's `.form-select-sm` anyway. */
/* ── Overflow ─────────────────────────────────────────────────────────
Wide content scrolls inside its own container instead of pushing the
page sideways. */
.table-responsive {
overflow-x: auto !important;
-webkit-overflow-scrolling: touch;
}
/* Long pagination (20+ numbered links) overflows a phone. */
.pagination {
flex-wrap: wrap;
row-gap: var(--space-1);
}
/* Page toolbars are written as one non-wrapping flex row of fixed-width
controls (a 180px period picker + a 110px select + an action button is a
common shape). That comfortably exceeds a 375px phone, so the row overflows
and the action button falls off screen. Let these rows wrap instead.
.flex-nowrap opts a row out where wrapping would be wrong. */
/* Both shapes occur: a flex row *inside* a card section, and a card section
that is itself the flex row (` |