…the caller's own options…
GEOMETRY IS THE SCRIPT'S, NOT THIS SHEET'S. `overlay-position.js` writes
`left`/`top` in viewport coordinates after flipping and clamping to an
8px inset (C28's guarantee), so there is deliberately no `top:`/`left:`
default here — a CSS default would be visible for one frame before the
first measurement and would fight the clamp on every reposition. What
this sheet owns is the box: tier, surface, radius, shadow, and the size
caps that make an 8px inset achievable at 375px in the first place.
`max-width` is what keeps C28's "never causes horizontal page scroll"
true rather than merely attempted: the clamp cannot fit a panel wider
than the viewport, so the panel is capped below it. --------------- */
.enr-popover {
position: fixed;
z-index: var(--z-popover);
width: max-content;
max-width: min(320px, calc(100vw - 16px));
max-height: calc(100vh - 16px);
overflow-y: auto;
overscroll-behavior: contain;
background: var(--bg-paper);
border: 1px solid var(--border-1);
border-radius: var(--radius-md);
box-shadow: var(--shadow-md);
}
.enr-popover[hidden] {
display: none !important;
}
.enr-popover__body {
padding: var(--space-2);
color: var(--fg-2);
font-size: var(--text-sm);
line-height: 1.45;
}
/* A menu rendered into is a SIBLING of an open dialog, not a
descendant of it, so it must not sit below `--z-dialog` — architecture
§6 "Stacking realization" point 2 records that putting a context menu on
`--z-menu` (120) would hide it behind an open modal and fail C9.
`overlays/menu.js` adds this modifier to every menu it opens, so the rung
lives in one place instead of being re-remembered in each page
stylesheet (it was `order-actions-menu.css:8` before this). Private: the
contract publishes `.enr-popover` and `.enr-popover__body` only. */
.enr-popover--menu {
z-index: var(--z-dialog);
padding: var(--space-1) 0;
}
.enr-popover--menu .enr-popover__body {
padding: 0;
}
/* ---------------------------------------------------------------------
.enr-toast (SP6 — moved out of shell.css:1269-1294; D10)
--------------------------------------------------------------------- */
/* One floating status toast, fixed to the bottom-right: it overlays the page
and displaces nothing (client-view ruling 3, 2026-08-18). `overlays/toast.js`
builds and owns the single element and nothing server-rendered carries this
family — which is why there is no toast tag (contract: "There is no toast tag
and no confirm tag"). The drain bar is decorative; the message is announced
through role=status.
THE ONE RULE THAT IS NOT A VERBATIM MOVE — the z-rung.
Pre-migration `.enr-toast` sat on `--z-toast` (90), below `--z-dialog`
(1000). That was safe only while its single caller (`load-detail-route.js`)
never raised a toast over a dialog. D10 folds in two families that both
outrank it deliberately: `.plr-toast` at `calc(var(--z-dialog) + 100)` and
`.sb-toast` at `calc(var(--z-drag) + 10)`. The price book's own comment
(price-book.css:309-315, deleted with the rule) records why, and it is a
measured regression, not a preference: "The toast is the only channel for an
error carrying neither row nor field detail — a refused export, a 413, an
expired session on Write — and every one of those is raised while a drawer or
the export modal is still open. At 80 it painted underneath both, so at ≤640,
where each covers the full width, the message never reached the user."
`tests/e2e/test_price_book_page.py::test_export_refusal_message_is_visible_over_the_open_modal`
samples the pixels for exactly that, and C22 makes "a toast with a modal open"
a supported state. So the merged family keeps the highest of the three rungs —
byte-for-byte the one `.plr-toast` already used. tokens.css is NOT renumbered
(architecture §3), and `calc()` on a named rung is the sub-rung idiom
tokens.css itself names. `frontend-overlays-contract` says the toast consumes
`--z-toast`; that sentence needs the same kind of PATCH as Finding 3's
`--z-menu` sentence — an SP10 item, recorded in the SP6 report. */
.enr-toast {
position: fixed;
right: 16px;
bottom: calc(16px + env(safe-area-inset-bottom));
z-index: calc(var(--z-dialog) + 100);
display: flex;
align-items: center;
gap: 10px;
/* §7's oversized-content row: the toast must never cover the viewport,
however long the message is. */
max-width: min(360px, calc(100vw - 32px));
padding: 11px 14px;
background: var(--enroute-ink-900);
color: var(--fg-on-ink);
font-size: 13px;
font-weight: 600;
border-radius: var(--radius-md);
box-shadow: var(--shadow-md);
overflow: hidden;
opacity: 0;
transform: translateY(8px);
pointer-events: none;
transition: opacity var(--dur-base) var(--ease-out),
transform var(--dur-base) var(--ease-out);
}
/* §6: this family sets `display`, so `[hidden]` needs the !important guard in
the same scope. The toast's own state class is `.is-shown` and the element is
deliberately left in the document between messages (a live region must exist
before its text changes to be announced), so nothing in this component sets
`hidden` on it — the guard is for any consumer that does. */
.enr-toast[hidden] {
display: none !important;
}
.enr-toast.is-shown {
opacity: 1;
transform: none;
pointer-events: auto;
}
.enr-toast__tick {
width: 18px;
height: 18px;
flex: none;
border-radius: 50%;
background: var(--enroute-green-500);
color: var(--fg-on-ink);
display: inline-flex;
align-items: center;
justify-content: center;
}
.enr-toast__tick svg {
width: 11px;
height: 11px;
}
.enr-toast--error .enr-toast__tick {
background: var(--enroute-rose-500);
}
.enr-toast--warning .enr-toast__tick {
background: var(--enroute-amber-500);
}
.enr-toast__msg {
min-width: 0;
}
.enr-toast__x {
appearance: none;
border: 0;
background: transparent;
color: rgba(255, 255, 255, 0.7); /* --fg-on-ink @ 70% on the ink-900 pill */
cursor: pointer;
display: inline-flex; /* centres the 16 px registry icon (SP8: was a text glyph) */
align-items: center;
justify-content: center;
font-size: 16px;
line-height: 1;
padding: 2px;
}
.enr-toast__x:hover {
color: var(--fg-on-ink);
}
.enr-toast__x:focus-visible {
outline: none;
box-shadow: var(--focus-ring);
}
/* Decorative. `overlays/toast.js` sets its animation-duration to match the
toast's own duration and hides it outright when duration is 0, so the bar
never claims a deadline the timer is not keeping. */
.enr-toast__bar {
position: absolute;
left: 0;
bottom: 0;
height: 2px;
width: 100%;
background: var(--enroute-green-500);
}
.enr-toast.is-shown .enr-toast__bar {
animation: enr-toast-drain 5s linear forwards;
}
@keyframes enr-toast-drain {
from {
width: 100%;
}
to {
width: 0;
}
}
@media (max-width: 640px) {
/* clear the fixed bottom action bar */
.enr-toast {
bottom: calc(76px + env(safe-area-inset-bottom));
}
}
@media (prefers-reduced-motion: reduce) {
.enr-toast {
transition: none;
}
.enr-toast.is-shown .enr-toast__bar {
animation: none;
width: 0;
}
.enr-drawer {
transition: none;
}
}