/* The POS screens' familiar look - "the same old desktop app, improved".
   Waiter.Shared's, linked from both hosts' index.html (_content/IdealPOS.Waiter.Shared/till.css), and
   every rule is scoped under .till-familiar: the class MainLayout puts on its root when
   ITillShell.Familiar (a till, unless IDEALPOS_TILL_WEBLOOK=1; the browser web app and the MAUI app
   on the POS screens of a window >= PosLook.WideMinPx), so a page without it is untouched. The
   MudTheme stays the web's; this file brings the desktop's chrome, buttons and type. Razor keeps the
   web's markup as it is - the familiar markup (TillStatusStrip, PosMenuGrid's familiar buttons) is
   styled here. */

/* the desktop's Bitstream Vera Sans Mono (ePOS/fonts, linked in by Waiter.Shared's .csproj): totals + the clock */
@font-face { font-family: "Vera Mono"; src: url("fonts/VeraMono.ttf") format("truetype"); font-weight: 400; font-style: normal; }
@font-face { font-family: "Vera Mono"; src: url("fonts/VeraMoBd.ttf") format("truetype"); font-weight: 700; font-style: normal; }

.till-familiar {
    --till-strip-h: 28px;
    --till-gutter: 4px;
    /* the desktop's buttons are Verdana bold; the till uses Windows' own Segoe UI Bold - as bold and
       as familiar, crisper, and narrow enough that names fit the cells whole */
    --till-button-font: "Segoe UI", system-ui, sans-serif;
    --till-mono-font: "Vera Mono", Consolas, monospace;
}

/* thin scrollbars, as the desktop's (L08) */
.till-familiar, .till-familiar * { scrollbar-width: thin; }

/* ---- The POS screens' canvas, in the device's theme: dark or light (S5)
   MainLayout adds .till-pos on pos/* - the board, the PIN pad, order, settle and their popups - with the
   device's theme (PosLook): .till-dark, black as the original app (Pawel 2026-10-10: "keep it black as
   it is in the original app"), or .till-light, a light grey canvas with white panels (Pawel 2026-10-11).
   My Cash, Remote Authorization and the Back Office keep the white. MudBlazor paints from its palette
   variables, so they point at the theme's tokens here once and its surfaces, text and lines follow;
   the two theme blocks only set the tokens. Everything the desktop colours itself (keys, tiles, bars,
   the white basket, the blue item page) is the same in both. Popups sit on their own panel with a
   frame, so a dialog still lifts off the page. */
.till-familiar.till-pos {
    /* a button with no colours of its own: Krypton's (Microsoft365Blue) light button, dark navy text */
    --till-button-back: #e1edfa;
    --till-button-fore: #1e395b;
    --mud-palette-background: var(--till-canvas);
    --mud-palette-background-gray: var(--till-canvas-2);
    --mud-palette-surface: var(--till-surface);
    --mud-palette-text-primary: var(--till-ink);
    --mud-palette-text-secondary: var(--till-ink-2);
    --mud-palette-text-disabled: var(--till-ink-3);
    --mud-palette-action-default: var(--till-action);
    --mud-palette-action-default-hover: var(--till-hover);
    --mud-palette-action-disabled: var(--till-action-off);
    --mud-palette-action-disabled-background: var(--till-action-off-back);
    --mud-palette-lines-default: var(--till-line);
    --mud-palette-lines-inputs: var(--till-line-input);
    --mud-palette-divider: var(--till-divider);
    --mud-palette-divider-light: var(--till-divider-light);
    --mud-palette-table-lines: var(--till-divider);
    --mud-palette-table-hover: var(--till-table-hover);
    --mud-palette-table-striped: var(--till-table-striped);
    background: var(--till-canvas); color: var(--till-ink);
}
.till-familiar.till-pos.till-dark {
    --till-canvas: #000; --till-canvas-2: #161616; --till-surface: #000;
    --till-panel: #111; --till-panel-edge: #3a3a3a; --till-frame: 2px solid #fff;   /* a white frame round a popup (Pawel 2026-10-10) */
    --till-edge: #3a3a3a; --till-strip-back: #000; --till-strip-edge: #3a3a3a;
    --till-ink: #fff; --till-ink-2: rgba(255, 255, 255, .72); --till-ink-3: rgba(255, 255, 255, .45); --till-muted: #9a9a9a;
    --till-action: #fff; --till-hover: rgba(255, 255, 255, .08);
    --till-action-off: rgba(255, 255, 255, .4); --till-action-off-back: rgba(255, 255, 255, .14);
    --till-line: rgba(255, 255, 255, .22); --till-line-input: rgba(255, 255, 255, .45);
    --till-divider: rgba(255, 255, 255, .18); --till-divider-light: rgba(255, 255, 255, .1);
    --till-table-hover: rgba(255, 255, 255, .06); --till-table-striped: rgba(255, 255, 255, .03);
    /* the desktop's MsgForm / StatusLabel green and red, a step brighter on black */
    --till-ok: #1fc11f; --till-fail: #ff4a4a;
    --till-key-edge: #fff; --till-scroll: #555;
}
.till-familiar.till-pos.till-light {
    --till-canvas: #f2f4f7; --till-canvas-2: #e9edf2; --till-surface: #fff;
    --till-panel: #fff; --till-panel-edge: #e3e7ee; --till-frame: 1px solid #c9d1dc;
    --till-edge: #c9d1dc; --till-strip-back: #fff; --till-strip-edge: #d5dbe3;
    --till-ink: #1f2933; --till-ink-2: rgba(0, 0, 0, .6); --till-ink-3: rgba(0, 0, 0, .38); --till-muted: #6b7280;
    --till-action: rgba(0, 0, 0, .6); --till-hover: rgba(0, 0, 0, .06);
    --till-action-off: rgba(0, 0, 0, .3); --till-action-off-back: rgba(0, 0, 0, .1);
    --till-line: rgba(0, 0, 0, .14); --till-line-input: rgba(0, 0, 0, .35);
    --till-divider: rgba(0, 0, 0, .12); --till-divider-light: rgba(0, 0, 0, .06);
    --till-table-hover: rgba(0, 0, 0, .04); --till-table-striped: rgba(0, 0, 0, .02);
    --till-ok: #138a13; --till-fail: #d32f2f;
    --till-key-edge: rgba(0, 0, 0, .18); --till-scroll: #b0b8c4;
}
/* the page behind the app (a custom property does not reach the body, so each theme names its own) */
body:has(.till-familiar.till-pos.till-dark) { background: #000; }
body:has(.till-familiar.till-pos.till-light) { background: #f2f4f7; }
.till-familiar.till-pos, .till-familiar.till-pos * { scrollbar-color: var(--till-scroll) transparent; }
.till-familiar.till-pos .mud-dialog { background: var(--till-panel); border: var(--till-frame); }
.till-familiar.till-pos.till-light .mud-dialog { box-shadow: 0 10px 32px rgba(0, 0, 0, .28); }
.till-familiar.till-pos .mud-dialog .mud-dialog-title { background: var(--till-panel); border-bottom-color: var(--till-panel-edge); }
.till-familiar.till-pos .till-strip { background: var(--till-strip-back); border-top-color: var(--till-strip-edge); }
.till-familiar.till-pos .till-strip-version { color: var(--till-muted); }
/* the order screen's basket stays white, as the desktop's receipt grid is (Pawel 2026-10-10): the
   web theme's own light palette again, inside the POS screen */
.till-familiar.till-pos .pos-order-receipt {
    --mud-palette-background: rgba(255, 255, 255, 1);
    --mud-palette-background-gray: rgba(245, 245, 245, 1);
    --mud-palette-surface: rgba(255, 255, 255, 1);
    --mud-palette-text-primary: rgba(66, 66, 66, 1);
    --mud-palette-text-secondary: rgba(0, 0, 0, .54);
    --mud-palette-text-disabled: rgba(0, 0, 0, .38);
    --mud-palette-action-default: rgba(0, 0, 0, .54);
    --mud-palette-action-default-hover: rgba(0, 0, 0, .06);
    --mud-palette-action-disabled: rgba(0, 0, 0, .26);
    --mud-palette-action-disabled-background: rgba(0, 0, 0, .12);
    --mud-palette-lines-default: rgba(0, 0, 0, .12);
    --mud-palette-lines-inputs: rgba(189, 189, 189, 1);
    --mud-palette-divider: rgba(224, 224, 224, 1);
    --mud-palette-table-lines: rgba(224, 224, 224, 1);
    background: #fff; color: rgba(66, 66, 66, 1);
}
/* the order screen's item menu sits on the desktop's blue page (OrderUC clientMenuTab1.TabPageBgColor,
   rgb(52,93,219)): it shows between the buttons and in the empty cells, as on the legacy screen */
.till-familiar.till-pos .pos-order-items > .pos-menu-grid { background: #345ddb; padding: 2px; box-sizing: border-box; }
/* the settle screen's tenders without a colour: the desktop's tender default, Green with white type
   (PaymentButtons.btnSample) */
.till-familiar.till-pos { --till-tender-back: #008000; --till-tender-fore: #fff; }
/* the order screen's categories without a colour: the same Krypton default as the buttons */
.till-familiar.till-pos .pos-order-cats .mud-button-outlined:not([style*="background"]) {
    background: var(--till-button-back); color: var(--till-button-fore); border-color: var(--till-edge);
}
/* the message colours in the theme's green / red (the desktop's MsgForm; a step brighter on black) */
.till-familiar.till-pos .tm-message--ok { color: var(--till-ok); }
.till-familiar.till-pos .tm-message--error { color: var(--till-fail); }
.till-familiar.till-pos .tp-message { color: var(--till-fail); }


/* ---- Chrome (L01, L02): no app bar, no container padding - a slim status strip at the bottom ---- */

.till-familiar .till-body {
    padding: var(--till-gutter) var(--till-gutter) calc(var(--till-strip-h) + var(--till-gutter));
}

/* under the dialogs (1400) and the floor plan's full screen (1300), over the page */
.till-familiar .till-strip {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1100; height: var(--till-strip-h);
    display: flex; align-items: center; gap: 6px; padding: 0 6px; overflow: hidden; white-space: nowrap;
    background: var(--mud-palette-surface); border-top: 1px solid var(--mud-palette-lines-default);
    font-family: var(--till-button-font); font-size: 12px; color: var(--mud-palette-text-primary);
}
.till-familiar .till-strip-field { padding: 0 8px; border-radius: 3px; font-weight: 700; line-height: 20px; }
.till-familiar .till-strip-field--ok { background: #9acd32; color: #142400; }   /* the desktop's YellowGreen */
.till-familiar .till-strip-field--off { background: #d32f2f; color: #fff; }     /* the desktop's Red */
.till-familiar .till-strip-icons { display: inline-flex; align-items: center; gap: 2px; margin-left: 2px; }
.till-familiar .till-strip-icons .mud-icon-button { padding: 2px; }
.till-familiar .till-strip-icons .mud-chip { height: 20px; margin: 0; }
.till-familiar .till-strip-spacer { flex: 1 1 auto; }
.till-familiar .till-strip .till-strip-theme, .till-familiar .till-strip .till-strip-btn { padding: 2px; }
/* a browser's site in place of "POS: n" (the web app bar's site chip: it opens the Connection dialog) */
.till-familiar .till-strip-site {
    flex: 0 1 auto; min-width: 0; max-width: 220px; overflow: hidden; text-overflow: ellipsis;
    border: 0; background: none; color: inherit; font: inherit; font-weight: 700; cursor: pointer;
}
.till-familiar .till-strip-clock { font-family: var(--till-mono-font); font-weight: 700; }
.till-familiar .till-strip-version { color: dimgray; font-size: 11px; }

/* A POS screen's root (.pos-fill-root) takes exactly what is left above the strip - under the
   screen's own header row, where it has one (settle) - so a short screen never scrolls the page.
   The web sizes it as a min-height under its 120px chrome guess. A taller one still scrolls the
   page, and its sticky bottom bar then stops above the strip instead of behind it. */
.till-familiar .till-body:has(> .pos-fill-root) {
    display: flex; flex-direction: column; min-height: 100dvh; box-sizing: border-box;
}
.till-familiar .till-body > .pos-fill-root { flex: 1 0 auto; min-height: 0; }
.till-familiar .pos-navbar--bottom { bottom: var(--till-strip-h); }
/* The board and the order screen: a DEFINITE height, so the bottom bar sits on the strip and the
   panes scroll inside themselves */
@media (min-width: 801px) {
    .till-familiar .pos-fill-root:has(> .pos-restaurant-screen),
    .till-familiar .pos-fill-root:has(> .pos-order-screen) {
        height: calc(100dvh - var(--till-strip-h) - 2 * var(--till-gutter)); min-height: 0;
    }
    .till-familiar .pos-restaurant-screen { max-height: none; flex: 1 1 0; }
    /* the board's right nav column at the desktop's width (MenuTab: 90px a column), not the web's
       140-180px: the tiles get the room back */
    .till-familiar .pos-restaurant-screen:not(.pos-restaurant-screen--nomenu) { grid-template-columns: minmax(0, 1fr) 90px; gap: 6px; }
    /* + the area column (L19) between the board and the nav column, as the desktop's FloorsTab */
    .till-familiar .pos-restaurant-screen:has(> .till-areas) { grid-template-columns: minmax(0, 1fr) 90px 90px; }
    .till-familiar .pos-restaurant-screen--nomenu:has(> .till-areas) { grid-template-columns: minmax(0, 1fr) 90px; }
    .till-familiar .pos-order-screen { flex: 1 1 0; }
}

/* the nav bars sit flush, as the desktop's MenuTabs */
.till-familiar .pos-navbar--bottom { margin-top: 4px; padding: 2px 0 0; }
.till-familiar .pos-navbar--right { padding: 0 0 0 2px; }
.till-familiar .pos-navbar--fill { gap: 2px; }


/* ---- Buttons (L03-L06): the desktop FunctionButton ----
   PosMenuGrid's familiar markup: .tf-btn > .tf-btn-face (caption + picture) + .tf-btn-extra (the
   desktop's extra line: qty, price, stock, extraname). Colours, the button's own border and its
   point sizes come inline from MenuGridShared / PosMenuGrid. */

.till-familiar .tf-btn {
    display: flex; flex-direction: column; min-width: 0; overflow: hidden; text-align: center;
    font-family: var(--till-button-font);
}
.till-familiar .tf-btn:active { filter: brightness(.9); }   /* desktop pressed: each channel x 0.9 */

/* A bar button is its own width container: PosMenuGrid.FitCaption shrinks a caption whose
   longest word would not fit (100cqw = the button). Not in the item grid - the grid is the
   container there (PosOrder's font growth) - nor in a shrink-to-fit dialog, which would collapse.
   --tf-reserve: the padding, a border (2px dashed on a free modifier), the grid gap, and the icon
   beside the caption. */
.till-familiar .pos-navbar .tf-btn { container-type: inline-size; }
.till-familiar .tf-btn--fn:has(.tf-btn-img img) { --tf-reserve: 42px; }
.till-familiar .pos-navbar--right .tf-btn.tf-btn--fn { --tf-reserve: 14px; }

.till-familiar .tf-btn-face {
    flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; gap: 4px;
}
/* a function / link button in a bar: the icon LEFT of the caption (Krypton's Values.Image), at
   the desktop's icon size */
.till-familiar .tf-btn--fn .tf-btn-face { flex-direction: row; }
.till-familiar .tf-btn--fn .tf-btn-img { order: -1; }
.till-familiar .tf-btn--fn .tf-btn-img img { width: 24px !important; height: 24px !important; }
/* an item, and anything in the side column: caption at the top, picture at the bottom
   (MenuStep imageToBackground) */
.till-familiar .tf-btn--item .tf-btn-face,
.till-familiar .pos-navbar--right .tf-btn-face { flex-direction: column; justify-content: space-between; gap: 2px; }
.till-familiar .pos-navbar--right .tf-btn--fn .tf-btn-img { order: 0; }
/* an item's picture fills the space between its name and its price, as the desktop scales it
   (capped: the thumbnails are small) */
.till-familiar .tf-btn--item .tf-btn-img { flex: 1 1 0; min-height: 0; max-height: 72px; justify-content: center; }
.till-familiar .tf-btn--item .tf-btn-img img { width: 100% !important; height: 100% !important; }
.till-familiar .pos-navbar--right .tf-btn--fn .tf-btn-img img { width: 32px !important; height: 32px !important; }

/* wrap at spaces (FitCaption sizes the caption so its words fit); overflow-wrap only catches a
   word that still does not. pre-line keeps the caption's own line breaks ("TAKE / AWAY / CLEAR"),
   as the desktop does - the web folds them into spaces. */
.till-familiar .tf-btn-cap { min-width: 0; max-width: 100%; overflow-wrap: break-word; white-space: pre-line; }
.till-familiar .tf-btn-img { flex: 0 0 auto; display: inline-flex; }
/* the extra line wraps between its parts ("78,00" / "[-10]"), never inside the price */
.till-familiar .tf-btn-extra { flex: 0 0 auto; line-height: 1.15; overflow: hidden; }
.till-familiar .tf-btn-warn { color: var(--mud-palette-error); }
.till-familiar .tf-btn--text { display: flex; align-items: center; justify-content: center; text-align: center; }


/* ---- Type (L07): the desktop's mono figures for the totals ---- */

.till-familiar .pos-order-receipt .mud-typography-h6[style*="tabular-nums"],
.till-familiar .pos-settle [style*="tabular-nums"] {
    font-family: var(--till-mono-font); font-weight: 700;
}


/* ---- Popups (L09-L13): the desktop's pads and boxes on white dialogs ----
   Components/Pos/Till: TillPinPad (.tp-), TillNumPad (.tn-), TillKeyboard (.tk-), TillMessage (.tm-),
   TillConfirm (.tc-). The keys are the desktop's flat solid colours with white bold type. */

.till-familiar .tkey {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 0;
    padding: 4px 6px; border: 1px solid rgba(0, 0, 0, .18); border-radius: 2px;
    font: 700 1.5rem/1.1 var(--till-button-font); color: #fff; text-transform: uppercase;
    cursor: pointer; user-select: none; -webkit-user-select: none; touch-action: manipulation;
}
.till-familiar .tkey:active:not(:disabled) { filter: brightness(.9); }   /* desktop pressed */
.till-familiar .tkey--blue { background: #4466dd; }     /* DecimalForm / PasswordKeys keys */
.till-familiar .tkey--red { background: #ff0000; }      /* Red: BS, CL, NO, CANCEL */
.till-familiar .tkey--green { background: #008000; }    /* Green: LOGIN, OK, YES, quick amounts */
.till-familiar .tkey--orange { background: #ff8c00; }   /* DarkOrange: splits, a lit CAPS / SHIFT */
.till-familiar .tkey--grey { background: #6b6b6b; }
.till-familiar .tkey:disabled { background: #808080; color: #e0e0e0; cursor: default; }   /* desktop disabled */

/* the value being keyed: the desktop's entry box, in its mono figures */
.till-familiar .till-display {
    display: block; width: 100%; min-height: 52px; box-sizing: border-box; margin: 0; padding: 4px 12px;
    border: 2px solid #4466dd; border-radius: 2px; background: #fff; color: #000; outline: none;
    font: 700 1.7rem/1.5 var(--till-mono-font); text-align: right;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* PIN pad (L09): 7-8-9 on top, the display over the keys, POS / User and a tall LOGIN beside them */
.till-familiar .tp-grid {
    display: grid; grid-template-columns: repeat(3, 100px) 236px; grid-template-rows: 64px repeat(4, 70px) auto;
    gap: 8px;
}
.till-familiar .tp-display {
    grid-column: 1 / 4; grid-row: 1; background: #4466dd; color: #fff; caret-color: #fff;
    text-align: center; letter-spacing: .35em; font-size: 2rem;
}
.till-familiar .tp-info { grid-column: 4; grid-row: 1 / 4; padding: 8px 4px; font: 700 1.15rem/1.6 var(--till-mono-font); overflow-wrap: anywhere; }
.till-familiar .tp-key { font-size: 2rem; }
.till-familiar .tp-key--word { font-size: 1.5rem; }   /* BS, CL */
.till-familiar .tp-login { grid-column: 4; grid-row: 4 / 6; font-size: 1.8rem; }
.till-familiar .tp-login-icon { font-size: 2rem; }
.till-familiar .tp-bottom { grid-column: 1 / -1; grid-row: 6; display: flex; justify-content: center; gap: 12px; padding-top: 4px; }
.till-familiar .tp-cancel { min-width: 200px; min-height: 60px; font-size: 1.4rem; }
.till-familiar .tp-message {
    max-width: 580px; margin-bottom: 10px; color: #d00000; font: 700 1.05rem/1.35 var(--till-button-font);
}

/* number pad (L10): quick amounts | 7-8-9 / 4-5-6 / 1-2-3 / 0-00-, with BS and a tall CL | splits */
.till-familiar .tn-pad { display: flex; gap: 8px; margin-top: 8px; outline: none; }
.till-familiar .tn-keys {
    flex: 4 1 0; display: grid; grid-template-columns: repeat(4, minmax(64px, 1fr)); grid-auto-rows: 64px; gap: 6px;
}
.till-familiar .tn-keys .tkey { font-size: 1.75rem; }
.till-familiar .tn-keys .tn-bs, .till-familiar .tn-keys .tn-cl { font-size: 1.4rem; }
.till-familiar .tn-cl { grid-column: 4; grid-row: 2 / span 3; }
.till-familiar .tn-quick, .till-familiar .tn-splits { flex: 2 1 0; display: grid; grid-auto-rows: 1fr; gap: 6px; }
.till-familiar .tn-quick { grid-template-columns: repeat(2, minmax(72px, 1fr)); }
.till-familiar .tn-quick .tkey { font-size: 1rem; }
.till-familiar .tn-quick-first { grid-column: span 2; }
.till-familiar .tn-splits { grid-template-columns: repeat(2, minmax(56px, 1fr)); }
.till-familiar .tn-splits .tkey { font-size: 1.15rem; }

.till-familiar .tn-entry { display: flex; align-items: center; gap: 12px; }
.till-familiar .tn-label { flex: 0 0 auto; font: 700 1rem/1.3 var(--till-button-font); color: var(--mud-palette-text-primary); }
.till-familiar .tn-entry .till-display { flex: 1 1 auto; }
.till-familiar .tn-hint { margin-top: 6px; font-size: .85rem; color: var(--mud-palette-text-secondary); }
/* a tender's fields (Balance / Amount / Tip) and the new-order fields: tap one to key it */
.till-familiar .tn-fields { display: flex; gap: 8px; }
.till-familiar .tn-field {
    flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: stretch; gap: 2px;
    padding: 4px 6px; border: 2px solid transparent; border-radius: 3px; background: none;
    font: inherit; text-align: left; cursor: pointer;
}
.till-familiar .tn-field--static { cursor: default; }
.till-familiar .tn-field--static .till-display { border-color: var(--mud-palette-lines-default); }
.till-familiar .tn-field--active { border-color: #ff8c00; }   /* the desktop's checked colour */
.till-familiar .tn-field--wide { width: 100%; padding: 0; }
.till-familiar .tn-field:disabled { cursor: default; opacity: .9; }
.till-familiar .tn-tips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.till-familiar .tn-tips .tkey { flex: 1 1 140px; min-height: 48px; font-size: 1rem; }
/* ON ACCOUNT (B09): the customer the payment goes on, over the pad (the desktop's OnePaymentForm line) */
.till-familiar .tn-customer { margin-bottom: 8px; font: 700 1.1rem/1.3 var(--till-button-font); color: #4169e1; }

/* on-screen keyboard (L11) */
.till-familiar .tk-board { display: flex; flex-direction: column; gap: 6px; }
.till-familiar .tk-display { margin-bottom: 4px; font-family: var(--till-button-font); font-size: 1.5rem; text-align: left; }
.till-familiar .tk-row { display: flex; gap: 6px; }
.till-familiar .tk-row .tkey { flex: 1 1 0; height: 56px; font-size: 1.35rem; text-transform: none; }

/* message (L12) and confirm (L13): the message in big type, big buttons centred under it */
.till-familiar .tm-dlg, .till-familiar .tc-dlg { min-width: min(520px, calc(100vw - 32px)); }
.till-familiar .tm-message, .till-familiar .tc-message {
    max-width: 640px; margin: 0 auto; padding: 18px 8px 8px; text-align: center; white-space: pre-line;
    font: 700 1.35rem/1.35 var(--till-button-font);
}
.till-familiar .tm-message--ok { color: #008000; }
.till-familiar .tm-message--error { color: #d00000; }
.till-familiar .tm-dlg .mud-dialog-actions, .till-familiar .tc-dlg .mud-dialog-actions { justify-content: center; padding-bottom: 20px; }
.till-familiar .tm-close { min-width: 200px; min-height: 60px; font-size: 1.4rem; }
.till-familiar .tm-count { margin-left: 16px; font: 700 1rem var(--till-mono-font); opacity: .85; }
.till-familiar .tc-actions { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.till-familiar .tc-row { display: flex; justify-content: center; gap: 12px; }
.till-familiar .tc-big { min-width: 180px; min-height: 70px; padding: 6px 18px; font-size: 1.4rem; }
/* YES / CLOSE hold the focus so Enter answers them (L33); the desktop draws no focus ring there */
.till-familiar .tc-big:focus, .till-familiar .tm-close:focus { outline: none; }
.till-familiar .tc-small { min-width: 160px; min-height: 54px; font-size: 1.15rem; }

/* printing-area picker: the areas as big tiles, three a row (a tap chooses) */
.till-familiar .tpa-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.till-familiar .tpa-tile { flex-direction: column; gap: 4px; min-height: 84px; padding: 6px 8px; font-size: 1.15rem; }
.till-familiar .tpa-sub { font: 700 .8rem/1.2 var(--till-button-font); text-transform: none; opacity: .9; }
.till-familiar .mud-dialog:has(.tpa-grid) { max-width: min(720px, calc(100vw - 32px)); }

/* dialogs that carry a pad or the keyboard get the room for it */
.till-familiar .mud-dialog:has(.tn-pad) { max-width: min(480px, calc(100vw - 32px)); }
.till-familiar .mud-dialog:has(.tn-quick), .till-familiar .mud-dialog:has(.tn-splits) { max-width: min(820px, calc(100vw - 32px)); }
.till-familiar .mud-dialog:has(.tk-board) { width: calc(100vw - 32px); max-width: 980px; }


/* ---- Dialog chrome (L16): a clear title, big coloured actions ----
   Every POS dialog on the till: the title reads as a real window title (the desktop shows none,
   D01); CANCEL / CLOSE (MudBlazor's plain text buttons) are the desktop's red, the confirming
   action (filled primary) its green, other filled colours keep theirs - all big. */

.till-familiar .mud-dialog { border-radius: 4px; }
.till-familiar .mud-dialog .mud-dialog-title {
    padding: 12px 24px; background: #f1f4f9; border-bottom: 1px solid var(--mud-palette-lines-default);
}
.till-familiar .mud-dialog .mud-dialog-title,
.till-familiar .mud-dialog .mud-dialog-title > .mud-typography {
    font: 700 1.25rem/1.3 var(--till-button-font); letter-spacing: normal;
}
.till-familiar .mud-dialog .mud-dialog-actions { gap: 10px; padding: 10px 16px 16px; }
.till-familiar .mud-dialog .mud-dialog-actions > .mud-button-root {
    min-width: 140px; min-height: 56px; padding: 6px 20px; border-radius: 2px;
    font: 700 1.05rem/1.2 var(--till-button-font); letter-spacing: normal;
}
.till-familiar .mud-dialog .mud-dialog-actions > .mud-button-text-default { background: #ff0000; color: #fff; }
.till-familiar .mud-dialog .mud-dialog-actions > .mud-button-filled-primary,
.till-familiar .mud-dialog .mud-dialog-actions > .mud-button-text-primary { background: #008000; color: #fff; }
.till-familiar .mud-dialog .mud-dialog-actions > .mud-button-root:active:not(:disabled) { filter: brightness(.9); }
.till-familiar .mud-dialog .mud-dialog-actions > .mud-button-root:disabled { background: #808080 !important; color: #e0e0e0; }
/* a pad's OK takes the width, as the desktop's */
.till-familiar .mud-dialog:has(.tn-pad) .mud-dialog-actions > .mud-button-filled-primary { flex: 1 1 auto; }
/* a popup whose only action is the desktop's big red CANCEL / CLOSE: centred under it */
.till-familiar .mud-dialog-actions:has(> .tkey:only-child) { justify-content: center; }

/* MISC (L30): the desktop's MiscForm - the pages as 90px tabs on the LEFT (.tcat: #345DDB, the chosen
   one DarkOrange), the page's buttons beside them at the desktop's height, a big red CANCEL */
.till-familiar .mud-dialog:has(.tmisc) { width: calc(100vw - 32px); max-width: 860px; }
.till-familiar .tmisc { display: flex; gap: 6px; }
.till-familiar .tmisc-tabs { flex: 0 0 90px; display: flex; flex-direction: column; gap: 4px; }
.till-familiar .tcat.tmisc-tab { flex: 0 0 90px; }
.till-familiar .tmisc-page { flex: 1 1 auto; min-width: 0; }
.till-familiar .tmisc-page .pos-menu-grid { grid-template-rows: none !important; grid-auto-rows: 72px; }
.till-familiar .tkey.tmisc-cancel { min-width: 214px; min-height: 60px; font-size: 1.45rem; }


/* ---- Board (L17-L22) ---- */

/* the area column (L19): the desktop FloorsTab's 90x90 check buttons - floors in #DEB985 with black
   bold type, TABLES + TABS in Blue with white type and its icon, the selected one DarkOrange and
   underlined. The count sits at the bottom, as the desktop's description line. */
.till-familiar .till-areas {
    display: flex; flex-direction: column; gap: 2px; min-height: 0; overflow-y: auto; margin-right: -4px;
}
.till-familiar .till-area {
    flex: 0 0 90px; width: 90px; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 6px; padding: 6px 4px; box-sizing: border-box; border: 1px solid rgba(0, 0, 0, .18); border-radius: 2px;
    background: #deb985; color: #000; font: 700 13px/1.15 var(--till-button-font); text-align: center;
    white-space: pre-line; overflow-wrap: anywhere; cursor: pointer; user-select: none; -webkit-user-select: none;
    touch-action: manipulation;
}
.till-familiar .till-area:active { filter: brightness(.9); }
.till-familiar .till-area--all { display: grid; grid-template-columns: auto 1fr; align-content: space-between; gap: 4px; background: #0000ff; color: #fff; }
.till-familiar .till-area--on { background: #ff8c00; }
.till-familiar .till-area--on .till-area-name { text-decoration: underline; }
.till-familiar .till-area-icon { width: 28px; height: 28px; }
.till-familiar .till-area--all .till-area-name { font-size: 12px; text-align: left; }
.till-familiar .till-area--all .till-area-count { grid-column: 1 / -1; }
.till-familiar .till-area-count { font-weight: 400; font-size: 12px; }

/* the board's header row holds only the LOG IN / New order fallbacks on a till (the operator is
   named in the status strip): without them it takes no room */
.till-familiar .pos-board-head:not(:has(.mud-button-root)) { display: none; }

/* the TABLES + TABS page (PosRestaurant .tb-board): filter rows, tiles that scroll, the view strip
   at the bottom */
.till-familiar .pos-restaurant-main:has(> .tb-board) { display: flex; flex-direction: column; overflow: hidden; }
.till-familiar .tb-board { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; gap: 4px; }

/* the filter rows (L17): FloorsTab's order-state and Group By check buttons - each in its own
   colour with its count on the right, ALL in green, the checked one DarkOrange and underlined */
.till-familiar .tb-filters { flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 3px; }
.till-familiar .tb-chip {
    display: inline-flex; align-items: center; justify-content: space-between; gap: 10px;
    min-width: 104px; height: 30px; padding: 0 8px; box-sizing: border-box;
    border: 1px solid rgba(0, 0, 0, .18); border-radius: 2px; background: #6b6b6b; color: #fff;
    font: 700 12px/1 var(--till-button-font); white-space: nowrap; cursor: pointer; touch-action: manipulation;
}
.till-familiar .tb-chip--all { background: #008000; font-style: italic; }
.till-familiar .tb-chip--on { background: #ff8c00 !important; color: #fff !important; text-decoration: underline; }
.till-familiar .tb-chip-n { display: inline-block; font-weight: 400; font-style: normal; }   /* inline-block: not underlined */

/* the tiles (L20): the desktop's flow of tiles at its list size (--tb-w / --tb-h, inline from
   PosRestaurant), scrolling inside; a group's heading breaks the row, as the desktop's flow break */
.till-familiar .tb-tiles {
    flex: 1 1 0; min-height: 0; overflow-y: auto; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 4px;
}
.till-familiar .tb-tiles > .tt-tile { flex: 0 0 var(--tb-w, 160px); height: var(--tb-h, 100px); }
.till-familiar .tb-tiles > .pos-card-group { flex: 0 0 100%; padding-top: 2px; }
.till-familiar .tb-empty { flex: 0 0 100%; padding: 16px 4px; font: 700 14px var(--till-button-font); color: var(--mud-palette-text-secondary); }

/* the view strip (L18): FloorsTab.panelViewMode - Group By (DarkViolet) and Sort By (DarkGreen)
   open their pickers; TABLES / TABS / MY AREA are check buttons, Blue, DarkOrange when on */
.till-familiar .tb-strip { flex: 0 0 auto; display: flex; gap: 4px; height: 34px; }
.till-familiar .tb-btn {
    flex: 1 1 0; min-width: 0; display: inline-flex; align-items: center; justify-content: space-between; gap: 6px;
    padding: 0 8px; box-sizing: border-box; border: 1px solid rgba(0, 0, 0, .18); border-radius: 2px; color: #fff;
    font: 700 12px/1 var(--till-button-font); white-space: nowrap; overflow: hidden; cursor: pointer; touch-action: manipulation;
}
.till-familiar .tb-btn:active:not(:disabled), .till-familiar .tb-chip:active { filter: brightness(.9); }
.till-familiar .tb-btn--group { flex-grow: 2; background: #9400d3; }
.till-familiar .tb-btn--sort { flex-grow: 2; background: #006400; }
.till-familiar .tb-btn-lbl { flex: 0 0 auto; font-weight: 400; font-size: 11px; }
.till-familiar .tb-btn-val { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; text-align: center; }
.till-familiar .tb-btn-n { font-weight: 400; }
.till-familiar .tb-check { background: #0000ff; }
.till-familiar .tb-check:not(:has(.tb-btn-n)) { justify-content: center; }
.till-familiar .tb-check--on { background: #ff8c00; }
.till-familiar .tb-check:disabled { background: #808080; color: #e0e0e0; cursor: default; }

/* a tile (L20, L21): PosOrderCard's familiar markup - the desktop's rich tile, one line a row so
   it fits 160x100: header, badges, time + age, note, guests + amount, waiter */
.till-familiar .tt-tile {
    min-width: 0; min-height: 0; overflow: hidden; box-sizing: border-box; border-radius: 4px; padding: 1px 4px 2px;
    display: flex; flex-direction: column; gap: 0; cursor: pointer; color: var(--mud-palette-text-primary);
    font: 400 11px/1.2 var(--till-button-font); user-select: none; -webkit-user-select: none; touch-action: manipulation;
}
.till-familiar .tt-tile:active { filter: brightness(.92); }
.till-familiar .tt-head {
    flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 4px;
    padding: 1px 4px; border-radius: 2px; white-space: nowrap; overflow: hidden;
}
.till-familiar .tt-title { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; }
.till-familiar .tt-level { font-size: 10.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; }
.till-familiar .tt-badges { flex: 0 0 auto; display: flex; gap: 3px; margin: 1px 0; overflow: hidden; white-space: nowrap; }
.till-familiar .tt-badge { font-size: 9px; font-weight: 700; line-height: 1; padding: 2px 4px; border-radius: 5px; }
.till-familiar .tt-row { flex: 0 0 auto; display: flex; align-items: center; gap: 3px; min-width: 0; white-space: nowrap; overflow: hidden; }
.till-familiar .tt-row > span { overflow: hidden; text-overflow: ellipsis; }
.till-familiar .tt-tile .mud-icon-root.tt-icon { flex: 0 0 auto; font-size: 13px; width: 13px; height: 13px; opacity: .8; }
.till-familiar .tt-age { flex: 0 0 auto; font-size: 9.5px; font-weight: 700; padding: 1px 4px; border-radius: 5px; }
.till-familiar .tt-note { font-style: italic; opacity: .75; }
.till-familiar .tt-amount { justify-content: space-between; margin-top: auto; }   /* the amount and the waiter sit at the bottom */
.till-familiar .tt-amount b { flex: 0 0 auto; font-size: 13px; font-variant-numeric: tabular-nums; }
.till-familiar .tt-guests { opacity: .75; }
.till-familiar .tt-user { font-weight: 700; }
/* the desktop's disabled tile: grey, light text, the content washed out (RichTilePainter) */
.till-familiar .tt-tile--off { color: #e0e0e0; }
.till-familiar .tt-tile--off .tt-head, .till-familiar .tt-tile--off .tt-badges, .till-familiar .tt-tile--off .tt-age { opacity: .55; }
.till-familiar .pos-board-out .tt-tile { filter: none; opacity: 1; }

/* the floor plan (L22): a table the operator cannot use is the desktop's disabled button (grey,
   its state colour on the border - PosFloorPlan), not the web's faded one */
.till-familiar .pos-board-out .pos-floor-table--off,
.till-familiar .pos-floor-table--off.pos-floor-table--scoped { filter: none; opacity: 1; }
.till-familiar .pos-floor-table--off .pos-floor-table-line { color: inherit !important; }

/* a split table's legs (PosSplitLegDialog): the desktop's "Select Order:" */
.till-familiar .tleg-label { margin-bottom: 8px; font: 700 1.1rem/1.3 var(--till-button-font); }

/* the logged-out preview (L31): the order screen's basket (PosReceiptPanel ReadOnly, .trb--ro) in the
   desktop's narrow ReceiptBasketForm - sized by its rows, nothing to tap - a big CLOSE and the till's
   SIGN IN (K08) */
.till-familiar .mud-dialog:has(.trb--ro) { width: 400px; max-width: calc(100vw - 32px); }
.till-familiar .trb--ro { flex: 0 1 auto; max-height: min(540px, calc(100dvh - 210px)); border: 1px solid #abbad0; }
.till-familiar .trb--ro .trb-rows { flex: 0 1 auto; min-height: 60px; }
.till-familiar .trb--ro .trb-row { cursor: default; }
.till-familiar .tkey.tprev-close, .till-familiar .tkey.tprev-signin { flex: 1 1 0; min-height: 56px; font-size: 1.3rem; }

/* item lookup (L32): the desktop's SELECT grid (Name / PLU / Open Price / the price levels, a page at a
   time, the pager beside it) under the till's type-ahead box (K06); a white grid, the selection Yellow */
.till-familiar .mud-dialog:has(.tlk) { width: calc(100vw - 32px); max-width: 900px; }
.till-familiar .tlk { display: flex; flex-direction: column; gap: 6px; }
.till-familiar .tlk-search { display: flex; align-items: center; gap: 6px; }
.till-familiar .tlk-label { flex: 0 0 auto; font: 700 14px/1 var(--till-button-font); }
.till-familiar .tlk-input {
    flex: 1 1 auto; min-width: 0; height: 44px; box-sizing: border-box; padding: 0 10px; border: 2px solid #4466dd;
    border-radius: 2px; background: #fff; color: #000; outline: none; font: 700 20px/1 var(--till-button-font);
}
.till-familiar .tkey.tlk-key { flex: 0 0 56px; height: 44px; font-size: 1.2rem; }
.till-familiar .tlk-body { display: flex; gap: 6px; height: min(436px, calc(100dvh - 300px)); }
.till-familiar .tlk-grid { flex: 1 1 auto; min-width: 0; overflow: hidden; display: flex; flex-direction: column; background: #fff; color: #000; }
.till-familiar .tlk-row {
    flex: 0 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) 64px 84px repeat(var(--tlk-levels, 3), 88px);
    align-items: center; min-height: 32px; border-bottom: 1px solid #e3e3e3; cursor: pointer;
    font: 700 14px/1.2 var(--till-button-font); user-select: none; -webkit-user-select: none; touch-action: manipulation;
}
.till-familiar .tlk-row > span { min-width: 0; padding: 0 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.till-familiar .tlk-row:nth-child(odd) { background: #f5f5f5; }
.till-familiar .tlk-row--head {
    min-height: 24px; background: linear-gradient(#f4f9ff, #dae7f5) !important; border-bottom-color: #abbad0; color: #1e395b;
    font-weight: 400; font-size: 12px; cursor: default;
}
/* the selection: Yellow framed in DarkOrange, as the basket's (it must survive a warm screen tint) */
.till-familiar .tlk-row--sel { background: #ff0 !important; box-shadow: inset 0 0 0 2px #ff8c00; }
.till-familiar .tlk-num { text-align: right; font-family: var(--till-mono-font); }
.till-familiar .tlk-open { text-align: center; color: #2e7d32; }
.till-familiar .tlk-empty { padding: 16px; text-align: center; color: #8a8a8a; font: 700 13px/1.4 var(--till-button-font); }
.till-familiar .tlk-pager { flex: 0 0 64px; display: flex; flex-direction: column; gap: 6px; }
.till-familiar .tlk-pager .tkey { flex: 1 1 0; font-size: 1.4rem; }
.till-familiar .tlk-pages { flex: 0 0 auto; text-align: center; font: 700 13px/1.2 var(--till-mono-font); }
.till-familiar .tkey.tlk-cancel { min-width: 180px; min-height: 56px; font-size: 1.3rem; }
.till-familiar .tkey.tlk-select { flex: 1 1 auto; min-width: 0; min-height: 56px; font-size: 1.3rem; text-transform: none; }

/* the one-tap pickers (TillChoice): Group By / Sort By / the clock-in job - big coloured buttons,
   the current one ringed in the checked orange */
.till-familiar .tch-message { margin-bottom: 10px; text-align: center; font: 700 1.1rem/1.3 var(--till-button-font); }
.till-familiar .tch-grid { display: grid; grid-template-columns: 320px; gap: 8px; }
.till-familiar .tch-grid--two { grid-template-columns: repeat(2, 260px); }
.till-familiar .tch-option { flex-direction: column; gap: 4px; min-height: 72px; font-size: 1.3rem; text-transform: none; }
.till-familiar .tch-option--on { outline: 4px solid #ff8c00; outline-offset: 2px; }
.till-familiar .tch-hint { font-size: .8rem; font-weight: 400; }
.till-familiar .tch-dlg .mud-dialog-actions { justify-content: center; }
.till-familiar .tch-close { min-width: 200px; min-height: 56px; font-size: 1.3rem; }

/* new order (B04): the desktop's PriceLevelsForm - the levels as big tiles three a row in their colours,
   white bold type and the "Customer Prompt & Required" line; one tap starts; a big red CANCEL */
.till-familiar .mud-dialog:has(.tno-grid) { width: calc(100vw - 32px); max-width: 680px; }
.till-familiar .tno-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.till-familiar .tkey.tno-level {
    flex-direction: column; gap: 6px; min-height: 86px; padding: 6px; border-radius: 0;
    font-size: 1.2rem; text-transform: none; white-space: normal; overflow-wrap: anywhere;
}
.till-familiar .tno-extra { font: 400 .72rem/1.2 var(--till-button-font); }
.till-familiar .tkey.tno-cancel { min-width: 208px; min-height: 58px; font-size: 1.45rem; }

/* EMPL (B10): the desktop's EmployessForm - "Select Employee:" and the Clocked Out / Clocked In / On Break
   toggles (Green / Blue / Red when on, Gray when off), every employee as a 180x80 tile in the colour of
   what a tap does, the operator's own ringed red, a big CLOSE */
.till-familiar .mud-dialog:has(.temp-grid) { width: calc(100vw - 32px); max-width: 800px; }
.till-familiar .temp-bar { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.till-familiar .temp-title { flex: 1 1 auto; font: 700 1.1rem/1.2 var(--till-button-font); }
.till-familiar .tkey.temp-toggle { flex: 0 0 134px; height: 37px; border: 1px solid #fff; font-size: .95rem; text-transform: none; }
.till-familiar .temp-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); grid-auto-rows: 80px; gap: 6px;
    max-height: calc(100dvh - 260px); overflow-y: auto; padding: 6px;
}
.till-familiar .tkey.temp-tile { flex-direction: column; gap: 4px; padding: 4px 6px; font-size: 1.05rem; text-transform: none; }
.till-familiar .temp-tile--self { box-shadow: 0 0 0 2px #fff, 0 0 0 5px #ff0000; }
.till-familiar .temp-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.till-familiar .temp-state { font: 400 .72rem/1.2 var(--till-button-font); }
.till-familiar .temp-note { padding: 16px; text-align: center; font: 700 1.1rem/1.4 var(--till-button-font); }
.till-familiar .temp-note--red { color: var(--till-fail, #ff4a4a); }
.till-familiar .temp-dlg .mud-dialog-actions { justify-content: center; }
.till-familiar .tkey.temp-close { min-width: 210px; min-height: 62px; font-size: 1.45rem; }


/* ---- Order screen (L23-L25, B06): the desktop's OrderUC ----
   PosOrder's .tord: the basket (340px, as the desktop's) with its input box, the basket column (DB
   menu type 7, 50px), then PREVIOUS / NEXT CATEGORY over the items and the 90px category column. */

@media (min-width: 801px) {
    .till-familiar .pos-order-screen.tord { grid-template-columns: minmax(280px, 340px) minmax(0, 1fr); gap: 4px; }
    .till-familiar .pos-order-screen.tord:has(> .tord-basketnav) { grid-template-columns: minmax(280px, 340px) 50px minmax(0, 1fr); }
    .till-familiar .tord .pos-order-menu-body { grid-template-columns: minmax(0, 1fr) 90px; gap: 4px; }
}
.till-familiar.till-pos .tord .pos-order-receipt { background: var(--till-canvas); border: 0; border-radius: 0; overflow: hidden; }
.till-familiar .tord-basket { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; }

/* the basket (PosReceiptPanel Familiar): the desktop's white grid, Segoe bold rows */
.till-familiar .trb {
    flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; background: #fff; color: #000;
    font-family: var(--till-button-font);
}
/* the header bar in the price level's colour: table (LightGray) | the level (Vera Mono) | #nr */
.till-familiar .trb-head {
    flex: 0 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center;
    gap: 6px; min-height: 20px; padding: 0 6px; color: #fff;
}
.till-familiar .trb-head-side { font: 700 11px/1.2 var(--till-button-font); color: #d3d3d3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.till-familiar .trb-head-nr { text-align: right; }
.till-familiar .trb-head-level { font: 700 15px/1.3 var(--till-mono-font); white-space: nowrap; }
.till-familiar .trb-sel { flex: 0 0 19px; background: #4169e1; color: #ff0; text-align: center; font: 700 12px/19px var(--till-button-font); }
/* Item / Price / Guest / Sent */
.till-familiar .trb-cols, .till-familiar .trb-row { display: grid; grid-template-columns: minmax(0, 1fr) 56px 36px 68px; }
.till-familiar .trb-cols {
    position: sticky; top: 0; z-index: 1; background: linear-gradient(#f4f9ff, #dae7f5); border-bottom: 1px solid #abbad0;
    font: 400 11px/22px var(--till-button-font); color: #1e395b; text-align: center;
}
.till-familiar .trb-cols > span + span { border-left: 1px solid #abbad0; }
.till-familiar .trb-rows { flex: 1 1 0; min-height: 0; overflow-y: auto; position: relative; }
.till-familiar .trb-row {
    min-height: 32px; border-bottom: 1px solid #e3e3e3; color: #000; cursor: pointer; scroll-margin-top: 23px;
    user-select: none; -webkit-user-select: none; touch-action: manipulation;
}
.till-familiar .trb-row > div { min-width: 0; padding: 4px; }
.till-familiar .trb-row > div + div { border-left: 1px solid #e3e3e3; }
.till-familiar .trb-row--odd { background: #f5f5f5; }
/* the selection: the desktop's Yellow, framed in its checked DarkOrange (inset, so nothing moves) - under a
   warm screen tint (Night Light, f.lux) the Yellow alone blends into the white rows (Pawel 2026-10-11) */
.till-familiar .trb-row--sel { background: #ff0; box-shadow: inset 0 0 0 2px #ff8c00; }
.till-familiar .trb-row--unsent { color: #00f; }          /* still to go to the kitchen */
.till-familiar .trb-row--note { color: #006400; }         /* kitchen note */
.till-familiar .trb-row--label { color: #800080; }
.till-familiar .trb-row--note .trb-item, .till-familiar .trb-row--label .trb-item { text-align: center; }
.till-familiar .trb-row--void, .till-familiar .trb-mod--void { color: #808080; font-style: italic; text-decoration: line-through; }
.till-familiar .trb-row--void { cursor: default; }
.till-familiar .trb-item { font: 700 13px/1.3 var(--till-button-font); overflow-wrap: anywhere; }
.till-familiar .trb-mod { padding-left: 14px; }
.till-familiar .trb-price { font: 700 13px/1.3 var(--till-button-font); text-align: right; white-space: nowrap; }
.till-familiar .trb-guest { font: 400 12px/1.4 var(--till-button-font); text-align: center; }
.till-familiar .trb-row > .trb-sent { padding: 4px 2px; font: 400 11px/1.55 var(--till-button-font); text-align: center; white-space: nowrap; }
.till-familiar .trb-check.mud-icon-root { width: 13px; height: 13px; font-size: 13px; margin-right: 1px; vertical-align: -2px; color: #2e7d32; }
.till-familiar .trb-row--void .trb-check.mud-icon-root { color: inherit; }
.till-familiar .trb-empty { padding: 16px 8px; text-align: center; color: #8a8a8a; font: 700 12px/1.4 var(--till-button-font); }
/* the info strips, in the desktop's colours, white Vera Mono */
.till-familiar .trb-strip {
    flex: 0 0 auto; display: flex; flex-direction: column; justify-content: center; min-height: 34px; box-sizing: border-box;
    padding: 2px 8px; color: #fff; font: 700 13px/1.35 var(--till-mono-font); overflow-wrap: anywhere;
}
.till-familiar .trb-strip-small { font-size: 11px; }
/* SHOW / HIDE VOIDED: the desktop's light check button with red type, pressed in while voided lines show */
.till-familiar .trb-strip--voided {
    min-height: 22px; padding: 0 8px; border: 1px solid #abbad0; background: #e1edfa; color: #f00;
    text-align: center; font: 700 11px/1.2 var(--till-button-font); cursor: pointer;
}
.till-familiar .trb-strip--voided.trb-strip--on { background: #ffe48a; border-color: #c2762b; }
.till-familiar .trb-strip--hold, .till-familiar .trb-strip--refund { background: #f00; text-align: center; font-size: 15px; }
.till-familiar .trb-strip--discount { background: #0000cd; }
.till-familiar .trb-strip--gratuity { background: #00f; }
.till-familiar .trb-strip--tag { background: #ff8c00; }
.till-familiar .trb-strip--customer { background: #4169e1; }
.till-familiar .trb-strip--loop { background: #8a2be2; cursor: pointer; }
.till-familiar .trb-strip--payments { background: #6b8e23; }
/* the big green total */
.till-familiar .trb-total {
    flex: 0 0 42px; display: flex; align-items: center; justify-content: center; background: #008000; color: #fff;
    font: 700 34px/1 var(--till-mono-font);
}
/* the input box (white, Vera Mono) and its red CL, on the canvas */
.till-familiar .tord-input { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; padding: 4px 2px 0; background: var(--till-canvas, #000); }
.till-familiar .tord-plu {
    flex: 1 1 auto; min-width: 0; height: 35px; box-sizing: border-box; padding: 0 8px; border: 0;
    border-bottom: 2px solid #1e6fd0; border-radius: 0; background: #fff; color: #000; outline: none;
    font: 700 24px/1 var(--till-mono-font);
}
.till-familiar .tord-plu::placeholder { color: #9a9a9a; font: 400 15px var(--till-button-font); }
.till-familiar .tkey.tord-cl { flex: 0 0 68px; height: 35px; border-color: var(--till-key-edge, #fff); font-size: 15px; }

/* the basket column (B06): DB menu type 7, the desktop's 50px column of arrows / ALL / CLR / + / - */
.till-familiar .tord-basketnav { min-height: 0; display: flex; flex-direction: column; }
.till-familiar .tord-basketnav .pos-navbar--right { flex: 1 1 auto; padding: 0; border: 0; }
.till-familiar .tord-basketnav .tf-btn.tf-btn--fn { --tf-reserve: 6px; }
.till-familiar .tord-basketnav .tf-btn--fn .tf-btn-face { justify-content: center; }

/* PREVIOUS / NEXT CATEGORY (MenuTab's bar): #345DDB buttons, grey when there is nowhere to go, the
   category's name in DarkOrange between them */
.till-familiar .tord-catbar { flex: 0 0 41px; display: flex; align-items: center; padding: 0 0 4px; box-sizing: border-box; }
.till-familiar .tord-catbtn {
    flex: 1 1 0; min-width: 0; height: 37px; border: 1px solid #abbad0; border-radius: 0; background: #345ddb; color: #fff;
    font: 700 13px/1 var(--till-button-font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    cursor: pointer; touch-action: manipulation;
}
.till-familiar .tord-catbtn:active:not(:disabled) { background: #2e53c5; }
.till-familiar .tord-catbtn:disabled { background: #808080; border-color: #808080; color: #e0e0e0; cursor: default; }
.till-familiar .tord-catname {
    flex: 0 1 auto; max-width: 40%; padding: 0 12px; color: #ff8c00; font: 700 15px/1.1 var(--till-button-font);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* the category column: 90px on black, a category without a colour in the desktop's #345DDB; the
   chosen one keeps its colour with a DarkOrange frame and underline (DarkOrange itself when it has
   none). They share the height up to the desktop's 90px and scroll when there are more. */
.till-familiar .tord .pos-order-cats { gap: 4px; justify-content: flex-start; }
.till-familiar .tord .pos-order-cats > .tcat { flex: 1 1 0; min-height: 56px; max-height: 90px; }
.till-familiar .tcat {
    display: flex; align-items: center; justify-content: center; padding: 2px 4px; box-sizing: border-box;
    border: 1px solid rgba(0, 0, 0, .18); border-radius: 0; background: #345ddb; color: #fff;
    font: 700 13px/1.15 var(--till-button-font); text-align: center; overflow: hidden; overflow-wrap: break-word;
    cursor: pointer; user-select: none; -webkit-user-select: none; touch-action: manipulation;
}
.till-familiar .tcat:active { filter: brightness(.9); }
.till-familiar .tcat--on { box-shadow: inset 0 0 0 3px #ff8c00; text-decoration: underline; }
.till-familiar .tcat--on:not([style*="background"]) { background: #ff8c00; }

/* the modifier popup (L28, B08): PosModifierDialog's familiar markup = the desktop's ModifierForm on its
   colours (ModifierStep: the page, the panel and the "Max Selection" bar are rgb(52,93,219)):
   - the groups as 90px tabs on the left (.tcat: #345DDB, the shown one DarkOrange); a group still short
     of its minimum in yellow type (the web's red does not read on the blue), one that waits for an
     earlier group's minimum greyed, as the desktop disables it;
   - ONE group's grid on the blue page under the hint bar ("Meat: 1 of 3 chosen, 2 left"), its rows
     sharing the page as the desktop's equal-percentage table;
   - an option without a colour of its own is the desktop's light Krypton button, chosen or not - never
     the black page (Pawel 2026-10-10: "really hard to see the buttons"); chosen = the desktop's 3px
     DarkOrange dashed frame (ModifierStep cellPanel) + the till's check badge;
   - a big red CANCEL and the green DONE with "(Total 127,00; Qty 3)" taking the width */
.till-familiar .mud-dialog:has(.tmod) { width: calc(100vw - 32px); max-width: 880px; }
.till-familiar .tmod { display: flex; gap: 4px; height: min(470px, calc(100dvh - 220px)); }
.till-familiar .tmod-tabs { flex: 0 0 90px; display: flex; flex-direction: column; gap: 4px; min-height: 0; overflow-y: auto; }
.till-familiar .tcat.tmod-tab { flex: 0 0 90px; flex-direction: column; gap: 4px; }
.till-familiar .tmod-tab-n { font: 400 11px/1 var(--till-button-font); }
.till-familiar .tmod-tab--short:not(.tcat--on) { color: #ffeb3b; }
.till-familiar .tcat:disabled { background: #808080; color: #e0e0e0; box-shadow: none; cursor: default; }
.till-familiar .tmod-page {
    flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; padding: 0 2px 2px; box-sizing: border-box; background: #345ddb;
}
.till-familiar .tmod-bar { flex: 0 0 auto; padding: 5px 8px; color: #fff; text-align: right; font: 700 15px/1.3 var(--till-button-font); }
.till-familiar .tmod-bar--short { color: #ffeb3b; }
/* top / right padding: room for the chosen options' corner check */
.till-familiar .tmod-grid {
    flex: 1 1 0; min-height: 0; display: grid; gap: 2px; grid-auto-rows: minmax(56px, 1fr); overflow-y: auto; padding: 8px 8px 0 0;
}
.till-familiar .tmod-opt {
    position: relative; min-width: 0; min-height: 0; display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 6px 4px 4px; box-sizing: border-box; border: 1px solid rgba(0, 0, 0, .18); border-radius: 2px;
    font: 700 13px/1.15 var(--till-button-font); text-align: center; cursor: pointer;
    user-select: none; -webkit-user-select: none; touch-action: manipulation;
}
.till-familiar .tmod-opt:active { filter: brightness(.9); }
.till-familiar .tmod-opt--on { border: 3px dashed #ff8c00; }
.till-familiar .tmod-cap { flex: 1 1 auto; display: flex; align-items: center; overflow-wrap: break-word; }
.till-familiar .tmod-extra, .till-familiar .tmod-price { flex: 0 0 auto; font: 700 10px/1.2 var(--till-button-font); }
.till-familiar .tmod-qty { flex: 0 0 auto; display: flex; align-items: center; gap: 2px; font-size: 14px; }
.till-familiar .tmod-check {
    position: absolute; top: -8px; right: -8px; z-index: 1; width: 24px; height: 24px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; pointer-events: none;
    background: var(--mud-palette-primary); color: #fff; border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .45);
}
.till-familiar .tmod-check .mud-icon-root { font-size: 16px; }
.till-familiar .tkey.tmod-cancel { min-width: 125px; min-height: 52px; font-size: 1.3rem; }
.till-familiar .tkey.tmod-done { flex: 1 1 auto; min-height: 52px; font-size: 1.7rem; }
.till-familiar .tmod-total { font: 700 .85rem/1 var(--till-button-font); text-transform: none; }

/* the void-reason picker's words and its comment keyboard (B03; the tiles are S3c's L29) */
.till-familiar .tvr-label { margin-bottom: 10px; font: 700 1.15rem/1.3 var(--till-button-font); }
.till-familiar .tvr-actions { display: flex; gap: 8px; margin-top: 8px; }
.till-familiar .tvr-actions .tkey { min-height: 56px; min-width: 140px; font-size: 1.2rem; }
.till-familiar .tvr-actions .tvr-done { flex: 1 1 auto; }
/* the reason tiles (L29): the desktop's DeleteCodesForm - three a row, ~236x89, white bold type on the
   code's colour (Red when it has none), "CONSUMED" small at the bottom of a code that keeps the stock */
.till-familiar .mud-dialog:has(.tvr-grid) { width: calc(100vw - 32px); max-width: 780px; }
.till-familiar .tvr-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.till-familiar .tkey.tvr-tile {
    position: relative; flex-direction: column; min-height: 89px; padding: 8px 6px 18px; border-radius: 0;
    font-size: 1.15rem; text-transform: none; white-space: normal; overflow-wrap: anywhere;
}
.till-familiar .tvr-consumed { position: absolute; left: 0; right: 0; bottom: 4px; font: 400 .68rem/1 var(--till-button-font); }
.till-familiar .mud-dialog:has(.tvr-grid) .mud-dialog-actions { justify-content: center; }
.till-familiar .mud-dialog:has(.tvr-grid) .mud-dialog-actions > .mud-button-root { min-width: 250px; min-height: 60px; font-size: 1.4rem; }


/* ---- Toasts (L15): bottom centre, just above the status strip (MauiProgram sets the position) ---- */

.till-familiar .mud-snackbar-location-bottom-center { bottom: calc(var(--till-strip-h) + 8px); }
.till-familiar .mud-snackbar { min-width: 320px; font: 700 1rem/1.3 var(--till-button-font); }
/* ...but where the status strip shows, the messages go to its middle as the desktop's status label
   (TillStatusStrip: StatusLabel green, red for a failure, kept until the next one) and the floating
   toasts stay hidden - they covered the bottom buttons (Pawel 2026-10-10) */
.till-familiar:has(.till-strip) .mud-snackbar-provider { visibility: hidden; }
.till-familiar .till-strip-status {
    min-width: 0; overflow: hidden; text-overflow: ellipsis; text-align: center; font-size: 13px; font-weight: 700; color: #008000;
}
.till-familiar .till-strip-status--failure { color: #d00000; }
.till-familiar.till-pos .till-strip-status { color: var(--till-ok); }
.till-familiar.till-pos .till-strip-status--failure { color: var(--till-fail); }


/* ---- Settle (L26, L27): the desktop's SettleUC on black ----
   PosSettle's .tset: the payment lines (PaymentLines) | the tenders with their pictures and the receipt
   summary (PaymentButtons, SummaryPanel), the settle bar under them. */

.till-familiar .pos-fill-root:has(> .tset) { display: flex; flex-direction: column; }
@media (min-width: 801px) {
    .till-familiar .pos-fill-root:has(> .tset) { height: calc(100dvh - var(--till-strip-h) - 2 * var(--till-gutter)); min-height: 0; }
}
.till-familiar .tset { flex: 1 1 0; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 404px; gap: 6px; }
@media (max-width: 800px) { .till-familiar .tset { grid-template-columns: minmax(0, 1fr); } }
.till-familiar .tset-lines { min-height: 0; display: flex; flex-direction: column; color: var(--till-ink, #fff); }
/* the order: a slim bar in its price level's colour, as the basket's header */
.till-familiar .tset-head {
    flex: 0 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center;
    gap: 6px; min-height: 22px; padding: 0 6px; color: #fff;
}
.till-familiar .tset-head-side { font: 700 12px/1.2 var(--till-button-font); color: #e0e0e0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.till-familiar .tset-head-level { font: 700 15px/1.3 var(--till-mono-font); white-space: nowrap; }
.till-familiar .tset-head-flags { text-align: right; }
.till-familiar .tset-flag { margin-left: 4px; padding: 0 4px; border-radius: 2px; background: #f00; color: #fff; }
/* BASE AMOUNT / TIP / CASH BACK / TOTAL with their sums, then one row a payment: its name as the
   desktop's Blue check button (DarkOrange when checked), its figures as Blue Vera Mono buttons */
.till-familiar .tset-cols, .till-familiar .tset-row {
    display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(4, minmax(0, 1fr)); gap: 3px;
}
.till-familiar .tset-cols { flex: 0 0 auto; padding: 14px 0 8px; text-align: center; font: 700 15px/1.4 var(--till-mono-font); }
.till-familiar .tset-col-lbl { display: block; font: 700 11px/1.4 var(--till-button-font); }
.till-familiar .tset-rows { flex: 1 1 0; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 3px; }
.till-familiar .tset-row { flex: 0 0 64px; }
.till-familiar .tset-pay, .till-familiar .tset-fig {
    min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    padding: 2px 4px; box-sizing: border-box; border: 1px solid rgba(0, 0, 0, .18); border-radius: 0;
    background: #0000ff; color: #fff; cursor: pointer; overflow: hidden; touch-action: manipulation;
}
.till-familiar .tset-pay { font: 700 13px/1.15 var(--till-button-font); overflow-wrap: anywhere; }
.till-familiar .tset-fig { font: 700 15px/1 var(--till-mono-font); }
.till-familiar .tset-pay:active:not(:disabled), .till-familiar .tset-fig:active:not(:disabled) { filter: brightness(.9); }
.till-familiar .tset-pay--on { background: #ff8c00; }
.till-familiar .tset-pay:disabled, .till-familiar .tset-fig:disabled { background: #808080; color: #e0e0e0; cursor: default; }
.till-familiar .tset-pay--void { text-decoration: line-through; }
.till-familiar .tset-pay-note { font: 400 10px/1.1 var(--till-button-font); }
/* SHOW / HIDE VOIDED: the basket's light check button with red type */
.till-familiar .tset-voided {
    flex: 0 0 auto; margin-top: 3px; min-height: 24px; padding: 3px 8px; box-sizing: border-box; border: 1px solid #abbad0;
    background: #e1edfa; color: #f00; text-align: center; font: 700 11px/1.5 var(--till-button-font); cursor: pointer;
}
.till-familiar .tset-voided--on { background: #ffe48a; border-color: #c2762b; }
.till-familiar .tkey.tset-delete { flex: 0 0 auto; margin-top: 6px; min-height: 50px; font-size: 1.15rem; }
/* TOTAL / RECEIVED / BALANCE: Segoe 14pt bold over Vera Mono 12pt bold, in the canvas's ink */
.till-familiar .tset-big { flex: 0 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 14px 0 12px; text-align: center; }
.till-familiar .tset-big-lbl { font: 700 19px/1.3 var(--till-button-font); }
.till-familiar .tset-big-val { font: 700 16px/1.5 var(--till-mono-font); }

/* the tenders (TillTenderTile, also Payment Change): three a row, 100px, the name in white bold at the
   top and the tender's picture under it; they scroll above the summary */
.till-familiar .tset-right { min-height: 0; display: flex; flex-direction: column; gap: 6px; }
.till-familiar .tset-tenders {
    flex: 1 1 0; min-height: 100px; overflow-y: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: 100px; gap: 3px; align-content: start;
}
.till-familiar .tset-tenders--change { flex: 0 0 auto; max-height: 412px; }
.till-familiar .tkey.ttd-tile {
    flex-direction: column; justify-content: flex-start; gap: 4px; padding: 6px 4px; border-radius: 0; overflow: hidden;
    font-size: 14.5px; text-transform: none; white-space: normal; overflow-wrap: anywhere;
}
.till-familiar .ttd-name { flex: 0 0 auto; }
.till-familiar .ttd-img { flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; }
.till-familiar .ttd-img img { max-height: 100%; }
/* a foreign tender's currency + "Rate = n" (B09): the desktop's extra text, small at the bottom */
.till-familiar .ttd-rate { flex: 0 0 auto; margin-top: auto; font: 700 9.5px/1.2 var(--till-button-font); }
.till-familiar .tkey.tset-qr { flex: 0 0 auto; min-height: 44px; font-size: 1rem; text-transform: none; }
.till-familiar .tset-fallback { flex: 0 0 auto; display: flex; gap: 6px; }
.till-familiar .tset-fallback .tkey { flex: 1 1 0; min-height: 52px; font-size: 1.2rem; }
/* the receipt summary (SummaryPanel): "Receipt #…" over a white box of Vera Mono lines */
.till-familiar .tset-summary { flex: 0 0 auto; display: flex; flex-direction: column; }
.till-familiar .tset-sum-cap { padding: 2px 0; text-align: center; font: 700 15px/1.3 var(--till-mono-font); color: var(--till-ink, #fff); }
.till-familiar .tset-sum {
    margin: 0 18px; padding: 6px 8px; min-height: 150px; box-sizing: border-box; background: #fff; color: #000;
    white-space: pre; overflow: hidden; font: 700 14.5px/1.25 var(--till-mono-font);
}


/* ---- Split (S6): the desktop's SplitUC ----
   PosSplit's .tsp: the SplitModes column (82px), the checks - the opened one on the left third, the others
   two by two on pages (CheckLines) - and the SplitNavigation bar (56px) over the status strip. A check
   (CheckLine) is a ▼ [n / ORDER] ▲ bar over the order screen's white basket (.trb) and a green total; the
   current check is framed DarkOrange, a check that would take the waiting selection dashed. */

.till-familiar .pos-fill-root:has(> .tsp) { height: calc(100dvh - var(--till-strip-h) - 2 * var(--till-gutter)); min-height: 0; }
.till-familiar .tsp {
    height: 100%; display: grid; grid-template-columns: 82px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) 56px; gap: 4px;
}
.till-familiar .tsp-modes { min-height: 0; display: flex; flex-direction: column; gap: 4px; }
.till-familiar .tkey.tsp-sel {
    flex: 0 0 64px; padding: 2px; background: #2288ff; font-size: 12px; white-space: normal; text-align: center;
}
.till-familiar .tsp-gap { flex: 0 0 16px; }
/* a mode: Blue, DarkOrange while on; the desktop's "MODE" extra line at the bottom */
.till-familiar .tkey.tsp-flag {
    flex: 0 0 99px; flex-direction: column; justify-content: space-between; padding: 14px 2px 4px; background: #0000ff;
    font-size: 12px; white-space: normal; text-align: center;
}
.till-familiar .tkey.tsp-flag--on { background: #ff8c00; }
.till-familiar .tsp-flag-extra { font: 400 9px/1 var(--till-button-font); }
.till-familiar .tkey.tsp-sel:disabled, .till-familiar .tkey.tsp-flag:disabled { background: #808080; }

.till-familiar .tsp-checks { min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 4px; }
.till-familiar .tsp-current { min-height: 0; display: flex; }
.till-familiar .tsp-others { min-height: 0; display: flex; flex-direction: column; gap: 4px; }
.till-familiar .tsp-page {
    flex: 1 1 0; min-height: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: minmax(0, 1fr); gap: 4px;
}
.till-familiar .tsp-page--rows2 { grid-template-rows: repeat(2, minmax(0, 1fr)); }
.till-familiar .tsp-tabs { flex: 0 0 50px; display: flex; justify-content: center; gap: 4px; }
.till-familiar .tkey.tsp-tab { flex: 0 0 80px; background: #0000ff; font-size: 13px; }
.till-familiar .tkey.tsp-tab--on { background: #ff8c00; text-decoration: underline; }

.till-familiar .tsp-check {
    flex: 1 1 0; min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 3px; padding: 3px;
    border-radius: 2px; cursor: pointer;
}
.till-familiar .tsp-check--cur { background: #ff8c00; }
.till-familiar .tsp-check--target { outline: 3px dashed #ff8c00; outline-offset: -3px; }
.till-familiar .tsp-seatbar { flex: 0 0 46px; display: grid; grid-template-columns: 42px minmax(0, 1fr) 42px; gap: 4px; }
.till-familiar .tkey.tsp-arrow { padding: 0; background: #2288ff; }
.till-familiar .tkey.tsp-arrow .mud-icon-root { font-size: 26px; width: 26px; height: 26px; }
.till-familiar .tkey.tsp-seat { flex-direction: column; gap: 0; padding: 0 4px; background: #0000ff; }
.till-familiar .tsp-check--cur .tkey.tsp-seat { background: #ff8c00; border-color: #fff; }
.till-familiar .tsp-seat-nr { font: 700 18px/1.1 var(--till-button-font); }
.till-familiar .tsp-seat-extra { font: 400 10px/1.2 var(--till-button-font); }
.till-familiar .tsp-check--target .tsp-seat-extra { font-weight: 700; }
/* the check's rows: Item | Price (the desktop's CheckLine hides Guest and Sent; the ✓ and a share's
   "1/2" ride on the item's first line) */
.till-familiar .trb.tsp-basket { flex: 1 1 0; }
.till-familiar .trb-row.tsp-row { grid-template-columns: minmax(0, 1fr) 72px; }
.till-familiar .tsp-name { display: flex; align-items: baseline; gap: 4px; }
.till-familiar .tsp-name > span:first-child { flex: 1 1 auto; min-width: 0; }
.till-familiar .tsp-share {
    flex: 0 0 auto; padding: 0 5px; border-radius: 6px; background: #9400d3; color: #fff; font: 700 11px/16px var(--till-button-font);
}
.till-familiar .tsp-total {
    flex: 0 0 28px; display: flex; align-items: center; justify-content: center; background: #008000; color: #fff;
    font: 700 20px/1 var(--till-mono-font);
}

/* SplitNavigation: ADD NEW ORDER | gap | SPLIT EVENLY, COMBINE ALL | gap | CANCEL, SPLIT CHECK (its columns) */
.till-familiar .tsp-bar { grid-column: 1 / -1; display: grid; grid-template-columns: 18.5fr 20px 18.5fr 18.5fr 20px 18.5fr 26fr; gap: 4px; }
.till-familiar .tsp-bar .tkey { font-size: 1.05rem; }
.till-familiar .tkey.tsp-blue { background: #0000ff; }
.till-familiar .tkey.tsp-cancel { font-size: 1.2rem; }
.till-familiar .tsp-bar .mud-icon-root.tsp-bar-icon { font-size: 30px; width: 30px; height: 30px; }
.till-familiar .tsp-apply-text { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.till-familiar .tsp-apply-text > span:first-child { font-size: 1.45rem; }
.till-familiar .tsp-apply-extra { font: 400 9px/1 var(--till-button-font); }


/* ---- Transfer items (S6): one popup in the desktop's pieces ----
   PosTransferItemsDialog's .txi: the lines that move (the basket, a preview: .trb--preview) on the left;
   OPEN ORDER / NEW TABLE / NEW TAB as check buttons (Blue, DarkOrange when on), then "Select existing Table or
   Tab:" - waiter chips (the board's) over the board's tiles, the chosen one ringed DarkOrange - or the new
   order's fields and "Open it for:" staff tiles. A big red CANCEL and green TRANSFER ITEMS. */

.till-familiar .mud-dialog:has(.txi) { width: calc(100vw - 32px); max-width: 1100px; }
.till-familiar .txi { display: flex; gap: 8px; height: min(560px, calc(100dvh - 260px)); }   /* + title and actions: inside MudBlazor's dialog limit */
.till-familiar .txi-lines { flex: 0 0 300px; min-height: 0; display: flex; flex-direction: column; }
.till-familiar .trb--preview { border: 1px solid #abbad0; }
.till-familiar .trb--preview .trb-row { cursor: default; }
.till-familiar .txi-dest { flex: 1 1 auto; min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 6px; }
.till-familiar .txi-tabs { flex: 0 0 auto; display: flex; align-items: center; gap: 4px; }
.till-familiar .txi-label { flex: 0 0 auto; margin-right: 6px; font: 700 1.05rem/1.2 var(--till-button-font); }
.till-familiar .tkey.txi-tab { flex: 1 1 0; height: 50px; background: #0000ff; font-size: 1.05rem; }
.till-familiar .tkey.txi-tab--on { background: #ff8c00; text-decoration: underline; }
.till-familiar .txi-title { flex: 0 0 auto; text-align: center; font: 700 1.15rem/1.3 var(--till-button-font); }
.till-familiar .tb-chip.txi-chip { background: #4169e1; }
.till-familiar .txi-tiles {
    flex: 1 1 0; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, 160px);
    grid-auto-rows: 100px; gap: 6px; align-content: start; padding: 5px;
}
.till-familiar .txi-tile { min-width: 0; min-height: 0; display: flex; border-radius: 4px; }
.till-familiar .txi-tile > .tt-tile { flex: 1 1 auto; }
.till-familiar .txi-tile--on { outline: 4px solid #ff8c00; outline-offset: 1px; }
.till-familiar .txi-fields { flex: 0 0 auto; }
.till-familiar .till-display.txi-name { text-align: left; font-family: var(--till-button-font); }
.till-familiar .tkey.txi-retry { min-width: 160px; min-height: 48px; font-size: 1.1rem; }
.till-familiar .mud-dialog:has(.txi) .mud-dialog-actions { justify-content: space-between; }
.till-familiar .tkey.txi-cancel { min-width: 200px; min-height: 60px; font-size: 1.4rem; }
.till-familiar .tkey.txi-ok { flex: 0 1 380px; min-height: 60px; font-size: 1.4rem; }
.till-familiar .txi-ok .mud-icon-root.txi-ok-icon { font-size: 30px; width: 30px; height: 30px; }

/* staff tiles (TillStaffTiles): the desktop's employee buttons, Blue, the chosen one DarkOrange; the keyboard
   key filters by name */
.till-familiar .tstaff { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; gap: 6px; }
.till-familiar .tstaff-bar { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; }
.till-familiar .tstaff-title { flex: 1 1 auto; font: 700 1.1rem/1.2 var(--till-button-font); }
.till-familiar .tstaff-filter {
    padding: 4px 10px; border: 2px solid #4466dd; border-radius: 2px; background: #fff; color: #000;
    font: 700 1rem/1.2 var(--till-button-font);
}
.till-familiar .tkey.tstaff-key { flex: 0 0 52px; height: 40px; font-size: 1.1rem; }
.till-familiar .tstaff-grid {
    flex: 1 1 0; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    grid-auto-rows: 64px; gap: 6px; align-content: start; padding: 4px;
}
.till-familiar .tstaff-grid > .temp-note { grid-column: 1 / -1; }
.till-familiar .tkey.tstaff-tile { flex-direction: column; gap: 2px; padding: 4px 6px; background: #0000ff; font-size: 1.05rem; text-transform: none; }
.till-familiar .tkey.tstaff-tile--on { background: #ff8c00; }
.till-familiar .tstaff-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.till-familiar .tstaff-line { font: 400 .75rem/1.2 var(--till-button-font); }


/* ---- Transfer TABLES / TABS (S6): the desktop's TransferUserForm ----
   PosTransferOrderDialog's .txo: the FROM ➜ TO boxes (Blue, the one being chosen ringed DarkOrange; a tap steps
   back to it), then "Transfer FROM:" / "Transfer TO:" staff tiles or "Select ORDERS:" - FROM's tiles at the
   board's size (.txi-tiles), a checked one ringed DarkOrange. CANCEL | TRANSFER SELECTED (n) | TRANSFER ALL in the
   desktop's Blue. */

.till-familiar .mud-dialog:has(.txo) { width: calc(100vw - 32px); max-width: 860px; }
.till-familiar .txo { display: flex; flex-direction: column; gap: 6px; height: min(540px, calc(100dvh - 260px)); }
.till-familiar .txo-pair { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; gap: 16px; padding: 4px; }
.till-familiar .tkey.txo-who {
    flex: 0 0 180px; height: 72px; flex-direction: column; gap: 2px; background: #0000ff; font-size: 1.1rem; text-transform: none;
}
.till-familiar .tkey.txo-who--on { box-shadow: 0 0 0 3px #ff8c00; }
.till-familiar .txo-who-cap { font: 400 .72rem/1 var(--till-button-font); }
.till-familiar .txo-who-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.till-familiar .mud-icon-root.txo-arrow { font-size: 40px; width: 40px; height: 40px; color: var(--till-ink); }
.till-familiar .tkey.txo-cancel { min-width: 160px; min-height: 62px; font-size: 1.4rem; }
.till-familiar .tkey.txo-go { flex: 1 1 0; min-height: 62px; background: #0000ff; font-size: 1.3rem; }
.till-familiar .tkey.txo-go:disabled { background: #808080; }
.till-familiar .txo-n { font-size: .95rem; }