, which is LATER IN DOCUMENT ORDER. At equal specificity the route stylesheet therefore wins. So every selector below is prefixed with its layout class to reach (0,2,0), and the prefix is doing two different jobs: REQUIRED TODAY, for the glass. screens/checkout.css declares `.co-card { background: ... }` at (0,1,0), and `background` is a shorthand that sets `background-color`. Unprefixed, the folded panel's translucency is overwritten and the whole see-through treatment silently does nothing on the only checkout that exists. This was verified by removing the prefix and watching the test go red, not by reading the cascade and believing it. DEFENSIVE, for the 28rem cap. screens/checkout.css caps `.co`, not `.co-card`, so at present an unprefixed cap would apply. The prefix costs nothing and stops that from depending on the other file never adding a width — which is exactly the sort of thing it would be entitled to add, since `.co-card` is its block. Either way, removing a prefix fails SILENTLY: nothing turns red, the page just keeps the other file's value. apps/web/tests/fold.test.mjs compares every rule in this file against all three route stylesheets, expanding shorthands, and fails on any rule that would be beaten. */ /* The cap the owner asked for, on the card that is actually on screen. The COLUMN around it may stay wider — assets/screens/checkout.css puts `.co` at 34rem and that is its business — but the card a customer reads a total off is the same 28rem on a phone, a tablet and a desk. */ .lay-checkout .co-card { max-width: 28rem; margin-inline: auto; } /* Below 30rem the card spends its width on the total and the button, not on padding, matching what section 3 does for `.checkout`. */ @media (max-width: 29.999rem) { .lay-checkout .co-card { padding: var(--s4); } /* The till fills the screen. assets/screens/pos.css is already one column below 52rem, so this only tightens the gap between the keypad and the sale so both fit above the fold at 320. */ .lay-app .pos { gap: var(--s4); } } /* Posture, section 6, reaching the same two blocks. `.co-card` sits on --paper exactly as `.checkout` does, so the contrast arithmetic in apps/web/tests/fold.test.mjs covers it without a second computation — the panel colour and the alpha are the same two values. */ .lay-checkout .co-card, .lay-app .pos-sale { background-color: var(--frame-panel); backdrop-filter: var(--frame-glass); -webkit-backdrop-filter: var(--frame-glass); transition: background-color 240ms ease, border-color 240ms ease, backdrop-filter 240ms ease, -webkit-backdrop-filter 240ms ease; } @media (device-posture: folded) { .lay-checkout .co-card, .lay-app .pos-sale { border-color: var(--frame-panel-line); } } :root[data-posture="folded"] .lay-checkout .co-card, :root[data-posture="folded"] .lay-app .pos-sale { border-color: var(--frame-panel-line); } /* Two segments: the checkout card and the till stay whole inside one pane. A total and the button under it on opposite sides of a seam is the single worst thing this file could allow. */ @media (horizontal-viewport-segments: 2) { .lay-checkout .co { max-width: none; } .lay-app .pos { grid-template-columns: minmax(0, 1fr); } } @media (vertical-viewport-segments: 2) { .lay-checkout .co-card, .lay-app .pos-pad { scroll-margin-block-end: var(--hinge-block); } /* Sticky positioning and a seam disagree: a keypad pinned to the top of the lower segment sits against the hinge. It scrolls with the page instead. */ .lay-app .pos-pad { position: static; } } @media (prefers-reduced-motion: reduce) { .lay-checkout .co-card, .lay-app .pos-sale { transition: none; } }