/*
ALPHA-06 bartender ticket UI component styles.
Built entirely on design/tokens.css and the active design/themes/*.css
file (see index.html's or does; a
in particular renders with the platform's `buttontext`
system color unless told otherwise. .tile already carried its own
`color: inherit;` (ALPHA-06) for exactly this reason, but that fix
was never generalized, so every OTHER button built afterward
(.tab-card in ALPHA-07, .liquor-row in ALPHA-06/10, admin rows, and
every ) silently fell back to that near-black
system default. On every light theme this happened to look correct
by accident (near-black text on a light surface reads fine), which
is exactly why the theme verification pass never caught it: nothing
LOOKED broken until Charcoal, the one dark theme, rendered the same
near-black default against a near-black background. Setting
`color: inherit` here once, at the element level, makes every
current and future form control resolve to the active theme's
`--color-text-primary` the same way ordinary text already does,
instead of depending on each new component remembering to repeat
`.tile`'s fix by hand. */
color: inherit;
}
[hidden] {
display: none !important;
}
/* ---------- Buttons, shared ---------- */
.btn-primary,
.btn-secondary,
.btn-pay,
.btn-add {
border-radius: var(--radius-md);
font-weight: var(--font-weight-semibold);
border: 1px solid transparent;
cursor: pointer;
}
.btn-primary {
height: var(--touch-target-comfortable);
background: var(--color-accent-strong);
color: var(--color-text-on-accent);
font-size: var(--font-size-base);
box-shadow: var(--shadow-2);
border: none;
}
/* Design principle 3, "blocked is a state you see before you touch it":
the same visually-blocked treatment .btn-pay:disabled already
establishes, extended to every plain .btn-primary a screen can disable
(e.g. the Counts review's Close count button with nothing counted
yet), so a disabled primary action never LOOKS fully live. */
.btn-primary:disabled {
background: var(--color-surface-sunken);
color: var(--color-text-tertiary);
box-shadow: none;
}
.btn-secondary {
height: var(--touch-target-comfortable);
background: var(--color-surface);
border: 1px solid var(--color-border-strong);
color: var(--color-text-primary);
font-size: var(--font-size-base);
padding: 0 var(--space-4);
}
.btn-secondary:disabled {
color: var(--color-text-tertiary);
border-color: var(--color-border);
}
.btn-compact {
padding: 0 var(--space-4);
}
.btn-full {
width: 100%;
}
.btn-icon {
width: var(--touch-target-min);
height: var(--touch-target-min);
border-radius: var(--radius-full);
border: none;
background: transparent;
color: var(--color-text-secondary);
font-size: var(--font-size-base);
cursor: pointer;
}
.btn-icon:hover {
background: var(--color-surface-sunken);
}
button:disabled {
cursor: not-allowed;
}
button:focus-visible,
input:focus-visible,
select:focus-visible {
outline: none;
box-shadow: var(--shadow-focus);
}
/* ---------- UIFIX1 (SF-7): one base style for every native control ----------
A control with no class of its own used to fall back to the browser's white chrome while its text inherited the
theme's light ink, so on a dark theme it showed light text on a white box (Settings Inventory items, Network and billing,
the Schedule email dialog). Every rule here sits in :where(), so it has no specificity: any component class still wins
on the property it sets, and a control nobody styled reads from the theme tokens. A new control can no longer ship
unstyled. Dark themes tell the browser so, which darkens date pickers, select lists and scrollbars. */
[data-theme="snipsip-ink"],
[data-theme="charcoal"] {
color-scheme: dark;
}
:where(button) {
background-color: var(--color-surface);
color: var(--color-text-primary);
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-md);
}
/* A button with no class at all is an unstyled new control: it gets a touch-sized face. */
:where(button:not([class])) {
min-height: var(--touch-target-min);
padding: var(--space-1) var(--space-4);
font-weight: var(--font-weight-semibold);
cursor: pointer;
}
:where(button:disabled) {
color: var(--color-text-tertiary);
}
:where(
input:not(
[type="checkbox"],
[type="radio"],
[type="range"],
[type="file"],
[type="color"],
[type="hidden"],
[type="button"],
[type="submit"]
)
),
:where(select),
:where(textarea) {
background-color: var(--color-surface);
color: var(--color-text-primary);
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-md);
padding: var(--space-1) var(--space-2);
}
:where(textarea) {
padding: var(--space-2) var(--space-3);
}
:where(input::placeholder, textarea::placeholder) {
color: var(--color-text-tertiary);
}
:where(input[type="checkbox"], input[type="radio"]) {
width: 28px;
height: 28px;
accent-color: var(--color-accent-strong);
cursor: pointer;
}
:where(dialog) {
background-color: var(--color-surface);
color: var(--color-text-primary);
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-lg);
padding: var(--space-5);
box-shadow: var(--shadow-3);
}
:where(dialog)::backdrop {
background: rgb(0 0 0 / 0.5);
}
/* ---------- Centered-card screens (auth track, track/auth Slice 1) ----
Five screens share this one centered-card layout: terminal setup (the
one-time server/tenant connection step), the user-tile picker, the PIN
pad, the manager-approval approver picker, and the payment-terminal
picker. index.html's own header comment has the full walk order; this
replaced the old single #login-screen the pre-auth stub used.
Gate finding 6, 2026-08-27: #approval-picker-screen and
#terminal-picker-screen were both built on the same .login-card markup
as the three original screens but were never added to this selector,
so each rendered as a bare card jammed into the top-left of an
otherwise empty page (measured at 1280x800: getBoundingClientRect()
height 355 against a full-viewport page, no centering, no padding).
Anything added here must be added to this list; e2e/
manager-approval.spec.ts asserts the resulting geometry rather than
only toBeVisible(), which cannot see the difference. */
#terminal-setup-screen,
#user-picker-screen,
#pin-entry-screen,
#approval-picker-screen,
#terminal-picker-screen {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: var(--space-6);
}
/* UX100: the sign-in and reader picker cards start below the toast slot, so "PIN changed." or an
error lies over the page, not the card's logo or first control. (The approval picker keeps its own spacing.) */
#user-picker-screen,
#terminal-picker-screen {
padding-top: calc(var(--toast-slot-band) + var(--space-2));
}
.login-card {
width: 100%;
max-width: 420px;
background: var(--color-surface);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-3);
padding: var(--space-8);
}
.login-title {
font-size: var(--font-size-xl);
font-weight: var(--font-weight-bold);
margin: 0 0 var(--space-1);
}
.login-subtitle {
color: var(--color-text-secondary);
margin: 0 0 var(--space-6);
}
.field-label {
display: block;
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
color: var(--color-text-secondary);
margin: var(--space-4) 0 var(--space-1);
}
.field-input {
width: 100%;
height: var(--touch-target-comfortable);
border-radius: var(--radius-md);
border: 1px solid var(--color-border-strong);
background: var(--color-surface-sunken);
padding: 0 var(--space-4);
color: var(--color-text-primary);
}
.login-submit {
width: 100%;
margin-top: var(--space-6);
}
.login-note {
margin-top: var(--space-5);
font-size: var(--font-size-xs);
color: var(--color-text-tertiary);
line-height: var(--line-height-relaxed);
}
/* ---------- User-tile picker ----------
One large touch tile per active employee (CLAUDE.md touch-only rule:
this is the only "typing" a shared terminal ever needs, and it is
none). Widens .login-card slightly over the plain 420px login-card
default so 2-3 tiles per row is comfortable on a landscape tablet. */
.user-picker-card {
max-width: 640px;
}
/* UX117: on the sign-in card the one vertical gap (logo, location name, tile grid, divider, device name) is
also the gap between tile rows and columns. The reader and approver cards keep their own spacing. */
#user-picker-screen .user-picker-card {
--user-picker-gap: var(--space-4);
display: flex;
flex-direction: column;
gap: var(--user-picker-gap);
}
#user-picker-screen .user-picker-card > .login-title {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--user-picker-gap);
margin: 0;
}
#user-picker-screen .brand-logo-card,
#user-picker-screen .brand-location {
margin: 0;
}
#user-picker-screen .user-picker-card > .login-note {
margin: 0;
}
#user-picker-screen .user-tile-list {
margin: 0;
}
.user-tile-list {
/* UX117: equal columns and equal rows, so every tile has one width and one height (three across, two on a
phone). A lone last tile, or the last two, sit centered under the full rows. */
--user-tile-cols: 3;
display: grid;
grid-template-columns: repeat(calc(var(--user-tile-cols) * 2), minmax(0, 1fr));
grid-auto-rows: 1fr;
gap: var(--user-picker-gap, var(--space-3));
margin: var(--space-2) 0 var(--space-5);
}
@media (max-width: 520px) {
.user-tile-list {
--user-tile-cols: 2;
}
}
/* UX100: an empty list (the reader picker with no readers) takes no height, so no dead gap sits above the line
that follows it. */
.user-tile-list:empty {
display: none;
}
.user-tile-list > .user-tile {
grid-column: span 2;
}
@media (min-width: 521px) {
.user-tile-list > .user-tile:last-child:nth-child(3n + 1) {
grid-column: 3 / span 2;
}
.user-tile-list > .user-tile:nth-last-child(2):nth-child(3n + 1) {
grid-column: 2 / span 2;
}
.user-tile-list > .user-tile:last-child:nth-child(3n + 2) {
grid-column: 4 / span 2;
}
}
@media (max-width: 520px) {
.user-tile-list > .user-tile:last-child:nth-child(2n + 1) {
grid-column: 2 / span 2;
}
}
.user-tile-list > .tabs-loading {
grid-column: 1 / -1;
padding: var(--space-4) 0;
}
#terminal-picker-empty {
padding: var(--space-2) var(--space-5) var(--space-4);
}
.user-tile {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--space-2);
min-height: var(--touch-target-primary);
padding: var(--space-5) var(--space-3);
border-radius: var(--radius-lg);
border: 1px solid var(--color-border-strong);
background: var(--color-surface-sunken);
color: var(--color-text-primary);
cursor: pointer;
text-align: center;
}
.user-tile:hover {
border-color: var(--color-accent-subtle-border);
background: var(--color-accent-subtle);
}
.user-tile:focus-visible {
outline: none;
box-shadow: var(--shadow-focus);
}
.user-tile-name {
font-size: var(--font-size-md);
font-weight: var(--font-weight-semibold);
line-height: var(--line-height-tight);
}
.user-tile-role-badge {
font-size: var(--font-size-xs);
font-weight: var(--font-weight-medium);
color: var(--color-text-tertiary);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.user-picker-change-terminal {
margin-top: var(--space-5);
width: 100%;
}
/* ---------- PIN pad ----------
One reusable pad (main.ts's openPinEntry) driving both login and the
three-step change-PIN flow. Every digit is --touch-target-primary
(64px), the largest of the three touch-target tiers: this is the
highest-frequency touch target in the whole app, entered many times a
shift on a shared terminal with no keyboard fallback (CLAUDE.md
touch-only rule). 3 columns, matching the DOM order already in
index.html (1-2-3 / 4-5-6 / 7-8-9 / clear-0-backspace). */
.pin-pad-card {
width: 100%;
max-width: 420px;
background: var(--color-surface);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-3);
padding: var(--space-8);
text-align: center;
}
.pin-entry-title {
font-size: var(--font-size-xl);
font-weight: var(--font-weight-bold);
margin: 0 0 var(--space-1);
}
.pin-entry-subtitle {
color: var(--color-text-secondary);
margin: 0 0 var(--space-5);
}
/* Dots, never digits (this is a shared terminal); large and legible from
arm's length, per the work item's own "not a phone" instruction. */
.pin-entry-display {
min-height: var(--touch-target-comfortable);
display: flex;
align-items: center;
justify-content: center;
font-size: var(--font-size-2xl);
letter-spacing: var(--space-3);
color: var(--color-text-primary);
margin-bottom: var(--space-4);
}
.pin-entry-error {
color: var(--color-danger-strong);
background: var(--color-danger-subtle);
border: 1px solid var(--color-danger-subtle-border);
border-radius: var(--radius-md);
padding: var(--space-3) var(--space-4);
font-size: var(--font-size-sm);
line-height: var(--line-height-normal);
margin: 0 0 var(--space-4);
text-align: left;
}
.pin-pad-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--touch-target-gap-min);
margin-bottom: var(--space-5);
}
.pin-pad-digit {
min-height: var(--touch-target-primary);
border-radius: var(--radius-lg);
border: 1px solid var(--color-border-strong);
background: var(--color-surface-sunken);
color: var(--color-text-primary);
font-size: var(--font-size-xl);
font-weight: var(--font-weight-semibold);
cursor: pointer;
}
.pin-pad-digit:hover:not(:disabled),
.pin-pad-digit:active:not(:disabled) {
border-color: var(--color-accent-subtle-border);
background: var(--color-accent-subtle);
/* Owner finding 2026-08-23: the light accent-subtle fill kept the
digit's normal text color, which on Charcoal is light-on-light and
unreadable mid-tap. Pair with accent-strong, the trio every theme
already contrast-verifies (see .tile-kind-badge). */
color: var(--color-accent-strong);
}
.pin-pad-digit:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.pin-pad-clear,
.pin-pad-backspace {
font-size: var(--font-size-base);
font-weight: var(--font-weight-medium);
color: var(--color-text-secondary);
}
.pin-pad-actions {
display: flex;
gap: var(--space-3);
}
.pin-pad-actions .btn-secondary,
.pin-pad-actions .btn-primary {
flex: 1;
}
/* ---------- My Profile ---------- */
.profile-section {
margin: 0 0 var(--space-6);
}
.profile-section-title {
font-size: var(--font-size-base);
font-weight: var(--font-weight-semibold);
margin: 0 0 var(--space-1);
}
/* USR4 (docs/build-briefs/USR4-my-profile-details.md): the "Your
details" section's two-up field pairing (First/Last, Email/Phone),
the same house pattern the Add User admin popup already uses. */
.admin-field-row {
display: flex;
gap: var(--space-4);
}
.admin-field-row > div {
flex: 1;
min-width: 0;
}
.field-label-tight {
margin-top: var(--space-2);
}
/* Reserved height so an error appearing or clearing never shifts Save
up or down -- the brief's own "inline errors with reserved height." */
.field-error {
min-height: 1.2em;
margin: var(--space-1) 0 0;
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
color: var(--color-danger-strong);
}
.field-input.field-input-invalid {
border-color: var(--color-danger-strong);
background: var(--color-surface);
}
.profile-save-row {
display: flex;
align-items: center;
gap: var(--space-4);
margin-top: var(--space-2);
}
.profile-save-row .btn-primary {
min-width: 160px;
}
/* ---------- Shared centered confirm dialog ----------
Distinct from the bottom-sheet .scrim/.sheet family above: a small,
centered dialog for a single short message plus 1-2 actions (the
one-time temporary-PIN reveal, index.html's #pin-reveal-scrim; any
future caller with the same "one message, no form" shape). Built on
the same tokens as .admin-confirm-sheet/.admin-confirm-body/
.admin-confirm-actions one screen over, just centered instead of
docked to the bottom edge. */
.confirm-scrim {
position: fixed;
inset: 0;
background: var(--color-scrim);
z-index: var(--z-scrim);
display: flex;
align-items: center;
justify-content: center;
padding: var(--space-6);
}
.confirm-dialog {
width: 100%;
max-width: 420px;
background: var(--color-surface);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-3);
padding: var(--space-6);
}
.confirm-title {
font-size: var(--font-size-lg);
font-weight: var(--font-weight-bold);
margin: 0 0 var(--space-3);
}
.confirm-message {
margin: 0 0 var(--space-4);
color: var(--color-text-secondary);
font-size: var(--font-size-base);
line-height: var(--line-height-normal);
}
.confirm-actions {
display: flex;
gap: var(--space-3);
}
.confirm-actions .btn-primary,
.confirm-actions .btn-secondary {
flex: 1;
}
.pin-reveal-value {
font-size: var(--font-size-2xl);
font-weight: var(--font-weight-bold);
letter-spacing: var(--space-2);
text-align: center;
color: var(--color-text-primary);
background: var(--color-surface-sunken);
border-radius: var(--radius-md);
padding: var(--space-4);
margin: 0 0 var(--space-5);
}
/* ---------- Open Tabs (ALPHA-07 landing screen) ----------
.topbar and its children are shared with the ring screen below (see
"App shell / top bar"); this section only adds what is unique to Open
Tabs. Modeled on design/mockups/tabs.html: single flowing column,
max-width container, no fixed-height app shell, so it uses ordinary
page scroll at every supported width (1280x800, 1024x768, and phone)
with no bespoke breakpoint of its own. */
#open-tabs-screen {
min-height: 100vh;
background: var(--color-bg);
}
/* Live-verification finding, ALPHA-08, at 1024x768, ORIGINALLY: Open
Tabs' own then-per-screen topbar-right grew from one theme control at
ALPHA-07 to six items (theme label, selector, employee badge, Closeout
Summary, Manager Settings, Log out) as ALPHA-08 and ALPHA-10 each added
a button here without re-checking this screen's own fit at the
narrower supported tablet width, leaving topbar-left (flex-shrink: 1,
no floor) crushed to near zero width so the brand name and location
visually overlapped the theme selector instead of being pushed aside
or wrapped.
UX17/UX18 (docs/build-briefs/UX17-persistent-navigation.md,
UX18-manager-surfaces-to-admin.md) collapsed nine per-screen topbars
into the ONE shared #app-topbar and moved Closeout Summary/Manager
Exceptions off it entirely, so topbar-right carried at most two
direct children (the one screen-specific secondary-action button,
#topbar-secondary-action, plus the account-menu trigger) on EVERY
screen, never six, until UX29 (docs/build-briefs/UX29-terminal-and-
connectivity-status-on-the-ring-screen.md) added a third,
non-interactive, always-present badge (#topbar-connectivity-badge) as
the lane's first child; three is still far short of six, and the badge
is short, fixed-width text, never a wrapping label. That real narrowing is what makes generalizing this
guard from "Open Tabs only" to every screen the shared location now serves
safe rather than reckless: the ORIGINAL reason ring was excluded (its
own fixed-height ticket rail had no spare row to give up if the topbar
wrapped, see .app's own comment above) no longer competes with a row
this location is now unlikely to ever need. Kept as a width-keyed
breakpoint rather than an unconditional wrap for the same
content-driven reasoning as before: flex-wrap's own one-line-fits test
measures the FULL, un-truncated content, so an unconditional wrap
would still wrap at 1280x800 where nowrap-plus-shrink already fits.
1150px sits comfortably between the two supported tablet widths. */
@media (max-width: 1150px) {
#app-topbar,
#app-topbar .topbar-right {
flex-wrap: wrap;
row-gap: var(--space-2);
}
}
.tabs-page {
max-width: 880px;
margin: 0 auto;
padding: var(--space-6) var(--space-5) var(--space-20);
}
/* INV26 S1 list-fit fix (design/mockups/inv26-list-fit.html; live stage0
defect, ADMIN_WORKSTATION 1280x800, 2026-09-28). Scoped to the Settings
screen alone by id, so #open-tabs-screen's own .tabs-page (and every
other screen sharing the class: My Profile, Closeout Summary, Void
History) is untouched at 880px; only Settings, whose five-column
inv-table needs the room, gets the wider column. At the 1280px floor
viewport this still leaves ~40px of side margin, never edge-to-edge. */
#admin-screen .tabs-page {
/* UX79: no cap; Settings uses the width the screen has (owner, 2026-10-05).
Forms and text blocks are held to a readable line length at the end of
this file. */
max-width: none;
}
.tabs-page-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
margin-bottom: var(--space-5);
}
.tabs-page-title {
font-size: var(--font-size-xl);
font-weight: var(--font-weight-bold);
margin: 0;
}
.new-ticket-row {
display: flex;
align-items: center;
gap: var(--space-3);
margin-bottom: var(--space-3);
}
.new-ticket-name-input {
flex: 1;
height: var(--touch-target-comfortable);
border-radius: var(--radius-md);
font-size: var(--font-size-md);
}
/* TABSLAYOUT1: one control height (56) for every field and button in the page body. */
.btn-new-ticket {
height: var(--touch-target-comfortable);
min-width: 184px;
padding: 0 var(--space-8);
border-radius: var(--radius-md);
border: none;
background: var(--color-accent-strong);
color: var(--color-text-on-accent);
font-size: var(--font-size-md);
font-weight: var(--font-weight-semibold);
box-shadow: var(--shadow-2);
flex-shrink: 0;
cursor: pointer;
}
.tab-list {
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.tabs-empty {
padding: var(--space-8) var(--space-5);
text-align: center;
color: var(--color-text-secondary);
}
.tabs-loading {
padding: var(--space-8) var(--space-5);
text-align: center;
color: var(--color-text-tertiary);
}
.tab-card {
display: flex;
align-items: center;
gap: var(--space-4);
width: 100%;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-1);
padding: var(--space-5);
min-height: var(--touch-target-primary);
text-align: left;
cursor: pointer;
}
.tab-card:disabled {
cursor: not-allowed;
opacity: 0.6;
}
.tab-main {
flex: 1;
min-width: 0;
}
.tab-name-row {
display: flex;
align-items: center;
gap: var(--space-2);
flex-wrap: wrap;
}
.tab-name {
font-size: var(--font-size-md);
font-weight: var(--font-weight-semibold);
color: var(--color-text-primary);
}
/* TABSLAYOUT1 (lead decision): every Open Tabs card is the same height, so a long name is cut to one line. The
full name is on the title and in the text the screen reader reads. */
#open-tabs-list .tab-name {
display: block;
font-weight: var(--font-weight-bold);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* TABSLAYOUT1: one row of badges under the server line, all one size. */
.tab-badges {
display: flex;
flex-wrap: wrap;
gap: var(--space-1) var(--space-2);
margin-top: var(--space-2);
}
.tab-badges [hidden] {
display: none;
}
.badge-age,
.badge-aging,
.badge-paid,
.badge-awaiting {
display: inline-flex;
align-items: center;
box-sizing: border-box;
height: 26px;
padding: 0 var(--space-2);
font-size: var(--font-size-xs);
font-weight: var(--font-weight-semibold);
font-variant-numeric: tabular-nums;
border-radius: var(--radius-sm);
white-space: nowrap;
}
/* Under 1 hr: neutral. */
.badge-age {
color: var(--color-text-secondary);
background: var(--color-surface-sunken);
border: 1px solid var(--color-border);
}
/* 1 hr and up: warning. */
.badge-aging {
color: var(--color-warning-strong);
background: var(--color-warning-subtle);
border: 1px solid var(--color-warning-subtle-border);
}
/* 24 hr and up: danger (lead decision, provisional). */
.badge-aging.badge-stale {
color: var(--color-danger-strong);
background: var(--color-danger-subtle);
border: 1px solid var(--color-danger-subtle-border);
}
/* Sixteenth amendment item 2: a Paid badge on a fully-paid open tab, the existing green success tokens. */
.badge-paid {
color: var(--color-success-strong);
background: var(--color-success-subtle);
border: 1px solid var(--color-success-subtle-border);
}
/* RCPT1-S3: an Open Tabs card waiting for the tip written on its receipt, in the warning pair. */
.badge-awaiting {
color: var(--color-warning-strong);
background: var(--color-warning-subtle);
border: 1px solid var(--color-warning-subtle-border);
}
.tab-meta {
margin-top: var(--space-1);
font-size: var(--font-size-sm);
color: var(--color-text-tertiary);
}
/* TABSLAYOUT1: the server line holds its space when empty, so cards stay the same height. */
.tab-server {
min-height: 1.4em;
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.tab-figures {
display: flex;
align-items: center;
gap: var(--space-6);
flex-shrink: 0;
}
.figure {
text-align: right;
}
.figure-value {
font-size: var(--font-size-lg);
font-weight: var(--font-weight-bold);
font-variant-numeric: tabular-nums;
color: var(--color-text-primary);
}
.figure-label {
font-size: var(--font-size-xs);
color: var(--color-text-tertiary);
}
.chevron {
flex-shrink: 0;
width: 20px;
display: flex;
align-items: center;
justify-content: center;
color: var(--color-text-tertiary);
font-size: var(--font-size-lg);
}
.recently-closed-section {
margin-top: var(--space-8);
}
.recently-closed-title {
font-size: var(--font-size-lg);
font-weight: var(--font-weight-bold);
margin: 0 0 var(--space-1);
}
.recently-closed-note {
font-size: var(--font-size-sm);
color: var(--color-text-tertiary);
margin: 0 0 var(--space-4);
}
.btn-reopen {
height: var(--touch-target-comfortable);
padding: 0 var(--space-5);
border-radius: var(--radius-md);
border: 1px solid var(--color-border-strong);
background: var(--color-surface);
color: var(--color-text-primary);
font-size: var(--font-size-base);
font-weight: var(--font-weight-semibold);
flex-shrink: 0;
cursor: pointer;
}
/* TM1 (docs/backlog.md; DEC-230, owner ruling "merge only"). Merge mode's
own chrome: the banner that replaces ordinary browsing instructions
while merge-selection is active, the marked/dimmed tab-card states, and
the bottom action bar that appears once a source and a target are both
picked. Same token vocabulary .badge-aging/.badge-paid already use, no
new colors. */
.tab-merge-mode-banner {
flex-basis: 100%;
box-sizing: border-box;
min-height: var(--touch-target-comfortable);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
background: var(--color-info-subtle);
border: 1px solid var(--color-info-subtle-border);
color: var(--color-info);
border-radius: var(--radius-md);
padding: var(--space-3) var(--space-4);
font-size: var(--font-size-sm);
margin-bottom: var(--space-4);
}
.tab-merge-mode-cancel {
background: none;
border: none;
color: var(--color-info);
font-weight: var(--font-weight-semibold);
font-size: var(--font-size-sm);
min-height: var(--touch-target-min);
padding: 0 var(--space-2);
cursor: pointer;
}
.tab-card.tab-merge-dimmed {
opacity: 0.55;
}
.tab-card.tab-merge-marked {
border-color: var(--color-accent);
background: var(--color-accent-subtle);
outline: 2px solid var(--color-accent);
}
.tab-merge-mark-badge {
position: absolute;
top: -10px;
left: -10px;
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: var(--radius-full);
background: var(--color-accent);
color: #fff;
font-size: var(--font-size-xs);
font-weight: var(--font-weight-bold);
flex-shrink: 0;
}
.tab-merge-role-label {
display: block;
font-size: var(--font-size-xs);
font-weight: var(--font-weight-semibold);
color: var(--color-accent-strong);
margin-top: var(--space-1);
}
.tab-merge-action-bar {
position: sticky;
bottom: 0;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
background: var(--color-surface);
border-top: 1px solid var(--color-border);
box-shadow: var(--shadow-2);
padding: var(--space-4) var(--space-5);
margin-top: var(--space-4);
border-radius: var(--radius-lg);
}
.tab-merge-move-list {
list-style: none;
margin: var(--space-4) 0;
padding: 0;
display: grid;
gap: var(--space-2);
}
.tab-merge-move-list li {
display: flex;
align-items: baseline;
gap: var(--space-3);
padding: var(--space-3);
background: var(--color-surface-sunken);
border-radius: var(--radius-md);
font-size: var(--font-size-sm);
}
.tab-merge-move-list .tab-merge-move-label {
font-weight: var(--font-weight-semibold);
min-width: 70px;
}
.tab-merge-move-list .tab-merge-move-detail {
color: var(--color-text-secondary);
}
.tab-merge-hold-note {
display: block;
background: var(--color-info-subtle);
border: 1px solid var(--color-info-subtle-border);
color: var(--color-info);
border-radius: var(--radius-md);
padding: var(--space-3) var(--space-4);
font-size: var(--font-size-sm);
margin: 0 0 var(--space-4);
}
/* TM1: the two-line "Merged from" trail on a tab that absorbed another
one (design/mockups/po-merge-invoice-tm1-result.html), the same
success-token pairing .badge-paid already uses. */
.tab-merge-trail {
display: block;
margin-top: var(--space-1);
font-size: var(--font-size-xs);
color: var(--color-success-text);
}
/* TAB1 (DEC-270; design/mockups/core-tab-search-notes.md). The sticky find
row. The real scroll root on Open Tabs is #app-shell (overflow-y: auto,
see its own rule below); the topbar is inside it and scrolls away, so
top: 0 pins this row to the top of the visible area. Its parent
(.tabs-page) spans the whole list, so the row stays stuck all the way
down. */
.tab-find {
position: sticky;
top: 0;
z-index: var(--z-sticky);
display: flex;
gap: var(--space-3);
align-items: center;
padding: var(--space-3) 0;
margin-bottom: var(--space-2);
background: var(--color-bg);
}
.tab-find[hidden] {
display: none;
}
/* TAB3: the chip row wraps under the toggle and search field. */
.tab-find {
flex-wrap: wrap;
row-gap: var(--space-2);
}
.tab-find-chips {
flex-basis: 100%;
display: flex;
gap: var(--space-2);
align-items: center;
margin-top: var(--space-1);
}
.tab-find-chip-divider {
flex: none;
width: 1px;
height: 24px;
margin: 0 var(--space-1);
background: var(--color-border-strong);
}
.tab-find-chip[hidden] {
display: none;
}
.tab-find-chip {
height: var(--touch-target-min);
padding: 0 var(--space-4);
border-radius: var(--radius-full);
border: 1px solid var(--color-border-strong);
background: var(--color-surface);
color: var(--color-text-secondary);
font-weight: var(--font-weight-semibold);
font-size: var(--font-size-sm);
display: inline-flex;
align-items: center;
gap: 6px;
cursor: pointer;
}
.tab-find-chip b {
font-variant-numeric: tabular-nums;
color: var(--color-text-tertiary);
}
/* A chip with nothing behind it is quiet but still tappable. */
.tab-find-chip.is-zero {
color: var(--color-text-tertiary);
border-color: var(--color-border);
}
.tab-find-chip[aria-pressed="true"] {
background: var(--color-accent-subtle);
border-color: var(--color-accent);
color: var(--color-accent-strong);
}
.tab-find-chip[aria-pressed="true"] b {
color: var(--color-accent-strong);
}
.tab-find-toggle {
display: flex;
box-sizing: border-box;
height: var(--touch-target-comfortable);
flex-shrink: 0;
padding: 4px;
gap: 4px;
border-radius: var(--radius-md);
background: var(--color-surface-sunken);
border: 1px solid var(--color-border);
}
.tab-find-toggle-button {
height: 48px;
min-width: 108px;
padding: 0 var(--space-4);
border: none;
border-radius: var(--radius-sm);
background: transparent;
font-weight: var(--font-weight-semibold);
color: var(--color-text-secondary);
cursor: pointer;
}
.tab-find-toggle-button b {
margin-left: 6px;
font-variant-numeric: tabular-nums;
}
.tab-find-toggle-button[aria-pressed="true"] {
background: var(--color-surface);
box-shadow: var(--shadow-1);
color: var(--color-text-primary);
}
.tab-find-toggle-button[aria-pressed="true"] b {
color: var(--color-accent-strong);
}
.tab-find-field {
flex: 1;
min-width: 0;
height: var(--touch-target-comfortable);
box-sizing: border-box;
display: flex;
align-items: center;
gap: var(--space-2);
padding-left: var(--space-3);
border-radius: var(--radius-md);
border: 1px solid var(--color-border-strong);
background: var(--color-surface);
color: var(--color-text-tertiary);
}
.tab-find-field:focus-within {
border-color: var(--color-accent);
box-shadow: var(--shadow-focus);
color: var(--color-text-primary);
}
.tab-find-icon {
flex-shrink: 0;
}
.tab-find-input {
flex: 1;
min-width: 0;
height: 100%;
border: none;
background: transparent;
outline: none;
font-size: var(--font-size-md);
color: var(--color-text-primary);
}
.tab-find-clear {
width: 52px;
height: 52px;
flex-shrink: 0;
border: none;
background: transparent;
border-radius: var(--radius-md);
font-size: var(--font-size-lg);
color: var(--color-text-secondary);
cursor: pointer;
}
.tab-find-clear[hidden] {
display: none;
}
.tab-card[hidden] {
display: none;
}
/* TABSLAYOUT1: Merge tabs is an outlined 56px control at the end of the find row; pressed is the accent pair. */
.tab-merge-toggle {
height: var(--touch-target-comfortable);
flex-shrink: 0;
padding: 0 var(--space-6);
border-radius: var(--radius-md);
font-size: var(--font-size-md);
}
.tab-merge-toggle[aria-pressed="true"] {
background: var(--color-accent-subtle);
border-color: var(--color-accent);
color: var(--color-accent-strong);
}
.tab-name mark,
.tab-meta mark,
.tab-why mark {
background: var(--color-accent-subtle);
color: var(--color-accent-strong);
border-radius: 3px;
padding: 0 1px;
font-weight: var(--font-weight-bold);
}
.tab-why {
margin-top: var(--space-1);
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
}
.tab-find-empty {
text-align: center;
padding: var(--space-10) var(--space-5);
}
.tab-find-empty[hidden] {
display: none;
}
.tab-find-empty h2 {
margin: 0 0 var(--space-2);
font-size: var(--font-size-lg);
}
.tab-find-empty p {
margin: 0 0 var(--space-5);
color: var(--color-text-secondary);
}
.tab-find-empty-actions[hidden] {
display: none;
}
.tab-find-empty-actions {
display: flex;
gap: var(--space-3);
justify-content: center;
}
.tab-find-empty-actions button {
height: 56px;
padding: 0 var(--space-6);
border-radius: var(--radius-md);
font-weight: var(--font-weight-bold);
border: 1px solid var(--color-border-strong);
background: var(--color-surface);
cursor: pointer;
}
.tab-find-empty-actions button.is-primary {
background: var(--color-accent-strong);
border-color: var(--color-accent-strong);
color: var(--color-text-on-accent);
}
@media (max-width: 480px) {
.tab-card {
flex-wrap: wrap;
}
.tab-figures {
width: 100%;
justify-content: space-between;
}
.new-ticket-row {
flex-direction: column;
}
.btn-new-ticket {
width: 100%;
}
}
/* TABSLAYOUT1 (docs/build-briefs/TABSLAYOUT1-open-tickets.md; supersedes the UX14 density block): no "Open
Tabs" heading (the section keeps aria-label="Open Tabs"); a 1280px page; 56px controls on two aligned rows;
cards in a grid of equal 112px minimum height, 3 columns on an iPad in landscape and 2 in portrait. Scoped to
#open-tabs-screen because .tabs-page and .tab-list are shared with other screens. */
#open-tabs-screen .tabs-page {
max-width: 1280px;
padding: var(--space-5) var(--space-6) var(--space-12);
}
#open-tabs-screen .tabs-page-header {
display: none;
}
#open-tabs-screen .tab-find {
padding: var(--space-2) 0 var(--space-3);
margin-bottom: 0;
}
#open-tabs-screen .tab-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
grid-auto-rows: 1fr;
gap: var(--space-3);
}
#open-tabs-list .tab-card {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) auto 20px;
align-items: center;
column-gap: var(--space-3);
min-height: 112px;
padding: var(--space-4) var(--space-4) var(--space-4) var(--space-5);
}
#open-tabs-list .tab-card:active {
background: var(--color-surface-sunken);
}
#open-tabs-list .tab-figures {
gap: var(--space-3);
justify-content: flex-end;
}
#open-tabs-list .chevron {
justify-content: flex-end;
}
/* UX100: the empty, loading and error lines span every column, so they center under the controls instead of
sitting in the left column. */
#open-tabs-screen .tab-list > :is(.tabs-empty, .tabs-loading) {
grid-column: 1 / -1;
}
/* ---------- App shell / top bar ---------- */
/* UX17 (docs/build-briefs/UX17-persistent-navigation.md): the persistent
topbar (#app-topbar) moved OUTSIDE every screen ``, including
#ring-screen's own `.app` wrapper it used to sit inside as `.app`'s
first flex child. `.app` used to be `height: 100vh` for exactly that
reason (see the removed comment this replaces): with the topbar gone
from inside it, height:100vh here would double-count the topbar's own
height against the viewport. #app-shell (new, wraps the topbar and
every screen section as siblings, directly under ) is now the
ONE viewport-height flex column; `.app` fills whatever height
#ring-screen's own flex-item allocation leaves it (height: 100%),
preserving exactly the same "a definite, bounded height for .body's
flex:1 to fill" property the old height:100vh gave it, just measured
one level up. */
#app-shell {
display: flex;
flex-direction: column;
height: 100%;
/* Matches html/body's own height:100% above; min-height keeps the app
usable on a viewport shorter than 720px without ever collapsing
below it (moved here from .app's own former rule, unchanged). */
min-height: 720px;
overflow-y: auto;
}
/* Every screen section is a plain, naturally-sized flex item by default
(flex-shrink: 0 so none of them is ever squeezed below its own content
-- #app-shell's own overflow-y: auto is what turns a taller-than-
viewport screen into a scrollable region, exactly matching the plain
page-scroll behavior every screen already had before #app-shell
existed). #ring-screen overrides this below: it is the one screen with
its own bounded-height, internally-scrolling layout (.app/.body). */
#app-shell > section {
flex: 0 0 auto;
}
#ring-screen:not([hidden]) {
display: flex;
flex-direction: column;
flex: 1 1 auto;
min-height: 0;
}
.app {
display: flex;
flex-direction: column;
height: 100%;
min-height: 0;
}
.topbar {
/* UX15-F1: the header is the account dropdown's containing block, so
the menu can sit outside .topbar-right's overflow lane below and
still hang from the header's bottom edge. */
position: relative;
/* UX96 (DEC-356): three columns, the two sides equal (minmax(0, 1fr) each) and the lockup in the middle
(auto), so the lockup is centered in the header whatever the widths of the left and right groups. Both
sides can shrink to zero, so the columns can never overlap one another. */
display: grid;
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
align-items: center;
gap: var(--space-3);
/* UX14 (DEC-314): 56px (--topbar-height) instead of 71px. The 44px
controls are untouched; only the 13px above and below shrink. The
height is a floor (min-height), not a fixed value, so the wrapped
portrait layout below can still grow. */
box-sizing: border-box;
min-height: var(--topbar-height);
padding: 0 var(--space-5);
background: var(--color-surface);
border-bottom: 1px solid var(--color-border);
flex-shrink: 0;
/* Design gate finding, ALPHA-06: at 1024x768 this used to wrap to two
rows, eating ~40-56px the ticket rail needed. The real trigger is
unbounded content (a long tenant id or employee id can outgrow the
row on its own), not the viewport width, so the fix is nowrap plus
truncating the two open-ended text fields (.location, .employee-name
below) rather than a width-keyed breakpoint hack. Restored to wrap at
phone/tablet-portrait width in the existing max-width:900px block
below, where .body already stacks into a single column and a second
topbar row is not competing with the ticket rail for height. */
flex-wrap: nowrap;
}
.topbar-left {
display: flex;
align-items: center;
gap: var(--space-3);
min-width: 0;
flex-shrink: 1;
/* UX15: a defensive floor, not the load-bearing fix (that is
.topbar-right's own shrink/scroll change above). If this side is
ever squeezed below its own children's combined size in some future
layout this file has not anticipated, clip the excess here rather
than let it render outside this box and under .topbar-right's own
controls, matching the reasoning `.topbar-right`'s own comment
states in full. */
overflow: hidden;
}
/* UX93: the Snip & Sip logo (design/brand/). The black parts draw in currentColor, so the logo takes
the ink of whatever surface it sits on (dark in SnipSip Light, light in SnipSip Ink and night, cream
on the Scissors & Scotch location); the ochre is the brand ochre in every theme. Size is set here once
and no theme changes it. */
.brand-mark {
display: block;
flex: none;
height: 28px;
width: auto;
aspect-ratio: 266 / 346;
}
.brand-mark-card {
height: 44px;
margin: 0 auto var(--space-2);
}
.brand-logo {
display: block;
flex: none;
height: 36px;
width: auto;
aspect-ratio: 1263 / 346;
}
/* DEC-348 (UX94): the lockup as the heading of a card. Centered, wide enough to read, never cramped. */
.brand-logo-card {
height: 48px;
margin: 0 auto var(--space-2);
}
.so-wordmark:has(.brand-logo) {
display: inline-flex;
align-items: center;
}
.location {
color: var(--color-text-tertiary);
font-size: var(--font-size-sm);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
}
/* UX96 (DEC-356): the location name is the one name in the header, right beside the home button: it reads as
the title it is, and truncates with an ellipsis before it can reach the lockup. */
.topbar-left .location {
color: var(--color-text-primary);
font-size: var(--font-size-lg);
font-weight: var(--font-weight-bold);
letter-spacing: -0.01em;
}
/* UX96 (DEC-356): the centered lockup. The wordmark and the mark are two images of the same logo; main.ts's
fitTopbarBrand sets data-brand-fit on the header: "full" (the lockup) or "mark" (the mark alone, when no
compaction of the right group leaves room for the lockup). The logo is centered either way. */
.topbar-right {
/* In its grid column the group hugs the right edge of the header, as it did when the header was a flex row.
fitTopbarBrand only leaves it in this column when it fits (or the reader label can shrink to fit), so
right-aligning cannot push content out of reach to the left. */
justify-content: flex-end;
}
.topbar-center {
display: flex;
align-items: center;
justify-content: center;
}
.topbar-logo {
--topbar-logo-height: 32px;
height: var(--topbar-logo-height);
}
.topbar-mark {
display: none;
height: 32px;
}
.topbar[data-brand-fit="mark"] .topbar-logo {
display: none;
}
.topbar[data-brand-fit="mark"] .topbar-mark {
display: block;
}
/* Compaction of the right group, so the centered logo has room (main.ts fitTopbarBrand sets these, one level
at a time, in this order). The full text stays in each element, so a screen reader still reads it; only the
drawing changes. */
#app-topbar.topbar .topbar-right {
flex-wrap: nowrap;
}
.topbar[data-c-gap] .topbar-right {
/* UX100: never tighter than 8px, so two pills (Online and the pricing chip) never touch in portrait. */
gap: var(--space-2);
}
.topbar[data-c-reader] .topbar-terminal-ok,
.topbar[data-c-reader] .topbar-terminal-warning,
.topbar[data-c-pricing] .topbar-pricing-model {
font-size: 0;
}
.topbar[data-c-reader] .topbar-terminal-ok::after,
.topbar[data-c-reader] .topbar-terminal-warning::after,
.topbar[data-c-pricing] .topbar-pricing-model::after {
content: attr(data-short);
font-size: var(--font-size-sm);
}
/* The reader's short chip carries its state colour: the warning button is already amber; the working reader is
green. */
.topbar[data-c-reader] .topbar-terminal-ok {
padding: 0 var(--space-2);
border-radius: var(--radius-full);
color: var(--color-success-strong);
background: var(--color-success-subtle);
border: 1px solid var(--color-success-subtle-border);
}
.topbar[data-c-reader] .topbar-terminal-warning {
padding: 0 var(--space-2);
}
.topbar[data-c-user] .employee-name {
display: none;
}
.topbar[data-c-tight] {
padding-left: var(--space-3);
padding-right: var(--space-3);
column-gap: var(--space-2);
}
/* UX100: the last level also draws the status pills flat (no rim, little padding; the 44px height stays), so
Online, the reader and the pricing chip still read with their dots in a
portrait header. The words stay in the page (aria-label, the element text). */
.topbar[data-c-tight] :is(.topbar-connectivity, .topbar-pricing-model, .topbar-terminal-ok) {
padding: 0 var(--space-1);
gap: var(--space-1);
border-color: transparent;
}
.topbar[data-c-tight] .topbar-terminal-warning {
padding: 0 var(--space-1);
}
.topbar[data-c-tight] .topbar-right {
gap: var(--space-1);
}
.topbar[data-c-tight] .topbar-connectivity,
.topbar[data-c-tight] .topbar-terminal-ok::after,
.topbar[data-c-tight] .topbar-terminal-warning::after,
.topbar[data-c-tight] .topbar-pricing-model::after {
font-size: var(--font-size-xs);
}
.topbar[data-c-tight] .account-trigger {
padding: 0 var(--space-1);
gap: var(--space-1);
}
/* UX30 (docs/build-briefs/UX30-pricing-model-visible-on-the-ring-screen.md):
the ring screen's own pricing-model badge, styled at the same visual
weight as .location above (same tokens, reused rather than a second
visual language for one line of text) since both are inert, muted
status text rather than a control. */
.topbar-pricing-model {
color: var(--color-text-secondary);
font-size: var(--font-size-sm);
white-space: nowrap;
}
.topbar-right {
display: flex;
align-items: center;
gap: var(--space-3);
flex-wrap: nowrap;
/* UX15 (docs/build-briefs/UX15-floor-topbar-overflow.md): this used to
be `flex-shrink: 0`, which refuses to give up any of its own width no
matter how many buttons it holds. With .topbar-left's own
`flex-shrink: 1; min-width: 0` (kept, still needed so .location's
ellipsis can absorb a long tenant id per the ALPHA-06 comment above),
a stubborn flex-shrink:0 here forced the ENTIRE deficit onto
.topbar-left, past the point its own content (the home icon, the
brand name) could still fit, and that content then rendered outside
.topbar-left's own shrunk box and under .topbar-right's buttons,
which is exactly the click-interception defect this item fixes.
Allowing this side to shrink too lets the flex algorithm split the
deficit by each side's own size (mostly landing here, since this side
is normally the larger of the two), and overflow-x below turns
whatever still does not fit into a horizontal pan inside this row's
own lane instead of spilling onto .topbar-left. This is what makes
the row incapable of overlapping regardless of how many buttons a
later change adds here: the two sides can only ever sum to the
container's own width, never more. */
flex-shrink: 1;
min-width: 0;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
}
/* UX15: every direct child (each button, and the account-menu trigger)
keeps its own natural, single-line size no matter how small this row's
own box gets squeezed to above. Without this, a plain flex child's
default `flex-shrink: 1` lets its TEXT wrap to two or three lines
before the row above finishes giving up its own width, and the wrapped
lines then get clipped by this row's `overflow-y: hidden` (observed
directly while building this fix: "Record Outside Order" wrapped to
three lines and its bottom line was cut off). Reserving each child's
own size and letting the row's `overflow-x: auto` above carry whatever
does not fit keeps every label on one line and every button fully
readable, at the cost of a horizontal pan for the buttons furthest
right when many are visible at once (rare after this item's own
consolidation of the three purchasing entry points into one). */
.topbar-right > * {
flex-shrink: 0;
}
/* Same visible-scrollbar treatment .ticket-lines already uses (that
rule's own comment: overflow:auto alone renders no reliably visible
scrollbar on every platform), oriented horizontally for this row. */
.topbar-right::-webkit-scrollbar {
height: 6px;
}
.topbar-right::-webkit-scrollbar-track {
background: transparent;
}
.topbar-right::-webkit-scrollbar-thumb {
background: var(--color-border-strong);
border-radius: var(--radius-full);
}
/* PAY5-F1 (docs/backlog.md; docs/build-briefs/PAY5-F1-terminal-notice-in-
topbar.md; design/mockups/ux39-pay5-ticket-header.html, review Section
4.1; DEC-196). A small, non-shrinking wrapper (.topbar-right > * already
sets flex-shrink: 0 above) around whichever of #topbar-terminal-status
or #topbar-terminal-warning is currently visible, so main.ts can read
its own real bounding box and anchor .topbar-terminal-detail's right
edge to it. */
.topbar-terminal-warning-wrap {
display: inline-flex;
align-items: center;
}
/* Plain text naming the registered terminal, same visual weight as
.topbar-connectivity beside it (not a control). */
.topbar-terminal-ok {
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
white-space: nowrap;
}
/* A real 44px warning-colored button, replacing the PAY7 ticket-header
chip (it measured 19x22px against e2e/usability.spec.ts's 44px floor,
`padding: 2px var(--space-2)` with no min-height). Same warning tokens
.badge-aging/.ticket-hold-badge already use elsewhere in this file,
never a new color. aria-expanded reflects whether
#topbar-terminal-detail is currently open. */
.topbar-terminal-warning {
height: var(--touch-target-min);
padding: 0 var(--space-4);
border-radius: var(--radius-full);
border: 1px solid var(--color-warning-subtle-border);
background: var(--color-warning-subtle);
color: var(--color-warning-strong);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
white-space: nowrap;
display: inline-flex;
align-items: center;
cursor: pointer;
}
.topbar-terminal-warning:active {
opacity: 0.7;
}
/* The full plain-language message, shown only once
#topbar-terminal-warning is tapped (never automatically). Positioned
here by main.ts (JavaScript, not CSS) against
#topbar-terminal-warning-wrap's own real bounding box: this element is
NOT nested inside that wrapper (see its own markup comment in
index.html) because .topbar-right's own overflow-y: hidden (UX15)
clips an absolutely positioned descendant nested inside it to a
one-row-high box, the exact defect UX15-F1 already found and fixed
once for the account-dropdown menu (styles.css's own .account-dropdown
rule), reused here rather than rediscovered. z-index matches
.account-dropdown's own --z-ticket-rail: both are small anchored
popovers, never a full sheet or scrim. */
.topbar-terminal-detail {
position: fixed;
z-index: var(--z-ticket-rail);
width: 340px;
max-width: calc(100vw - 2 * var(--space-4));
background: var(--color-surface);
border: 1px solid var(--color-warning-subtle-border);
border-radius: var(--radius-md);
box-shadow: var(--shadow-3);
padding: var(--space-4);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
}
.topbar-terminal-detail-text {
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
color: var(--color-warning-strong);
}
/* UX29: text not colour alone (CLAUDE.md's floor rule), non-interactive
(no hover/focus states, no cursor change), so this is plain inline
text rather than a pill or dot. */
.topbar-connectivity {
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
white-space: nowrap;
}
/* UX100 (UX96 review): Online, the reader and the pricing chip are pills at the 44px floor, each with a state dot,
not bare grey text. The dot is a second signal beside the words (the words stay; colour is never the only
cue). Non-interactive: no hover, no cursor. */
.topbar-connectivity,
.topbar-pricing-model,
.topbar-terminal-ok {
display: inline-flex;
align-items: center;
gap: var(--space-2);
box-sizing: border-box;
min-height: var(--touch-target-min);
padding: 0 var(--space-3);
border-radius: var(--radius-full);
border: 1px solid var(--color-border-strong);
background: transparent;
}
.topbar-connectivity:empty {
display: none;
}
.topbar {
--topbar-dot-ok: var(--color-success);
--topbar-dot-warn: var(--color-warning-strong);
}
/* The fixed success green is dark; on the dark themes the dots take a lighter green and amber so they clear 3:1
against the header. */
[data-theme="snipsip-ink"] .topbar,
[data-theme="charcoal"] .topbar {
--topbar-dot-ok: #5fcf8a;
--topbar-dot-warn: #e8ad5a;
}
.topbar-connectivity,
.topbar-pricing-model,
.topbar-terminal-ok {
line-height: 1;
}
.topbar-connectivity::before,
.topbar-terminal-ok::before {
content: "";
flex: none;
width: 8px;
height: 8px;
border-radius: var(--radius-full);
background: var(--topbar-dot-ok);
}
.topbar-connectivity[data-state="offline"]::before {
background: var(--color-danger);
}
.topbar-connectivity[data-state="issue"]::before {
background: var(--topbar-dot-warn);
}
.topbar-pricing-model::before {
background: var(--color-accent-strong);
}
/* CL8: an unhealthy reader (Offline, Not seen) draws in the warning tint, the word always in the text. */
.topbar-terminal-ok[data-health="unhealthy"]::before {
background: var(--topbar-dot-warn);
}
.topbar-terminal-ok[data-health="unhealthy"] {
color: var(--color-warning-strong);
border-color: var(--color-warning-subtle-border);
background: var(--color-warning-subtle);
}
.topbar[data-c-reader] .topbar-terminal-ok[data-health="unhealthy"] {
color: var(--color-warning-strong);
background: var(--color-warning-subtle);
border: 1px solid var(--color-warning-subtle-border);
}
[data-theme="brass"] .topbar :is(.topbar-connectivity, .topbar-pricing-model, .topbar-terminal-ok) {
border-color: var(--color-brand-cream-muted);
}
.theme-switcher-label {
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
}
.theme-switcher {
height: var(--touch-target-min);
border-radius: var(--radius-md);
border: 1px solid var(--color-border-strong);
background: var(--color-surface);
color: var(--color-text-primary);
padding: 0 var(--space-3);
}
.employee {
display: flex;
align-items: center;
gap: var(--space-2);
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
min-width: 0;
}
.employee-name {
max-width: 160px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.employee-badge {
min-width: 32px;
height: 32px;
padding: 0 var(--space-1);
border-radius: var(--radius-full);
background: var(--color-accent-subtle);
color: var(--color-accent-strong);
display: flex;
align-items: center;
justify-content: center;
font-weight: var(--font-weight-semibold);
font-size: var(--font-size-xs);
}
/* ---------- Sixteenth amendment item 1: topbar redesign ----------
A Home icon button sits immediately right of the company name
(.topbar-left), and the logged-in user's own name chip is always
pinned to the top-right corner (.topbar-right), tapping it opens a
touch-friendly dropdown containing, in order, Theme, Settings
(rights-holders only), and Log out. Replaces the old standalone Theme
and Settings/Log out buttons that used to sit loose in the
location. One consistent shape, duplicated per screen in index.html (this
codebase has no shared-component layer), so one set of classes here
styles all five instances identically across every screen and theme. */
.btn-home-icon {
display: flex;
align-items: center;
justify-content: center;
width: var(--touch-target-min);
height: var(--touch-target-min);
border-radius: var(--radius-md);
border: 1px solid var(--color-border-strong);
background: var(--color-surface);
color: var(--color-text-primary);
flex-shrink: 0;
align-self: center;
}
.btn-home-icon:active {
background: var(--color-surface-sunken);
}
.account-menu {
position: relative;
flex-shrink: 0;
}
/* The tappable name chip itself: same visual weight as the old .employee
span it replaces (reuses .employee/.employee-badge/.employee-name
inside it unchanged), just now a real that opens the
dropdown, with a caret marking it as interactive. */
.account-trigger {
display: flex;
align-items: center;
gap: var(--space-2);
height: var(--touch-target-min);
padding: 0 var(--space-4);
border-radius: var(--radius-full);
border: 1px solid var(--color-border-strong);
background: var(--color-surface);
color: var(--color-text-primary);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
}
/* TABSLAYOUT1: the badge sits snug inside the pill. */
.account-trigger .employee-badge {
width: 28px;
min-width: 28px;
height: 28px;
margin-left: calc(var(--space-2) * -1);
}
.account-trigger[aria-expanded="true"] {
border-color: var(--color-accent-strong);
}
.account-trigger-caret {
font-size: var(--font-size-xs);
color: var(--color-text-tertiary);
}
/* Absolutely positioned under the trigger rather than a full scrim
sheet: this is a small menu, not a form, and the touch-only rule only
requires it be dismissible by tapping outside (main.ts's outside-tap
and Escape handling), never that it block the rest of the screen. */
.account-dropdown {
position: absolute;
top: calc(100% + var(--space-2));
/* UX15-F1: positioned against .topbar (position: relative above), not
.account-menu, because .topbar-right's overflow-y: hidden (UX15)
clipped a menu positioned inside it to a one-row-high box. Aligned
with the header's own right padding. */
right: var(--space-5);
z-index: var(--z-ticket-rail);
/* UX115: the menu sits inside the header, so unstyled text inherited the header's text color (cream on brass). */
color: var(--color-text-primary);
min-width: 220px;
display: flex;
flex-direction: column;
gap: var(--space-1);
padding: var(--space-2);
border-radius: var(--radius-md);
border: 1px solid var(--color-border-strong);
background: var(--color-surface);
box-shadow: var(--shadow-3);
}
.account-dropdown-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
padding: var(--space-2) var(--space-2);
min-height: var(--touch-target-min);
}
.account-dropdown-label {
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
}
.account-dropdown-theme .theme-switcher {
flex: 1;
min-width: 0;
}
.account-dropdown-button {
display: flex;
align-items: center;
width: 100%;
min-height: var(--touch-target-min);
padding: var(--space-2) var(--space-2);
border-radius: var(--radius-sm);
border: none;
background: transparent;
color: var(--color-text-primary);
font-size: var(--font-size-sm);
text-align: left;
}
.account-dropdown-button:active {
background: var(--color-surface-sunken);
}
/* ---------- Body: menu + ticket rail ---------- */
.body {
display: flex;
flex: 1;
min-height: 0;
}
.menu-pane {
flex: 1;
display: flex;
flex-direction: column;
min-width: 0;
}
/* ALPHA-10 item 1, corrected during the design/QA gate re-review
(2026-08-20): a fixed 27-entry strip (A-Z plus "#") does not fit one
row at either supported tablet width (a 44px target per letter needs
~1341px; only 880px is available at 1280x800 and 624px at 1024x768,
both measured live against #alphabet-strip.clientWidth), and the
original fix left the overflow as a horizontal scroll with zero
affordance, so roughly half the alphabet was reachable only by a
bartender who happened to guess to swipe sideways on what reads as a
static row of buttons.
Fixed by wrapping to two rows (flex-wrap) instead of scrolling one.
44px stays the real touch-target floor (tokens.css: "nothing tappable
is smaller than 44px") and is never shrunk to force a fit. What gives
instead is this strip's own horizontal padding and inter-letter gap,
both dropped to 0: at 1024x768, 14 letters at 44px with any gap or
padding at all no longer fits inside 624px (14 * 44px = 616px alone,
leaving 8px total to split across 13 gaps and 2 sides), so both had to
go to zero to reach exactly two rows rather than three. Adjacent
letters keep a visible 1px seam from each button's own border (below)
colliding with its neighbor's, which reads as a grid divider rather
than a gap; row-to-row spacing is a separate, small var(--space-1) row
gap, kept deliberately minimal so the extra row costs as little
vertical space as possible against the menu grid's own dominant share
of the screen. Verified live (Chromium) at both supported widths: two
full rows, no horizontal scrollbar, every letter including "Z" and "#"
fully visible with no scrolling. */
.alphabet-strip {
display: flex;
flex-wrap: wrap;
gap: var(--space-1) 0;
/* 2px sides, not the space-5 every other row in this pane uses: the
narrowest supported width has essentially zero slack left once 14
letters at the 44px floor are laid out with no inter-letter gap (see
this rule's own header comment), so this strip alone gives up its
edge inset rather than the letters giving up their touch-target
size. */
padding: var(--space-3) 2px var(--space-2);
flex-shrink: 0;
background: var(--color-bg);
}
.alphabet-letter {
flex-shrink: 0;
width: var(--touch-target-min);
height: var(--touch-target-min);
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-md);
font-size: var(--font-size-base);
font-weight: var(--font-weight-semibold);
color: var(--color-text-secondary);
background: var(--color-surface);
border: 1px solid var(--color-border);
cursor: pointer;
}
/* A letter with no drinks stays in the strip, muted and unclickable
(:disabled), rather than the strip reflowing around only letters
currently in use; see main.ts's renderAlphabetStrip. */
.alphabet-letter:disabled,
.alphabet-letter.inactive {
opacity: 0.35;
cursor: not-allowed;
color: var(--color-text-tertiary);
}
.menu-scroll {
flex: 1;
overflow-y: auto;
padding: var(--space-2) var(--space-5) var(--space-8);
}
.menu-empty {
color: var(--color-text-secondary);
padding: var(--space-6) 0;
}
.menu-section {
margin-bottom: var(--space-8);
scroll-margin-top: var(--space-4);
}
.menu-section-title {
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--color-text-tertiary);
margin: 0 0 var(--space-3);
}
.tile-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
gap: var(--space-3);
}
/* VOC1-F8 (docs/build-briefs/VOC1-F8-view-recipe-on-the-floor.md, Section
2.1). A cocktail tile is now a wrapper holding two independently
tappable siblings (the unchanged add-to-ticket .tile button, plus
.tile-recipe-button below) rather than one overloaded surface; a
non-cocktail tile keeps rendering a bare .tile as the grid's direct
child, unwrapped, since CSS Grid treats any direct child as a grid
item regardless of its own class. position: relative anchors the
recipe button's own absolute corner placement.
UX40 (docs/build-briefs/UX40-recipe-button-beside-price.md, Section
1.2 Part A): align-self: start stops Grid's own default
`align-items: stretch` from stretching this wrapper to the row's own
tallest member. .tile itself is a plain block child and never
stretches, so without this rule a short tile's wrapper sat taller
than its own visible card, invisibly, and a bottom-anchored child
(the Recipe button) measured its offset against that stretched
wrapper box rather than the actual card, rendering partly or fully
below it on a short tile next to a taller row-mate. With this rule
the wrapper's own box always equals .tile's real rendered height. */
.tile-wrapper {
position: relative;
align-self: start;
}
/* UX40 (docs/build-briefs/UX40-recipe-button-beside-price.md, Section
1.2 Part B): reserved only on a tile that is actually rendering the
Recipe button (the wrapper carries this modifier class exactly where
recipeButton.hidden is set in renderMenuGrid), so a tile with no
button -- no admin.menu_drink.view permission, or a non-cocktail item
that is never wrapped at all -- keeps its price at full width like
every other tile, never paying for a control it does not render. */
.tile-wrapper--recipe-visible .tile-price {
padding-right: 72px;
}
.tile {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-1);
padding: var(--space-4);
min-height: 96px;
display: flex;
flex-direction: column;
/* UX45 Section 2a (docs/build-briefs/UX45-liquor-tile-badge-grouping.md,
real-app redesign): was justify-content: space-between, which
distributed a tile's leftover vertical space evenly across every gap
(badge-to-badge, badge-to-name, name-to-price alike), so nothing
visually bound the POUR/OUT badges to the product name beneath them
any more tightly than to empty space. flex-start removes that
even-distribution; .tile-price's own margin-top: auto (below) takes
back 100% of the leftover height so price still anchors the card's
own bottom edge exactly as before. gap stays at its ORIGINAL,
unchanged production value (var(--space-3)) for every tile alike --
the first build instead tightened this shared gap directly, which
also shrank a bare two-child cocktail tile's own name-to-price gap
and moved UX40's fixed-inset Recipe button over the wrapped drink
name. The badge-to-badge/badge-to-name tightening is scoped to the
two badge elements themselves (their own margin-bottom, below)
rather than to this shared token. */
justify-content: flex-start;
gap: var(--space-3);
text-align: left;
cursor: pointer;
color: inherit;
width: 100%;
}
.tile:disabled {
opacity: 0.55;
cursor: not-allowed;
}
.tile-name {
font-size: var(--font-size-base);
font-weight: var(--font-weight-semibold);
line-height: var(--line-height-tight);
}
.tile-price {
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
/* UX45: reproduces .tile's old justify-content: space-between effect
for price specifically (absorbs all leftover height in the flex
column so price still sits at the card's own bottom edge), now that
.tile itself no longer distributes leftover space evenly. */
margin-top: auto;
}
/* VOC1-F8, Section 2.1: touch-target-comfortable, matching
.stock-state-badge's own corner-marker convention (a plain-language
word, never color alone) but absolutely positioned rather than
flowed, since it must be independently tappable rather than
decorative. No title attribute (check:touch-only): the visible
"Recipe" label plus aria-label is the recovery.
UX40 (docs/build-briefs/UX40-recipe-button-beside-price.md, Section
1.2 Part B, DEC-192): moved from top-right (where it covered the
drink name) to bottom-right, sharing the price's row. The right
inset matches --space-4 (16px), the same value as .tile's own
padding and therefore the price text's own left edge, so the button
respects the same inner-padding boundary the price does. The bottom
inset is --space-1 (4px), tuned against the mockup's own real
single-line price geometry so the button's vertical center lands
within about 1px of the price line's own center; --space-2 or
--space-4 both overshoot by several px either way. */
.tile-recipe-button {
position: absolute;
bottom: var(--space-1);
right: var(--space-4);
min-width: var(--touch-target-min);
min-height: var(--touch-target-min);
padding: 0 var(--space-1);
/* UX129: the element paints its own pill. The 44px box is the hit area; the transparent borders make up the
difference and background-clip keeps the fill to the padding box, a 24px pill. A rendered-text contrast audit
reads the button's own background, which a ::before layer hid (it saw dark text on the dark tile, 1.03:1). */
box-sizing: border-box;
border: 10px solid transparent;
border-left-width: var(--space-1);
border-right-width: var(--space-1);
border-radius: var(--radius-md);
background-color: var(--color-accent-strong);
background-clip: padding-box;
color: var(--color-text-on-accent);
font-size: var(--font-size-xs);
font-weight: var(--font-weight-semibold);
line-height: 1;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
}
.tile-recipe-button:hover {
filter: brightness(0.92);
}
.tile-price.variable {
/* Amendment 2026-08-22 (item 2): --color-accent-strong is now the
DEEP fill/pill-text color (paired with a light --color-accent-subtle
background or with --color-text-on-accent on a solid fill; see
design/README.md "Distinctness from the fixed semantic hues,
Charcoal's inverted pairing"). This is the one spot that colors text
directly on the plain tile surface with no subtle-background pill
underneath it, so it reads the lighter --color-accent (base) instead,
the variant every theme keeps legible as bare text on its own
surface. */
color: var(--color-accent);
font-weight: var(--font-weight-medium);
}
/* Inventory track (track/inventory) Slice 3, Amendment 2026-08-22
(twelfth): "type-appropriate tiles" for a pour/draft-beer/packaged menu
tile, alongside a cocktail tile's unchanged plain look. Reuses
.line-badge-substitution's exact accent-subtle/accent-strong/accent-
subtle-border trio (design/tokens.css, verified-contrast in every
theme) rather than inventing a second accent pairing: this is the same
"an intended, ordinary distinction, not a problem" case that badge's
own comment already argues for. */
.tile-kind-badge {
align-self: flex-start;
display: inline-flex;
align-items: center;
font-size: var(--font-size-xs);
font-weight: var(--font-weight-bold);
text-transform: uppercase;
letter-spacing: 0.04em;
line-height: var(--line-height-tight);
padding: 2px var(--space-2);
border-radius: var(--radius-sm);
color: var(--color-accent-strong);
background: var(--color-accent-subtle);
border: 1px solid var(--color-accent-subtle-border);
/* UX45 Section 2a (docs/build-briefs/UX45-liquor-tile-badge-grouping.md,
real-app redesign): pulls tight to whatever follows (the stock-state
badge, or the name when there is no stock-state badge) with a
negative margin that nets out against .tile's own unchanged
var(--space-3) (12px) gap: 12px - 8px = 4px (var(--space-1)), the
same tight figure the original design measured, without touching the
shared gap token itself (see .tile's own comment for why). */
margin-bottom: calc(var(--space-1) - var(--space-3));
}
/* ---------- Resizable ticket rail (Amendment 2026-08-22, sixth, item 1) ----------
The drag handle sits as a DOM sibling BETWEEN .menu-pane and
.ticket-rail (index.html), not inside either, so it can own the visual
boundary line between them (moved here from .ticket-rail's own former
border-left, now removed below to avoid a doubled seam) while its own
width stays fixed regardless of how wide the rail itself is dragged. */
.rail-resize-handle {
flex-shrink: 0;
/* Comfortable touch target, not the 1px seam a plain border would give:
the item's own words are "a comfortable touch target (a visible
handle, not a 1-pixel edge)." 24px is this product's own documented
hit-area floor for a narrow drag affordance (see the grip location below
for the actually-visible part); still short of touch-target-min
(44px) because a full 44px-wide vertical strip would eat meaningfully
into the menu grid's own tight width budget at 1024x768 for a control
that is dragged, not tapped, and drag targets tolerate a narrower hit
area than a tap target does (there is no adjacent-target misfire risk
the way a 44px tap-target floor exists to prevent). */
width: 24px;
display: flex;
align-items: center;
justify-content: center;
cursor: col-resize;
/* Stops the browser's own touch-scroll/pan gesture from competing with
a touch drag that starts on this element - without this, a touch drag
on a touch device scrolls the page instead of resizing the rail. */
touch-action: none;
border-left: 1px solid var(--color-border);
background: var(--color-surface);
}
/* The actual visible grip: a short rounded location centered in the handle's
own full-column-height hit area, distinguishing "there is something to
drag here" from a plain divider line. Runs the full column height via
the handle's own flex-stretch (a sibling flex item of .menu-pane and
.ticket-rail inside .body, which does not override the default
align-items: stretch), never just a corner or edge. */
.rail-resize-handle::before {
content: "";
width: 4px;
height: 48px;
border-radius: var(--radius-full);
background: var(--color-border-strong);
}
.rail-resize-handle:hover::before,
.rail-resize-handle.dragging::before {
background: var(--color-accent);
}
/* Below the tablet-landscape primary target, .body stacks the rail under
the menu instead of beside it (see the @media (max-width: 900px) rule
further down); a horizontal drag handle has no meaning once the two
panes are no longer side by side, so it is hidden rather than left
present and inert. */
@media (max-width: 900px) {
.rail-resize-handle {
display: none;
}
}
/* ---------- Ticket rail ---------- */
.ticket-rail {
/* Default width; src/railResize.ts overwrites this with an inline
style on load (the device's stored width, or this same 400px default
when nothing is stored yet - see RAIL_WIDTH_DEFAULT_PX). Kept in sync
with that constant deliberately, as the pre-JS-paint fallback. */
width: 440px;
flex-shrink: 0;
background: var(--color-surface);
display: flex;
flex-direction: column;
min-height: 0;
/* PAYTOTAL1-F1: the drink list yields space to the authoritative totals and actions.
The rail fallback keeps every control reachable if an unusually long set of reductions exceeds its height. */
overflow-y: auto;
scrollbar-gutter: stable;
}
.ticket-rail::-webkit-scrollbar {
width: 8px;
}
.ticket-rail::-webkit-scrollbar-track {
background: transparent;
}
.ticket-rail::-webkit-scrollbar-thumb {
background: var(--color-border-strong);
border-radius: var(--radius-full);
}
/* UX13 (design/ux13-ticket-rail-rationale.md, DEC-053's "DENSITY: compact
chrome" scale, design/tokens.css). The header used to be a title row,
then a "N drinks" subtitle row, then a separate guest-actions row:
three rows of vertical budget for information that fits on one. This
is now one --chrome-row-height row, costing nothing beyond what a
header chip already needs at that height. */
.ticket-header {
padding: 0 var(--space-4);
border-bottom: 1px solid var(--color-border);
flex-shrink: 0;
}
.ticket-header-row {
height: var(--chrome-row-height);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--chrome-gap-tight);
}
/* The ticket's own name and status, sharing one truncating line
(mirroring design/mockups/ticket-rail-redesign-blocked.html's own
.ticket-id). #ticket-sub carries the name (or "Ticket" for an unnamed
walk-in); #order-status/.ticket-age carries status, unchanged text
logic either way. */
.ticket-id {
min-width: 0;
flex-shrink: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: var(--font-size-chrome);
font-weight: var(--font-weight-bold);
color: var(--color-text-primary);
}
.ticket-age {
font-weight: var(--font-weight-regular);
color: var(--color-text-tertiary);
}
/* Payments-track Slice 4 (DEC-002). Mirrors .badge-aging's own
inline-pill shape (border, subtle background, small bold text), the
warning palette rather than accent: a hold is money set aside on a
guest's card, worth calling out visually the same way an aging tab
already is, not a neutral status line. */
.ticket-hold-badge {
display: inline-flex;
align-items: center;
gap: 4px;
margin-top: var(--space-1);
font-size: var(--font-size-xs);
font-weight: var(--font-weight-semibold);
color: var(--color-warning-strong);
background: var(--color-warning-subtle);
border: 1px solid var(--color-warning-subtle-border);
padding: 2px var(--space-2);
border-radius: var(--radius-sm);
width: fit-content;
}
/* PAY14 (docs/build-briefs/PAY14-order-hold-provider-recheck.md, Section
8.1, D2 required change 1, approved by the ui-ux-designer in
design/reviews/pay14-order-hold-provider-recheck-2026-09-25.md): "Hold
needs a manager" uses the danger trio, not the warning palette an
ordinary healthy hold already uses. */
.ticket-hold-badge--needs-manager {
color: var(--color-danger-strong);
background: var(--color-danger-subtle);
border: 1px solid var(--color-danger-subtle-border);
}
/* PAY14 (Section 8.1, the Q3 note): "Test hold cleared. Take a card at
Pay." in the badge's own slot, in the info palette (the .badge-simulated
trio). */
.ticket-hold-badge--test-cleared {
color: var(--color-info);
background: var(--color-info-subtle);
border: 1px solid var(--color-info-subtle-border);
}
.no-order-panel {
padding: var(--space-6) var(--space-5);
text-align: center;
color: var(--color-text-secondary);
}
.no-order-panel p {
margin: 0 0 var(--space-4);
}
/* UX13 (design/ux13-ticket-rail-rationale.md). The old min-height calc
here (git history) modeled a "two lines plus a peek" FLOOR, tuned
against the six-action chrome stack this item removes and against a
second, tighter tablet height DEC-051/VP1-F1 has since retired (the
floor is designed and tested at FLOOR_DEVICE.viewport alone). That
floor is gone outright, not raised: with every sibling chrome element
compressed to its own real minimum (the header row, the totals block,
the action row), flex: 1 alone gives this region whatever is left,
which is what harness/e2e/ux13-ticket-rail.spec.ts measures directly
against the real rendered rail rather than a hand-tuned pixel formula. */
.ticket-lines {
min-height: 0;
flex: 1;
overflow-y: auto;
/* UX14 (designer polish R1/R2): space-4 not space-5 and no reserved
scrollbar gutter, as in the approved mockup, so a drink name keeps about
16px more of row one. The thin visible scrollbar below still shows when
the list overflows. */
padding: 0 var(--space-4);
}
/* Visible scroll affordance: overflow-y:auto alone renders no reliably
visible scrollbar on every platform (macOS Chromium's default is a
thin overlay that only appears while actively scrolling, easy to miss
under location lighting). This keeps a thin permanent track+thumb instead,
Chromium/WebKit only per the browser support this product targets
(browser-only, touch tablet; no Firefox requirement in
docs/solution-architecture.md). */
.ticket-lines::-webkit-scrollbar {
width: 8px;
}
.ticket-lines::-webkit-scrollbar-track {
background: transparent;
}
.ticket-lines::-webkit-scrollbar-thumb {
background: var(--color-border-strong);
border-radius: var(--radius-full);
}
.line {
/* Compact two-row line, design gate fix (2026-08-20): was a single
flex row with name/liquor/price stacked three-deep in .line-info
beside the Prepared pill, which let a real long liquor name (up to
~57 characters, fixtures/inventory-snapshot.json) wrap onto two or
three lines on its own and push measured line height to 121-166px,
leaving barely more than one line visible in the rail at either
1280x800 or 1024x768. Name and price now share a row (.line-top)
and the liquor detail is a single truncated row below it, so a real
line measures well under 96px; see .ticket-lines's min-height
comment for the retuned figure this was measured against live.
UX44 (docs/build-briefs/UX44-ticket-line-name-whole-price-below.md,
the Hybrid variant, DEC-198): gap tightened from --space-2 to
--space-1, reclaiming 4px of chrome for .line-name-text, layered
under .line-top's own flex-wrap (below) so a name that needs a
second row for its price costs zero added row height. */
display: flex;
align-items: center;
gap: var(--space-1);
padding: var(--space-2) 0;
border-bottom: 1px solid var(--color-border);
}
.line:last-child {
border-bottom: none;
}
.line-info {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: var(--space-1);
}
.line-top {
/* UX44 Section 2a (docs/build-briefs/UX44-ticket-line-name-whole-price-
below.md, real-app redesign, DEC-198): the base state is exactly the
pre-UX44 shipped layout (nowrap, a single var(--space-2) gap). A pure
CSS flex-wrap trigger wraps against each child's own PREFERRED
(max-content) width, not its truncated rendered width, so an
unconditional flex-wrap: wrap here wrapped every long real drink name
too (not only a name that would render whole), costing height for
nothing and clipping row 8 of the rail. The wrap decision is instead
made per row in script, refreshLineNameStacking() (main.ts), which
toggles .line-top-stacked below only when the whole name actually
fits once the price is out of the way. */
display: flex;
align-items: baseline;
justify-content: space-between;
flex-wrap: nowrap;
gap: var(--space-2);
min-width: 0;
}
.line-top.line-top-stacked {
/* Applied only by refreshLineNameStacking() for a row where wrapping
actually shows the whole name. The row-axis (vertical) gap is
tightened to 2px once wrapped, since a wrapped two-line stack needs
far less separation than the horizontal name-to-price gap does on one
line; the column-axis (horizontal) gap stays var(--space-2)
unchanged. */
flex-wrap: wrap;
gap: 2px var(--space-2);
}
.line-name {
/* UI-batch gate fix (drink-name touch recovery): now a flex wrapper,
the same shape .line-detail below already has, holding one
truncating child (.line-name-text) instead of being the truncating
element itself. main.ts's attachTruncatedTextTapToggle needs a
wrapper to toggle the shared .line-detail-expanded class on,
independently of the text span it measures for overflow - the same
reason .line-detail split from its own text during the ALPHA-10
re-review. Still .line-top's flex item; sizing is unchanged, only
moved onto this rule from the old single-element version. */
flex-shrink: 1;
min-width: 0;
display: flex;
align-items: center;
gap: 2px;
}
/* Expanded state, same shared class and reasoning as
.line-detail.line-detail-expanded below: align-items relaxes from
center to flex-start once the name wraps onto multiple lines, so a
long drink name never gets vertically centered against .line-top's
own price/paid-badge siblings while wrapped. */
.line-name.line-detail-expanded {
align-items: flex-start;
}
.line-name-text {
flex: 1 1 auto;
min-width: 0;
font-size: var(--font-size-md);
font-weight: var(--font-weight-semibold);
line-height: var(--line-height-tight);
overflow: hidden;
/* UX49 (docs/build-briefs/UX49-ticket-rail-name-word-truncation.md):
was text-overflow: ellipsis, the browser's own CHARACTER-boundary
clip. main.ts's refreshLineNameWordTruncation now computes the
truncated text in JS, appending its own ellipsis character, so the
browser must never ALSO re-clip it: with "ellipsis" still set here,
a JS-truncated candidate that still slightly overshot the box (the
rare case where not even the first whole word fits,
truncateToWholeWord's own documented fallback) was found being
re-clipped by the browser down to a character fragment again
("Cucumber..." -> "Cucu..."), reproducing the exact defect this item
fixes. "clip" leaves the JS-computed text as the single source of
truth for what is shown. */
/* UX114 (docs/build-briefs/UX114-ticket-line-names-wrap.md), owner: "Two
lines, then cut." The name wraps to at most two lines and the browser
ends the second with an ellipsis; a longer name opens on tap below. */
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
text-overflow: ellipsis;
white-space: normal;
word-break: normal;
overflow-wrap: anywhere;
/* Touch-only audit fix, same reasoning as .line-detail-text below:
tapping this text is the real, touch-first recovery path for a
truncated drink name now (the title attribute is a non-touch
fallback only). cursor: pointer is cosmetic (this product is
touch-only); :active is the real, always-on tap feedback. */
cursor: pointer;
}
.line-name-text:active {
opacity: 0.65;
}
.line-name.line-detail-expanded .line-name-text {
display: block;
-webkit-line-clamp: unset;
line-clamp: unset;
overflow: visible;
text-overflow: clip;
white-space: normal;
/* UX75-F1: words break only at spaces; a single unbroken token wider
than the box is the one case allowed to split. */
word-break: normal;
overflow-wrap: anywhere;
}
/* UX75-F1 (docs/build-briefs/UX75-F1-open-name-width.md): while a name is
open, its price drops under it, the same wrap .line-top-stacked gives a
row at the narrower rail, so the open name gets the row width beside the
state button instead of a ~65px column (one word per line, its own state
button pushed below the rail fold). Keyed on the expanded state, not on
viewport; a collapsed row never matches. */
.line-top:has(.line-name.line-detail-expanded) {
flex-wrap: wrap;
gap: 2px var(--space-2);
}
.line-detail {
/* Design gate fix, ALPHA-10 re-review (2026-08-20): this row now holds
up to two children, a truncating text span (the liquor name) and, for
a substituted line, a non-shrinking badge (see .line-badge below). It
used to be a single block element whose own overflow/ellipsis rules
applied to ALL of its text content, including an appended
"· Substituted" suffix, which is exactly what let a long liquor name
truncate the marker away; see main.ts's renderTicketLines for the
full history. The overflow/ellipsis behavior itself moved onto
.line-detail-text so it applies only to the liquor name now, never to
the badge. */
display: flex;
align-items: center;
gap: var(--space-2);
min-width: 0;
}
.line-detail-text {
flex: 1 1 auto;
min-width: 0;
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
/* Touch-only audit fix (ALPHA-09 release evidence, category 2,
main.ts:1790 and main.ts:1814): a truncated title-only tooltip is
never touch-reachable, and live inspection found the title
attribute empty regardless. main.ts's attachTruncatedTextTapToggle
makes this row itself the recovery path: tapping it wraps to the
full text (see .line-detail-expanded below), tapping again
collapses it back. cursor: pointer is cosmetic (this product is
touch-only), :active below is the real, always-on tap feedback. */
cursor: pointer;
}
.line-detail-text:active {
opacity: 0.65;
}
/* Expanded state, toggled on the row wrapper (.line-detail, shared by
both the normal liquor-detail row and .line-warning) rather than on
.line-detail-text itself, so align-items can relax from center to
flex-start: once the text wraps onto multiple lines, centering would
vertically split a non-shrinking sibling badge (.line-badge) or notch
it off-center against the now-taller text block. Untouched
(untruncated) lines never gain this class (attachTruncatedTextTapToggle
is a no-op when textEl.scrollWidth <= textEl.clientWidth), so the
compact two-row layout and Review 5's line-height fixes are unchanged
for every line that was never truncated in the first place. */
.line-detail.line-detail-expanded {
align-items: flex-start;
}
.line-detail.line-detail-expanded .line-detail-text {
overflow: visible;
text-overflow: clip;
white-space: normal;
word-break: break-word;
}
/* UX13 (design/ux13-ticket-rail-rationale.md "Problem 2"): the tap-to-
expand path above (attachTruncatedTextTapToggle) had no VISIBLE sign it
exists (cursor: pointer alone, invisible with no hover on a
touchscreen). This chevron (main.ts's appendTruncationChevron) is
always in the DOM but hidden by default, shown only once
refreshLineTruncationChevrons marks its own row genuinely truncated
(scrollWidth > clientWidth), and rotated while the row is expanded, the
same shape design/mockups/ticket-rail-redesign-blocked.html's own
.trunc-chevron establishes. Purely visual: the tap target stays the
text span itself, unchanged. */
.trunc-chevron {
display: none;
flex-shrink: 0;
font-size: 12px;
font-weight: var(--font-weight-bold);
line-height: 1;
color: var(--color-accent-strong);
transform: translateY(1px);
transition: transform var(--motion-fast) var(--motion-easing-standard);
}
.line-name.is-truncated .trunc-chevron,
.line-detail.is-truncated .trunc-chevron {
display: inline-block;
}
.line-name.line-detail-expanded .trunc-chevron,
.line-detail.line-detail-expanded .trunc-chevron {
transform: rotate(180deg) translateY(-1px);
}
.line-price {
flex-shrink: 0;
font-size: var(--font-size-sm);
color: var(--color-text-tertiary);
white-space: nowrap;
}
/* ALPHA-07: a resumed line whose liquor selection could not be
reconstructed (see main.ts's TicketLineState.priceable comment). Rare;
warning-colored so it reads as "needs attention", not as a normal
price. */
/* DSC35-S7 (design/mockups/dsc35-ticket-rail.html): the price after a
scheduled special, in the success colour and bold, with the green Auto
strip full width under the line. A line wraps ONLY when it carries a
strip, so every other line lays out exactly as before. */
.line.line-has-special {
flex-wrap: wrap;
padding: var(--space-1) 0;
}
.line-price.line-price-now {
color: var(--color-success-text);
font-weight: var(--font-weight-bold);
}
.line-special {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
margin-left: var(--space-2);
padding: 0 var(--space-2);
line-height: 1.2;
border-radius: var(--radius-sm);
background: var(--color-success-subtle);
border: 1px solid var(--color-success-subtle-border);
}
.tag-auto {
flex-shrink: 0;
display: inline-flex;
align-items: center;
white-space: nowrap;
font-size: var(--font-size-xs);
font-weight: var(--font-weight-bold);
padding: 2px var(--space-2);
border-radius: var(--radius-sm);
color: var(--color-success-strong);
background: var(--color-success-subtle);
border: 1px solid var(--color-success-subtle-border);
}
.line-special-name {
flex: 1;
min-width: 0;
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
color: var(--color-success-strong);
overflow-wrap: anywhere;
}
.line-special-amount {
flex-shrink: 0;
text-align: right;
white-space: nowrap;
font-size: var(--font-size-sm);
font-weight: var(--font-weight-bold);
color: var(--color-success-strong);
}
/* DSC35-S7b: the plain muted line under a drink whose special a manager removed. */
.line-special-removed {
flex: 1 1 100%;
margin-top: 2px;
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
overflow-wrap: anywhere;
}
.line-price.unavailable {
color: var(--color-warning-text);
font-weight: var(--font-weight-semibold);
}
/* ---------- UX14 (docs/build-briefs/UX14-floor-density.md, DEC-314): ring screen ----------
A to Z strip: ONE swipeable row of 44px letters (--index-strip-height),
only letters that have a drink, the right edge fading while there is more
to swipe to. It was two wrapped rows (114px). */
.alphabet-strip {
flex-wrap: nowrap;
gap: 0;
align-items: center;
box-sizing: border-box;
height: var(--index-strip-height);
padding: 0 var(--space-2);
overflow-x: auto;
overflow-y: hidden;
overscroll-behavior-x: contain;
scrollbar-width: none;
}
.alphabet-strip::-webkit-scrollbar {
display: none;
}
.alphabet-strip.has-more {
-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
}
/* POUR and OUT side by side above the name (they were stacked, 22px each). */
.tile-badges {
display: flex;
align-items: center;
align-self: flex-start;
flex-wrap: wrap;
gap: var(--space-1);
margin-bottom: calc(var(--space-1) - var(--space-3));
}
.tile-badges .tile-kind-badge,
.tile-badges .stock-state-badge {
margin-bottom: 0;
}
/* A ticket line is two rows, always: the name gets the whole first row, then
the price and the liquor share row two (a pour drink was three rows, 92px,
against 62px for a plain one; a name used to share row one with its price
and truncate to "Al..."). Designer polish R1/R2 on UX14. .line-top is
display: contents so its name and price join the info column's grid. */
.line-info {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-content: center;
gap: var(--space-1) var(--space-2);
}
.line-info > * {
grid-column: 1 / -1;
min-width: 0;
}
.line-info > .line-top {
display: contents;
}
.line-info .line-price,
.line-info .line-detail-text {
line-height: var(--line-height-tight);
}
.line-info .line-top .line-name {
grid-column: 1 / -1;
}
.line-info .line-top .line-price {
grid-column: 1;
align-self: center;
}
.line-info .line-top + .line-detail:not(.line-modifiers):not(.line-warning) {
grid-column: 2;
}
/* Design gate fix (2026-08-20): the persistent "needs a manager" note
that replaces .line-detail on an unpriceable line (renderTicketLines).
Shares .line-detail's layout (one truncated row) but reads as a warning
rather than incidental detail text, so the state is visible on the line
itself for as long as the line is on screen, not only in a toast.
Targets .line-detail-text (the child span), not .line-detail itself,
now that .line-detail is a flex wrapper rather than the text element. */
.line-warning .line-detail-text {
color: var(--color-warning-text);
font-weight: var(--font-weight-semibold);
}
/* ALPHA-10 item 2, corrected during the design gate re-review
(2026-08-20): "Substituted lines show it plainly on the ticket rail"
(work item instruction), now a standalone badge rather than text
appended to the truncating liquor-name row (main.ts's renderTicketLines
carries the full history of why). flex-shrink: 0 keeps the badge's
full width guaranteed regardless of how much the liquor name beside it
has to truncate; .line-detail-text is the only thing that ever gives up
width. Distinguished by shape (a bordered, filled pill) and its own
literal text ("Substituted"), not by color alone, so it reads
correctly in every theme including colorblind and high-contrast, where
.line-badge-substitution's accent-subtle/accent-strong/accent-subtle-
border trio (design/tokens.css) is still a verified-contrast pair (see
each theme file's own contrast-ratio comment) even though the hue
itself differs theme to theme. Accent-colored rather than
warning-colored: a substitution is an intended bartender action, not a
problem needing attention the way an unpriceable line is. */
.line-badge {
flex-shrink: 0;
display: inline-flex;
align-items: center;
white-space: nowrap;
font-size: var(--font-size-xs);
font-weight: var(--font-weight-bold);
line-height: var(--line-height-tight);
padding: 2px var(--space-2);
border-radius: var(--radius-sm);
}
.line-badge-substitution {
color: var(--color-accent-strong);
background: var(--color-accent-subtle);
border: 1px solid var(--color-accent-subtle-border);
}
/* VOC1-F7 Slice 2 (DEC-171): a pour modifier gets its own plainly-labeled
badge, the same non-truncating shape .line-badge-substitution already
established, so a manager reading the ticket rail never infers pour size
from price alone. Info-toned rather than accent-toned: distinct from a
substitution (a different fact about the same line), verified-contrast
pair per design/tokens.css's own --color-info* comment. */
.line-badge-pour {
color: var(--color-info);
background: var(--color-info-subtle);
border: 1px solid var(--color-info-subtle-border);
}
/* .line-badge-paid (the separate "Paid" pill this file used to define
here, ALPHA-08) is gone as of Amendment 2026-08-22 (sixth), item 2: the
signal it carried now lives on the line's own .state-btn instead (see
.state-btn.paid below), one control per line rather than two stacked
side by side. */
/* Amendment 2026-08-22 (item 3): the per-line guest badge (.line-badge-
guest, info-toned) is gone. A guest's drinks are now grouped under
their own .line-section-header (below) instead, so which guest a line
belongs to is conveyed by the section it sits in rather than a badge
competing with the drink name for the line's own limited width. */
.line-section-header {
font-size: var(--font-size-sm);
font-weight: var(--font-weight-bold);
color: var(--color-text-secondary);
padding: var(--space-2) 0 var(--space-1);
margin-top: var(--space-2);
border-top: 1px solid var(--color-border);
}
.line-section-header:first-child {
margin-top: 0;
padding-top: 0;
border-top: none;
}
/* Amendment 2026-08-22 (fifth), item 3: a section whose every line is
already covered sinks to the bottom of the rail and is "visibly marked
paid" (the item's own wording). Text-suffixed by main.ts's
buildLineSectionHeader (", paid"), never color alone, matching this
file's own touch-only/colorblind rule; the color here reuses the same
fixed success pairing .line-badge-paid above already established for
"this is a positive, paid state." Font-size/weight/padding are
untouched from the plain .line-section-header above, so this adds no
height of its own. */
.line-section-header-paid {
color: var(--color-success-text);
}
.state-btn {
/* Design gate fix (2026-08-20): dropped from touch-target-comfortable
(56px) to touch-target-min (44px, still >= the 44px hard floor) and
from a fixed 148px to a content-sized min-width, to give the
compacted .line-info more of the ticket rail's 400px width for real
drink/liquor names instead of forcing them to wrap.
UX44 (docs/build-briefs/UX44-ticket-line-name-whole-price-below.md,
the Hybrid variant, DEC-198): padding and icon-to-text gap tightened
further (var(--space-3) to var(--space-2), var(--space-2) to
var(--space-1)) to reclaim more chrome for .line-name-text; still
comfortably above the 112px DEC-053 floor and the 44px height floor
(both unchanged below). */
flex-shrink: 0;
height: var(--touch-target-min);
min-width: 112px;
padding: 0 var(--space-2);
border-radius: var(--radius-md);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-1);
border: 1px solid transparent;
cursor: pointer;
}
.state-btn .dot-icon {
width: 18px;
height: 18px;
border-radius: 50%;
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
}
.state-btn.not-prepared {
background: var(--color-warning-subtle);
color: var(--color-warning-strong);
border-color: var(--color-warning-subtle-border);
}
.state-btn.not-prepared .dot-icon {
border: 2px solid var(--color-warning-strong);
}
.state-btn.prepared {
background: var(--color-success-subtle);
color: var(--color-success-strong);
border-color: var(--color-success-subtle-border);
cursor: default;
}
.state-btn.prepared .dot-icon {
background: var(--color-success-strong);
/* text-on-dark, not text-on-accent: this background is the FIXED
semantic success-strong color (design/tokens.css), always dark, not
this theme's own accent-strong. text-on-accent is tuned per-theme to
pair with THAT theme's accent-strong specifically (see
design/README.md) and on Charcoal is a dark color, since Charcoal's
own accent-strong is light; paired with the fixed dark success-strong
it renders near-invisible dark-on-dark. text-on-dark is defined on
every theme to be safely light against a dark, saturated background,
which is what this fixed chip icon always is. Design/QA gate finding,
2026-08-21: found while verifying the new Charcoal accent red does
not read as an error state; this bug predates that change (same root
cause affected the danger/success toast and the warning/info icons
below, fixed alongside it). */
color: var(--color-text-on-dark);
font-size: 12px;
font-weight: var(--font-weight-bold);
}
/* Amendment 2026-08-22 (sixth), item 2: the terminal Paid state, replacing
the separate .line-badge-paid pill that used to render beside this
button (see that class's own now-historical comment above). Deliberately
a SOLID success fill rather than reusing .state-btn.prepared's subtle
tint: the two are adjacent states a bartender scans past quickly, and a
light-green-on-light-green pair (subtle Prepared next to a
hypothetically subtle Paid) would read as one state twice rather than a
clear progression. color-success-strong/text-on-dark is the same
verified-contrast fixed pair .toast.toast-success and this same rule's
own .dot-icon above already use for "a solid, always-dark, saturated
background," so this stays legible in every theme including Charcoal
without a new pairing to verify. */
.state-btn.paid {
background: var(--color-success-strong);
color: var(--color-text-on-dark);
border-color: var(--color-success-strong);
cursor: default;
}
.state-btn.paid .dot-icon {
background: var(--color-text-on-dark);
color: var(--color-success-strong);
font-size: 12px;
font-weight: var(--font-weight-bold);
}
/* The whole money/action block stays together above the rail edge while drinks scroll.
Native rail overflow remains a safety fallback for an exceptionally tall set of actual reductions. */
.ticket-money-footer {
position: sticky;
bottom: 0;
flex-shrink: 0;
background: var(--color-surface);
}
.ticket-totals {
padding: var(--chrome-gap-hairline) var(--space-4) 0;
border-top: 1px solid var(--color-border);
flex-shrink: 0;
}
.totals-row {
display: flex;
justify-content: space-between;
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
padding: var(--space-1) 0;
}
/* PAYTOTAL1: ticket breakdown is always visible; Total has no collapse action. */
.totals-row-grand {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-2);
font-size: var(--font-size-xl);
line-height: var(--line-height-chrome);
font-weight: var(--font-weight-bold);
color: var(--color-text-primary);
}
.totals-label-row {
display: flex;
align-items: center;
gap: 2px;
}
.totals-compact {
display: flex;
}
/* UX62 (docs/build-briefs/UX62-paid-ticket-totals.md): the persistent
"Paid" row, directly under Total. Copied from the owner-approved mockup
(design/mockups/ux62-paid-ticket-totals.html's "NEW in the proposed
panel only" block). Same row shape as .totals-row-grand (Total), one
size down; fixed success tokens plus a check glyph and the word "Paid"
carry the state together, never color alone (design/principles.md rule
1). */
.totals-row-paid {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-2);
margin-top: var(--chrome-gap-hairline);
font-size: var(--font-size-md);
font-weight: var(--font-weight-semibold);
color: var(--color-success-text);
}
.totals-row-paid .paid-label {
display: flex;
align-items: center;
gap: var(--space-1);
}
.totals-row-paid .paid-check {
width: 16px;
height: 16px;
border-radius: 50%;
flex-shrink: 0;
background: var(--color-success-strong);
color: var(--color-text-on-dark);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 10px;
font-weight: var(--font-weight-bold);
}
.totals-row-paid .paid-count {
color: var(--color-text-tertiary);
font-weight: var(--font-weight-regular);
font-size: var(--font-size-chrome);
}
/* UX62 tip correction (owner ruling, 2026-09-28): a plain detail row,
directly under Paid, matching Subtotal/Tax's own weight rather than
Paid's own success-check treatment -- Tips is a breakdown figure, not a
completion state, so it carries no icon and no color signal of its own
(design/principles.md rule 1 governs STATE; this is an amount). Shown
only when the summed tip is above zero (renderPaidRow). */
.totals-row-tips {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-2);
margin-top: var(--chrome-gap-hairline);
font-size: var(--font-size-chrome);
line-height: var(--line-height-chrome);
color: var(--color-text-secondary);
}
/* UX62-F1 (docs/build-briefs/UX62-F1-refunded-line.md), owner ruling
2026-09-28, "Separate Refunded line": same secondary treatment as
.totals-row-tips directly above, not Paid's success-check treatment --
a refund is an amount breakdown on this ticket, not itself a completion
state (design/principles.md rule 1). Shown only when a completed refund
exists (renderPaidRow). */
.totals-row-refunded {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-2);
margin-top: var(--chrome-gap-hairline);
font-size: var(--font-size-chrome);
line-height: var(--line-height-chrome);
color: var(--color-text-secondary);
}
/* Sixteenth amendment item 2: the "All paid. Close this ticket?" one-tap
prompt. Success tokens (this is a good-news state), touch-first row
with both controls at the >=44px hard floor (CLAUDE.md's touch-only
rule), matching .zero-due-prompt-actions below. */
/* ALPHA-12 vertical-space-budget class of bug (see .ticket-lines' own
comment above for the full history): design-gate finding, this rule's
own first version used justify-content:space-between with flex-wrap,
which wraps to two full rows the moment the text and both buttons
cannot share one line, roughly DOUBLING this element's height
(measured 127px on a 400px-wide rail at 1024x768 vs. an intended ~55px)
and pushing #ticket-actions/#close-ticket down far enough to overlap
#debug-panel below the ticket rail - the exact `#debug-panel
intercepts pointer events` failure mode this codebase has hit before.
UX63/UX52 (docs/backlog.md): the ORIGINAL one-row-plus-ellipsis fix for
that bug traded one defect for another. "All paid. Ticket closed." and
"Nothing left to pay. Close this ticket?" both truncated to "All
pai..." beside their own button at FLOOR_DEVICE's 400px rail width
(design/reviews/pay14-screens/built-18-walkout-on-stranded-tab-*.png),
unreadable by touch with no title-tooltip recovery allowed on a floor
surface (CLAUDE.md). Fixed by a DELIBERATE two-row stack instead: the
text is its own full-width row (wraps onto a second line if it must,
never truncates), and the actions sit on their own row below it,
right-aligned. This is not the old uncontrolled wrap: the two rows are
fixed roles (text always on top, actions always on the bottom), so the
height is bounded and predictable rather than depending on where a
button happens to force a break mid-row. Neither button shrinks or
loses its 44px floor (--touch-target-min, CLAUDE.md's touch-only
rule); the small height this adds comes out of #ticket-lines' own
flex-grow budget, never out of a touch target. */
.zero-due-prompt {
margin: 0 var(--space-5) var(--space-2);
padding: var(--space-2) var(--space-3);
border-radius: var(--radius-md);
background: var(--color-success-subtle);
border: 1px solid var(--color-success-subtle-border);
display: flex;
flex-direction: column;
align-items: stretch;
gap: var(--space-2);
}
.zero-due-prompt-text {
color: var(--color-success-strong);
font-weight: var(--font-weight-semibold);
font-size: var(--font-size-sm);
white-space: normal;
overflow-wrap: break-word;
}
.zero-due-prompt-actions {
display: flex;
justify-content: flex-end;
gap: var(--space-2);
flex-shrink: 0;
}
.zero-due-prompt-actions button {
height: var(--touch-target-min);
padding: 0 var(--space-3);
}
.ticket-actions {
position: sticky;
bottom: 0;
z-index: 1;
background: var(--color-surface);
/* UX13: Prepare All and Pay now share ONE row (.action-row-primary
below) instead of Pay owning a full-width row under a separate
Prepare-All/Close-Ticket pair. Close Ticket is gone outright (see
index.html's own comment on this block). No gap here: the real
production topbar (unlike the isolated mockup's own simplified one)
leaves this rail less room than the mockup could assume, and
harness/e2e/ux13-ticket-rail.spec.ts measures every pixel of it, so a
conditional child (#pay-block-reason, #no-tip-button, #pay-status)
sits directly against whatever is above it; each already carries its
own background/border-left so the boundary stays readable without a
gap spending height this rail does not have.
UX46 (docs/build-briefs/UX46-pay-divider-clearance.md): a single,
one-time var(--space-1) (4px) top padding was added so Pay (the
taller of the two primary-row buttons, its own top edge sitting
flush at the row's own top edge under align-items: center) gets a
visible gap from the divider above, matching Prepare All's own
existing clearance. This does NOT reopen the "no gap" rule above:
every conditional child below the primary row still stacks against
its own neighbour with zero gap between THEM, unchanged. */
padding: var(--space-1) var(--space-4) 0;
display: flex;
flex-direction: column;
flex-shrink: 0;
border-top: 1px solid var(--color-border);
}
/* Sharing one row instead of two stacked rows is a LAYOUT change, not a
touch-target change: neither button's own height moved (Prepare All is
--touch-target-min, Pay is --touch-target-primary, both unchanged
below). Stacked, the pair costs 44 + --chrome-gap-target + 64 = 116px;
side by side they cost max(44, 64) = 64px, since --chrome-gap-target
(8px) is spent horizontally between them instead of vertically between
rows -- design/ux13-ticket-rail-rationale.md's own single largest
density saving. This is the one place this rail departs from
design/principles.md rule 2 ("Pay is a single full-width location... nothing
else competes with it for size, color, or position"): Pay still
dominates by size (64px vs 44px) and by color (solid accent fill vs
Prepare All's outline below), so the hierarchy rule 2 asks for is still
visible at a glance; only "alone on its own row" is given up. */
.action-row-primary {
display: flex;
align-items: center;
gap: var(--chrome-gap-target);
}
.btn-prepare-all {
flex: 1;
height: var(--touch-target-min);
border-radius: var(--radius-md);
background: var(--color-surface);
border: 1px solid var(--color-border-strong);
color: var(--color-text-primary);
font-size: var(--font-size-base);
font-weight: var(--font-weight-semibold);
cursor: pointer;
}
.btn-prepare-all:disabled {
background: var(--color-surface-sunken);
color: var(--color-text-tertiary);
border-color: var(--color-border);
cursor: default;
}
/* .action-row-primary's own two-thirds share; .btn-pay's base rule below
(height, color, shape) is shared with every other Pay-styled button in
this file (#zero-due-close, the pay-confirm sheet's own confirm
button), so the flex ratio stays scoped to this row rather than
applied to .btn-pay generally. */
.action-row-primary .btn-pay {
flex: 2;
}
.btn-pay {
height: var(--touch-target-primary);
border-radius: var(--radius-md);
border: none;
background: var(--color-accent-strong);
color: var(--color-text-on-accent);
font-size: var(--font-size-lg);
font-weight: var(--font-weight-bold);
box-shadow: var(--shadow-2);
}
.btn-pay:disabled {
background: var(--color-surface-sunken);
color: var(--color-text-tertiary);
box-shadow: none;
}
/* UX74: the bare word "Pay" while the payment preview is out of date.
One weight step lighter than the amount label so a lone word does not
shout. Box, height and disabled colors are unchanged. */
.btn-pay.is-stale {
font-weight: var(--font-weight-semibold);
}
/* Found by this task's own live Charcoal sweep (Amendment 2026-08-22),
not by the owner's report: this read the FIXED --color-warning-strong
as bare text with no background at all, the inverse of design/README.md's
own rule ("never pair a semantic color with a component's own surface
or text tokens") from the other direction, a fixed color against a
THEME surface rather than a theme color against a fixed surface. On
every light theme this happened to stay legible by accident
(warning-strong is dark, light surfaces are light); measured at 2.58:1
against Charcoal's own dark surface, well under the 4.5:1 floor. Given
its own self-contained warning-subtle background, the same pairing
every other warning chip in this file already uses
(design/README.md's checked 5.4:1 ratio), so it now reads correctly
regardless of theme surface, not just by accident on light ones. */
/* UX13: compressed from a padded, bordered banner to a left-accented
line (design/mockups/ticket-rail-redesign-blocked.html's own
.pay-block-reason), roughly a quarter of the previous box's height.
Still color + shape together (design/README.md's own "never color
alone" rule: a colored left bar, not color alone) and still its own
row; not a tappable control, so it is not held to the 44px/8px rules
the buttons above it are. */
.pay-block-reason {
display: flex;
align-items: center;
gap: var(--space-2);
font-size: var(--font-size-chrome);
line-height: var(--line-height-chrome);
font-weight: var(--font-weight-semibold);
color: var(--color-warning-strong);
background: var(--color-warning-subtle);
border-left: 3px solid var(--color-warning-strong);
padding: var(--chrome-gap-hairline) var(--space-2) var(--chrome-gap-hairline) var(--space-3);
}
/* UX74-F1 (DEC-286, design/mockups/ux74-f1-preview-failed.html): the
failed reading of the Pay block. Same left-bar shape as
.pay-block-reason in the danger pair, text on the left and one 48px
Try again button on the right. Words carry it, colour helps. Touch
only: no hover rule, no animation. */
.pay-fail {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-2);
padding: var(--space-1) var(--space-2) var(--space-1) var(--space-3);
background: var(--color-danger-subtle);
border-left: 3px solid var(--color-danger-strong);
color: var(--color-danger-strong);
}
.pay-fail[hidden] {
display: none;
}
.pay-fail-text {
flex: 1;
min-width: 0;
font-size: var(--font-size-sm);
line-height: var(--line-height-tight);
font-weight: var(--font-weight-semibold);
}
.btn-retry {
flex: none;
min-width: 120px;
height: 48px;
padding: 0 var(--space-4);
border-radius: var(--radius-md);
background: var(--color-surface);
border: 1px solid var(--color-danger-strong);
color: var(--color-danger-strong);
font-family: inherit;
font-size: var(--font-size-base);
font-weight: var(--font-weight-bold);
}
.pay-status {
text-align: center;
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
padding: var(--space-2);
border-radius: var(--radius-md);
}
.pay-status.success {
background: var(--color-success-subtle);
color: var(--color-success-strong);
}
.pay-status.error {
background: var(--color-danger-subtle);
color: var(--color-danger-strong);
/* CL6-F1-F3 design review: the three-line live-money message must never clip. */
padding-bottom: var(--space-3);
}
/* TERM2: Pending is a caution, not an error. Same tokens .badge-aging uses. */
.pay-status.warning {
background: var(--color-warning-subtle);
border: 1px solid var(--color-warning-subtle-border);
color: var(--color-warning-strong);
}
/* TERM2: a card payment waiting on a reader. Larger than the other status
lines and a fixed minimum height, so the rail does not jump when the line
appears or is replaced by the result. */
.pay-status.waiting {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-3);
min-height: 72px;
padding: var(--space-3) var(--space-4);
text-align: left;
font-size: var(--font-size-base);
background: var(--color-accent-subtle);
border: 1px solid var(--color-accent-subtle-border);
color: var(--color-text-primary);
}
.pay-status.waiting .pay-status-lines {
display: flex;
flex-direction: column;
gap: 2px;
}
.pay-status.waiting .pay-status-title {
font-weight: var(--font-weight-bold);
}
.pay-status.waiting .pay-status-hint {
font-weight: var(--font-weight-medium);
}
.pay-status-spinner {
flex: none;
width: 22px;
height: 22px;
border-radius: var(--radius-full);
border: 3px solid var(--color-accent-subtle-border);
border-top-color: var(--color-accent-strong);
animation: pay-status-spin 1s linear infinite;
}
@keyframes pay-status-spin {
to {
transform: rotate(360deg);
}
}
@media (prefers-reduced-motion: reduce) {
.pay-status-spinner {
animation: none;
border-top-color: var(--color-accent-strong);
border-right-color: var(--color-accent-strong);
}
}
#pay-reader-cancel-button {
min-height: var(--touch-target-min);
}
/* Design/QA gate finding F: per-maker tip split, shown right after a
payment with a tip actually captures. Plain theme-native surface (not a
fixed semantic background), since this is informational, not a state
signal - ordinary --color-text-primary/--color-surface is correct here,
unlike the warn-/status- banners' fixed-background pairs above. */
.pay-tip-split {
margin-top: var(--space-2);
padding: var(--space-3);
border-radius: var(--radius-md);
border: 1px solid var(--color-border);
background: var(--color-surface);
}
.pay-tip-split-title {
font-size: var(--font-size-xs);
font-weight: var(--font-weight-semibold);
color: var(--color-text-secondary);
text-transform: uppercase;
letter-spacing: 0.02em;
margin-bottom: var(--space-2);
}
.pay-tip-split-row {
display: flex;
justify-content: space-between;
font-size: var(--font-size-sm);
color: var(--color-text-primary);
padding: var(--space-1) 0;
}
/* ---------- Debug / session panel (staff/admin only, never shown to a
customer). Carries the provisional-tax label per
docs/decision-proposals/provisional-pricing-config.md wherever a rate
(not just a dollar amount) is displayed. ---------- */
.debug-panel {
border-top: 1px solid var(--color-border);
background: var(--color-surface-sunken);
padding: var(--space-2) var(--space-5);
font-size: var(--font-size-xs);
color: var(--color-text-secondary);
flex-shrink: 0;
}
.debug-panel summary {
cursor: pointer;
padding: var(--space-2) 0;
}
.debug-panel dl {
display: grid;
grid-template-columns: max-content 1fr;
gap: var(--space-1) var(--space-3);
margin: 0 0 var(--space-3);
}
.debug-panel dt {
color: var(--color-text-tertiary);
}
.debug-panel dd {
margin: 0;
font-family: ui-monospace, monospace;
}
/* ---------- Liquor sheet ---------- */
.scrim {
position: fixed;
inset: 0;
background: var(--color-scrim);
z-index: var(--z-scrim);
display: flex;
align-items: flex-end;
justify-content: center;
padding: 0;
}
.sheet {
background: var(--color-surface);
border-radius: var(--radius-xl) var(--radius-xl) 0 0;
box-shadow: var(--shadow-3);
overflow: hidden;
display: flex;
flex-direction: column;
width: 100%;
max-width: 640px;
max-height: min(720px, 92vh);
z-index: var(--z-sheet);
}
.sheet-header {
padding: var(--space-5) var(--space-5) var(--space-4);
border-bottom: 1px solid var(--color-border);
flex-shrink: 0;
}
.sheet-title-row {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--space-3);
}
.sheet-title {
font-size: var(--font-size-lg);
font-weight: var(--font-weight-bold);
}
/* INV26 Slice 2 (DEC-206 item 3): Backbar-style item-detail tabs, ported
from design/mockups/inv26-inventory-backbar.html's own