into a flexbox container ONLY when it
has a leading checkbox or image. The promoted-cell display rules use
adjacent-sibling selectors (no :has()) so iOS Safari ≥ 13 works.
─────────────────────────────────────────────────────────────────── */
/* Default (desktop): the Order Items title cell ships a synthesized
mobile subtitle (.oi-mobile-sub) that's hidden on wide screens —
desktop has its own dedicated columns, no duplication. */
.oi-mobile-sub { display: none; }
.oi-mobile-status { display: none; }
.oi-mobile-item { display: none; }
@media (hover: none) and (pointer: coarse), (max-width: 768px) {
/* ── A. Tighten cards that carry a leading slot ─────────────────────
Use flexbox to lock the leading column(s), title stack and trailing
chevron into a single row. Inner blocks then render as plain blocks. */
#module-workspace table tbody tr.row-has-checkbox,
#module-workspace table tbody tr.row-has-image {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
min-height: 80px;
}
/* ── B. Leading checkbox slot (22px circular, 44px tap target) ─────
Apple HIG 44pt minimum is met via padding around a visually 22px
control. Keep it neutral — colours come from the global form sheet. */
#module-workspace table tbody tr.row-has-checkbox > td.col-checkbox {
display: flex;
flex: 0 0 auto;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
padding: 0;
margin: 0;
border: 0;
position: static; /* override legacy absolute pin */
}
#module-workspace table tbody tr.row-has-checkbox > td.col-checkbox::before { content: none; }
#module-workspace table tbody tr.row-has-checkbox > td.col-checkbox input.row-checkbox {
width: 22px;
height: 22px;
margin: 0;
cursor: pointer;
accent-color: var(--info, #2563eb);
}
/* ── C. Leading thumbnail slot (48×48 rounded, lazy-loaded by JS) ──
When both checkbox and image are present the image is the cell that
immediately follows .col-checkbox. When only image is present it's
td:first-child. Both selectors land here. */
#module-workspace table tbody tr.row-has-image > td:first-child:not(.col-checkbox),
#module-workspace table tbody tr.row-has-image > td.col-checkbox + td {
display: flex;
flex: 0 0 auto;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
padding: 0;
margin: 0;
border: 0;
background: var(--surface-sunken, #f5f5f4);
border-radius: 8px;
overflow: hidden;
}
#module-workspace table tbody tr.row-has-image > td:first-child:not(.col-checkbox) > img.row-thumb,
#module-workspace table tbody tr.row-has-image > td.col-checkbox + td > img.row-thumb {
width: 48px !important;
height: 48px !important;
border-radius: 8px;
object-fit: cover;
display: block;
}
#module-workspace table tbody tr.row-has-image > td:first-child:not(.col-checkbox)::before,
#module-workspace table tbody tr.row-has-image > td.col-checkbox + td::before { content: none; }
/* ── D. Title cell — promoted from the cell that follows the leading
slot(s). Material 3: weight 500, body-large size. */
/* D1. Has checkbox + image → title is the 3rd | . */
#module-workspace table tbody tr.row-has-checkbox.row-has-image > td.col-checkbox + td + td {
display: block;
flex: 1 1 auto;
min-width: 0;
padding: 0;
margin: 0;
border: 0;
font-weight: 700;
font-size: 16px;
line-height: 1.3;
color: var(--text, #1c1917);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-align: left;
}
/* D2. Has checkbox only → title is the 2nd | . */
#module-workspace table tbody tr.row-has-checkbox:not(.row-has-image) > td.col-checkbox + td {
display: block;
flex: 1 1 auto;
min-width: 0;
padding: 0;
margin: 0;
border: 0;
font-weight: 700;
font-size: 16px;
line-height: 1.3;
color: var(--text, #1c1917);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-align: left;
}
/* D3. Has image only (no checkbox) → title is the 2nd | . */
#module-workspace table tbody tr.row-has-image:not(.row-has-checkbox) > td:first-child + td {
display: block;
flex: 1 1 auto;
min-width: 0;
padding: 0;
margin: 0;
border: 0;
font-weight: 700;
font-size: 16px;
line-height: 1.3;
color: var(--text, #1c1917);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-align: left;
}
/* Suppress data-labels on promoted cells. */
#module-workspace table tbody tr.row-has-checkbox.row-has-image > td.col-checkbox + td + td::before,
#module-workspace table tbody tr.row-has-checkbox:not(.row-has-image) > td.col-checkbox + td::before,
#module-workspace table tbody tr.row-has-image:not(.row-has-checkbox) > td:first-child + td::before { content: none; }
/* When a promoted title cell hosts a synthesized .oi-mobile-sub line,
* the single-line nowrap+ellipsis treatment from D1/D2/D3 above clips
* the wrapping metadata chips to one line — they overflow off-screen
* (Export Entries had this: long item names like "MEN POLISHED LACE"
* spilled past the card's right edge). Allow wrapping in that case. */
#module-workspace table tbody tr.row-has-checkbox.row-has-image > td.col-checkbox + td + td:has(.oi-mobile-sub),
#module-workspace table tbody tr.row-has-checkbox:not(.row-has-image) > td.col-checkbox + td:has(.oi-mobile-sub),
#module-workspace table tbody tr.row-has-image:not(.row-has-checkbox) > td:first-child + td:has(.oi-mobile-sub) {
white-space: normal !important;
overflow: visible !important;
text-overflow: clip !important;
}
/* Each flex item inside the sub strip must be allowed to break, otherwise
* a long single-word chip ("MEN POLISHED LACE") becomes one unbreakable
* flex item that overflows the card width. min-width:0 + word-break let
* flex resolve overflow correctly. */
.oi-mobile-sub > * {
min-width: 0;
max-width: 100%;
overflow-wrap: anywhere;
word-break: break-word;
}
/* The dot separators must NOT wrap (orphan dots look wrong). */
.oi-mobile-sub .oi-sub-dot { flex: 0 0 auto; }
/* ── D-mobile-sub: Order Items title cell carries a synthesized
subtitle line (customer · design# · yards · type pill). On
desktop the subtitle is hidden — desktop has dedicated columns.
On mobile (≤768px) we surface it so the card row shows actual
useful info beyond just the order number.
The .oi-mobile-title becomes block + ellipsis, then .oi-mobile-sub
wraps with smaller muted text and inline pills for UNIFORM/REPEAT. */
#module-workspace table tbody tr.row-has-checkbox.row-has-image > td.col-checkbox + td + td,
#module-workspace table tbody tr.row-has-checkbox:not(.row-has-image) > td.col-checkbox + td,
#module-workspace table tbody tr.row-has-image:not(.row-has-checkbox) > td:first-child + td {
/* Title cell becomes vertical so subtitle stacks below the order#. */
display: flex !important;
flex-direction: column;
/* min-width:0 lets the inner .oi-mobile-sub (flex-wrap: wrap) actually
shrink below its intrinsic width. Without it, rows carrying the red
UNIFORM pill spilled past the right edge of the card on phones (e.g.
Order Items row 8002). The default flex min-width is `auto` which
resolves to the content's intrinsic size and prevents wrapping. */
min-width: 0;
justify-content: center;
gap: 3px;
align-items: flex-start;
/* Allow text to wrap onto multiple lines so long customer +
design strings still fit on a phone screen. */
white-space: normal !important;
overflow: visible !important;
line-height: 1.25;
}
.oi-mobile-title {
font-weight: 700;
font-size: 17px;
color: var(--text, #1c1917);
line-height: 1.15;
letter-spacing: -0.01em;
}
.oi-mobile-sub {
display: flex !important;
flex-wrap: wrap;
/* Stretch to title-cell width. Without this, the parent title cell's
`align-items: flex-start` (styles.css:8186) makes column-flex children
size to intrinsic content width — so .oi-mobile-sub keeps its full
unwrapped width and never triggers flex-wrap. The UNIFORM pill then
spilled past the viewport. align-self overrides parent align-items
for THIS child only; keeps the title text left-aligned as intended. */
align-self: stretch;
width: 100%;
min-width: 0;
align-items: center;
gap: 4px 8px;
font-size: 12.5px;
color: var(--text-secondary, #57534e);
font-weight: 500;
margin-top: 1px;
line-height: 1.25;
}
/* Dedicated status sub-line — always rendered on its own row so a
* UNIFORM/REPEAT chip on the main .oi-mobile-sub line cannot squeeze
* the GH ready status off the wrap. */
.oi-mobile-status {
display: flex !important;
margin-top: 3px;
line-height: 1.25;
}
.oi-mobile-status .oi-sub-pill {
display: inline-flex;
align-items: center;
padding: 2px 8px;
border-radius: 999px;
font-size: 10.5px;
font-weight: 700;
letter-spacing: .04em;
border: 1px solid transparent;
}
.oi-mobile-sub .oi-sub-customer {
color: var(--text, #1c1917);
font-weight: 600;
}
.oi-mobile-sub .oi-sub-design {
font-family: "JetBrains Mono", ui-monospace, monospace;
font-size: 11.5px;
color: #6b21a8;
background: rgba(168,85,247,.10);
border: 1px solid rgba(168,85,247,.25);
border-radius: 6px;
padding: 1px 6px;
}
.oi-mobile-sub .oi-sub-yards {
font-variant-numeric: tabular-nums;
color: var(--text-secondary, #57534e);
font-weight: 600;
}
.oi-mobile-sub .oi-sub-dot {
color: var(--line, #d6d3d1);
font-weight: 700;
}
/* Pill base + UNIFORM/REPEAT modifiers — unscoped so the same pill looks
identical whether it sits in .oi-mobile-sub (export-entries) or in its
own .oi-mobile-status line (order_items v24.7+). Previously these were
scoped to `.oi-mobile-sub .oi-sub-pill--uniform` and the order_items
pill lost its red colour when promoted to its own line. */
.oi-sub-pill {
display: inline-flex;
align-items: center;
padding: 2px 8px;
border-radius: 999px;
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.02em;
line-height: 1.4;
white-space: nowrap;
}
.oi-sub-pill--uniform {
background: #dc2626;
color: #fff;
box-shadow: 0 1px 2px rgba(220,38,38,.25);
}
.oi-sub-pill--repeat {
background: rgba(99,102,241,.14);
color: #4338ca;
border: 1px solid rgba(99,102,241,.25);
}
/* Item-name secondary line — small muted text, can wrap on long names
like "MEN POLISHED LACE". Renders below the metadata strip and above
the .oi-mobile-status pill line. */
.oi-mobile-item {
display: block;
margin-top: 2px;
font-size: 11.5px;
font-weight: 500;
color: var(--text-secondary, #57534e);
line-height: 1.25;
text-transform: uppercase;
letter-spacing: 0.03em;
white-space: normal;
overflow-wrap: anywhere;
word-break: break-word;
}
/* ── E. Trailing slot — keep chevron from legacy ::after; just make
room and align it vertically inside the flex row. */
#module-workspace table tbody tr.row-has-checkbox,
#module-workspace table tbody tr.row-has-image {
padding-right: 30px; /* room for the ::after chevron */
}
#module-workspace table tbody tr.row-has-checkbox::after,
#module-workspace table tbody tr.row-has-image::after {
top: 50%;
margin-top: -5px; /* center the 9px caret on the row */
right: 14px;
}
#module-workspace table tbody tr.row-has-checkbox.card-open::after,
#module-workspace table tbody tr.row-has-image.card-open::after {
margin-top: -2px; /* nudge after rotation */
}
/* ── F. Pressed/active state for tactile feedback (iOS HIG). */
#module-workspace table tbody tr.row-has-checkbox:active,
#module-workspace table tbody tr.row-has-image:active {
background: var(--surface-sunken, #f5f5f4);
}
/* ── G. Card-open: expose remaining cells as a label/value grid below
the flex row. Because the parent is display:flex, opened cells need
flex-basis 100% to wrap to their own line. */
/* G1. checkbox + image → grid starts at 4th td. */
#module-workspace table tbody tr.row-has-checkbox.row-has-image.card-open > td:nth-child(n+4) {
display: grid;
flex: 1 1 100%;
grid-template-columns: minmax(100px, 40%) 1fr;
gap: 6px 12px;
padding: 8px 0;
margin-top: 6px;
border-top: 1px dashed var(--line);
font-size: var(--fs-caption);
}
/* G2. checkbox only → grid starts at 3rd td. */
#module-workspace table tbody tr.row-has-checkbox:not(.row-has-image).card-open > td:nth-child(n+3) {
display: grid;
flex: 1 1 100%;
grid-template-columns: minmax(100px, 40%) 1fr;
gap: 6px 12px;
padding: 8px 0;
margin-top: 6px;
border-top: 1px dashed var(--line);
font-size: var(--fs-caption);
}
/* G3. image only → grid starts at 3rd td. */
#module-workspace table tbody tr.row-has-image:not(.row-has-checkbox).card-open > td:nth-child(n+3) {
display: grid;
flex: 1 1 100%;
grid-template-columns: minmax(100px, 40%) 1fr;
gap: 6px 12px;
padding: 8px 0;
margin-top: 6px;
border-top: 1px dashed var(--line);
font-size: var(--fs-caption);
}
#module-workspace table tbody tr.row-has-checkbox.row-has-image.card-open > td:nth-child(n+4)::before,
#module-workspace table tbody tr.row-has-checkbox:not(.row-has-image).card-open > td:nth-child(n+3)::before,
#module-workspace table tbody tr.row-has-image:not(.row-has-checkbox).card-open > td:nth-child(n+3)::before {
content: attr(data-label);
font-size: var(--fs-label);
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--muted, #78716c);
align-self: center;
}
/* Cells without labels span full width. */
#module-workspace table tbody tr.row-has-checkbox.card-open > td:not([data-label]),
#module-workspace table tbody tr.row-has-image.card-open > td:not([data-label]),
#module-workspace table tbody tr.row-has-checkbox.card-open > td[data-label=""],
#module-workspace table tbody tr.row-has-image.card-open > td[data-label=""] {
grid-template-columns: 1fr;
}
}
/* ─── Mobile multi-select — explicit "Select" mode ──────────────────────
Earlier (May-6) we hid every multi-select affordance on mobile PWA
because batch ops on touch led to accidental bulk edits. Reinstating
them with an explicit two-step entry: user must tap the header
"Select" chip → checkboxes appear → row-tap toggles → "Done" exits.
Same pattern as Apple Mail/Notes/Files + Material 3 selection mode.
Gated on `body.has-bottom-nav` (covers PWA standalone + mobile browser
tab — wherever the bottom-nav is rendered, this rule applies). */
@media (max-width: 768px) {
/* Default mobile (no select mode): hide multi-select chrome to keep
the "no accidental bulk edits" guarantee from the May-6 fix. */
body.has-bottom-nav #module-workspace:not([data-select-mode="1"]) #lst-batch-bar,
body.has-bottom-nav #module-workspace:not([data-select-mode="1"]) th.col-checkbox,
body.has-bottom-nav #module-workspace:not([data-select-mode="1"]) td.col-checkbox,
body.has-bottom-nav #module-workspace:not([data-select-mode="1"]) input.row-checkbox,
body.has-bottom-nav #module-workspace:not([data-select-mode="1"]) input.row-checkbox-all {
display: none !important;
}
/* In select mode: dim filter chips so they can't be tapped mid-select
(would silently shrink the visible set and lose half the picks). */
body.has-bottom-nav #module-workspace[data-select-mode="1"] #lst-chips {
opacity: .55;
pointer-events: none;
}
/* In select mode: floating batch bar sits ABOVE the bottom-nav (76px
tall + safe-area). z-index 99 = just below nav's 100 so an edge-tap
can never block the nav exit. Buttons wrap to 2 rows on narrow
phones (count + select + Apply on row 1, the rest on row 2). */
body.has-bottom-nav #module-workspace[data-select-mode="1"] #lst-batch-bar {
position: fixed;
left: 12px;
right: 12px;
bottom: calc(76px + env(safe-area-inset-bottom, 0px) + 6px);
top: auto;
z-index: 99;
margin: 0;
flex-wrap: wrap;
gap: 6px;
padding: 10px 12px;
border-radius: 14px;
box-shadow: 0 -2px 12px rgba(0,0,0,.10),
0 8px 24px rgba(0,0,0,.18);
background: var(--surface);
border: 1px solid var(--line);
max-width: none;
}
/* Reserve scroll space so the last list row clears the floating bar.
v30.3 fix: only apply when the bar is actually visible (has at
least one selected row). Earlier v30.2 gate on data-list-select-
mode="1" alone applied 320px padding the instant the user tapped
"Select" — before any row was picked — leaving a huge blank below
the list with no bar in sight.
body is the actual scroll container (overflow:visible everywhere
inside), so the reserve is mirrored on body / .main / #module-
workspace to be sure it lands wherever scroll-max maths happens. */
body.has-bottom-nav[data-list-batch-bar="visible"],
body.has-bottom-nav[data-list-batch-bar="visible"] .main,
body.has-bottom-nav[data-list-batch-bar="visible"] #module-workspace {
padding-bottom: var(--batch-bar-pad-bottom,
calc(320px + env(safe-area-inset-bottom, 0px))) !important;
}
/* scroll-padding-bottom is the CSS-spec answer for "leave room at the
bottom of the scroller for elements scrolled into view". */
body.has-bottom-nav[data-list-batch-bar="visible"] {
scroll-padding-bottom: var(--batch-bar-pad-bottom,
calc(320px + env(safe-area-inset-bottom, 0px)));
}
/* Show the "Select" chip in the section header — only when there's a
bottom-nav (i.e. mobile). Desktop hides it via the parent gate. */
body.has-bottom-nav .lst-select-toggle { display: inline-flex !important; }
/* Active-state styling for the chip when select mode is on. */
body.has-bottom-nav .lst-select-toggle--active {
background: var(--primary);
color: #fff;
border-color: var(--primary);
}
/* Compact bar at narrow widths — keep buttons reachable, never clip. */
#lst-batch-bar > * { flex: 0 0 auto; min-width: 0; }
#lst-batch-bar .batch-action-bar__count { font-size: 12px; padding: 5px 9px; }
#lst-batch-bar button,
#lst-batch-bar select { font-size: 13px; padding: 7px 10px; min-height: 40px; }
}
/* At iPhone-SE-class widths (≤380px), collapse the long Customer/
Production labels to short ones so the bar stays ≤2 rows. */
.lbl-long { display: inline; }
.lbl-short { display: none; }
@media (max-width: 380px) {
.lbl-long { display: none; }
.lbl-short { display: inline; }
}
/* ─── iOS PWA fixed-position safety nets ────────────────────────────────
Apple Developer Forums #744327: iOS 17+ PWA `position: fixed` elements
lose their viewport anchor after repeated modal/page-replace cycles.
Documented community workarounds:
1. Force html min-height beyond the safe area so WebKit recomputes
the viewport on the next layout pass.
2. Ensure no ancestor of .bottom-nav has a transform / filter /
perspective other than `none` — those create a new containing
block, and the fixed child latches to the ancestor instead of
the viewport. */
html {
min-height: calc(100% + env(safe-area-inset-top, 0px));
}
html, body, .main, #module-workspace {
transform: none !important;
filter: none !important;
perspective: none !important;
/* Lock the remaining containing-block-creating props on the bottom-nav's
only possible ancestors (html/body) so nothing can ever re-anchor the
fixed nav. (The inline-only JS sweep can't catch stylesheet-applied ones.) */
will-change: auto !important;
contain: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
/* ─── Notifications drawer (v2) ──────────────────────────────────────────
Right-side overlay panel. Slides in/out via translateX. Built and mounted
dynamically by app.js (#notif-drawer is appended to ).
*/
[data-ui-version="v2"] #notif-scrim {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.18);
z-index: 9000;
opacity: 0;
pointer-events: none;
transition: opacity 200ms ease;
}
[data-ui-version="v2"] #notif-scrim.open {
opacity: 1;
pointer-events: auto;
}
[data-ui-version="v2"] #notif-drawer {
position: fixed;
top: 0;
right: 0;
bottom: 0;
width: 380px;
max-width: 100vw;
background: var(--surface);
border-left: 1px solid var(--line);
box-shadow: -4px 0 24px rgba(0,0,0,0.08);
z-index: 9001;
display: flex;
flex-direction: column;
transform: translateX(100%);
transition: transform 200ms ease;
overscroll-behavior: contain;
}
[data-ui-version="v2"] #notif-drawer.open {
transform: translateX(0);
}
[data-ui-version="v2"] #notif-drawer .notif-head {
display: flex;
align-items: center;
gap: 8px;
padding: 14px 16px;
border-bottom: 1px solid var(--line);
background: var(--surface);
flex-shrink: 0;
}
[data-ui-version="v2"] #notif-drawer .notif-head h3 {
margin: 0;
font-size: 1rem;
font-weight: 600;
flex: 1;
}
[data-ui-version="v2"] #notif-drawer .notif-head .btn {
font-size: .8125rem;
padding: 5px 10px;
}
[data-ui-version="v2"] #notif-drawer .notif-body {
flex: 1;
overflow-y: auto;
padding: 0;
}
[data-ui-version="v2"] #notif-drawer .notif-empty {
padding: 48px 16px;
text-align: center;
color: var(--muted);
font-size: .875rem;
}
[data-ui-version="v2"] #notif-drawer .notif-item {
display: block;
padding: 12px 16px;
border-bottom: 1px solid var(--line);
cursor: pointer;
position: relative;
border-left: 3px solid transparent;
transition: background 120ms ease;
}
[data-ui-version="v2"] #notif-drawer .notif-item:hover {
background: var(--surface-2, var(--surface-sunken));
}
[data-ui-version="v2"] #notif-drawer .notif-item.unread {
border-left-color: var(--accent, #2563eb);
background: color-mix(in srgb, var(--accent, #2563eb) 4%, transparent);
}
[data-ui-version="v2"] #notif-drawer .notif-item-row {
display: flex;
align-items: flex-start;
gap: 8px;
}
[data-ui-version="v2"] #notif-drawer .notif-title {
font-weight: 600;
font-size: .875rem;
line-height: 1.35;
flex: 1;
color: var(--text);
}
[data-ui-version="v2"] #notif-drawer .notif-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--accent, #2563eb);
flex-shrink: 0;
margin-top: 5px;
}
[data-ui-version="v2"] #notif-drawer .notif-msg {
font-size: .8125rem;
color: var(--text-secondary, var(--muted));
margin-top: 4px;
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
[data-ui-version="v2"] #notif-drawer .notif-meta {
display: flex;
align-items: center;
gap: 8px;
margin-top: 6px;
font-size: .7125rem;
color: var(--muted);
}
[data-ui-version="v2"] #notif-drawer .notif-chip {
display: inline-block;
padding: 1px 7px;
border-radius: 99px;
background: var(--surface-sunken);
border: 1px solid var(--line);
color: var(--text-secondary, var(--muted));
font-size: .6875rem;
font-weight: 500;
letter-spacing: .01em;
}
[data-ui-version="v2"] #notif-drawer .notif-prefs {
padding: 8px 0;
}
[data-ui-version="v2"] #notif-drawer .notif-prefs h4 {
margin: 0;
padding: 12px 16px 6px;
font-size: .75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .04em;
color: var(--muted);
}
[data-ui-version="v2"] #notif-drawer .notif-pref-row {
display: grid;
grid-template-columns: 1fr auto;
gap: 8px;
align-items: center;
padding: 10px 16px;
border-bottom: 1px solid var(--line);
font-size: .875rem;
}
[data-ui-version="v2"] #notif-drawer .notif-pref-row.muted {
opacity: 0.55;
}
[data-ui-version="v2"] #notif-drawer .notif-pref-row .pref-name {
font-weight: 500;
color: var(--text);
text-transform: capitalize;
}
[data-ui-version="v2"] #notif-drawer .notif-pref-row .pref-toggles {
display: flex;
gap: 12px;
align-items: center;
font-size: .75rem;
color: var(--muted);
}
[data-ui-version="v2"] #notif-drawer .notif-pref-row label {
display: inline-flex;
align-items: center;
gap: 4px;
cursor: pointer;
user-select: none;
}
@media (max-width: 768px) {
[data-ui-version="v2"] #notif-drawer {
width: 100vw;
border-left: 0;
}
}
/* ──────────────────────────────────────────────────────────────────────
* Mobile + PWA polish pass — 2026-05-06
* Source: 2026 PWA UI research (web.dev, Apple HIG, Material 3,
* Linear / Shopify / Stripe conventions). Everything here is purely
* additive — no existing class names overridden, only :root tokens
* and a few new utility classes. Goals:
* 1. Honour iOS safe-area on home-bar / notch
* 2. Min 44×44 tap target on every actionable button
* 3. Wrap every list table in a horizontal-scroll envelope so
* no overflow column eats the delete affordance on phones
* 4. Card-style packing rows that stack inputs on narrow widths
* 5. Smoother type / spacing scale (8-grid)
* ────────────────────────────────────────────────────────────────────── */
:root {
/* 8-grid spacing tokens */
--sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
--sp-5: 24px; --sp-6: 32px;
/* radius */
--rx-sm: 4px; --rx-md: 6px; --rx-lg: 10px;
/* shadows (soft, layered — Linear / Vercel taste) */
--shadow-sm: 0 1px 2px rgba(0,0,0,.05);
--shadow-md: 0 1px 3px rgba(0,0,0,.08), 0 3px 8px rgba(0,0,0,.10);
--shadow-lg: 0 8px 24px rgba(0,0,0,.12);
}
/* Safe-area for iOS notch + home-bar. Belt-and-suspenders: also
* keep min 0 padding so non-iOS browsers don't get visual gap. */
@supports (padding: env(safe-area-inset-top)) {
body {
padding-top: env(safe-area-inset-top, 0);
padding-bottom: env(safe-area-inset-bottom, 0);
}
}
/* 44×44 minimum tap target for every |