/* ADR-0113 (#56): kiosk touch shell. Large hit targets, high contrast, no hover-dependent affordances.
   Scoped under .page.kiosk-mode so it never leaks into the normal ERP chrome. */

/* 1079: the scoped .page.compact rule (0,4,0) beat the old 110 px width; this ties it and loads later */
.page.kiosk-mode { --kiosk-rail-w: 96px; }
.page.kiosk-mode.compact .sidebar {
    width: var(--kiosk-rail-w);
    background: linear-gradient(180deg, var(--zg-sidebar-top, var(--kiosk-brown-deep)) 0%,
        var(--zg-sidebar-mid, var(--kiosk-brown-mid)) 45%, var(--zg-sidebar-top, var(--kiosk-brown-deep)) 100%);
    border-right: 0;
}
@media (min-width: 641px) {   /* the sidebar is only positioned (sticky) in the side-by-side shell */
    .page.kiosk-mode .sidebar::before {
        content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 1px; pointer-events: none;
        background: linear-gradient(180deg, rgba(var(--kiosk-gold-rgb), .12), rgba(var(--kiosk-gold-rgb), .7) 28%,
            rgba(var(--kiosk-gold-rgb), .7) 72%, rgba(var(--kiosk-gold-rgb), .12));
    }
    .page.kiosk-mode .sidebar::after {   /* mask = the scroll's shape, background = the token colour */
        content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 170px; z-index: -1; pointer-events: none;
        opacity: .16; background: rgb(var(--kiosk-gold-rgb));
        -webkit-mask: var(--kiosk-scroll-mask) no-repeat 50% 100% / 92px auto;
        mask: var(--kiosk-scroll-mask) no-repeat 50% 100% / 92px auto;
    }
}
.page.kiosk-mode {
    --kiosk-scroll-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 110 160' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M37.4 122.0L37.3 122.8L37.5 123.6L37.8 124.4L38.5 125.1L39.3 125.6L40.4 125.9L41.5 126.0L42.7 125.6L43.9 124.9L44.9 123.9L45.6 122.5L45.9 120.9L45.8 119.1L45.1 117.3L43.9 115.7L42.2 114.3L40.0 113.5L37.5 113.2L34.8 113.7L32.2 114.9L29.9 117.0L28.1 119.8L27.1 123.2L27.0 127.0L28.1 131.0L30.4 134.8L33.8 138.0L38.3 140.3L43.6 141.4L49.4 141.0L55.3 138.8L60.7 134.8L65.1 129.1L68.0 122.0C68.0 92.0 57.0 80.0 57.0 50.0L58.6 45.7L61.1 42.2L64.1 39.6L67.5 37.8L70.9 36.9L74.3 36.9L77.4 37.7L80.0 39.0L82.1 40.9L83.6 43.0L84.5 45.3L84.8 47.7L84.6 49.8L83.9 51.8L82.8 53.4L81.5 54.6L80.0 55.5L78.4 55.9L76.9 55.9L75.5 55.6L74.3 55.0L73.3 54.2L72.6 53.2L72.2 52.2L72.0 51.1L72.1 50.1L72.4 49.3L72.9 48.5L73.5 47.9L74.2 47.6L74.9 47.4L75.6 47.3L76.2 47.5L76.7 47.7'/%3E%3Ccircle cx='88' cy='118' r='2.2' fill='black' stroke='none'/%3E%3Ccircle cx='24' cy='72' r='1.7' fill='black' stroke='none'/%3E%3Ccircle cx='94' cy='92' r='1.2' fill='black' stroke='none'/%3E%3C/svg%3E");
}

.kiosk-rail {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 8px 16px;
    height: 100%;
    overflow-y: auto;   /* ADR-0192: 10 floor screens — never clip the last ones on a short tablet */
}

.kiosk-rail-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    flex: 0 0 auto;
    min-height: clamp(60px, 8.4vh, 88px);   /* ADR-0192: fits 10 items on an 800px-tall tablet */
    border-radius: 14px;
    color: rgba(var(--kiosk-rail-ink-rgb), .86);
    text-decoration: none;
    transition: background .18s, color .18s, box-shadow .18s, transform .12s;
    -webkit-tap-highlight-color: transparent;
}

.kiosk-rail-item .zg-icon {
    width: 26px;
    height: 26px;
    color: rgba(var(--kiosk-gold-rgb), .82);
    transition: color .18s, filter .18s;
}

.kiosk-rail-logo {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(var(--kiosk-gold-rgb), .45), 0 4px 12px rgba(0, 0, 0, .4);
    transition: box-shadow .18s;
}

.kiosk-rail-label {
    font-size: 15px;   /* 1273: kiosk text >= 15 px (was .84rem) */
    font-weight: 700;
    font-variant-caps: all-small-caps;
    letter-spacing: .1em;
    line-height: 1;
    margin-top: 2px;
}

@media (hover: hover) {   /* touch gets :active only */
    .kiosk-rail-item:hover { background: rgba(var(--kiosk-gold-rgb), .09); color: var(--mud-palette-drawer-text); }
}
.kiosk-rail-item:focus-visible { outline: 2px solid rgba(var(--kiosk-gold-rgb), .8); outline-offset: -2px; }
.kiosk-rail-item:active {
    transform: scale(.96);
    background: rgba(var(--kiosk-gold-rgb), .12);
    box-shadow: 0 0 0 1px rgba(var(--kiosk-gold-rgb), .35), 0 0 22px rgba(var(--kiosk-gold-rgb), .28);
}

.kiosk-rail-item.active {
    color: var(--mud-palette-drawer-text);
    background: radial-gradient(120% 90% at 0% 50%, rgba(var(--kiosk-gold-rgb), .30) 0%, rgba(var(--kiosk-gold-rgb), .10) 55%, transparent 100%);
    box-shadow: inset 0 0 0 1px rgba(var(--kiosk-gold-rgb), .16);
}
.kiosk-rail-item.active::before {
    content: ""; position: absolute; left: -8px; top: 18%; bottom: 18%; width: 4px; border-radius: 0 4px 4px 0;
    background: linear-gradient(180deg, rgb(var(--kiosk-gold-hi-rgb)), rgb(var(--kiosk-gold-rgb)));
    box-shadow: 0 0 12px rgba(var(--kiosk-gold-rgb), .7);
}
.kiosk-rail-item.active .zg-icon { color: rgb(var(--kiosk-gold-hi-rgb)); filter: drop-shadow(0 0 6px rgba(var(--kiosk-gold-rgb), .6)); }
.kiosk-rail-item.active .kiosk-rail-logo { box-shadow: 0 0 0 2px rgba(var(--kiosk-gold-hi-rgb), .85), 0 0 18px rgba(var(--kiosk-gold-rgb), .55); }

/* Roomier, touch-friendly content padding in kiosk mode. */
.page.kiosk-mode .content {
    padding: 18px 22px !important;
}

/* BL-130: kiosk pages are full-bleed — the app-chrome reading-width centering collapses grid pages
   to one column (same opt-out idiom as .ziggis-content:has(.grid-shell) in app.css). */
.ziggis-content:has(.kiosk-page) {
    max-width: none;
    margin: 0;
    width: 100%;
}

/* 920: KioskActivityBoundary only listens for taps/keys/typing — it must not add a layout box
   (KioskClock's .kc-stage flexes against the content area). */
.kiosk-activity, .kiosk-idle { display: contents; }

/* 1039: size the kiosk shell to the VISIBLE viewport (a tablet's browser bar made 100vh overflow). */
html body .page.kiosk-mode { height: 100dvh; }
html body .page.kiosk-mode .sidebar { height: 100dvh; }

/* A floor for kiosk buttons that set no size of their own. 1534 QA: :where() gives it no weight, so every component's own
   size wins (a :not list takes its arguments' weight: this was (0,3,1) and shrank 64 px keypad keys to 48). */
:where(.page.kiosk-mode .mud-button-root, .page.kiosk-mode button:not(.kiosk-rail-item)) {
    min-height: 48px;
}

/* ---- Shared Kiosk primitives (item 678): KioskStaffPicker + KioskKeypad ----
   De-duplicated from KioskClock (.kc-*) and KioskPinGate (.kg-*). Staff tiles are physical cream cards in both themes
   (like the clock dial), so their inks are fixed tokens rather than theme flips (Kiosk carve-out — project Rule #20). */
:root {
    --kiosk-tile: #fffaf0;
    --kiosk-tile-edge: #e3d8c5;
    --kiosk-tile-ink: #3b2f1e;
    --kiosk-tile-avatar: #5b4a33;
    --kiosk-tile-hot: #c97b1f;
    --kiosk-gold-rgb: 217, 173, 109;          /* the login's brand gold */
    --kiosk-tile-teal: #11878a;
    --kiosk-tile-teal-rgb: 17, 135, 138;
    --kiosk-tile-teal-ink: #0b6466;           /* teal text that still reads on cream */
    --kiosk-tile-break: #8b5a2b;
    --kiosk-tile-break-rgb: 139, 90, 43;
    --kiosk-gold-hi-rgb: 238, 204, 146;       /* 1079: highlight gold (swirl heads, the lit rail item) */
    --kiosk-teal-glow-rgb: 92, 198, 192;      /* 1079: a teal that still glows on the brown field */
    --kiosk-brown-deep: #20130a;              /* 1079: sidebar browns when no --zg-sidebar-* override is set */
    --kiosk-brown-mid: #3a2316;
    --kiosk-brown-mid-rgb: 58, 35, 22;
    --kiosk-brown-deep-rgb: 32, 19, 10;
    --kiosk-pin-sheet-rgb: 26, 14, 6;         /* owner 11/3 PIN pad (orb ring): the sheet and the gap round each key; same in both themes */
    --kiosk-pin-err-bg: #5a1f1c;
    --kiosk-pin-err-ink: #ffd6d3;
    --kiosk-pin-ok-ink: #0b2524;
    --kiosk-rail-ink-rgb: 232, 221, 205;
    --kiosk-caramel-rgb: 196, 150, 100;       /* 1281: tiles / PIN card / signed-in bar on the dark stage; espresso ink 6.8:1 */
    --kiosk-latte-rgb: 226, 196, 156;         /* 1281: the lighter step on a caramel card (mean < 200: never reads as white) */
    --kiosk-vessel-cup-rgb: 107, 74, 38;      /* owner 10/26: step-card vessel ribbons: the cup, the blender jar, a pitcher / shaker / shot glass */
    --kiosk-vessel-jar-rgb: 54, 80, 95;
    --kiosk-vessel-pitcher-rgb: 93, 70, 112;
    --kiosk-brand-ink-rgb: 255, 255, 255;     /* owner 10/26: a fountain fill's soda badge (FountainBadges): brand colours, the same in both themes */
    --kiosk-brand-silver-rgb: 214, 221, 228;
    --kiosk-brand-pepsi-rgb: 0, 75, 147;
    --kiosk-brand-black-rgb: 18, 18, 20;
    --kiosk-brand-drpepper-rgb: 112, 18, 42;
    --kiosk-brand-dew-rgb: 30, 122, 46;
    --kiosk-brand-starry-rgb: 163, 207, 52;
    --kiosk-brand-starry-ink-rgb: 18, 52, 14;
    --kiosk-brand-mug-rgb: 96, 52, 24;
    --kiosk-brand-mug-ink-rgb: 246, 228, 196;
    --kiosk-brand-lemonade-rgb: 248, 214, 64;
    --kiosk-brand-lemonade-ink-rgb: 92, 60, 0;
    --kiosk-brand-sparkling-rgb: 191, 227, 244;   /* 1770: the fountain's sparkling water valve */
    --kiosk-brand-sparkling-ink-rgb: 29, 95, 134;
    --kiosk-amount: #f6c76e;                  /* owner 10/26: the step card's amount */
    --kiosk-spot-ring-rgb: 255, 255, 255;     /* owner 10/27: the syrup locator's target ring and rack wash */
    --kiosk-mod-milk-rgb: 47, 125, 209;       /* 1895: modifier groups (ModifierGroups.Color), white ink, the same in both themes */
    --kiosk-mod-espresso-rgb: 150, 92, 52;
    --kiosk-mod-flavor-rgb: 142, 68, 201;
    --kiosk-mod-sweetener-rgb: 200, 64, 128;
    --kiosk-mod-cream-rgb: 168, 106, 18;
    --kiosk-mod-topping-rgb: 23, 133, 117;
    --kiosk-mod-ice-rgb: 14, 128, 168;
    --kiosk-mod-addin-rgb: 196, 72, 56;       /* 1884: charged add-ins (boba, puree, a cherry) */
    --kiosk-mod-other-rgb: 112, 112, 112;
    --kiosk-mod-tea-rgb: var(--kiosk-mod-other-rgb);
    --kiosk-mod-base-rgb: var(--kiosk-mod-other-rgb);
}
.kiosk-picker-sub { font-size: .8rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
    color: var(--mud-palette-text-secondary); margin: 14px 0 8px; text-align: left; }
.kiosk-picker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 14px; }
.kiosk-picker-tile { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px 10px;
    border: 2px solid var(--kiosk-tile-edge); border-radius: 14px; background: var(--kiosk-tile); cursor: pointer; font-size: 15px;
    color: var(--kiosk-tile-ink); transition: transform .08s, border-color .08s; }
.kiosk-picker-tile:hover { transform: translateY(-2px); border-color: var(--kiosk-tile-hot); }
.kiosk-picker-avatar { width: 52px; height: 52px; border-radius: 50%; background: var(--kiosk-tile-avatar); color: var(--mud-palette-white);
    display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 18px; }
.kiosk-picker-name { font-weight: 600; }
.kiosk-picker-shift { font-size: .75rem; color: var(--kiosk-tile-hot); font-weight: 700; }
.kiosk-picker-empty { color: var(--mud-palette-text-secondary); padding: 2rem; }
.kiosk-picker-link, .kiosk-keypad-link { background: none; border: none; color: var(--mud-palette-text-secondary);
    cursor: pointer; font-size: 15px; font-weight: 600; min-height: 44px; }
.kiosk-picker-tile:focus-visible, .kiosk-keypad-key:focus-visible { outline: 3px solid var(--kiosk-accent); outline-offset: 2px; }

/* Owner 11/3 option B "orb ring" (samples/pin-pad): a dark sheet, round keys ringed like the Floor's task orbs, teal slots.
   1791: the one small-sheet look. Every .kiosk-sheet popup (pickers, confirms, PIN, check-off lists, pads) and the Clock card
   wear it; large views (guide, Stock, Menu) aren't sheets; a pad in place inside the Floor card (.kfc) keeps the card's look.
   Fixed kiosk tokens, so it reads the same on either theme; the theme inks are remapped inside so shared pieces follow. */
.kiosk-keypad, .page.kiosk-mode :is(.kiosk-sheet:not(.kfc *), .kiosk-clock) { border-radius: 24px; color: rgb(var(--kiosk-rail-ink-rgb));
    background: rgba(var(--kiosk-pin-sheet-rgb), .94); border: 1px solid rgba(var(--kiosk-teal-glow-rgb), .55);
    box-shadow: 0 0 26px rgba(var(--kiosk-teal-glow-rgb), .22), 0 24px 60px rgba(0, 0, 0, .6);   /* owner 11/3: teal edge lifts the dark sheet off the brown */
    color-scheme: dark; --mud-palette-text-primary: rgb(var(--kiosk-rail-ink-rgb)); --mud-palette-text-secondary: rgba(var(--kiosk-rail-ink-rgb), .7);
    --mud-palette-surface: var(--kiosk-brown-mid); --mud-palette-lines-default: rgba(var(--kiosk-rail-ink-rgb), .16);
    --mud-palette-primary: rgb(var(--kiosk-teal-glow-rgb)); --mud-palette-primary-rgb: var(--kiosk-teal-glow-rgb); --mud-palette-primary-text: var(--kiosk-pin-ok-ink);
    --kiosk-face: var(--kiosk-brown-mid); --kiosk-face-edge: var(--kiosk-brown-deep); --kiosk-face-ink: rgb(var(--kiosk-rail-ink-rgb));
    --kiosk-face-ink-2: rgba(var(--kiosk-rail-ink-rgb), .75); --kiosk-face-sec: rgb(var(--kiosk-teal-glow-rgb)); }
.kiosk-keypad { text-align: center; width: min(440px, 100%); margin: 0 auto; box-sizing: border-box; padding: 26px 24px 18px; }
.page.kiosk-mode :is(.kiosk-sheet:not(.kfc *), .kiosk-clock):has(.kiosk-keypad) { width: min(440px, calc(100vw - 32px)); min-height: 0; padding: 26px 24px 18px; }
:is(.kiosk-sheet, .kiosk-clock) .kiosk-keypad { width: auto; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.page.kiosk-mode :is(.kiosk-sheet:not(.kfc *), .kiosk-clock) .kps-k-handover { color: rgb(var(--kiosk-gold-hi-rgb)); background: rgba(var(--kiosk-gold-rgb), .14); }
/* buttons: teal primary (the OK key), the stage's gold ghost for the rest */
.page.kiosk-mode :is(.kiosk-sheet:not(.kfc *), .kiosk-clock) :is(.kiosk-btn, .kc-btn) { border-radius: 999px; }
.page.kiosk-mode :is(.kiosk-sheet:not(.kfc *), .kiosk-clock) :is(.kiosk-btn--primary, .kc-btn-in) { color: var(--kiosk-pin-ok-ink); border-color: transparent;
    background: rgb(var(--kiosk-teal-glow-rgb)); box-shadow: 0 0 18px rgba(var(--kiosk-teal-glow-rgb), .3); }
.page.kiosk-mode :is(.kiosk-sheet:not(.kfc *), .kiosk-clock) :is(.kiosk-btn--ghost, .kc-btn.kc-btn-done) { color: rgb(var(--kiosk-gold-hi-rgb));
    background: rgba(var(--kiosk-gold-hi-rgb), .06); border: 1px solid rgba(var(--kiosk-gold-hi-rgb), .45); }
.page.kiosk-mode :is(.kiosk-sheet:not(.kfc *), .kiosk-clock) .kc-btn-out { color: var(--kiosk-pin-err-ink); background: var(--kiosk-pin-err-bg);
    box-shadow: inset 0 0 0 1.5px rgba(var(--kiosk-orb-ember-rgb), .6); }
.page.kiosk-mode :is(.kiosk-sheet:not(.kfc *), .kiosk-clock) .kc-btn.kc-btn-break { color: rgb(var(--kiosk-gold-hi-rgb)); background: rgba(var(--kiosk-gold-rgb), .14);
    box-shadow: inset 0 0 0 1.5px rgba(var(--kiosk-gold-rgb), .55); }
.page.kiosk-mode :is(.kiosk-sheet:not(.kfc *), .kiosk-clock) .kiosk-chip { border: 0; color: rgb(var(--kiosk-rail-ink-rgb)); background: rgba(var(--kiosk-gold-hi-rgb), .05);
    box-shadow: inset 0 0 0 1.5px rgba(var(--kiosk-gold-hi-rgb), .25); }
.page.kiosk-mode :is(.kiosk-sheet:not(.kfc *), .kiosk-clock) .kiosk-chip.on { color: var(--kiosk-pin-ok-ink); background: rgb(var(--kiosk-teal-glow-rgb)); box-shadow: none; }
.page.kiosk-mode :is(.kiosk-sheet:not(.kfc *), .kiosk-clock) .kiosk-np-key { border-color: rgba(var(--kiosk-gold-rgb), .3); }
.page.kiosk-mode :is(.kiosk-sheet:not(.kfc *), .kiosk-clock) .kiosk-np-display { background: var(--kiosk-brown-deep); box-shadow: inset 0 0 0 1px rgba(var(--kiosk-gold-rgb), .25); }
.page.kiosk-mode :is(.kiosk-sheet:not(.kfc *), .kiosk-clock) :is(.kiosk-np-err, .kiosk-np-range.bad) { color: var(--kiosk-pin-err-ink); }
.page.kiosk-mode :is(.kiosk-sheet:not(.kfc *), .kiosk-clock) .kiosk-banner { color: rgb(var(--kiosk-rail-ink-rgb)); background: rgba(var(--kiosk-rail-ink-rgb), .05);
    border-color: rgba(var(--kiosk-rail-ink-rgb), .2); }
.page.kiosk-mode :is(.kiosk-sheet:not(.kfc *), .kiosk-clock) .kiosk-banner--ok { color: rgb(var(--kiosk-teal-glow-rgb)); background: rgba(var(--kiosk-teal-glow-rgb), .1);
    border-color: rgba(var(--kiosk-teal-glow-rgb), .5); }
.page.kiosk-mode :is(.kiosk-sheet:not(.kfc *), .kiosk-clock) .kiosk-banner--warn { color: rgb(var(--kiosk-gold-hi-rgb)); background: rgba(var(--kiosk-gold-rgb), .12);
    border-color: rgba(var(--kiosk-gold-rgb), .55); }
.page.kiosk-mode :is(.kiosk-sheet:not(.kfc *), .kiosk-clock) .kiosk-banner--err { color: var(--kiosk-pin-err-ink); background: var(--kiosk-pin-err-bg); border-color: transparent; }
/* name tiles: the keypad's ringed initials (the schedule colour is the orb's inner rim) over a Fraunces name */
.page.kiosk-mode :is(.kiosk-sheet:not(.kfc *), .kiosk-clock) .kiosk-picker-tile { gap: 10px; color: rgb(var(--kiosk-rail-ink-rgb));
    background: rgba(var(--kiosk-rail-ink-rgb), .04); box-shadow: inset 0 0 0 1px rgba(var(--kiosk-gold-rgb), .22); }
@media (hover: hover) {
    .page.kiosk-mode :is(.kiosk-sheet:not(.kfc *), .kiosk-clock) .kiosk-picker-tile:hover { box-shadow: inset 0 0 0 1.5px rgba(var(--kiosk-gold-rgb), .7); }
}
.page.kiosk-mode :is(.kiosk-sheet:not(.kfc *), .kiosk-clock) .kiosk-picker-avatar { box-sizing: border-box; width: 64px; height: 64px; margin: 2px 0 4px;
    padding: 0; border: 0; font: 600 20px/1 'Fraunces', serif; color: rgb(var(--kiosk-gold-hi-rgb)); background: var(--kiosk-brown-mid);
    box-shadow: inset 0 0 0 3px var(--staff-color, transparent), 0 0 0 3px var(--kiosk-brown-deep), 0 0 0 5px rgba(var(--kiosk-gold-rgb), .55); }
.page.kiosk-mode :is(.kiosk-sheet:not(.kfc *), .kiosk-clock) .kiosk-picker-name { font: 600 19px/1.25 'Fraunces', serif; color: rgb(var(--kiosk-rail-ink-rgb)); }
.page.kiosk-mode :is(.kiosk-sheet:not(.kfc *), .kiosk-clock) .kiosk-picker-shift { color: rgb(var(--kiosk-teal-glow-rgb)); }
.page.kiosk-mode :is(.kiosk-sheet:not(.kfc *), .kiosk-clock) :is(.kiosk-picker-shift.kc-break, .kiosk-picker-why) { color: rgba(var(--kiosk-rail-ink-rgb), .7); }
.page.kiosk-mode :is(.kiosk-sheet:not(.kfc *), .kiosk-clock) .kiosk-picker-tile.kc-tile--on { background: rgba(var(--kiosk-gold-rgb), .12);
    box-shadow: inset 0 0 0 2px rgba(var(--kiosk-gold-hi-rgb), .85), 0 0 24px rgba(var(--kiosk-gold-rgb), .3); }
.page.kiosk-mode :is(.kiosk-sheet:not(.kfc *), .kiosk-clock) .kc-tile--on .kiosk-picker-avatar {
    box-shadow: inset 0 0 0 3px var(--staff-color, transparent), 0 0 0 3px var(--kiosk-brown-deep), 0 0 0 5px rgb(var(--kiosk-gold-hi-rgb)); }
.page.kiosk-mode :is(.kiosk-sheet:not(.kfc *), .kiosk-clock) .kiosk-picker-tile.kc-tile--stale {
    box-shadow: inset 0 0 0 2px rgb(var(--kiosk-orb-ember-rgb)), 0 0 24px rgba(var(--kiosk-orb-ember-rgb), .45); }
.kiosk-keypad-av { width: 64px; height: 64px; margin: 0 auto 8px; border-radius: 50%; display: grid; place-items: center;
    font: 600 20px/1 'Fraunces', serif; color: rgb(var(--kiosk-gold-hi-rgb)); background: var(--kiosk-brown-mid);
    box-shadow: 0 0 0 3px var(--kiosk-brown-deep), 0 0 0 5px rgba(var(--kiosk-gold-rgb), .55); }
.kiosk-keypad-who { font: 600 26px/1.25 'Fraunces', serif; color: rgb(var(--kiosk-rail-ink-rgb)); }
.kiosk-keypad-err { display: inline-block; margin-top: 14px; padding: 4px 14px; border-radius: 999px; font-size: 15px; font-weight: 700;
    color: var(--kiosk-pin-err-ink); background: var(--kiosk-pin-err-bg); }
.kiosk-keypad-slots { display: flex; gap: 14px; justify-content: center; margin: 14px 0 6px; }
.kiosk-keypad-slot { width: 14px; height: 14px; border-radius: 50%; background: rgba(var(--kiosk-rail-ink-rgb), .15); }
.kiosk-keypad-slot--on { background: rgb(var(--kiosk-teal-glow-rgb)); box-shadow: 0 0 12px rgba(var(--kiosk-teal-glow-rgb), .7); }
.kiosk-keypad-pad { display: grid; grid-template-columns: repeat(3, 80px); gap: 24px; justify-content: center; margin: 16px auto 10px; padding: 11px; }
.kiosk-keypad-key { position: relative; width: 80px; height: 80px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center;
    font: 600 28px/1 'Fraunces', serif; color: rgb(var(--kiosk-rail-ink-rgb)); background: var(--kiosk-brown-mid); cursor: pointer;
    box-shadow: 0 0 0 4px rgb(var(--kiosk-pin-sheet-rgb)), 0 0 0 6px rgba(var(--kiosk-gold-rgb), .35); }
.kiosk-keypad-key::after { content: ""; position: absolute; inset: -11px; border-radius: 50%; pointer-events: none;
    border: 1.5px dashed rgba(var(--kiosk-gold-rgb), .25); }
.kiosk-keypad-key:not(:disabled):active { transform: scale(.96); }
.kiosk-keypad-key--sub { font-family: inherit; font-size: 22px; color: rgba(var(--kiosk-rail-ink-rgb), .7); }
.kiosk-keypad-key--ok { color: var(--kiosk-pin-ok-ink); background: rgb(var(--kiosk-teal-glow-rgb));
    box-shadow: 0 0 0 4px rgb(var(--kiosk-pin-sheet-rgb)), 0 0 0 6px rgba(var(--kiosk-teal-glow-rgb), .7); }
.kiosk-keypad-key--ok:disabled { opacity: .5; cursor: default; }
.kiosk-keypad-check { width: 32px; height: 32px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.kiosk-keypad .kiosk-keypad-link { color: rgba(var(--kiosk-rail-ink-rgb), .7); }

/* ---- ADR-0192 floor capture (receive / drawer / count / waste) — shared kiosk page primitives ----
   Global so new kiosk pages carry no <style> blocks. Theme vars first; the warm kiosk palette is the fallback. */
.kiosk-page { padding: .5rem .25rem 2rem; }
.kiosk-page-title { font-family: 'Fraunces', serif; color: var(--mud-palette-primary, #5b4a33); margin: .25rem 0 1rem; }
.kiosk-empty { color: var(--mud-palette-text-secondary, #8a7a66); padding: 2rem 0; }
.kiosk-back { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; text-decoration: none;
    color: var(--mud-palette-text-secondary, #8a7a66); margin-bottom: .25rem; }
.kiosk-sub { color: var(--mud-palette-text-secondary, #8a7a66); margin: -.6rem 0 1rem; }

.kiosk-btn { min-height: 56px; padding: 0 22px; border-radius: 14px; font-size: 1.05rem; font-weight: 700; cursor: pointer;
    border: 1px solid transparent; }
.kiosk-btn:disabled { opacity: .45; cursor: default; }
.kiosk-btn--primary { background: var(--mud-palette-primary, #4a2613); color: var(--mud-palette-primary-text, #fff); }
.kiosk-btn--ghost { background: var(--mud-palette-surface, #fff); color: var(--mud-palette-primary, #5b4a33);
    border-color: var(--mud-palette-lines-default, #e3d8c5); }
.kiosk-btn--xl { min-height: 64px; font-size: 1.15rem; padding: 0 28px; }
.kiosk-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 14px; }

.kiosk-chip { min-height: 44px; padding: 0 16px; border-radius: 999px; font-weight: 700; cursor: pointer;
    background: var(--mud-palette-surface, #fffaf0); color: var(--mud-palette-text-primary, #3b2f1e);
    border: 2px solid var(--mud-palette-lines-default, #e3d8c5); }
.kiosk-chip.on { border-color: var(--mud-palette-primary, #5b4a33); background: rgba(var(--mud-palette-primary-rgb), .10); }

.kiosk-status { font-size: .8rem; font-weight: 800; padding: 4px 12px; border-radius: 999px; white-space: nowrap; }
.kiosk-status--info { color: var(--mud-palette-info, #2563eb); background: rgba(var(--mud-palette-info-rgb), .12); }
.kiosk-status--ok { color: var(--mud-palette-success, #15803d); background: rgba(var(--mud-palette-success-rgb), .14); }
.kiosk-status--warn { color: var(--mud-palette-warning, #b45309); background: rgba(var(--mud-palette-warning-rgb), .16); }
.kiosk-status--err { color: var(--mud-palette-error, #b91c1c); background: rgba(var(--mud-palette-error-rgb), .12); }

.kiosk-banner { border-radius: 14px; padding: 12px 16px; margin: 10px 0; font-weight: 600; border: 1px solid transparent; }
.kiosk-banner-title { font-weight: 800; font-size: 1.1rem; margin-bottom: 4px; }
.kiosk-banner--ok { color: var(--mud-palette-success-darken, #166534); background: rgba(var(--mud-palette-success-rgb), .12);
    border-color: rgba(var(--mud-palette-success-rgb), .35); }
.kiosk-banner--info { color: var(--mud-palette-text-primary, #3a2a1a); background: rgba(var(--mud-palette-info-rgb), .10);
    border-color: rgba(var(--mud-palette-info-rgb), .30); }
.kiosk-banner--warn { color: var(--mud-palette-warning-darken, #7a5514); background: rgba(var(--mud-palette-warning-rgb), .14);
    border-color: rgba(var(--mud-palette-warning-rgb), .40); }
.kiosk-banner--err { color: var(--mud-palette-error-darken, #991b1b); background: rgba(var(--mud-palette-error-rgb), .10);
    border-color: rgba(var(--mud-palette-error-rgb), .35); }

.kiosk-stepper { display: inline-flex; align-items: stretch; border-radius: 14px; overflow: hidden;
    border: 2px solid var(--mud-palette-lines-default, #e3d8c5); background: var(--mud-palette-surface, #fff); }
.kiosk-stepper-btn { width: 60px; min-height: 56px; border: none; background: rgba(var(--mud-palette-primary-rgb), .09);
    font-size: 1.6rem; font-weight: 700; color: var(--mud-palette-text-primary, #3b2f1e); cursor: pointer; }
.kiosk-stepper-btn:disabled { opacity: .35; cursor: default; }
.kiosk-stepper-val { min-width: 104px; min-height: 56px; border: none; background: transparent; cursor: pointer;
    font-size: 1.3rem; font-weight: 800; color: var(--mud-palette-text-primary, #3b2f1e); }
.kiosk-stepper-val small { font-size: .8rem; font-weight: 600; color: var(--mud-palette-text-secondary, #8a7a66); }

/* KioskNumberPad — overlay sheet (below the dialog scrim at 1400, above the page). */
.kiosk-sheet-backdrop { position: fixed; inset: 0; z-index: 1300; background: rgba(0, 0, 0, .38); }
.kiosk-sheet { position: fixed; z-index: 1301; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: min(440px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow-y: auto;
    background: var(--mud-palette-surface, #fffdf8); border-radius: 20px; padding: 18px 20px 20px;
    box-shadow: 0 18px 48px rgba(0, 0, 0, .28); }
.kiosk-np-title { font-family: 'Fraunces', serif; font-size: 1.35rem; font-weight: 600; color: var(--mud-palette-text-primary, #3b2f1e); }
.kiosk-np-hint { color: var(--mud-palette-text-secondary, #8a7a66); margin-top: 2px; }
.kiosk-np-display { display: flex; align-items: baseline; justify-content: flex-end; gap: 6px; margin: 12px 0 6px;
    padding: 10px 14px; border-radius: 14px; background: rgba(var(--mud-palette-primary-rgb), .06); }
.kiosk-np-val { font-size: 2.2rem; font-weight: 800; color: var(--mud-palette-text-primary, #3b2f1e); }
.kiosk-np-val.is-empty { font-weight: 700; color: var(--mud-palette-text-secondary); }   /* 1340: nothing entered yet */
.kiosk-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.kiosk-np-cur, .kiosk-np-unit { font-size: 1.1rem; font-weight: 700; color: var(--mud-palette-text-secondary, #8a7a66); }
.kiosk-np-err { color: var(--mud-palette-error, #c0392b); font-weight: 700; text-align: right; }
.kiosk-np-quick { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.kiosk-np-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 10px 0 14px; }
.kiosk-np-key { min-height: 64px; border-radius: 14px; font-size: 1.6rem; font-weight: 700; cursor: pointer;
    border: 2px solid var(--mud-palette-lines-default, #e3d8c5); background: var(--mud-palette-surface, #fffaf0);
    color: var(--mud-palette-text-primary, #3b2f1e); }
.kiosk-np-key--sub { background: rgba(var(--mud-palette-primary-rgb), .09); }
.kiosk-np-key:disabled { opacity: .35; }
.kiosk-np-actions { display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: 10px; }
/* item 1243: minus key + range read-back */
.kiosk-np-sign { min-height: 52px; min-width: 64px; margin-right: auto; font-size: 1.8rem; }
.kiosk-np-sign.on { background: var(--mud-palette-primary); color: var(--mud-palette-primary-text); border-color: var(--mud-palette-primary); }
.kiosk-np-range { margin-top: 8px; font-weight: 600; color: var(--mud-palette-text-secondary, #8a7a66); }
.kiosk-np-range.bad { color: var(--mud-palette-error, #c0392b); }
/* items 1245 / 1246 / 1248 (round, corrective action, sign-off): drawn inside the focus card, see "ADR #211 Kiosk Floor: focus card" */

/* /kiosk/purchase-orders cards open the receive screen. */
a.kiosk-po-link { display: block; text-decoration: none; color: inherit; min-height: 56px; }
a.kiosk-po-link:active { transform: scale(.99); }
.kiosk-po-cta { margin-top: 10px; font-weight: 800; color: var(--mud-palette-primary, #5b4a33); }

/* /kiosk/purchase-orders/{id}/receive (item 923). */
.krc { max-width: 980px; }
.krc-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.krc-head .kiosk-page-title { margin-bottom: .35rem; }
.krc-sub { color: var(--mud-palette-text-secondary, #8a7a66); margin-bottom: 14px; }
.krc-lines { display: flex; flex-direction: column; gap: 10px; }
.krc-line { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
    padding: 12px 16px; border-radius: 14px; background: var(--mud-palette-surface, #fff);
    border: 1px solid var(--mud-palette-lines-default, #e6ddcd); border-left-width: 6px; }
.krc-line.all { border-left-color: var(--mud-palette-success, #16a34a); }
.krc-line.short { border-left-color: var(--mud-palette-warning, #e6a23c); }
.krc-line.none { border-left-color: var(--mud-palette-error, #dc2626); }
.krc-line.full { opacity: .75; }
.krc-line-main { min-width: 0; flex: 1 1 260px; }
.krc-item { font-size: 1.08rem; font-weight: 700; color: var(--mud-palette-text-primary, #3a2a1a); }
.krc-pack { font-size: .85rem; font-weight: 600; color: var(--mud-palette-text-secondary, #8a7a66); }
.krc-count-in { margin: 0; }
.krc-count-in .kiosk-seg-btn { min-height: 44px; padding: 0 16px; }
.krc-qtys { display: flex; flex-wrap: wrap; gap: 2px 0; margin-left: -16px; clip-path: inset(0 0 0 16px); font-size: .9rem; color: var(--mud-palette-text-secondary, #6b5b47); }
/* 1862: each part carries its dot in a left gutter; the box sits 16px left and clips it, so no wrapped line starts with a dot */
.krc-qtys > span { position: relative; padding-left: 16px; }
.krc-qtys > span::before { content: "·"; position: absolute; left: 6px; }
.krc-edit { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.krc-quick { display: flex; gap: 8px; }
.krc-full { font-weight: 800; color: var(--mud-palette-success, #15803d); }
.krc-foot { margin-top: 18px; padding-top: 14px; border-top: 2px dashed var(--mud-palette-lines-default, #e9decb); }
.krc-summary { font-size: 1.1rem; font-weight: 600; color: var(--mud-palette-text-primary, #3a2a1a); }
.krc-short { color: var(--mud-palette-warning, #b45309); font-weight: 800; }
.krc-note { color: var(--mud-palette-text-secondary, #8a7a66); font-size: .9rem; margin: 4px 0 12px; }
/* 1347: received past the order — allowed, never silent */
.krc-line.over { border-left-color: var(--mud-palette-warning); }
.krc-over { color: var(--mud-palette-warning-darken); font-weight: 800; }
div.krc-over { margin-top: 4px; }
.krc-over-done { margin-top: 4px; }

/* Segmented tabs (drawer kinds, count steps). */
.kiosk-seg { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 16px; margin: 6px 0 8px;
    background: rgba(var(--mud-palette-primary-rgb), .08); }
.kiosk-seg-btn { min-height: 52px; padding: 0 22px; border: none; border-radius: 12px; cursor: pointer; font-size: 1.02rem;
    font-weight: 700; background: transparent; color: var(--mud-palette-text-primary, #3b2f1e); }
.kiosk-seg-btn.on { background: var(--mud-palette-surface, #fff); color: var(--mud-palette-primary, #5b4a33);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .12); }
.kiosk-stepper--sm .kiosk-stepper-btn { width: 48px; min-height: 48px; font-size: 1.3rem; }
.kiosk-stepper--sm .kiosk-stepper-val { min-width: 60px; min-height: 48px; font-size: 1.1rem; }

/* Two-column kiosk layout (main + sticky side panel), labels, chips, big amount buttons — drawer, waste. */
.kiosk-cols { display: flex; gap: 18px; align-items: flex-start; }
.kiosk-main { flex: 1 1 auto; min-width: 0; }
.kiosk-side { flex: 0 0 clamp(260px, 30%, 360px); position: sticky; top: 8px; border-radius: 14px; padding: 12px 14px;
    background: var(--mud-palette-surface, #fffdf8); border: 1px solid var(--mud-palette-lines-default, #ece2d0); }
@media (max-width: 900px) { .kiosk-cols { flex-direction: column; } .kiosk-side { position: static; width: 100%; flex: 1 1 auto; } }
.kiosk-side-title { font-family: 'Fraunces', serif; font-size: 1.15rem; font-weight: 600; color: var(--mud-palette-text-primary, #3a2a1a); }
.kiosk-side-row { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; font-weight: 600; }
.kiosk-side-log { padding: 4px 0; font-weight: 600; font-size: .92rem; }
.kiosk-muted { color: var(--mud-palette-text-secondary, #8a7a66); font-weight: 400; font-size: .85rem; }
.kiosk-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.kiosk-label { font-size: .74rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
    color: var(--mud-palette-text-secondary, #8a7a66); margin-top: 10px; }
.kiosk-amount { display: inline-flex; align-items: baseline; gap: 10px; min-height: 64px; min-width: 220px; padding: 0 20px;
    margin-top: 8px; border-radius: 14px; cursor: pointer; font-size: 1.8rem; font-weight: 800; font-variant-numeric: tabular-nums;
    border: 2px solid var(--mud-palette-lines-default, #e3d8c5); background: var(--mud-palette-surface, #fff);
    color: var(--mud-palette-text-primary, #3b2f1e); }
.kiosk-amount small { font-size: .8rem; font-weight: 600; color: var(--mud-palette-text-secondary, #8a7a66); }
.kiosk-amount:disabled { cursor: default; opacity: 1; background: rgba(var(--mud-palette-primary-rgb), .05); }
.kiosk-amount.empty { font-size: 1.1rem; color: var(--mud-palette-primary, #5b4a33); border-style: dashed; }

/* /kiosk/drawer (item 924). */
.kdr { max-width: 1200px; }
.kdr-pickers { display: flex; flex-wrap: wrap; gap: 18px; margin-bottom: 6px; }
.kdr-field { display: flex; flex-direction: column; gap: 6px; }
.kdr-hint { color: var(--mud-palette-text-secondary, #8a7a66); margin: 4px 0 8px; }
.kdr-section { margin-top: 12px; }
.kdr-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.kdr-section-head .kiosk-label { margin-top: 0; }
.kdr-denoms { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 8px 16px; margin: 10px 0; }
.kdr-denom { display: grid; grid-template-columns: 56px auto 1fr; align-items: center; gap: 10px; }
.kdr-denom-label { font-weight: 800; color: var(--mud-palette-text-primary, #3b2f1e); }
.kdr-denom-sum { text-align: right; color: var(--mud-palette-text-secondary, #6b5b47); font-variant-numeric: tabular-nums; }
.kdr-variance { display: inline-block; margin-top: 14px; padding: 10px 18px; border-radius: 14px; font-size: 1.4rem; font-weight: 800; }
.kdr-variance.ok { color: var(--mud-palette-success-darken, #166534); background: rgba(var(--mud-palette-success-rgb), .14); }
.kdr-variance.short { color: var(--mud-palette-error-darken, #991b1b); background: rgba(var(--mud-palette-error-rgb), .12); }
.kdr-variance.over { color: var(--mud-palette-warning-darken, #7a5514); background: rgba(var(--mud-palette-warning-rgb), .16); }
.kdr-warn { margin-top: 6px; font-weight: 600; }
.kdr-os.ok { color: var(--mud-palette-success, #15803d); }
.kdr-os.short { color: var(--mud-palette-error, #b91c1c); }
.kdr-os.over { color: var(--mud-palette-warning, #b45309); }
/* item 998: count sheet, shift drops, second counter — read from across the room (text >= 15px, words not colour alone) */
.kdr .kdr-hint, .kdr .kiosk-muted, .kdr .kiosk-side-row { font-size: 1rem; }
.kdr .kiosk-label, .kdr .kiosk-amount small { font-size: .95rem; }
.kdr .kiosk-chip { min-height: 52px; font-size: 1rem; }
.kdr .kdr-os { font-weight: 800; }
.kdr-await { margin-bottom: 14px; font-size: 1.05rem; }
.kdr-witness { padding: 14px 16px; border-radius: 14px; border: 2px dashed rgba(var(--mud-palette-primary-rgb), .35); }
.kdr-witness-done { font-size: 1.2rem; font-weight: 800; color: var(--mud-palette-success-darken, #166534); }
.kdr-drops { padding: 10px 14px; border-radius: 14px; background: rgba(var(--mud-palette-primary-rgb), .05); }
.kdr-drop { display: grid; grid-template-columns: 6.5em 1fr auto; gap: 10px; padding: 6px 0; font-size: 1.05rem; font-weight: 600;
    border-bottom: 1px solid rgba(var(--mud-palette-primary-rgb), .10); }
.kdr-drop-who { color: var(--mud-palette-text-secondary, #6b5b47); }
.kdr-amt { font-variant-numeric: tabular-nums; text-align: right; }
.kdr-deposit { margin-top: 8px; font-size: 1.15rem; font-weight: 600; color: var(--mud-palette-text-primary, #3b2f1e); }
.kdr-log { padding: 6px 0; border-bottom: 1px solid rgba(var(--mud-palette-primary-rgb), .10); }
.kdr-log-head { display: flex; justify-content: space-between; gap: 8px; font-size: 1rem; font-weight: 600; }

/* /kiosk/count (item 925). */
.kct { max-width: 1100px; }
.kct-counts { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; margin: 8px 0 6px; }
.kct-count { display: flex; flex-direction: column; gap: 6px; min-height: 56px; padding: 14px 16px; border-radius: 14px;
    text-decoration: none; color: inherit; background: var(--mud-palette-surface, #fff);
    border: 1px solid var(--mud-palette-lines-default, #e6ddcd); }
.kct-count-title { font-weight: 800; color: var(--mud-palette-text-primary, #3a2a1a); }
.kct-count-meta { font-size: .88rem; color: var(--mud-palette-text-secondary, #6b5b47); }
.kct-bar { display: block; height: 8px; border-radius: 5px; overflow: hidden; background: rgba(var(--mud-palette-primary-rgb), .10); }
.kct-bar > i { display: block; height: 100%; border-radius: 5px; background: var(--mud-palette-success, #16a34a); }
.kct-bar--wide { margin: -4px 0 12px; max-width: 640px; }
.kct-picks { margin: 4px 0 6px; }
.kct-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.kct-progress { font-weight: 700; color: var(--mud-palette-text-secondary, #6b5b47); }
.kct-filter { margin: 4px 0 8px; }
.kct-group { margin: 16px 0 6px; font-size: .78rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
    color: var(--mud-palette-text-secondary, #8a7a66); }
.kct-lines { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.kct-line { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 60px; padding: 8px 14px;
    border-radius: 12px; cursor: pointer; text-align: left; font-size: 1rem; background: var(--mud-palette-surface, #fff);
    color: var(--mud-palette-text-primary, #3a2a1a); border: 1px solid var(--mud-palette-lines-default, #e6ddcd);
    border-left: 6px solid var(--mud-palette-lines-default, #e6ddcd); }
.kct-line.done { border-left-color: var(--mud-palette-success, #16a34a); }
.kct-line-name { font-weight: 700; min-width: 0; }
.kct-line-qty { white-space: nowrap; font-variant-numeric: tabular-nums; }
.kct-line-qty b { font-size: 1.2rem; }
.kct-line-qty small { color: var(--mud-palette-text-secondary, #8a7a66); }

/* /kiosk/waste (item 925). */
.kws { max-width: 1100px; }
.kws-step { font-size: 1.15rem; font-weight: 800; color: var(--mud-palette-text-primary, #3a2a1a); margin: 10px 0 8px;
    display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.kws-summary { font-weight: 600; color: var(--mud-palette-text-secondary, #6b5b47); }
.kws-change { border: none; background: none; cursor: pointer; text-decoration: underline; font-size: .9rem;
    color: var(--mud-palette-text-secondary, #8a7a66); min-height: 44px; }
.kws-cats { margin-bottom: 10px; }
.kws-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.kws-item { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px; min-height: 72px;
    padding: 10px 14px; border-radius: 14px; cursor: pointer; text-align: left; background: var(--mud-palette-surface, #fffaf0);
    color: var(--mud-palette-text-primary, #3b2f1e); border: 2px solid var(--mud-palette-lines-default, #e3d8c5); }
.kws-item-name { font-weight: 700; }
.kws-item-unit { font-size: .8rem; color: var(--mud-palette-text-secondary, #8a7a66); }
.kws-reasons { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.kws-reason { min-height: 72px; border-radius: 14px; cursor: pointer; font-size: 1.15rem; font-weight: 800;
    background: var(--mud-palette-surface, #fff); color: var(--mud-palette-primary, #5b4a33);
    border: 2px solid var(--mud-palette-primary, #5b4a33); }
.kws-reason:disabled { opacity: .45; }
.kws-log-row { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 2px 10px; align-items: baseline;
    padding: 6px 0; border-top: 1px solid var(--mud-palette-lines-default, #efe6d6); }
.kws-log-time { color: var(--mud-palette-text-secondary, #8a7a66); font-variant-numeric: tabular-nums; }
.kws-log-why { font-weight: 700; }
.kws-log-note { grid-column: 2; }

/* ---- kiosk product photos (item 1038): white-boxed JPEGs multiplied onto a cream "stage", so the stage stays cream in both
   themes (a dark stage would multiply the drinks to black). The Menu itself: "Kiosk Menu (Floor look)" at the end. ---- */
:root {
    --kiosk-stage-a: #f5ead6;
    --kiosk-stage-b: #eee0c5;
    --kiosk-stage-ink: rgba(91, 74, 51, .30);
    --kiosk-accent: #11878a;        /* the one crisp teal: focus rings + small live markers, never a wash */
    --kiosk-accent-rgb: 17, 135, 138;
}
:root[data-theme="dark"] {
    --kiosk-stage-a: #e6d6b9;
    --kiosk-stage-b: #d6c3a0;
    --kiosk-stage-ink: rgba(58, 42, 26, .38);
    --kiosk-accent: #5cc6c0;
    --kiosk-accent-rgb: 92, 198, 192;
}
/* 1066: a photo whose blob is gone shows the brand mark on the stage instead of a broken image (KioskPhoto) */
.kiosk-photo-ph { display: block; background: url('/img/z153-logo.png') center / 70% auto no-repeat; opacity: .35; }

/* ---- item 1522: step art (StepArt.razor / CupArt.razor). Illustration inks are fixed tokens (Kiosk carve-out, Rule #20); the liquid
   comes in per step as --liquid / --liquid-a / --foam from the ingredient's DB visual. ---- */
:root {
    --step-ink: #4f97c0;
    --step-glass: rgba(79, 151, 192, .07);
    --step-ice: rgba(214, 233, 243, .78);
    --step-line: #e0453a;
    --step-paper: #fbfaf7;
    --step-sleeve: #c9a27a;
    --step-steel: #d3dbe1;
    --step-label: #3b2416;
    --step-foam-dot: rgba(79, 151, 192, .45);
}
:root[data-theme="dark"] {
    --step-ink: #8cc8e8;
    --step-glass: rgba(140, 200, 232, .08);
    --step-ice: rgba(140, 200, 232, .26);
    --step-line: #ff6b5e;
    --step-paper: #ece6db;
    --step-label: #f0e6d6;
    --step-foam-dot: rgba(140, 200, 232, .55);
}
.step-art { display: block; width: 100%; height: auto; overflow: visible; }
.step-art .ink { fill: none; stroke: var(--step-ink); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.step-art .ink.tick { stroke-width: 1.8; }
.step-art .glass { fill: var(--step-glass); }
.step-art .rim { fill: var(--step-glass); }
.step-art .paper { fill: var(--step-paper); }
.step-art .sleeve { fill: var(--step-sleeve); }
.step-art .steel { fill: var(--step-steel); }
.step-art .liq { fill: var(--liquid); fill-opacity: var(--liquid-a, 1); }
.step-art .liq-top { fill: none; stroke: var(--step-ink); stroke-opacity: .4; stroke-width: 1.2; stroke-linecap: round; }
.step-art .liq-s { fill: none; stroke: var(--liquid); stroke-opacity: var(--liquid-a, 1); stroke-width: 4; stroke-linecap: round; }
.step-art .foam { fill: var(--foam); }
.step-art .foam-s { fill: none; stroke: var(--foam); stroke-width: 6; stroke-linecap: round; }
.step-art .foam-dot { fill: none; stroke: var(--step-foam-dot); stroke-width: .9; }
.step-art .ice { fill: var(--step-ice); stroke: var(--step-ink); stroke-width: 1.3; }
.step-art .fill-line { fill: none; stroke: var(--step-line); stroke-width: 2.8; stroke-linecap: round; }
.step-art .size-tag { fill: var(--step-label); font: italic 800 9px/1 var(--mud-typography-default-family, sans-serif); }
@media print { .step-art { --step-glass: transparent; --step-ice: transparent; } }

/* ---- item 1202 / 1349: the Demo tab on /kiosk/menu/{id} (.kpr-*). A wall touchscreen read at arm's length: 56 px+ targets,
   no text under 15 px. The game itself is trainer.css; only its overlay cards and HUD base size are lifted here. ---- */
.kpr-sizes { margin: 0; }
.kpr-sizes .kiosk-seg-btn { min-width: 96px; min-height: 60px; font-size: 1.15rem; }
.kpr-why { margin: 0 0 14px; padding: 12px 16px; border-radius: 12px; font-size: 1.05rem; font-weight: 600; line-height: 1.4;
    color: var(--mud-palette-text-primary); background: rgba(var(--mud-palette-warning-rgb), .16);
    border: 1px solid rgba(var(--mud-palette-warning-rgb), .55); }
.kpr-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 0 10px; }
.kpr-bar-name { min-width: 0; font-size: 1.2rem; font-weight: 700; color: var(--mud-palette-text-primary);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kpr-bar-tools { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.kpr-again { min-height: 60px; min-width: 200px; font-size: 1.15rem; }
.kpr-stage { position: relative; display: flex; flex-direction: column; min-height: 420px; }
.kmi--fill .kpr-stage { flex: 1 1 auto; min-height: 0; }
.kpr-stage .trainer-canvas-host, .kpr-stage .trainer-canvas-host.trainer-live { flex: 1 1 auto; height: auto; min-height: 420px;
    max-height: none; aspect-ratio: auto; }
.kpr-stage .trh { font-size: 1rem; }
/* the HUD's own small labels (trainer.css sizes them for a phone held close); the round marks grow with their digits */
.kpr .kpr-stage :is(.trh-health, .trh-intent, .trh-marker-text, .trh-held-empty, .trh-held-detail, .trh-hand-active, .trh-rail-sub,
    .trh-cl-subtitle, .trh-cl-group-label, .trh-cl-sub, .trh-goal, .trh-cl-note, .trh-gauge-title, .trh-gauge-say, .trh-dock-word,
    .trh-door-text, .trh-summary-facts, .trh-fix-count, .trh-fix-badge, .trh-find-say, .trh-find-cat, .trk-ch, .trk-remake, .trk-peek-name) {
    font-size: .95rem; }
.kpr .kpr-stage :is(.trh-step-mark, .trh-hand-tag) { width: 1.9rem; height: 1.9rem; font-size: .95rem; }
.kpr-stage .trh-step-row { grid-template-columns: 2rem 1fr; }
@media (pointer: coarse) { .kpr-stage .trh kbd { display: none; } }   /* keyboard hints mean nothing on the wall screen */
.kpr-stage .trainer-overlay-card { max-width: 32rem; }
.kpr-stage .trainer-overlay-title { font-size: 1.6rem; }
.kpr-stage .trainer-overlay-body { font-size: 1.1rem; line-height: 1.5; }
.kpr-stage :is(.trainer-overlay-status, .trainer-overlay-tip) { font-size: 1rem; }
.kpr-stage .trainer-btn { min-height: 60px; min-width: 11rem; font-size: 1.15rem; }

/* item 1449: /viewer/demo plays the same TrainerDemo on a desktop page (no .kpr, so the HUD keeps trainer.css sizes); the stage takes the rest of the screen */
/* the demo fills the viewer shell like the kiosk's fill mode: full width, the stage takes the rest of the window (owner 10/15) */
.ziggis-content:has(.vdemo) { max-width: none; margin: 0; height: 100vh; height: 100dvh; display: flex; flex-direction: column; }
.vdemo { padding: 14px 16px 12px; }   /* the viewer shell has no top bar */
.vdemo-stage { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.vdemo-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 0 12px; }
.vdemo-layout { color: var(--mud-palette-text-secondary); }
.vdemo-layout b { color: var(--mud-palette-text-primary); }
.vdemo-pick { display: flex; align-items: center; gap: 8px; flex: 0 1 30rem; min-width: min(100%, 18rem); }
.vdemo-pick > :first-child { flex: 1 1 auto; min-width: 0; }
.vdemo-hint { margin: 24px 0; color: var(--mud-palette-text-secondary); }
.vdemo-stage .kpr-stage { flex: 1 1 auto; min-height: 0; }
.vdemo-stage .kpr-stage .trainer-canvas-host, .vdemo-stage .kpr-stage .trainer-canvas-host.trainer-live { min-height: 360px; }   /* flexed height is definite, so the canvas follows it */
.vdemo-stage .kpr-sizes .kiosk-seg-btn { min-width: 72px; min-height: 40px; font-size: 1rem; }   /* mouse targets, not the wall screen's */
.vdemo-stage .kpr-again { min-height: 40px; min-width: 140px; font-size: 1rem; }

/* ---- /kiosk/clock (item 1039; was an inline <style> in KioskClock.razor) ----
   The login's brand field (sidebar browns + slow gold swirl) behind a card that follows the theme. The article becomes
   a column, so the stage takes exactly what's left under the preview banner: no scrollbar unless the card really
   outgrows the screen (the old stage was height:100% PLUS the banner/alert above it = a permanent scrollbar). */
:root {
    --kiosk-face: #fffaf0;        /* the analog clock is a physical cream dial in both themes */
    --kiosk-face-edge: #f3e9d6;
    --kiosk-face-ink: #3b2f1e;
    --kiosk-face-ink-2: #5b4a33;
    --kiosk-face-sec: #c0392b;
}
.page.kiosk-mode .ziggis-content:has(.kiosk-brand-stage) {
    display: flex; flex-direction: column; padding: 0 !important; max-width: none; margin: 0; width: 100%;
    background: linear-gradient(180deg, var(--zg-sidebar-top, var(--kiosk-brown-deep)) 0%, var(--zg-sidebar-mid, var(--kiosk-brown-mid)) 45%,
        var(--zg-sidebar-top, var(--kiosk-brown-deep)) 100%);
}
.kc-stage { position: relative; isolation: isolate; flex: 1 0 auto; display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 16px; padding: 24px 22px; box-sizing: border-box; }
.kiosk-brand-field { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
    background: radial-gradient(ellipse 60% 55% at 50% 48%, rgba(var(--kc-warm-rgb, var(--kiosk-gold-rgb)), .20) 0%, transparent 70%); }
/* time of day tints the field glow and one star shade, and scales the stars' brightness (1101); night floored at .8 */
.kc-morning, .page.kiosk-mode:has(.kc-morning) .kiosk-stardust { --kc-glow: 1.15; --kc-warm-rgb: 244, 205, 140; }
.kc-day, .page.kiosk-mode:has(.kc-day) .kiosk-stardust { --kc-glow: 1; --kc-warm-rgb: 224, 184, 120; }
.kc-evening, .page.kiosk-mode:has(.kc-evening) .kiosk-stardust { --kc-glow: .95; --kc-warm-rgb: 214, 128, 64; }
.kc-night, .page.kiosk-mode:has(.kc-night) .kiosk-stardust { --kc-glow: .8; --kc-warm-rgb: 150, 104, 60; }
.kc-crewalert { position: relative; width: min(1000px, 100%); box-sizing: border-box; margin: 0; }
/* 1079: gold rim light, so the cards catch the stardust instead of hiding it */
.kiosk-brand-stage { --kiosk-rim: 0 0 0 1px rgba(var(--kiosk-gold-rgb), .28), 0 0 22px rgba(var(--kiosk-gold-rgb), .30),
    0 0 64px rgba(var(--kiosk-gold-rgb), .16), 0 24px 60px rgba(0, 0, 0, .35); }

/* ---- Item 1079: KioskFlourish corner filigree (inside the z -1 brand field: cards and text always win) ---- */
.kiosk-flourish { position: absolute; width: clamp(150px, 20vw, 260px); aspect-ratio: 1; color: rgb(var(--kiosk-gold-rgb));
    opacity: .24; will-change: transform, opacity; animation: kfl-breathe 12s ease-in-out infinite; }
.kiosk-flourish svg { display: block; width: 100%; height: 100%; overflow: visible; }
.kiosk-flourish--tl { top: 8px; left: 8px; transform-origin: 0 0; }
.kiosk-flourish--tr { top: 8px; right: 8px; transform-origin: 100% 0; }
.kiosk-flourish--bl { bottom: 8px; left: 8px; transform-origin: 0 100%; }
.kiosk-flourish--br { bottom: 8px; right: 8px; transform-origin: 100% 100%; }
.kfl-stem path { fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; }
.kfl-leaf path { fill: currentColor; fill-opacity: .42; stroke: currentColor; stroke-width: .8; stroke-linejoin: round; }
.kfl-leaf .kfl-vein { fill: none; stroke-opacity: .9; stroke-width: .9; }
.kfl-bean ellipse { fill: currentColor; fill-opacity: .5; stroke: currentColor; stroke-width: .9; }
.kfl-bean .kfl-crease { fill: none; stroke: currentColor; stroke-width: 1.2; }
.kfl-seed circle { fill: currentColor; }
@keyframes kfl-breathe { 0%, 100% { transform: scale(1); opacity: .2; } 50% { transform: scale(1.03); opacity: .28; } }

.kiosk-clock { position: relative; width: min(1000px, 100%); min-height: min(600px, 74%); box-sizing: border-box;
    display: flex; flex-direction: column; justify-content: center; text-align: center; padding: 30px 32px; border-radius: 24px;
    background: rgba(var(--mud-palette-surface-rgb), .97);
    background: color-mix(in srgb, var(--mud-palette-surface) 94%, var(--mud-palette-secondary));   /* warm like the login card */
    color: var(--mud-palette-text-primary);
    border: 1px solid rgba(var(--kiosk-gold-rgb), .7);
    box-shadow: var(--kiosk-rim); }
.kc-logo { display: block; width: 76px; height: 76px; margin: 0 auto 22px; }
.kiosk-clock .kiosk-picker-sub { text-align: center; }
.kiosk-clock .kiosk-picker-grid { grid-template-columns: repeat(auto-fit, minmax(180px, 212px)); justify-content: center; }

/* 1053: every card carries its own action. On the clock = the brand-gold ring + a teal live dot in the pill. */
.kiosk-clock .kiosk-picker-tile { gap: 6px; padding: 18px 10px 14px; }
.kiosk-clock .kiosk-picker-name { font-size: 16px; font-weight: 700; }
.kiosk-clock .kiosk-picker-tile .kiosk-picker-shift { text-align: center; }
.page.kiosk-mode .kiosk-clock .kiosk-picker-shift.kc-break { margin-top: -4px; font-weight: 600; }   /* 1630: planned break under the shift line */
.kc-pills { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: auto; padding-top: 6px; }
.kc-pill { display: inline-flex; align-items: center; gap: 7px; min-height: 30px; padding: 3px 14px; box-sizing: border-box;
    border-radius: 999px; border: 1px solid transparent; font-size: .9rem; font-weight: 800; white-space: nowrap;
    font-variant-numeric: tabular-nums; }
.kc-pill--in { color: var(--kiosk-tile-avatar); background: rgba(var(--kiosk-gold-rgb), .20); border-color: rgba(var(--kiosk-gold-rgb), .75); }
.kc-pill--out { color: var(--kiosk-tile-teal-ink); background: rgba(var(--kiosk-tile-teal-rgb), .09); border-color: rgba(var(--kiosk-tile-teal-rgb), .45); }
.kc-pill--out::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--kiosk-tile-teal);
    background-clip: padding-box; border: 3px solid rgba(var(--kiosk-tile-teal-rgb), .2); }
.kc-pill--break { color: var(--kiosk-tile-break); background: rgba(var(--kiosk-tile-break-rgb), .09); border-color: rgba(var(--kiosk-tile-break-rgb), .35); }
.kc-pill--break .kc-coffee { margin: 0; }
.kiosk-picker-tile.kc-tile--on { border-color: rgba(var(--kiosk-gold-rgb), .95);
    background: linear-gradient(180deg, rgba(var(--kiosk-gold-rgb), .18), rgba(var(--kiosk-gold-rgb), .05)), var(--kiosk-tile); }
/* ring = border + a clipped gap (not a spread shadow), the same size in the layout as a plain avatar */
.kc-tile--on .kiosk-picker-avatar { box-sizing: border-box; width: 64px; height: 64px; margin: -6px; padding: 3px;
    border: 3px solid rgb(var(--kiosk-gold-rgb)); background-clip: content-box; }
.kc-who { margin-bottom: 1rem; font-family: 'Fraunces', serif; font-size: 2rem; font-weight: 600; color: var(--mud-palette-text-primary); }

/* analog clock: hands tick via CSS, started at the render-time angle via a negative animation-delay */
@keyframes kc-spin { from { transform: translateX(-50%) rotate(0deg); } to { transform: translateX(-50%) rotate(360deg); } }
.kc-face { position: relative; width: 220px; height: 220px; margin: 0 auto 1rem; border-radius: 50%;
    border: 8px solid var(--mud-palette-primary); box-shadow: 0 6px 20px rgba(0, 0, 0, .18);
    background: radial-gradient(circle, var(--kiosk-face) 70%, var(--kiosk-face-edge) 100%); }
.kc-hand { position: absolute; left: 50%; bottom: 50%; transform-origin: 50% 100%; border-radius: 4px; animation: kc-spin linear infinite; }
.kc-hour { width: 7px; height: 58px; background: var(--kiosk-face-ink); animation-duration: 43200s; }
.kc-min { width: 5px; height: 86px; background: var(--kiosk-face-ink-2); animation-duration: 3600s; }
.kc-sec { width: 2px; height: 96px; background: var(--kiosk-face-sec); animation-duration: 60s; }
.kc-center { position: absolute; top: 50%; left: 50%; width: 14px; height: 14px; border-radius: 50%; transform: translate(-50%, -50%);
    background: var(--kiosk-face-ink); }
.kc-digital { font-size: 2.2rem; font-weight: 800; letter-spacing: .02em; font-variant-numeric: tabular-nums; color: var(--mud-palette-text-primary); }
.kc-state { margin: .5rem 0 1.1rem; font-size: 1.1rem; }
@keyframes kc-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
.kc-on { font-weight: 700; color: var(--mud-palette-success); animation: kc-pulse 2.2s ease-in-out infinite; }
.kc-off { font-weight: 600; color: var(--mud-palette-text-secondary); }
.kc-break { font-weight: 700; color: var(--mud-palette-tertiary); }
.kc-coffee { width: 1.05em; height: 1.05em; margin-left: .15em; vertical-align: -3px; }   /* solid, inherits text color */

/* big floor buttons: the -darken shades keep white text readable in both themes */
.kc-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.kc-btn { min-height: 64px; min-width: 150px; padding: 0 30px; border: none; border-radius: 14px; cursor: pointer;
    font-size: 1.25rem; font-weight: 800; }
.kc-btn:disabled { opacity: .5; cursor: default; }
.kc-btn:focus-visible { outline: 3px solid var(--kiosk-accent); outline-offset: 3px; }
.kc-btn-in { background: var(--mud-palette-success-darken); color: var(--mud-palette-success-text); }
.kc-btn-out { background: var(--mud-palette-error-darken); color: var(--mud-palette-error-text); }
.kc-btn.kc-btn-break { background: var(--mud-palette-tertiary-darken); color: var(--mud-palette-tertiary-text); }
.kc-btn.kc-btn-done { background: rgba(var(--mud-palette-primary-rgb), .10); color: var(--mud-palette-text-primary);
    border: 2px solid var(--mud-palette-lines-default); }

/* manager tools (BL-59) */
.kc-mgr-link { display: inline-block; margin-top: 1.1rem; min-height: 44px; background: none; border: none; cursor: pointer;
    font-size: 1rem; font-weight: 700; color: var(--mud-palette-tertiary); }
.kc-mgr-link:hover { text-decoration: underline; }
.kc-mgr-panel { margin-top: 1rem; padding-top: 1rem; text-align: left; border-top: 1px solid var(--mud-palette-lines-default); }
.kc-mgr-cards { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 1rem; }
.kc-mgr-note { margin: -.25rem 0 1rem; font-size: .9rem; color: var(--mud-palette-text-secondary); }
.kc-mgr-card { flex: 1 1 calc(50% - 6px); box-sizing: border-box; padding: 14px; border-radius: 12px; text-align: center;
    text-decoration: none; font-weight: 700; color: var(--mud-palette-text-primary);
    border: 2px solid var(--mud-palette-lines-default); background: rgba(var(--mud-palette-primary-rgb), .05); }
.kc-mgr-card:hover { border-color: var(--mud-palette-secondary); }
.kc-mgr-h3 { margin: .5rem 0; font-family: 'Fraunces', serif; color: var(--mud-palette-primary); }
.kc-mgr-table { width: 100%; border-collapse: collapse; }
.kc-mgr-table td { padding: 8px 6px; border-bottom: 1px solid var(--mud-palette-lines-default); }
.kc-mgr-name { font-weight: 700; color: var(--mud-palette-text-primary); }
.kc-mgr-pinstate { font-size: .85rem; color: var(--mud-palette-text-secondary); }
.kc-mgr-act { text-align: right; white-space: nowrap; }
.kc-mgr-input { width: 108px; }
.kc-mgr-setbtn, .kc-mgr-save, .kc-mgr-cancel { margin-left: 4px; padding: 6px 14px; border: none; border-radius: 8px;
    font-weight: 700; cursor: pointer; }
.kc-mgr-setbtn { background: var(--mud-palette-primary); color: var(--mud-palette-background); }
.kc-mgr-save { background: var(--mud-palette-success-darken); color: var(--mud-palette-success-text); }
.kc-mgr-save:disabled { opacity: .5; }
.kc-mgr-cancel { background: rgba(var(--mud-palette-primary-rgb), .12); color: var(--mud-palette-text-primary); }

@media (prefers-reduced-motion: reduce) { .kc-on { animation: none; } }

/* ---- /kiosk/schedule (item 1037; was an inline <style> in KioskSchedule.razor) ----
   Day view blocks read from ~1 m: time 16 px, name 20 px bold, role 16 px; the website chip's indicators ride along
   (ShiftAssignmentFlags + the published check). Manager mode is the one teal-accented state on the screen. */
/* 1037 (owner): the Day view draws the whole store day; the header stays and the day scrolls inside the kiosk viewport */
.page.kiosk-mode .ziggis-content:has(.ksd) { display: flex; flex-direction: column; }
.ksd { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding-bottom: 8px; }
.ksd-head, .ksd-mgrbar { flex: 0 0 auto; }
.ksd-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 12px 4px 16px 0; }
.ksd-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.ksd-arrow { width: 56px; height: 56px; flex: 0 0 auto; border-radius: 14px; cursor: pointer; line-height: 1; font-size: 1.8rem;
    border: 1px solid var(--mud-palette-lines-default); background: var(--mud-palette-surface); color: var(--mud-palette-primary); }
.ksd-arrow:active { background: rgba(var(--mud-palette-primary-rgb), .08); }
.ksd-title { flex: 1 1 auto; display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap; gap: 12px; min-width: 0; }
.ksd-dayname { font-family: 'Fraunces', serif; font-size: 1.7rem; font-weight: 700; color: var(--mud-palette-text-primary); }
.ksd-date { font-size: 1.1rem; color: var(--mud-palette-text-secondary); }
.ksd-today-chip { align-self: center; padding: 3px 9px; border-radius: 8px; font-size: .72rem; font-weight: 800; letter-spacing: .05em;
    text-transform: uppercase; background: var(--mud-palette-warning); color: var(--mud-palette-warning-text); }
.ksd-jump { align-self: center; padding: 6px 12px; border-radius: 10px; cursor: pointer; font-size: .9rem; font-weight: 700;
    border: 1px solid var(--mud-palette-warning); background: rgba(var(--mud-palette-warning-rgb), .12); color: var(--mud-palette-text-primary); }
.ksd-toggle { display: flex; gap: 6px; flex: 0 0 auto; }
.ksd-tgl { padding: 10px 18px; border-radius: 10px; cursor: pointer; font-size: 1rem; font-weight: 700;
    border: 1px solid var(--mud-palette-lines-default); background: var(--mud-palette-surface); color: var(--mud-palette-primary); }
.ksd-tgl-on { border-color: var(--mud-palette-primary); background: var(--mud-palette-primary); color: var(--mud-palette-background); }
.ksd-mgr-btn { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; min-height: 48px; padding: 0 16px; border-radius: 12px;
    cursor: pointer; font-size: .98rem; font-weight: 700; border: 1px dashed var(--mud-palette-lines-inputs); background: transparent;
    color: var(--mud-palette-text-secondary); }
.ksd-mgr-btn:hover, .ksd-mgr-btn:focus-visible { border-style: solid; border-color: var(--kiosk-accent); color: var(--mud-palette-text-primary); }
.ksd-btn-icon { width: 20px; height: 20px; vertical-align: -4px; }
.ksd-mgrbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin: -4px 0 14px; padding: 10px 14px; border-radius: 14px;
    border: 1px solid rgba(var(--kiosk-accent-rgb), .55); background: rgba(var(--kiosk-accent-rgb), .09); }
.ksd-mgrbar-txt { flex: 1 1 300px; font-size: 1.05rem; color: var(--mud-palette-text-primary); }
.ksd-mgrbar .kiosk-btn { display: inline-flex; align-items: center; gap: 8px; }

/* Week = the shared read-only manager Board (ScheduleBoardView): a min-width keeps 7 columns readable before they scroll. */
.ksd-weekboard { overflow-x: auto; padding-bottom: 6px; }
.ksd-weekboard .bd-wrap { min-width: 1080px; }

.ksd-board { display: flex; gap: 10px; }
.ksd-axis { position: relative; flex: 0 0 auto; width: 64px; }
.ksd-hr { position: absolute; right: 6px; transform: translateY(-50%); white-space: nowrap; font-size: .9rem; font-weight: 600;
    font-variant-numeric: tabular-nums; color: var(--mud-palette-text-secondary); }
.ksd-body { position: relative; flex: 1 1 auto; border-left: 1px solid var(--mud-palette-lines-default); }
.ksd-line { position: absolute; left: 0; right: 0; border-top: 1px solid var(--mud-palette-lines-default); }
.ksd-now { position: absolute; left: 0; right: 0; z-index: 1; border-top: 2px solid var(--mud-palette-error); }   /* under the blocks: never strikes a name */
.ksd-now::before { content: ""; position: absolute; left: -5px; top: -5px; width: 8px; height: 8px; border-radius: 50%; background: var(--mud-palette-error); }
/* 1351: still clocked in past the shift: the cherry band carried on from the end line to now (pulses; still under reduced motion) */
.ksd-overtail { position: absolute; z-index: 2; width: 7px; border-radius: 0 0 4px 4px; pointer-events: none; background: rgb(var(--kiosk-orb-ember-rgb));
    box-shadow: 0 0 10px rgba(var(--kiosk-orb-ember-rgb), .6); animation: ksd-overtail-pulse 2.4s ease-in-out infinite; }
@keyframes ksd-overtail-pulse { 50% { opacity: .4; } }
@media (prefers-reduced-motion: reduce) { .ksd-overtail { animation: none; } }

/* a block: role colour band on the left (inline), light role wash, three tablet-size lines */
.ksd-blk { position: absolute; z-index: 2; box-sizing: border-box; overflow: hidden; display: flex; flex-direction: column; gap: 3px;
    padding: 8px 12px; border-radius: 12px; border: 1px solid var(--mud-palette-lines-default); border-left: 7px solid var(--mud-palette-secondary);
    background: var(--mud-palette-surface); color: var(--mud-palette-text-primary); box-shadow: 0 1px 4px rgba(0, 0, 0, .08); }
.ksd-blk-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ksd-time { font-size: 1rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--mud-palette-text-secondary); }
.ksd-pub { flex: 0 0 auto; width: 20px; height: 20px; color: var(--mud-palette-success); }
.ksd-who { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 1.25rem; font-weight: 800; line-height: 1.2; }
.ksd-who-name { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ksd-dot { flex: 0 0 auto; width: 12px; height: 12px; border-radius: 50%; box-shadow: 0 0 0 2px var(--mud-palette-surface); }
.ksd-role { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 1rem; font-weight: 600; color: var(--mud-palette-text-secondary); }
.ksd-brk { margin-left: 8px; font-weight: 700; color: var(--mud-palette-tertiary); }
.ksd-blk .sched-presence { font-size: 1rem; line-height: 1; }
.ksd-blk .sched-presence--in { color: var(--mud-palette-success); }
.ksd-blk .sched-presence--done { color: var(--mud-palette-text-secondary); }
.ksd-blk .sched-presence--none { color: var(--mud-palette-text-disabled); }
.ksd-blk .sched-att-badge { padding: 1px 6px; border-radius: 6px; font-size: .72rem; font-weight: 800; letter-spacing: .03em;
    text-transform: uppercase; background: rgba(var(--mud-palette-error-rgb), .12); color: var(--mud-palette-error); }
/* the PIN-identified staffer's own shift: filled in the brand colour */
.ksd-mine { background: var(--mud-palette-primary) !important; color: var(--mud-palette-background); box-shadow: 0 2px 10px rgba(0, 0, 0, .25); }
.ksd-mine .ksd-time, .ksd-mine .ksd-role, .ksd-mine .ksd-brk { color: inherit; opacity: .85; }
/* open slot: dashed amber, readable from a step back */
.ksd-open { border-style: dashed; border-color: var(--mud-palette-warning); border-left-style: solid; background: rgba(var(--mud-palette-warning-rgb), .10); }
.ksd-open .ksd-who { letter-spacing: .02em; color: var(--mud-palette-warning-darken); }
.ksd-reopened { font-size: .95rem; font-weight: 700; color: var(--mud-palette-warning-darken); }
:root[data-theme="dark"] .ksd-open .ksd-who, :root[data-theme="dark"] .ksd-reopened { color: var(--mud-palette-warning-lighten); }
.ksd-tappable { cursor: pointer; outline: 2px solid rgba(var(--kiosk-accent-rgb), .55); outline-offset: 1px; }
.ksd-tappable:active { filter: brightness(.96); }

.ksd-sheet { width: min(760px, calc(100vw - 32px)); }
.ksd-sheet-lead { margin: 12px 0 6px; font-size: 1.2rem; color: var(--mud-palette-text-primary); }
.ksd-sheet-sub { margin: 0 0 8px; }

/* 1407: a corrected punch — the block's tag, the who/when/why line, and the manager's Fix punch sheet */
/* a narrow block drops the tag to its own line instead of squeezing the time */
.ksd-blk-top:has(.ksd-edited) { flex-wrap: wrap; row-gap: 4px; }
.ksd-blk-top:has(.ksd-edited) .ksd-pub { margin-left: auto; }
.ksd-edited { padding: 1px 8px; border-radius: 999px; white-space: nowrap; font-size: 15px; font-weight: 800;
    color: var(--mud-palette-warning-darken); background: rgba(var(--mud-palette-warning-rgb), .16); }
.ksd-edited-line { margin: 8px 0; padding: 8px 12px; border-radius: 12px; font-size: 16px; font-weight: 600;
    color: var(--mud-palette-warning-darken); background: rgba(var(--mud-palette-warning-rgb), .12); }
.ksd-fx-label { margin: 14px 0 6px; font-size: 15px; font-weight: 800; letter-spacing: .04em; color: var(--mud-palette-text-secondary); }
.ksd-fx-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 10px 0;
    border-top: 1px solid var(--mud-palette-lines-default); }
.ksd-fx-lbl { min-width: 44px; font-size: 17px; font-weight: 800; color: var(--mud-palette-text-secondary); }
.ksd-fx-val { min-width: 118px; font-size: 1.6rem; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--mud-palette-text-primary); }
.ksd-fx-val--open { min-width: 0; font-size: 17px; font-weight: 700; color: var(--mud-palette-text-secondary); }
.ksd-fx-steps { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.ksd-fx-step { min-width: 64px; min-height: 52px; font-size: 17px; font-variant-numeric: tabular-nums; }
.ksd-fx-step:disabled { opacity: .4; cursor: default; }
.ksd-fx-other { margin-top: 8px; font-size: 16px; }
.ksd-fx-note { margin: 12px 0 4px; font-size: 15px; color: var(--mud-palette-text-secondary); }

/* ---- /kiosk/stock runway (item 1041; was an inline <style> in KioskRunway.razor) ----
   OUT wears the error theme (never black), the date + need blocks get padding, and the axis uses the same 1 px
   line as the rows so it doesn't read as a second scale. */
.ksr { max-width: 1100px; }
.ksr-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.ksr-sub { font-size: .9rem; color: var(--mud-palette-text-secondary); }
.ksr-clear { margin: .4rem 0 1rem; padding: 14px 18px; border-radius: 12px; font-weight: 700;
    background: rgba(var(--mud-palette-success-rgb), .12); color: var(--mud-palette-success-darken); }
.ksr-chips { display: flex; gap: 6px; }
.ksr-chip { padding: 4px 12px; border-radius: 999px; font-size: .88rem; font-weight: 800; }
.ksr-chip.out { background: rgba(var(--mud-palette-error-rgb), .14); color: var(--mud-palette-error-darken); border: 1px solid rgba(var(--mud-palette-error-rgb), .45); }
.ksr-chip.red { background: rgba(var(--mud-palette-error-rgb), .08); color: var(--mud-palette-error-darken); }
.ksr-chip.amber { background: rgba(var(--mud-palette-warning-rgb), .16); color: var(--mud-palette-warning-darken); }

.ksr-tl { position: relative; height: 46px; margin: .3rem 0 1.6rem; border-bottom: 1px solid var(--mud-palette-lines-default); }
.ksr-wk { position: absolute; top: 0; bottom: 0; border-left: 1px dashed var(--mud-palette-lines-default); }
.ksr-wl { position: absolute; bottom: -20px; transform: translateX(-50%); white-space: nowrap; font-size: .78rem; font-weight: 600;
    color: var(--mud-palette-text-secondary); }
.ksr-pin { position: absolute; bottom: 7px; transform: translateX(-50%); width: 13px; height: 13px; border-radius: 50%;
    border: 2px solid var(--mud-palette-surface); }
.ksr-pin.out { background: var(--mud-palette-error); }
.ksr-pin.red { background: var(--mud-palette-error-lighten); }
.ksr-pin.amber { background: var(--mud-palette-warning); }

.ksr-row { display: grid; grid-template-columns: minmax(0, 1fr) 210px 150px; gap: 14px; align-items: center; padding: 10px 4px;
    border-top: 1px solid var(--mud-palette-lines-default); border-radius: 8px; cursor: pointer; }
.ksr-row:active, .ksr-row.sel { background: rgba(var(--mud-palette-primary-rgb), .04); }
.ksr-nmwrap { min-width: 0; }
.ksr-nmline { display: flex; align-items: baseline; gap: 8px; }
.ksr-nm { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 1.05rem; font-weight: 700; color: var(--mud-palette-text-primary); }
.ksr-cat { flex: none; white-space: nowrap; font-size: .78rem; color: var(--mud-palette-text-secondary); }
.ksr-bar { position: relative; height: 9px; margin-top: 6px; overflow: hidden; border-radius: 5px; background: rgba(var(--mud-palette-primary-rgb), .07); }
.ksr-bar > i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 5px; }
.ksr-bar > i.out { background: var(--mud-palette-error); }
.ksr-bar > i.red { background: var(--mud-palette-error-lighten); }
.ksr-bar > i.amber { background: var(--mud-palette-warning); }

.ksr-when { display: flex; flex-direction: column; gap: 1px; padding: 8px 10px; border-radius: 10px; font-size: .95rem;
    background: rgba(var(--mud-palette-primary-rgb), .04); }
.ksr-when b { font-weight: 800; }
.ksr-when.out { background: rgba(var(--mud-palette-error-rgb), .12); }
.ksr-when.out b { color: var(--mud-palette-error); }
.ksr-when.red { background: rgba(var(--mud-palette-error-rgb), .06); }
.ksr-when.red b { color: var(--mud-palette-error-darken); }
.ksr-when.amber { background: rgba(var(--mud-palette-warning-rgb), .12); }
.ksr-when.amber b { color: var(--mud-palette-warning-darken); }
:root[data-theme="dark"] .ksr-when.out b, :root[data-theme="dark"] .ksr-when.red b { color: var(--mud-palette-error-lighten); }
:root[data-theme="dark"] .ksr-when.amber b { color: var(--mud-palette-warning-lighten); }
.ksr-d { font-size: .8rem; color: var(--mud-palette-text-secondary); }
.ksr-arriving { font-size: .82rem; font-weight: 700; color: var(--kiosk-accent); }
.ksr-arriving.late, .ksr-arriving.draft { color: var(--mud-palette-warning-darken); }
:root[data-theme="dark"] .ksr-arriving.late, :root[data-theme="dark"] .ksr-arriving.draft { color: var(--mud-palette-warning-lighten); }

.ksr-need { padding: 8px 10px; border-radius: 10px; text-align: right; background: rgba(var(--mud-palette-primary-rgb), .04); }
.ksr-need b { font-family: 'Fraunces', serif; font-size: 1.25rem; font-weight: 800; color: var(--mud-palette-text-primary); }
.ksr-need .u { font-size: .8rem; color: var(--mud-palette-text-secondary); }
.ksr-need .ksr-d { display: block; }

.ksr-more { padding: 2px 4px 10px; font-size: .88rem; color: var(--mud-palette-text-secondary); }
.ksr-more strong { font-weight: 700; color: var(--mud-palette-text-primary); }

.ksr-fold { display: flex; align-items: center; gap: 8px; margin-top: 16px; padding-top: 12px; font-size: .92rem;
    border-top: 1px solid var(--mud-palette-lines-default); color: var(--mud-palette-text-secondary); }
.ksr-fold strong { font-weight: 700; color: var(--mud-palette-text-primary); }
.ksr-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--mud-palette-success); }
.ksr-showall { margin-left: auto; border: none; background: none; cursor: pointer; font-size: .92rem; font-weight: 700;
    color: var(--mud-palette-primary); }
.ksr-stocked { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 4px 18px; padding: 8px 4px 0; }
.ksr-stk { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; font-size: .88rem;
    border-bottom: 1px solid var(--mud-palette-lines-default); }
.ksr-stk-nm { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--mud-palette-text-primary); }
.ksr-stk-d { flex: none; white-space: nowrap; color: var(--mud-palette-text-secondary); }
.ksr-foot { margin-top: 16px; font-size: .85rem; color: var(--mud-palette-text-secondary); }
.ksr-foot a { font-weight: 700; color: var(--mud-palette-primary); }

/* ---- Item 1101: KioskStardust - the login's gold stardust vortex, one canvas behind every kiosk screen ----
   kiosk.js reads these tokens off the layer: --ks-<family>-1..n shades (r, g, b), --ks-alpha strength, --ks-density share
   of the specks drawn, --ks-flare share of 4-point sparkles; --kc-glow (time of day) scales the brightness.
   1273: --ks-dim fades the whole layer, so every page's --ks-alpha lands at about a third (barely there on the dark field). */
.kiosk-stardust {   /* cream pages: deeper golds so a speck still glints on the light surface */
    --ks-gold-1: 190, 132, 52; --ks-gold-2: 176, 120, 44; --ks-gold-3: 204, 152, 74; --ks-gold-4: 158, 108, 38;
    --ks-teal-1: var(--kiosk-tile-teal-rgb); --ks-teal-2: 11, 100, 102; --ks-teal-3: 38, 158, 156;
    --ks-alpha: .5; --ks-density: .4; --ks-flare: .03;   /* working screens: a quiet glitter behind the rows */
    --ks-dim: .33; opacity: var(--ks-dim);
}
:root[data-theme="dark"] .kiosk-stardust,
.page.kiosk-mode:has(.kiosk-brand-stage) .kiosk-stardust {   /* dark surfaces: the login's own golds */
    --ks-gold-1: var(--kc-warm-rgb, 224, 184, 120); --ks-gold-2: var(--kiosk-gold-rgb); --ks-gold-3: 244, 217, 168;
    --ks-gold-4: 193, 147, 85; --ks-gold-5: 255, 242, 216;
    --ks-teal-1: var(--kiosk-tile-teal-rgb); --ks-teal-2: var(--kiosk-teal-glow-rgb); --ks-teal-3: 170, 228, 222;
}
.page.kiosk-mode:has(.kiosk-brand-stage) .kiosk-stardust { --ks-alpha: 1; --ks-density: 1; --ks-flare: .1; }   /* the full vortex */
.page.kiosk-mode:has(.ksd) .kiosk-stardust { --ks-alpha: .75; --ks-density: .6; --ks-flare: .08; }   /* schedule: shift blocks stay clear */
.page.kiosk-mode:has(.kf) .kiosk-stardust { display: none; }   /* 1273: the Floor stays still; kiosk.js idles with no layout */
/* roots paint over the z-0 layer without a stacking context, so their z-indexed overlays (number pad) still
   clear the rail; :where() lets a root's own position win */
:where(.page.kiosk-mode .kiosk-activity > *) { position: relative; }
.kiosk-fx { position: fixed; top: 0; right: 0; bottom: 0; left: var(--kiosk-rail-w, 0px); z-index: 0; overflow: hidden;
    pointer-events: none; contain: strict; transition: opacity .6s; }
.page.kiosk-mode:has(.kiosk-keypad) .kiosk-fx { opacity: calc(var(--ks-dim, 1) * .46); }   /* PIN keypad up: the stars step back */
.kiosk-stardust canvas { display: block; width: 100%; height: 100%; }
/* hidden tab (kiosk.js): the stardust loop stops on the same class */
.page.kiosk-mode:has(.kiosk-fx--paused) .kiosk-flourish { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {   /* item 1027 precedent; the stardust draws one still scatter (kiosk.js) */
    .kiosk-flourish { animation: none; }
    .kiosk-rail-item { transition: none; }
    .kiosk-rail-item:active { transform: none; }
}
/* 1273: KioskShellGuard's preview badge, fixed over the rail's empty foot: no layout, above the page, under the stop
   sheet (1150), the focus card (1200) and the dialogs (1300+) */
.ksg-badge { position: fixed; left: 8px; bottom: 12px; z-index: 1100; display: flex; flex-direction: column; gap: 4px;
    box-sizing: border-box; width: calc(var(--kiosk-rail-w, 96px) - 16px); padding: 6px 4px 4px; border-radius: 14px;
    background: var(--kiosk-brown-deep); box-shadow: inset 0 0 0 1px rgba(var(--kiosk-gold-rgb), .6), 0 8px 24px rgba(0, 0, 0, .45); }
.ksg-badge-lbl { font-size: 15px; font-weight: 800; letter-spacing: .02em; line-height: 1.2; text-align: center;
    color: rgb(var(--kiosk-gold-hi-rgb)); }
.ksg-badge-exit { min-height: 44px; padding: 4px 2px; border: 0; border-radius: 10px; cursor: pointer; font: inherit;
    font-size: 15px; font-weight: 700; line-height: 1.15; color: rgb(var(--kiosk-rail-ink-rgb)); background: rgba(var(--kiosk-gold-rgb), .16);
    text-decoration: underline; text-underline-offset: 3px; }
.ksg-badge-exit:focus-visible { outline: 2px solid rgba(var(--kiosk-gold-rgb), .9); outline-offset: 2px; }
@media print { .ksg-badge { display: none; } }

/* ---- ADR #202 item 1124: kiosk Today (floor tasks) ---- */
.kiosk-rail-item { position: relative; }
.kiosk-rail-badge { position: absolute; top: 2px; right: 4px; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 12px; box-sizing: border-box;
  background: var(--mud-palette-error); color: var(--mud-palette-error-text, #fff); font-size: 15px; font-weight: 700; line-height: 24px; text-align: center; }   /* 1273: kiosk text >= 15 px */
.kt-section { margin: 14px 0 6px; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .7; }
.kt-row { display: grid; grid-template-columns: 92px 1fr auto; gap: 10px 14px; align-items: center; padding: 12px 14px; margin-bottom: 8px;
  border-radius: 12px; border: 1px solid rgba(var(--mud-palette-lines-default-rgb, 0,0,0), .18); background: rgba(var(--mud-palette-surface-rgb, 255,255,255), .55); }
.kt-row--due { border-color: rgba(var(--mud-palette-warning-rgb), .7); background: rgba(var(--mud-palette-warning-rgb), .10); }
.kt-row--overdue { border-color: rgba(var(--mud-palette-error-rgb), .8); background: rgba(var(--mud-palette-error-rgb), .10); }
.kt-row--closed { opacity: .72; }
.kt-row--missed { border-style: dashed; border-color: rgba(var(--mud-palette-error-rgb), .6); }
.kt-when { display: flex; flex-direction: column; }
.kt-time { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.kt-date { font-size: 12px; opacity: .7; }
.kt-title { font-size: 17px; font-weight: 600; }
.kt-meta { font-size: 13px; opacity: .85; display: flex; flex-wrap: wrap; gap: 4px 8px; }
.kt-result.bad { color: var(--mud-palette-error); font-weight: 600; }
.kt-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; align-items: center; }
.kt-btn { min-height: 46px; min-width: 96px; padding: 0 16px; border-radius: 10px; font-size: 16px; font-weight: 600; border: 1px solid transparent; cursor: pointer; }
.kt-btn--main { background: var(--mud-palette-primary); color: var(--mud-palette-primary-text); }
.kt-btn--no { background: rgba(var(--mud-palette-error-rgb), .12); color: var(--mud-palette-error); border-color: rgba(var(--mud-palette-error-rgb), .5); }
.kt-btn--skip { background: transparent; color: var(--mud-palette-text-secondary); border-color: rgba(var(--mud-palette-lines-default-rgb, 0,0,0), .3); }
.kt-btn:disabled { opacity: .5; cursor: default; }
.kt-skip-why { font-size: 13px; opacity: .8; margin-right: 4px; }
.kt-empty { padding: 24px 0; }
.kt-help { line-height: 1.45; }
@media (max-width: 720px) { .kt-row { grid-template-columns: 1fr; } .kt-actions { justify-content: flex-start; } }

/* ---- ADR #200 item 1105: kiosk Pull Sheet + printable week ---- */
.kps-print { margin-left: 12px; font-size: 13px; color: var(--mud-palette-primary); text-decoration: underline; }
.kps-row .kt-time { font-size: 22px; }
.kps-table { border-collapse: collapse; width: 100%; font-size: 13px; background: #fff; color: #222; }
.kps-table th, .kps-table td { border: 1px solid #999; padding: 6px 8px; vertical-align: top; }
.kps-table th { background: #eee; font-weight: 700; }
.kps-cell { min-width: 84px; }
.kps-par { font-size: 16px; font-weight: 700; display: block; }
.kps-box { font-size: 10px; color: #555; white-space: nowrap; }
@media print {
  .kiosk-rail, .kiosk-fx, .kiosk-sub .kps-print { display: none !important; }
  .kps-print-page { padding: 0; }
  .kps-table { page-break-inside: auto; }
  .kps-table tr { page-break-inside: avoid; }
}

/* ---- item 926 / ADR #201: kiosk manager day card ---- */
.kd-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin-bottom: 12px; }
.kd-card { padding: 14px 16px; border-radius: 12px; border: 1px solid rgba(var(--mud-palette-lines-default-rgb, 0,0,0), .18); background: rgba(var(--mud-palette-surface-rgb, 255,255,255), .55); }
.kd-card--warn { border-color: rgba(var(--mud-palette-warning-rgb), .7); background: rgba(var(--mud-palette-warning-rgb), .10); }
.kd-card-title { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .7; margin-bottom: 6px; }
.kd-big { font-size: 28px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; margin-bottom: 6px; }
.kd-goal { font-size: 13px; font-weight: 500; opacity: .7; margin-left: 6px; }
.kd-meta { font-size: 14px; line-height: 1.45; }
.kd-bad { color: var(--mud-palette-error); }
.kd-recap { margin-bottom: 12px; }
.kd-actions { justify-content: flex-start; margin-top: 10px; }
.ksr-req { margin-right: 10px; }

/* ---- item 1126: Print today's logs (KioskPrintLogs on the Day card). Eye-level wall touchscreen: 56px target, 15px+ text. ---- */
.kpl { margin-top: 12px; }
.kpl-title { font-size: 17px; font-weight: 700; margin-bottom: 6px; }
.kpl-text { font-size: 15px; line-height: 1.45; margin-bottom: 10px; }
.kpl-text.kiosk-muted { font-size: 15px; }
.kpl-btn { min-height: 56px; min-width: 240px; padding: 0 24px; border-radius: 12px; border: 0; cursor: pointer;
    font-size: 18px; font-weight: 700; background: var(--mud-palette-primary); color: var(--mud-palette-primary-text); }
.kpl-btn:disabled { opacity: .55; cursor: default; }
/* item 1270: one-page sheet (primary, larger) + detailed log (secondary) */
.kpl-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.kpl-actions .kpl-btn:first-child { min-height: 64px; min-width: 280px; font-size: 20px; }
.kpl-btn--secondary { font-size: 16px; font-weight: 600; background: transparent; color: var(--mud-palette-primary);
    border: 2px solid var(--mud-palette-primary); }

/* Stock tabs (owner 2026-09-26): Runway / Pulls / Orders / Count / Waste under one rail entry. Touch-sized, theme colors. */
.kiosk-tabs { display: flex; flex-wrap: wrap; gap: 8px; padding: .5rem .25rem 0; }
.kiosk-tab { display: inline-flex; align-items: center; min-height: 52px; padding: 0 22px; border-radius: 14px; font-weight: 800; font-size: 1.05rem;
    text-decoration: none; color: var(--mud-palette-text-primary, #3b2f1e); background: var(--mud-palette-surface, #fffaf0);
    border: 2px solid var(--mud-palette-lines-default, #e3d8c5); }
.kiosk-tab.on { color: var(--mud-palette-primary-text, #fff); background: var(--mud-palette-primary, #5b4a33); border-color: var(--mud-palette-primary, #5b4a33); }
.kiosk-tab:not(.on):hover { border-color: var(--mud-palette-primary, #5b4a33); }

/* ---- KioskPinGate (.kg-*), moved from its inline <style>. Item 1249: PIN-on-action sheet + the sign-out countdown. ---- */
.kiosk-session, .kg-identify { display: contents; }   /* 1249: re-key / grouping wrappers only, no layout box */
.kg-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px;
    background: var(--kiosk-tile); border: 1px solid var(--kiosk-tile-edge); border-radius: 12px; padding: 8px 12px; }
.kg-actor { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--kiosk-tile-ink); margin-right: auto; }
.kg-avatar { width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    font-weight: 800; color: var(--kiosk-tile-ink); flex: 0 0 auto;
    background: linear-gradient(135deg, rgba(var(--kiosk-gold-hi-rgb), 1), rgba(var(--kiosk-gold-rgb), 1)); }
.kg-switch { border: none; background: none; color: var(--kiosk-tile-avatar); cursor: pointer; font-size: .85rem;
    text-decoration: underline; padding: 6px; }
.kg-prompt { font-weight: 700; color: var(--mud-palette-text-primary, #5b4a33); margin: 6px 0 10px; }
.kg-bar--ending { border-color: rgba(var(--mud-palette-warning-rgb), .6); box-shadow: 0 0 0 3px rgba(var(--mud-palette-warning-rgb), .18); }
.kg-countdown { position: relative; font-weight: 700; color: var(--kiosk-tile-ink); padding-bottom: 6px; min-width: 9em; }
.kg-countdown::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; border-radius: 2px;
    background: var(--mud-palette-warning, #b45309); transform-origin: left center; animation: kg-drain var(--kg-secs, 20s) linear forwards; }
@keyframes kg-drain { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.kg-keep { min-height: 48px; padding: 0 18px; border-radius: 12px; font-weight: 800; cursor: pointer; border: none;
    background: var(--mud-palette-primary, #4a2613); color: var(--mud-palette-primary-text, #fff); }
.kg-sheet { width: min(760px, calc(100vw - 32px)); }
/* owner 11/7: Manager view picks its idle-logout length on the keypad step */
.kg-logout { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; margin: 0 0 12px; }
.kg-logout-label { flex-basis: 100%; text-align: center; font-weight: 700; color: var(--mud-palette-text-primary, #5b4a33); }
.kg-logout-opt { all: unset; box-sizing: border-box; min-height: 48px; padding: 0 14px; border-radius: 999px; cursor: pointer; font-weight: 700;
    color: var(--mud-palette-primary, #5b4a33); background: var(--mud-palette-surface, #fff); box-shadow: inset 0 0 0 1px rgba(var(--mud-palette-primary-rgb, 91, 74, 51), .35); }
.kg-logout-opt.on { color: var(--mud-palette-primary-text, #fff); background: var(--mud-palette-primary, #4a2613); box-shadow: none; }
.kg-logout-opt:focus-visible { outline: 3px solid rgb(var(--kiosk-gold-rgb)); outline-offset: 2px; }
.kg-foot { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
.kg-howto { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }   /* 1569: an <a> needs a box for 56px */
/* Owner 10/14 — KioskPinSetter hand-over (KioskStaffPins): the manager passes the screen, the employee types the PIN twice. */
.kps-k { text-align: center; }
.kps-k-handover { display: inline-block; margin-bottom: 10px; padding: 6px 14px; border-radius: 999px; font-weight: 800;
    color: var(--mud-palette-text-primary); background: rgba(var(--mud-palette-primary-rgb), .10); }
.kps-k-title { font-family: 'Fraunces', serif; font-size: 26px; font-weight: 600; color: var(--mud-palette-text-primary); }
.kps-k-copy { margin: 4px 0 6px; color: var(--mud-palette-text-secondary); font-size: 16px; }
.kps-k-done { margin-top: 12px; }
.kps-k-sheet { width: min(520px, calc(100vw - 32px)); }
@media (prefers-reduced-motion: reduce) { .kg-countdown::after { animation: none; } }

/* Item 1250: offline banner (KioskResilience; kiosk.js toggles [hidden]). Below the dialog scrim (1400). */
.kiosk-offline { position: fixed; top: 10px; left: 50%; transform: translateX(-50%); z-index: 1390; display: flex;
    align-items: center; gap: 10px; max-width: calc(100vw - 32px); padding: 10px 18px; border-radius: 999px; font-weight: 800;
    color: var(--mud-palette-warning-darken, #7a5514); background: var(--mud-palette-surface, #fffdf8);
    border: 2px solid rgba(var(--mud-palette-warning-rgb), .6); box-shadow: 0 8px 24px rgba(0, 0, 0, .18); }
.kiosk-offline[hidden] { display: none; }
.kiosk-offline-dot { width: 12px; height: 12px; border-radius: 50%; flex: 0 0 auto; background: var(--mud-palette-warning, #b45309); }

/* ---- item 1252: thaw / hold lots (day dot). Day-dot colours are the physical sticker colours, same in both themes. ---- */
.kfl-top { margin: 4px 0 10px; }
.kfl-dot { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 46px; height: 46px; border-radius: 50%;
    font-size: .8rem; font-weight: 800; color: #fff; }
.kfl-dot--sm { width: 30px; height: 30px; font-size: .6rem; margin-right: 6px; vertical-align: middle; }
.kfl-dot--mon { background: #1d4ed8; }
.kfl-dot--tue { background: #facc15; color: #1f2937; }
.kfl-dot--wed { background: #dc2626; }
.kfl-dot--thu { background: #7c4a1e; }
.kfl-dot--fri { background: #16a34a; }
.kfl-dot--sat { background: #f97316; }
.kfl-dot--sun { background: #111827; box-shadow: inset 0 0 0 2px #9ca3af; }
/* item 1511: a life over 6 days gets the written date instead of a weekday dot */
.kfl-date { display: inline-flex; align-items: center; height: 30px; padding: 0 10px; margin-right: 6px; border-radius: 999px; vertical-align: middle;
    font-size: 15px; font-weight: 800; color: var(--mud-palette-text-primary); box-shadow: inset 0 0 0 2px var(--mud-palette-primary); }

/* ---- item 1253: delivery temperatures on the kiosk receive ---- */
.krc-temps { margin: 6px 0 14px; }
.krc-temp { padding: 10px 14px; margin-bottom: 8px; border-radius: 12px; border: 1px solid var(--mud-palette-lines-default);
    border-left: 6px solid var(--mud-palette-lines-default); }
.krc-temp.ok { border-left-color: var(--mud-palette-success); }
.krc-temp.bad { border-left-color: var(--mud-palette-error); }
.krc-temp.na { opacity: .8; }
.krc-temp-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.krc-temp-zone { font-size: 1.05rem; font-weight: 800; }
.krc-temp-limit { font-size: .9rem; color: var(--mud-palette-text-secondary); }
.krc-temp-body { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 6px; }
.krc-temp-val { font-size: 1.4rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.krc-temp-ack { margin-top: 6px; font-weight: 800; }

/* ---- item 1255: waste mode switch (stock item / remade drink) ---- */
.kws-mode { margin-bottom: 4px; }

/* ===== ADR #211 Kiosk Floor: orbs ===== */
/* Item 1260: KioskOrb + js/kiosk/orbs.js. The disc is dark glass in both themes so the model reads on it (like the cream
   clock dial, a fixed physical look: Kiosk carve-out). State is a rim glow plus a shape cue (pulse, dashes), never colour
   alone; the words arrive with the Floor items. */
:root {
    --kiosk-orb-ember-rgb: 208, 96, 104;      /* late / missed / flagged: coffee-cherry, not sports orange next to teal (owner 10/8); the GL rim light matches */
    --kiosk-ok-rgb: 46, 164, 92;              /* 1273: the done check */
}
.kiosk-orb { position: relative; display: inline-grid; place-items: center; flex: none; vertical-align: middle;
    width: var(--orb, 96px); height: var(--orb, 96px); border-radius: 50%; isolation: isolate;
    background: radial-gradient(circle at 50% 36%, var(--kiosk-brown-mid) 0%, var(--kiosk-brown-deep) 70%);
    box-shadow: inset 0 0 0 1.5px rgba(var(--kiosk-gold-rgb), .28), inset 0 0 0 calc(var(--orb, 96px) * .06) rgba(0, 0, 0, .2),
        0 4px 14px rgba(0, 0, 0, .22); }
.kiosk-orb-face { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 50%; overflow: hidden; }
.kiosk-orb-canvas { position: absolute; inset: 6%; width: 88%; height: 88%; border-radius: 50%; pointer-events: none; }
.kiosk-orb .kiosk-orb-glyph { width: 42%; height: 42%; color: rgba(var(--kiosk-gold-hi-rgb), .85); transition: opacity .25s ease; }
.kiosk-orb-face.orb-ready .kiosk-orb-glyph { opacity: 0; }
.kiosk-orb::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; pointer-events: none; opacity: var(--orb-glow-a, 0);
    box-shadow: 0 0 0 2px rgba(var(--orb-glow, 0, 0, 0), .85), 0 0 calc(var(--orb, 96px) * .16) rgba(var(--orb-glow, 0, 0, 0), .45); }
.kiosk-orb--due { --orb-glow: var(--kiosk-teal-glow-rgb); --orb-glow-a: .9; }
.kiosk-orb--late { --orb-glow: var(--kiosk-orb-ember-rgb); --orb-glow-a: 1; }
.kiosk-orb--late::after { animation: kiosk-orb-pulse 2.4s ease-in-out infinite; }
.kiosk-orb--missed { --orb-glow: var(--kiosk-orb-ember-rgb); --orb-glow-a: .8; }
.kiosk-orb--missed::after { box-shadow: none; border: 2px dashed rgba(var(--orb-glow), .9); }
.kiosk-orb--later { --orb-glow: var(--kiosk-rail-ink-rgb); --orb-glow-a: .3; }
.kiosk-orb--later .kiosk-orb-face { opacity: .72; }
.kiosk-orb--done { --orb-glow: var(--kiosk-gold-rgb); --orb-glow-a: .65; }
/* 1273: done = the model dimmed near-grey (orbs.js DONE_FILTER) plus a check; no wireframe */
.kiosk-orb--done .kiosk-orb-glyph { filter: grayscale(.85) brightness(.75); }
.kiosk-orb-check { position: absolute; right: 0; bottom: 0; z-index: 1; display: grid; place-items: center; border-radius: 50%;
    width: max(18px, calc(var(--orb, 96px) * .3)); height: max(18px, calc(var(--orb, 96px) * .3));
    color: var(--kiosk-tile); background: rgb(var(--kiosk-ok-rgb));
    box-shadow: 0 0 0 2px var(--kiosk-brown-deep), 0 2px 6px rgba(0, 0, 0, .35); pointer-events: none; }
.kiosk-orb-check .zg-icon { width: 72%; height: 72%; }
@keyframes kiosk-orb-pulse { 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) {
    .kiosk-orb--late::after { animation: none; }
    .kiosk-orb .kiosk-orb-glyph { transition: none; }
}

/* ---- item 1260: /kiosk/orb-lab dev harness ---- */
.kol-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin: 6px 0 18px; }
.kol-control { display: flex; align-items: center; gap: 10px; }
.kol-label { font-size: .85rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--mud-palette-text-secondary); }
.kol-stats { margin: 0 0 14px; font: 600 .9rem/1.4 ui-monospace, Consolas, monospace; color: var(--mud-palette-text-secondary); }
.kol-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--kol-cell, 136px), 1fr)); gap: 20px 12px; }
.kol-cell { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; min-width: 0; }
.kol-name { font-size: .95rem; font-weight: 700; color: var(--mud-palette-text-primary); }
.kol-type { font-size: .78rem; color: var(--mud-palette-text-secondary); overflow-wrap: anywhere; }

/* ===== ADR #211 Kiosk Floor: focus card ===== */
/* Item 1262: KioskCheckFlow as a right-side card over the Floor. Dark espresso glass in both themes, like the rail and the
   orbs (a fixed physical look: Kiosk carve-out); every colour is a kiosk token. Scrim 1200 / card 1201 sit under the PIN
   sheet (1300), so a PIN asked at save shows on top. Status is always a word; text >= 15 px for a wall touchscreen. */
:root { --kfc-w: clamp(440px, 36vw, 560px); }
.kfc, .krd, .kf-notes {
    --kfc-ink: rgb(var(--kiosk-rail-ink-rgb));
    --kfc-dim: rgba(var(--kiosk-rail-ink-rgb), .76);
    --kfc-faint: rgba(var(--kiosk-rail-ink-rgb), .56);
    --kfc-line: rgba(var(--kiosk-gold-hi-rgb), .16);
    --kfc-line-2: rgba(var(--kiosk-gold-hi-rgb), .34);
    --kfc-glass: rgba(var(--kiosk-rail-ink-rgb), .06);
    --kfc-gold: rgb(var(--kiosk-gold-rgb));
    --kfc-gold-hi: rgb(var(--kiosk-gold-hi-rgb));
    --kfc-teal: rgb(var(--kiosk-teal-glow-rgb));
    --kfc-ember: rgb(var(--kiosk-orb-ember-rgb));
    --kfc-on-gold: var(--kiosk-brown-deep);
}
.kfc-scrim { position: fixed; inset: 0; z-index: 1200; background: rgba(0, 0, 0, .36); animation: kfc-fade .2s ease; }
.kfc { position: fixed; z-index: 1201; top: 0; right: 0; bottom: 0; width: min(var(--kfc-w), 100vw); box-sizing: border-box;
    display: flex; flex-direction: column; gap: 12px; padding: 18px 26px 18px; overflow-y: auto; overscroll-behavior: contain;
    color: var(--kfc-ink); font-size: 16px; line-height: 1.4;
    background: radial-gradient(120% 34% at 50% 0%, rgba(var(--kiosk-teal-glow-rgb), .10), transparent 70%),
        linear-gradient(180deg, var(--kiosk-brown-mid), var(--kiosk-brown-deep));
    border-left: 1px solid var(--kfc-line-2); box-shadow: -30px 0 60px rgba(0, 0, 0, .45);
    animation: kfc-in .34s cubic-bezier(.2, .8, .2, 1); }
.kfc:focus { outline: none; }
@keyframes kfc-in { from { transform: translateX(104%); } }
@keyframes kfc-fade { from { opacity: 0; } }
/* the shell's 48 px floor (.page.kiosk-mode button) outranks plain card rules: card control heights live here */
.page.kiosk-mode .kfc .kiosk-btn { min-height: 60px; }
.page.kiosk-mode .kfc .kfc-big, .page.kiosk-mode .kfc .app-hold { min-height: 88px; }
.page.kiosk-mode .kfc .kfc-x, .page.kiosk-mode .kfc .kfc-chip, .page.kiosk-mode .kfc .kiosk-np-sign { min-height: 52px; }
.page.kiosk-mode .kfc .kiosk-np-key { min-height: 64px; }   /* 1534 QA: 64 above 1000 px tall (1366 x 1024 was 60) */
.page.kiosk-mode .kfc .kca-option { min-height: 56px; }
.page.kiosk-mode .kfc .ktr-unit { min-height: 68px; }
.kfc button:focus-visible { outline: 3px solid var(--kfc-teal); outline-offset: 3px; }
.kfc-x { position: absolute; top: 14px; right: 16px; z-index: 1; width: 52px; height: 52px; padding: 0; border: 0; border-radius: 50%;
    display: grid; place-items: center; cursor: pointer; color: var(--kfc-dim); background: transparent; box-shadow: inset 0 0 0 1px var(--kfc-line-2); }
.kfc-x .zg-icon { width: 24px; height: 24px; }
.kfc-x:disabled { opacity: .4; cursor: default; }

/* head: the orb in its status ring, the thermometer beside it, then the words */
.kfc-head { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.kfc-orbs { display: flex; align-items: center; justify-content: center; gap: 26px; padding: 20px 0 18px; }   /* 1394: clears the status ring's 18px overhang (.kfc-ring-svg inset) */
.kfc-ring { position: relative; display: inline-grid; place-items: center; }
.kfc-ring-svg { position: absolute; inset: -18px; width: calc(100% + 36px); height: calc(100% + 36px); overflow: visible; pointer-events: none; }
.kfc-ring-svg circle { fill: none; }
.kfc-ring-bg { stroke: rgba(var(--kiosk-gold-hi-rgb), .16); stroke-width: 1.2; }
.kfc-ring-arc { stroke: var(--kfc-teal); stroke-width: 2; stroke-linecap: round; filter: drop-shadow(0 0 3px rgba(var(--kiosk-teal-glow-rgb), .6)); }
.kfc-ring--due .kfc-ring-arc { animation: kfc-drain var(--kfc-drain, 0s) linear forwards; }   /* the rest of the grace window */
@keyframes kfc-drain { to { stroke-dashoffset: 100; } }
.kfc-ring--late .kfc-ring-arc, .kfc-ring--flagged .kfc-ring-arc { stroke: var(--kfc-ember); filter: drop-shadow(0 0 4px rgba(var(--kiosk-orb-ember-rgb), .7)); }
.kfc-ring-burn { stroke: var(--kfc-ember); stroke-width: .8; stroke-dasharray: 1 3; opacity: .85; transform-box: fill-box; transform-origin: center;
    animation: kfc-spin 9s linear infinite; }
@keyframes kfc-spin { to { transform: rotate(360deg); } }
.kfc-ring--later .kfc-ring-bg { stroke-dasharray: 2 3; }
.kfc-ring--done .kfc-ring-arc, .kfc-ring--skipped .kfc-ring-arc { stroke: var(--kfc-gold); stroke-width: 1.4; filter: none; }
.kfc-ring--skipped .kfc-ring-arc { stroke-dasharray: 3 3; }
.kfc-ring--missed .kfc-ring-arc { stroke: var(--kfc-ember); stroke-width: 1.4; stroke-dasharray: 2 3; filter: none; }
.kfc-thermo { margin: 0; display: flex; align-items: center; gap: 10px; max-width: 240px; text-align: left; }   /* 1273: an 84 px orb, caption beside it */
.kfc-thermo figcaption { display: flex; flex-direction: column; gap: 2px; font-size: 15px; line-height: 1.25; color: var(--kfc-dim); }
.kfc-thermo figcaption b { color: var(--kfc-teal); font-weight: 800; }
.kfc-words { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
.kfc-tags { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 2px 14px; }
.kfc-cat { font-size: 15px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--kfc-dim); }
.kfc-status { color: var(--kfc-teal); }
.kfc--late .kfc-status, .kfc--missed .kfc-status { color: var(--kfc-ember); }
.kfc--done .kfc-status, .kfc--later .kfc-status { color: var(--kfc-gold-hi); }
.kfc-title { margin: 0; font-family: 'Fraunces', serif; font-size: 1.65rem; font-weight: 600; line-height: 1.2; color: var(--kfc-ink); text-wrap: balance; }
/* 1271: the HACCP miss time; the task's source in small print, a tap opens the full citation in flow (the catcher folds it) */
.kfc-missat { font-size: 15px; font-weight: 700; color: var(--kfc-ember); }
.kfc-src { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; font-size: 15px; line-height: 1.3; color: var(--kfc-dim); }
.kfc-src-wrap { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: inherit; gap: 6px; max-width: 100%; }
.kfc-src--tap { position: relative; min-height: 44px; margin: -6px 0; padding: 0 10px; border: 0; border-radius: 999px; cursor: pointer; background: none;
    font-family: inherit; text-align: left; text-decoration: underline dotted; text-underline-offset: 4px; }
.kfc-src--tap[aria-expanded="true"] { color: var(--kfc-ink); }
.kfc-src-i { width: 18px; height: 18px; flex: none; color: var(--kfc-teal); }
.kfc-src-catch { position: fixed; inset: 0; }
.kfc-src-note { position: relative; max-width: 100%; box-sizing: border-box; padding: 12px 14px; border-radius: 14px; text-align: left;
    font-size: 15px; line-height: 1.45; white-space: pre-line; overflow-wrap: anywhere; color: var(--kfc-ink);
    background: var(--kiosk-brown-deep); box-shadow: inset 0 0 0 1px var(--kfc-line-2), 0 12px 28px rgba(0, 0, 0, .35); }
.kfc-as { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 10px; font-size: 15px; color: var(--kfc-dim); }
.kfc-as b { color: var(--kfc-ink); }
.kfc-pin { font-size: 15px; font-weight: 800; letter-spacing: .08em; color: var(--kfc-teal); padding: 2px 10px; border-radius: 999px;
    box-shadow: inset 0 0 0 1px rgba(var(--kiosk-teal-glow-rgb), .45); }
.kfc-link { min-height: 44px; padding: 0 10px; border: 0; background: none; cursor: pointer; font-size: 15px; font-weight: 700;
    color: var(--kfc-dim); text-decoration: underline; text-underline-offset: 3px; }
.kfc-skip { align-self: center; min-height: 48px; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; color: var(--kfc-faint); }
.kfc-chip { min-height: 52px; padding: 0 18px; border: 0; border-radius: 999px; cursor: pointer; font-size: 16px; font-weight: 600;
    color: var(--kfc-ink); background: var(--kfc-glass); box-shadow: inset 0 0 0 1.5px var(--kfc-line-2); }
.kfc-chip--keep { min-height: 44px; color: var(--kfc-on-gold); background: var(--kfc-gold-hi); box-shadow: none; font-weight: 800; }
.kfc-chip:disabled, .kfc-link:disabled { opacity: .5; cursor: default; }
.kfc-error { padding: 12px 14px; border-radius: 14px; font-weight: 700; color: var(--kfc-ink);
    background: rgba(var(--kiosk-orb-ember-rgb), .18); box-shadow: inset 0 0 0 1px rgba(var(--kiosk-orb-ember-rgb), .55); }
/* 1273: reading and round heads stay small (112 px orb, KioskCheckFlow.OrbSize) so the dial, keypad and Log / Next fit at 1080 */
.kfc:is(.kfc-mode--reading, .kfc-mode--round) { gap: 8px; padding-top: 12px; }
:is(.kfc-mode--reading, .kfc-mode--round) .kfc-head { gap: 4px; }
:is(.kfc-mode--reading, .kfc-mode--round) .kfc-orbs { gap: 30px; padding: 18px 0 18px; }
:is(.kfc-mode--reading, .kfc-mode--round) .kfc-words { gap: 2px; }
:is(.kfc-mode--reading, .kfc-mode--round) .kfc-title { font-size: 1.4rem; }

/* the one action */
.kfc-act { display: flex; flex-direction: column; gap: 12px; margin-top: auto; }
.kfc .kiosk-btn { min-height: 60px; border-radius: 16px; font-size: 17px; }
.kfc .kiosk-btn--primary { color: var(--kfc-on-gold); border-color: transparent;
    background: linear-gradient(180deg, var(--kfc-gold-hi), var(--kfc-gold)); box-shadow: 0 10px 24px rgba(var(--kiosk-gold-rgb), .22); }
.kfc .kiosk-btn--warn { background: linear-gradient(180deg, rgba(var(--kiosk-orb-ember-rgb), .8), var(--kfc-ember));
    box-shadow: 0 10px 24px rgba(var(--kiosk-orb-ember-rgb), .25); }
.kfc .kiosk-btn--ghost { color: var(--kfc-ink); background: transparent; border-color: var(--kfc-line-2); }
.kfc-yn { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.kfc .kfc-big { min-height: 88px; font-size: 24px; }
.kfc-note { margin: 0; text-align: center; font-size: 15px; color: var(--kfc-dim); }
.kfc-why { display: flex; flex-direction: column; gap: 12px; }
.kfc-why-ask { text-align: center; font-size: 17px; font-weight: 700; }
.kfc-why-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }

/* AppHoldButton (Components/Shared): the fill runs for --hold-ms; the server times the confirm */
.app-hold { position: relative; overflow: hidden; display: block; width: 100%; min-height: 64px; padding: 0 20px; border: 0; border-radius: 16px;
    cursor: pointer; font-size: 18px; font-weight: 700; color: var(--mud-palette-primary-text); background: var(--mud-palette-primary);
    touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.app-hold:disabled { opacity: .5; cursor: default; }
.app-hold-fill { position: absolute; inset: 0; background: currentColor; opacity: .2; transform: scaleX(0); transform-origin: left center;
    transition: transform .12s ease-out; }
.app-hold.is-holding .app-hold-fill { transform: scaleX(1); transition: transform var(--hold-ms, 800ms) linear; }
.app-hold-text { position: relative; }
.page.kiosk-mode .kfc .app-hold { font-size: 22px; color: var(--kfc-on-gold);
    background: linear-gradient(180deg, var(--kfc-gold-hi), var(--kfc-gold)); box-shadow: 0 10px 24px rgba(var(--kiosk-gold-rgb), .22); }

/* KioskNumberPad inside the card: no sheet of its own, dark keys; the range dial reads the value out */
.kfc .kiosk-sheet-backdrop { display: none; }
.kfc .kiosk-sheet { position: static; z-index: auto; transform: none; width: auto; max-height: none; overflow: visible; padding: 0;
    border-radius: 0; background: none; box-shadow: none; }
.kfc .kiosk-np-title { font-size: 1.25rem; text-align: center; color: var(--kfc-ink); }
.kfc-mode--reading .kiosk-np-title, .kfc-mode--reading:has(.kfc-thermo) .kiosk-np-hint,
.kfc-mode--round .kiosk-np-hint { display: none; }   /* the head and the round's "Unit n of N" already say these */
.kfc .kiosk-np-hint { text-align: center; font-size: 15px; color: var(--kfc-dim); }
.kfc .kiosk-np-display { margin: 8px 0 4px; background: var(--kfc-glass); box-shadow: inset 0 0 0 1px var(--kfc-line); }
.kfc .kiosk-np-val { color: var(--kfc-ink); }
.kfc .kiosk-np-val.is-empty { color: var(--kfc-dim); }
.kfc .kiosk-np-unit, .kfc .kiosk-np-cur { color: var(--kfc-dim); }
.kfc .kiosk-np:has(.krd) .kiosk-np-val, .kfc .kiosk-np:has(.krd) .kiosk-np-unit { display: none; }
.kfc .kiosk-np:has(.krd) .kiosk-np-display { justify-content: center; margin: 0; padding: 0; background: none; box-shadow: none; }
.kfc .kiosk-np:has(.krd) .kiosk-np-display:not(:has(.kiosk-np-sign)) { display: none; }
.kfc .kiosk-np-key { min-height: 64px; color: var(--kfc-ink); background: var(--kfc-glass); border: 1.5px solid var(--kfc-line-2); }
.kfc .kiosk-np-key--sub { background: rgba(var(--kiosk-rail-ink-rgb), .12); }
.kfc .kiosk-np-key:active { background: rgba(var(--kiosk-teal-glow-rgb), .22); }
.kfc .kiosk-np-sign { min-width: 132px; margin-right: 0; min-height: 52px; }
.kfc .kiosk-np-sign.on { color: var(--kfc-on-gold); background: var(--kfc-teal); border-color: var(--kfc-teal); }
.kfc .kiosk-np-pad { gap: 8px; margin: 8px 0 12px; }
.kfc .kiosk-np-actions { grid-template-columns: auto auto 1fr; }
.kfc .kiosk-np-err, .kfc .kiosk-np-range.bad { color: var(--kfc-ember); }
.kfc .kiosk-np-range { text-align: center; color: var(--kfc-dim); }

/* KioskRangeDial: safe band, needle, readout, words */
.krd { display: flex; flex-direction: column; align-items: center; gap: 2px; margin: 6px 0 4px; }
.krd-gauge { width: min(300px, 100%); height: auto; overflow: visible; }
.krd-track { fill: none; stroke: rgba(var(--kiosk-gold-hi-rgb), .14); stroke-width: 12; stroke-linecap: round; }
.krd-band { fill: none; stroke: var(--kfc-teal); stroke-width: 12; filter: drop-shadow(0 0 6px rgba(var(--kiosk-teal-glow-rgb), .5)); }
.krd-ticks line { stroke: rgba(var(--kiosk-gold-hi-rgb), .4); stroke-width: 1.5; }
.krd-lbl { font: 700 15px/1 Inter, system-ui, sans-serif; fill: var(--kfc-teal); text-anchor: middle; dominant-baseline: middle; }
.krd-needle { stroke: var(--kfc-ink); stroke-width: 4; stroke-linecap: round; transform-box: view-box; transform-origin: 130px 132px;
    transition: transform .25s cubic-bezier(.3, .7, .3, 1); }
.krd--out .krd-needle { stroke: var(--kfc-ember); }
.krd-hub { fill: var(--kfc-ink); }
.krd-read { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.krd-val { display: flex; align-items: baseline; font-size: 46px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; color: var(--kfc-ink); }
.krd-val em { margin-left: 6px; font-style: normal; font-size: 19px; font-weight: 600; color: var(--kfc-dim); }
.krd-word { font-size: 15px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--kfc-teal); }
.krd--out .krd-word { color: var(--kfc-ember); }
.krd--idle .krd-word { color: var(--kfc-dim); }
/* 1273: a slider; js/kiosk/dial.js shows .krd-hand / .krd-live while a finger is down (is-sliding), .NET's needle otherwise */
.krd--slide .krd-gauge { touch-action: none; cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent; }
.krd-gauge:focus { outline: none; }
.krd-gauge:focus-visible { outline: 3px solid var(--kfc-teal); outline-offset: 6px; border-radius: 12px; }
.krd-hand { visibility: hidden; stroke: var(--kfc-ink); stroke-width: 4; stroke-linecap: round; transform-box: view-box;
    transform-origin: 130px 132px; transition: transform .06s linear; }
.krd-gauge.is-sliding .krd-hand { visibility: visible; }
.krd-gauge.is-sliding .krd-needle { visibility: hidden; }
.krd-gauge.is-out .krd-hand { stroke: var(--kfc-ember); }
.krd-live { display: none; }
.krd-read.is-sliding .krd-num { display: none; }
.krd-read.is-sliding .krd-live { display: inline; }

/* KioskTempRound: dots per unit, then the summary list */
.ktr-progress { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 2px 0; }
.ktr-step { font-size: 15px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--kfc-dim); }
.ktr-dots { display: flex; gap: 10px; }
.ktr-dot { width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--kfc-line-2); }
.ktr-dot.ok { background: var(--kfc-gold); box-shadow: none; }
.ktr-dot.bad { background: var(--kfc-ember); box-shadow: none; border-radius: 3px; }   /* flagged: a square, not just a colour */
.ktr-dot.now { box-shadow: 0 0 0 3px rgba(var(--kiosk-teal-glow-rgb), .55), inset 0 0 0 2px var(--kfc-teal); }
.ktr { display: flex; flex-direction: column; gap: 12px; }
.ktr-head { text-align: center; font-size: 15px; color: var(--kfc-dim); }
.ktr-list { display: flex; flex-direction: column; gap: 8px; }
.ktr-unit { display: grid; grid-template-columns: 48px 52px minmax(0, 1fr) auto; column-gap: 12px; row-gap: 2px; align-items: center;
    min-height: 68px; padding: 8px 14px; border: 0; border-radius: 14px; cursor: pointer; text-align: left; font-size: 16px;
    color: var(--kfc-ink); background: var(--kfc-glass); box-shadow: inset 0 0 0 1.5px var(--kfc-line-2); }
.ktr-orb { grid-column: 1; grid-row: 1 / 3; }
.ktr-code { grid-column: 2; grid-row: 1 / 3; font-weight: 800; }
.ktr-name { grid-column: 3; grid-row: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ktr-val { grid-column: 4; grid-row: 1 / 3; font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; }
.ktr-flag, .ktr-ok { grid-column: 3; grid-row: 2; font-size: 15px; font-weight: 700; }
.ktr-ok { color: var(--kfc-teal); }
.ktr-flag { color: var(--kfc-ember); }
.ktr-unit.bad { background: rgba(var(--kiosk-orb-ember-rgb), .10); box-shadow: inset 0 0 0 2px var(--kfc-ember); }
.ktr-actions, .kca-actions, .kso-actions, .kdc-actions { display: grid; grid-template-columns: auto 1fr; gap: 10px; }
/* the save row never scrolls out of reach: it pins to the card's bottom edge when a long form overflows */
/* 1534: solid, and no negative margin: at 1280 x 800 the old fade let the discard total and the sign-off tiles show through it */
.kfc :is(.kiosk-np-actions, .kca-actions, .ktr-actions, .kso-actions, .kdc-actions) { position: sticky; bottom: 0; z-index: 1; margin-top: 0; padding: 10px 0 0;
    background: var(--kiosk-brown-deep); box-shadow: 0 -12px 12px -4px var(--kiosk-brown-deep), 0 18px 0 var(--kiosk-brown-deep); }   /* sticky stops at the padding: paint it */

/* KioskCorrectiveAction: "Caught it", never a penalty */
.kca { display: flex; flex-direction: column; gap: 12px; }
.kca-caught { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 16px; border-radius: 16px; text-align: center;
    background: rgba(var(--kiosk-orb-ember-rgb), .12); box-shadow: inset 0 0 0 1px rgba(var(--kiosk-orb-ember-rgb), .45); }
.kca-badge { padding: 3px 12px; border-radius: 999px; font-size: 15px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
    color: var(--kfc-on-gold); background: var(--kfc-ember); }
.kca .kca-title { font-size: 1.3rem; text-align: center; color: var(--kfc-ink); }
.kca-detail { font-weight: 700; color: var(--kfc-ink); }
.kca-thanks, .kca-recheck { font-size: 15px; color: var(--kfc-dim); }
.kca-ask { font-size: 17px; font-weight: 700; }
.kca-options { display: flex; flex-direction: column; gap: 8px; }
.kca-option { min-height: 56px; padding: 8px 16px; border: 0; border-radius: 14px; cursor: pointer; text-align: left; font-size: 16px; font-weight: 600;
    color: var(--kfc-ink); background: var(--kfc-glass); box-shadow: inset 0 0 0 1.5px var(--kfc-line-2); }
.kca-option.on { background: rgba(var(--kiosk-teal-glow-rgb), .14); box-shadow: inset 0 0 0 2.5px var(--kfc-teal); }
.kca-option.on::before { content: "\2713  "; color: var(--kfc-teal); font-weight: 800; }   /* picked = a tick, not just a colour */
.kfc .app-field-label, .kfc .app-field-label * { font-size: 15px; color: var(--kfc-dim); }
.kfc textarea.ant-input { font-size: 16px; color: var(--kfc-ink); background: var(--kfc-glass); border-color: var(--kfc-line-2); }
.kfc textarea.ant-input::placeholder { color: var(--kfc-faint); }

/* KioskSignOff */
.kso { display: flex; flex-direction: column; gap: 12px; }
.kso .kso-title { font-size: 1.25rem; text-align: center; color: var(--kfc-ink); }
.kso-hint { text-align: center; font-size: 15px; color: var(--kfc-dim); }
.kso-counts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.kso-count { padding: 12px 14px; border-radius: 14px; font-size: 16px; background: var(--kfc-glass); box-shadow: inset 0 0 0 1px var(--kfc-line); }
.kso-count b { margin-right: 4px; font-size: 22px; }
.kso-count.bad { background: rgba(var(--kiosk-orb-ember-rgb), .14); box-shadow: inset 0 0 0 1.5px rgba(var(--kiosk-orb-ember-rgb), .6); }
.kso-problems { margin: 0; padding-left: 22px; font-size: 15px; line-height: 1.5; }
.kso-need { font-size: 15px; font-weight: 700; color: var(--kfc-gold-hi); }

/* K11 KioskDiscardCount: the closing discard, one count per hold (expired first) */
.kdc { display: flex; flex-direction: column; gap: 12px; }
.kdc .kdc-title { font-size: 1.25rem; text-align: center; color: var(--kfc-ink); }
.kdc-hint, .kdc-empty { text-align: center; font-size: 15px; color: var(--kfc-dim); }
.kdc-lines { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.kdc-line { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; row-gap: 2px; align-items: center;
    padding: 10px 12px 10px 16px; border-radius: 14px; background: var(--kfc-glass); box-shadow: inset 0 0 0 1.5px var(--kfc-line-2); }
.kdc-line.is-late { background: rgba(var(--kiosk-orb-ember-rgb), .10); box-shadow: inset 0 0 0 2px var(--kfc-ember); }
/* 1534: two lines, so "Buddy's Cheesy Chicken Melt" and its neighbours read apart at 1280 x 800 */
.kdc-name { grid-column: 1; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere;
    font-size: 17px; font-weight: 700; line-height: 1.25; }
.kdc-meta { grid-column: 1; font-size: 15px; color: var(--kfc-dim); }
.kdc-line.is-late .kdc-meta { color: var(--kfc-ember); font-weight: 700; }
.kdc-step { grid-column: 2; grid-row: 1 / 3; display: flex; align-items: center; gap: 6px; }
.kdc-key, .kdc-qty { min-width: 56px; min-height: 56px; border: 0; border-radius: 12px; cursor: pointer; font-size: 22px; font-weight: 800;
    color: var(--kfc-ink); background: rgba(var(--kiosk-rail-ink-rgb), .10); box-shadow: inset 0 0 0 1.5px var(--kfc-line-2); }
.kdc-qty { min-width: 72px; font-variant-numeric: tabular-nums; background: transparent; }
.kdc-qty small { font-size: 15px; font-weight: 600; color: var(--kfc-dim); }
.kdc-key:disabled { opacity: .4; cursor: default; }
.kdc-add { align-self: center; }
.kdc-choice .kfc-big { padding: 8px 14px; font-size: 20px; line-height: 1.2; }
.kdc-total { text-align: center; font-size: 16px; font-weight: 700; color: var(--kfc-gold-hi); }
.kdc-picks { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.kdc-pick { min-height: 56px; padding: 8px 16px; border: 0; border-radius: 14px; cursor: pointer; font-size: 16px; font-weight: 600;
    color: var(--kfc-ink); background: var(--kfc-glass); box-shadow: inset 0 0 0 1.5px var(--kfc-line-2); }
.page.kiosk-mode .kfc .kdc-key, .page.kiosk-mode .kfc .kdc-qty { min-height: 56px; }
.page.kiosk-mode .kfc .kdc-pick { min-height: 56px; }
/* 1539: expired prep lots, each tossed whole (the Prep tab's waste) */
.kdc-sub { margin-top: 6px; font-size: 15px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--kfc-dim); }
.kdc-have { min-width: 72px; text-align: right; font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; }
.kdc-have small { font-size: 15px; font-weight: 600; color: var(--kfc-dim); }
.kdc-toss { min-width: 88px; min-height: 56px; padding: 0 18px; border: 0; border-radius: 12px; cursor: pointer; font-size: 17px; font-weight: 800;
    color: var(--kfc-on-gold); background: var(--kfc-ember); }
.kdc-toss:disabled { opacity: .5; cursor: default; }
.kdc-line.is-tossed .kdc-meta { color: var(--kfc-teal); font-weight: 700; }
.page.kiosk-mode .kfc .kdc-toss { min-height: 56px; }

/* closed rows: read-only summary */
.kfc-sum { display: flex; flex-direction: column; gap: 8px; padding: 18px; border-radius: 16px; text-align: center; font-size: 16px;
    color: var(--kfc-dim); box-shadow: inset 0 0 0 1px var(--kfc-line-2); }
.kfc-sum-line { color: var(--kfc-ink); }
.kfc-sum-val { font-size: 22px; font-weight: 800; color: var(--kfc-gold-hi); }
.kfc-sum-val.bad { color: var(--kfc-ember); }
.kfc-sum-units { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; text-align: left; }
.kfc-sum-units li { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 2px 10px; padding: 8px 12px; border-radius: 12px;
    color: var(--kfc-ink); background: var(--kfc-glass); }
.kfc-sum-units li > span:last-child { grid-column: 2 / -1; font-size: 15px; color: var(--kfc-teal); }
.kfc-sum-units li.bad > span:last-child { color: var(--kfc-ember); }
.kfc-sum-unit-val { font-weight: 800; font-variant-numeric: tabular-nums; }

/* toasts and the crew nudge step left of the open card (or the handoff panel); kiosk toasts read from across the room */
.page.kiosk-mode:has(.kfc, .kf-notes) :is(.kiosk-crew-toast, .zg-toast-host) { right: calc(min(var(--kfc-w), 100vw) + 20px); }
.page.kiosk-mode .zg-toast { font-size: 1.05rem; }

/* 1254: the Floor's shift handoff panel: the card's side, width, layer and glass (they never share the screen). It sits inside
   .kf, so the Floor gate's PIN sheet (1300) stacks over it. KioskHandoffNotes restyled for the glass; its picker sheet stays cream. */
.kf-notes-scrim { position: fixed; inset: 0; z-index: 1200; background: rgba(0, 0, 0, .36); animation: kfc-fade .2s ease; }
.kf-notes { position: fixed; z-index: 1201; top: 0; right: 0; bottom: 0; width: min(var(--kfc-w), 100vw); box-sizing: border-box;
    display: flex; flex-direction: column; gap: 14px; padding: 18px 26px 22px; overflow-y: auto; overscroll-behavior: contain;
    color: var(--kfc-ink); font-size: 16px; line-height: 1.4;
    background: radial-gradient(120% 34% at 50% 0%, rgba(var(--kiosk-teal-glow-rgb), .10), transparent 70%),
        linear-gradient(180deg, var(--kiosk-brown-mid), var(--kiosk-brown-deep));
    border-left: 1px solid var(--kfc-line-2); box-shadow: -30px 0 60px rgba(0, 0, 0, .45);
    animation: kfc-in .34s cubic-bezier(.2, .8, .2, 1); }
.kf-notes:focus { outline: none; }
.kf-notes button:focus-visible { outline: 3px solid var(--kfc-teal); outline-offset: 3px; }
.kf-notes-head { display: flex; align-items: flex-start; gap: 12px; }
.kf-notes-head-i { flex: none; width: 34px; height: 34px; margin-top: 4px; color: var(--kfc-gold-hi); }
.kf-notes-words { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.kf-notes-title { margin: 0; font-family: 'Fraunces', serif; font-size: 1.65rem; font-weight: 600; line-height: 1.2; color: var(--kfc-ink); }
.kf-notes-x { flex: none; width: 52px; height: 52px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
    color: var(--kfc-dim); background: transparent; box-shadow: inset 0 0 0 1px var(--kfc-line-2); }
.kf-notes-x .zg-icon { width: 24px; height: 24px; }
.kf-notes .kho-title { display: none; }   /* the panel's heading says it */
.kf-notes :is(.kho-count, .kho-counter, .kho-note-meta, .kho-section, .kho-done-meta, .kho-more) { font-size: 15px; color: var(--kfc-dim); }
.kf-notes .kho-empty:not(.kiosk-sheet *) { font-size: 16px; color: var(--kfc-dim); }
.kf-notes :is(.kho-step, .kho-about-name, .kho-note-text, .kho-note-about, .kho-done-text) { color: var(--kfc-ink); }
.kf-notes .kho-counter.over { color: var(--kfc-ember); }
.kf-notes :is(.kho-compose, .kho-note) { border: 0; border-radius: 16px; background: var(--kfc-glass); box-shadow: inset 0 0 0 1px var(--kfc-line-2); }
.kf-notes .kho-note { grid-template-columns: minmax(0, 1fr); border-left: 6px solid var(--kfc-ember); }   /* open: nobody has read it yet */
.kf-notes .kho-note--acknowledged { border-left-color: var(--kfc-teal); }
.kf-notes .kho-actions { grid-column: 1; grid-row: auto; flex-direction: row; flex-wrap: wrap; }   /* under the text in a 560 px panel */
.kf-notes .kho-tag { font-size: 15px; color: var(--kfc-gold-hi); background: rgba(var(--kiosk-gold-hi-rgb), .1); }
.kf-notes .kho-tag--carry { color: var(--kfc-ember); background: rgba(var(--kiosk-orb-ember-rgb), .14); }
.kf-notes .kiosk-status { font-size: 15px; color: var(--kfc-dim); background: transparent; box-shadow: inset 0 0 0 1px var(--kfc-line-2); }
.kf-notes .kiosk-status--warn { color: var(--kfc-ember); box-shadow: inset 0 0 0 1.5px rgba(var(--kiosk-orb-ember-rgb), .6); }
.kf-notes .kiosk-status--info { color: var(--kfc-teal); box-shadow: inset 0 0 0 1.5px rgba(var(--kiosk-teal-glow-rgb), .55); }
.kf-notes .kiosk-status--ok { color: var(--kfc-on-gold); background: var(--kfc-gold-hi); box-shadow: none; }
.kf-notes .kho-btn { flex: 1 1 140px; min-width: 0; border: 0; border-radius: 16px; font-family: inherit; font-size: 17px; font-weight: 800; color: var(--kfc-ink);
    background: var(--kfc-glass); box-shadow: inset 0 0 0 1.5px var(--kfc-line-2); }
.kf-notes .kho-btn--main { color: var(--kfc-on-gold); background: linear-gradient(180deg, var(--kfc-gold-hi), var(--kfc-gold)); box-shadow: none; }
.kf-notes .kho-done { border-top-color: var(--kfc-line); }
.kf-notes .kiosk-btn:not(.kiosk-sheet *) { border-radius: 16px; font-size: 17px; }
.kf-notes .kiosk-btn--primary:not(.kiosk-sheet *) { color: var(--kfc-on-gold); border-color: transparent;
    background: linear-gradient(180deg, var(--kfc-gold-hi), var(--kfc-gold)); }
.kf-notes .kiosk-btn--ghost:not(.kiosk-sheet *) { color: var(--kfc-ink); background: transparent; border-color: var(--kfc-line-2); }
.kf-notes .kiosk-seg { display: flex; background: var(--kfc-glass); box-shadow: inset 0 0 0 1px var(--kfc-line); }
.kf-notes .kiosk-seg-btn { flex: 1 1 auto; padding: 0 16px; color: var(--kfc-dim); }   /* the four categories share one row at 1366 */
.kf-notes .kiosk-seg-btn.on { color: var(--kfc-on-gold); background: var(--kfc-gold-hi); }
.kf-notes .kiosk-chip:not(.kiosk-sheet *) { color: var(--kfc-ink); background: var(--kfc-glass); border-color: var(--kfc-line-2); }
.kf-notes .kiosk-banner { font-size: 16px; color: var(--kfc-ink); }
.kf-notes .kiosk-banner--ok { background: rgba(var(--kiosk-teal-glow-rgb), .12); border-color: rgba(var(--kiosk-teal-glow-rgb), .55); }
.kf-notes .kiosk-banner--err { background: rgba(var(--kiosk-orb-ember-rgb), .16); border-color: rgba(var(--kiosk-orb-ember-rgb), .6); }
.kf-notes .app-field-label, .kf-notes .app-field-label * { font-size: 15px; color: var(--kfc-dim); }
.kf-notes textarea.ant-input { font-size: 16px; color: var(--kfc-ink); color-scheme: dark; background: var(--kfc-glass); border-color: var(--kfc-line-2); }
.kf-notes textarea.ant-input::placeholder { color: var(--kfc-faint); }
.kf-notes .kiosk-sheet { color: var(--mud-palette-text-primary); }
/* the shell's 48 px button floor outranks plain rules */
.page.kiosk-mode .kf-notes :is(.kho-btn, .kiosk-seg-btn, .kiosk-chip:not(.kiosk-sheet *)) { min-height: 56px; }
.page.kiosk-mode .kf-notes .kf-notes-x { min-height: 52px; }

/* 1273: 861-1000 px tall (a 1080 screen under browser chrome): the readout beside the gauge so a round's keypad fits too */
@media (min-height: 861px) and (max-height: 1000px) {
    :is(.kfc-mode--reading, .kfc-mode--round) .krd { flex-direction: row; justify-content: center; gap: 18px; margin: 0; }
    :is(.kfc-mode--reading, .kfc-mode--round) .krd-read { align-items: flex-start; }
    :is(.kfc-mode--reading, .kfc-mode--round) .krd-gauge { width: min(260px, 100%); }
    .page.kiosk-mode .kfc:is(.kfc-mode--reading, .kfc-mode--round) .kiosk-np-key { min-height: 56px; }
    :is(.kfc-mode--reading, .kfc-mode--round) .kfc-act { gap: 8px; }
    :is(.kfc-mode--reading, .kfc-mode--round) .kiosk-np-pad { margin: 6px 0 8px; }
}

/* short screens (1366x768): the head goes side by side so the pad fits without scrolling */
@media (max-height: 860px) {
    .kfc { gap: 8px; padding: 12px 22px 12px; }
    .kf-notes { gap: 10px; padding: 12px 22px 14px; }
    /* pad modes: orb left; words, then the thermometer, on the right (.kfc-orbs flattens into the head's grid) */
    :is(.kfc-mode--reading, .kfc-mode--round, .kfc-mode--corrective) .kfc-head {
        display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "orb words" "orb thermo";
        align-items: center; column-gap: 30px; row-gap: 4px; padding: 16px 56px 0 18px; text-align: left; }
    :is(.kfc-mode--reading, .kfc-mode--round, .kfc-mode--corrective) .kfc-orbs { display: contents; }
    :is(.kfc-mode--reading, .kfc-mode--round, .kfc-mode--corrective) .kfc-ring { grid-area: orb; }
    :is(.kfc-mode--reading, .kfc-mode--round, .kfc-mode--corrective) .kfc-words { grid-area: words; align-items: flex-start; align-self: end; }
    :is(.kfc-mode--reading, .kfc-mode--round, .kfc-mode--corrective) .kfc-thermo { grid-area: thermo; align-self: start; flex-direction: row;
        max-width: none; gap: 10px; text-align: left; }
    :is(.kfc-mode--reading, .kfc-mode--round, .kfc-mode--corrective) :is(.kfc-as, .kfc-tags) { justify-content: flex-start; }
    :is(.kfc-mode--reading, .kfc-mode--round, .kfc-mode--corrective) .kfc-orb { --orb: 104px !important; }   /* beats KioskOrb's inline size */
    :is(.kfc-mode--reading, .kfc-mode--round, .kfc-mode--corrective) .kfc-title { font-size: 1.35rem; }
    .kfc .kfc-thermo-orb { --orb: 72px !important; }
    .kfc-thermo figcaption span { display: none; }
    .page.kiosk-mode .kfc .kiosk-np-key { min-height: 56px; }   /* 1534 QA: 56 at 1280 x 800 too (was 48); the footer stays sticky */
    .page.kiosk-mode .kfc .kiosk-np-sign { min-height: 56px; }
    .page.kiosk-mode .kfc .kiosk-btn { min-height: 56px; }   /* 1534: 56 on the go-live 1280 x 800 too (was 54) */
    .kfc .kiosk-np-pad { gap: 6px; margin: 6px 0 8px; }
    .krd { margin: 0; flex-direction: row; justify-content: center; gap: 18px; }   /* readout beside the gauge */
    .krd-read { align-items: flex-start; }
    .page.kiosk-mode .kfc .kca-option { min-height: 48px; }
    .kca-caught { gap: 4px; padding: 10px 14px; }
    .kca .kca-title { font-size: 1.15rem; }
    .krd-gauge { width: min(220px, 100%); }
    .krd-val { font-size: 34px; }
}
@media (prefers-reduced-motion: reduce) {
    .kfc, .kfc-scrim, .kf-notes, .kf-notes-scrim, .kfc-ring--due .kfc-ring-arc, .kfc-ring-burn { animation: none; }
    .krd-needle, .krd-hand { transition: none; }
}

/* ===== ADR #211 Kiosk Floor: screen ===== */
/* Items 1261/1263/1264 (+1256): /kiosk Floor on the brand stage (a dark field in both themes), so text uses the drawer
   inks and the kiosk gold / teal / ember tokens. Wall touchscreen: text >= 15 px, status always a word plus a shape cue. */
.kf { position: relative; isolation: isolate; flex: 1 0 auto; display: flex; flex-direction: column; gap: 14px; min-width: 0;
    padding: 18px 28px 20px; box-sizing: border-box; font-size: 16px; color: var(--mud-palette-drawer-text); }
/* perspective floor grid, behind everything */
.kf-grid { position: absolute; left: -30%; right: -30%; bottom: -12%; height: 58%; display: block; pointer-events: none;
    background-image: linear-gradient(rgba(var(--kiosk-gold-hi-rgb), .07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(var(--kiosk-gold-hi-rgb), .07) 1px, transparent 1px);
    background-size: 56px 56px; transform: perspective(520px) rotateX(64deg); transform-origin: 50% 100%;
    -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 1) 10%, transparent 85%);
    mask-image: linear-gradient(to top, rgba(0, 0, 0, 1) 10%, transparent 85%); }
.kf .kg-bar { margin-bottom: 0; }
.kf .kg-switch { font-size: 15px; }

/* header: brand left; team rings (1263), streak, then the clock, always right-most (1273: a wrapped row stays right too) */
.kf-head { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 12px 22px; min-height: 72px; }
.kf-brand { min-width: 0; margin-right: auto; display: flex; flex-direction: column; gap: 4px; }
.kf-title { font-family: 'Fraunces', serif; font-size: 2rem; font-weight: 600; line-height: 1.05; }
.kf-tag { margin-left: 12px; font-family: inherit; font-size: 15px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
    color: var(--mud-palette-drawer-icon); }
.kf-sub { font-size: 17px; font-weight: 600; color: var(--mud-palette-drawer-icon); }
.kf-title, .kf-sub, .kf-clock { text-shadow: 0 1px 12px rgba(0, 0, 0, .55); }
.kf-clock { display: flex; align-items: baseline; gap: 6px; font-size: 2.6rem; font-weight: 700; line-height: 1;
    font-variant-numeric: tabular-nums; color: rgb(var(--kiosk-gold-hi-rgb)); }
.kf-clock small { font-size: 16px; font-weight: 700; color: var(--mud-palette-drawer-icon); }
.kf-rings { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.kf-ring { display: flex; align-items: center; gap: 10px; padding: 5px 16px 5px 5px; border-radius: 999px;
    background: rgba(var(--kiosk-gold-hi-rgb), .05); box-shadow: inset 0 0 0 1px rgba(var(--kiosk-gold-hi-rgb), .16); }
.kf-ring svg { flex: none; width: 60px; height: 60px; overflow: visible; }
.kf-ring circle { fill: none; }
.kf-ring-bg { stroke: rgba(var(--kiosk-gold-hi-rgb), .15); stroke-width: 4; }
.kf-ring-arc { stroke: rgb(var(--kiosk-gold-rgb)); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 100;
    stroke-dashoffset: calc(100 - 100 * var(--kf-p, 0)); transition: stroke-dashoffset .8s cubic-bezier(.2, .8, .2, 1);
    filter: drop-shadow(0 0 4px rgba(var(--kiosk-gold-rgb), .6)); }
.kf-ring text { font-size: 15px; font-weight: 800; text-anchor: middle; fill: var(--mud-palette-drawer-text); font-variant-numeric: tabular-nums; }
.kf-ring-t { display: flex; flex-direction: column; gap: 2px; line-height: 1.15; }
.kf-ring-t > span { font-size: 15px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--mud-palette-drawer-icon); }
.kf-ring-t > b { font-size: 16px; }
.kf-ring.is-current { background: rgba(var(--kiosk-gold-rgb), .13); box-shadow: inset 0 0 0 1px rgba(var(--kiosk-gold-rgb), .55); }
.kf-ring.is-current .kf-ring-t > span { color: rgb(var(--kiosk-gold-hi-rgb)); }
.kf-ring.is-full .kf-ring-arc { stroke: rgb(var(--kiosk-gold-hi-rgb)); }
.kf-ring.is-bump { animation: kf-bump .6s ease; }
@keyframes kf-bump { 40% { transform: scale(1.06); box-shadow: inset 0 0 0 1px rgb(var(--kiosk-gold-rgb)), 0 0 30px rgba(var(--kiosk-gold-rgb), .45); } }
.kf-streak { padding: 9px 16px; border-radius: 999px; font-size: 15px; font-weight: 800; letter-spacing: .04em; white-space: nowrap;
    color: rgb(var(--kiosk-teal-glow-rgb)); background: rgba(var(--kiosk-teal-glow-rgb), .08);
    box-shadow: inset 0 0 0 1px rgba(var(--kiosk-teal-glow-rgb), .4); }
/* 1342: the chip is the Day stats link; a touch target, the chevron says it opens something */
a.kf-streak { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; box-sizing: border-box;
    text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
a.kf-streak:focus-visible { outline: 3px solid rgb(var(--kiosk-teal-glow-rgb)); outline-offset: 3px; }
@media (hover: hover) { a.kf-streak:hover { background: rgba(var(--kiosk-teal-glow-rgb), .16); } }
a.kf-streak:active { transform: scale(.97); }
.kf-streak-go { font-size: 20px; line-height: 1; }
/* 1254: shift handoff chip, just left of the clock; the count is always words, an ember dot only adds to "to read" */
.kf-notes-chip { position: relative; flex: none; display: inline-flex; align-items: center; gap: 10px; padding: 6px 18px 6px 12px;
    border: 0; border-radius: 999px; cursor: pointer; font: inherit; text-align: left; white-space: nowrap;
    color: var(--mud-palette-drawer-text); background: rgba(var(--kiosk-gold-hi-rgb), .05); box-shadow: inset 0 0 0 1px rgba(var(--kiosk-gold-hi-rgb), .3); }
.kf-notes-chip:focus-visible { outline: 3px solid rgb(var(--kiosk-teal-glow-rgb)); outline-offset: 3px; }
.kf-notes-chip-i { flex: none; width: 26px; height: 26px; color: rgb(var(--kiosk-gold-hi-rgb)); }
.kf-notes-chip-t { display: flex; flex-direction: column; gap: 1px; line-height: 1.15; }
.kf-notes-chip-l { font-size: 15px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--mud-palette-drawer-icon); }
.kf-notes-chip-t > b { font-size: 16px; font-weight: 800; }
.kf-notes-chip.has-unread { box-shadow: inset 0 0 0 1.5px rgba(var(--kiosk-orb-ember-rgb), .7); }
.kf-notes-chip.has-unread .kf-notes-chip-t > b { color: rgb(var(--kiosk-orb-ember-rgb)); }
.kf-notes-chip.has-unread::after { content: ""; position: absolute; top: 7px; left: 30px; width: 10px; height: 10px; border-radius: 50%;
    background: rgb(var(--kiosk-orb-ember-rgb)); box-shadow: 0 0 0 2px var(--kiosk-brown-deep), 0 0 10px rgba(var(--kiosk-orb-ember-rgb), .7); }
/* ADR #222 (2168): fridge sensors chip beside the handoff chip - teal all good, ember names the worst fridge */
.kf-fridge-chip.is-ok { color: rgb(var(--kiosk-teal-glow-rgb)); box-shadow: inset 0 0 0 1.5px rgba(var(--kiosk-teal-glow-rgb), .55); }
.kf-fridge-chip.is-ok .kf-notes-chip-i { color: rgb(var(--kiosk-teal-glow-rgb)); }
.kf-fridge-chip.is-warm { background: rgba(var(--kiosk-orb-ember-rgb), .18);
    box-shadow: inset 0 0 0 1.5px rgb(var(--kiosk-orb-ember-rgb)), 0 0 0 3px rgba(var(--kiosk-orb-ember-rgb), .18); }
.kf-fridge-chip.is-warm .kf-notes-chip-i { color: rgb(var(--kiosk-orb-ember-rgb)); }
.kf-fridge-chip.is-stale { color: rgba(var(--kiosk-rail-ink-rgb), .76); }
/* the Fridges panel (handoff frame) and its rows (FridgeSensorRow) */
.kf-fridges-sub { font-size: 15px; color: var(--kfc-dim); }
.kf-fridges-rows { display: flex; flex-direction: column; gap: 8px; }
.kf-fridges-foot { margin: auto 0 0; padding-top: 10px; border-top: 1px solid var(--kfc-line); font-size: 15px; line-height: 1.45; color: var(--kfc-dim); }
.fsr-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; row-gap: 2px; padding: 10px 12px; border-radius: 14px;
    background: var(--kfc-glass); box-shadow: inset 0 0 0 1px var(--kfc-line); }
.fsr-name { font-size: 17px; font-weight: 700; }
.fsr-temp { grid-row: span 2; align-self: center; text-align: right; font-size: 26px; font-weight: 700; }
.fsr-meta { display: flex; align-items: center; gap: 8px; font-size: 15px; color: var(--kfc-dim); }
.fsr-spark { flex: none; }
.fsr-band { fill: var(--kfc-teal); opacity: .16; }
.fsr-line { fill: none; stroke: var(--kfc-teal); stroke-width: 1.6; stroke-linejoin: round; }
.fsr-row.is-warm { background: rgba(var(--kiosk-orb-ember-rgb), .13); box-shadow: inset 0 0 0 1px rgba(var(--kiosk-orb-ember-rgb), .7); }
.fsr-row.is-warm .fsr-temp { color: var(--kfc-ember); }
.fsr-row.is-warm .fsr-meta { color: var(--kfc-ink); }
.fsr-row.is-warm .fsr-line { stroke: var(--kfc-ember); }
.fsr-row.is-stale { opacity: .8; }
.fsr-row.is-stale :is(.fsr-temp, .fsr-meta) { color: var(--kfc-faint); }
.fsr-row.is-stale .fsr-line { stroke: var(--kfc-faint); }


/* 2177 (owner 11/12, sample floor-day-river): every open check - late, due, up next - on at most two rows of 8, late first.
   The orb scales with the strip's width (8 per row at every size) between 88 and 128 px. */
.kf-now { container: kf-now / inline-size; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.kf-now-h { display: flex; align-items: center; gap: 12px; min-height: 24px; font-size: 15px; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: var(--mud-palette-drawer-icon); }
.kf-now-h b { letter-spacing: .12em; color: rgb(var(--kiosk-gold-hi-rgb)); }
.kf-now-h .kf-all { margin-left: auto; }
.kf-orbs { --kf-od: clamp(88px, calc(100cqi / 8 - 44px), 128px); display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 0 8px; }
.kf-clear { flex: 1 1 100%; align-self: center; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 40px 0;
    text-align: center; font-size: 18px; color: var(--mud-palette-drawer-icon); }
.kf-clear b { font-family: 'Fraunces', serif; font-size: 1.9rem; font-weight: 600; color: rgb(var(--kiosk-gold-hi-rgb)); }
/* 1273: first load only */
.kf-loading { flex: 1 1 100%; align-self: center; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 40px 0;
    font-size: 17px; color: var(--mud-palette-drawer-icon); }
.kf-loading .zg-progress { width: min(360px, 60%); }
/* "All N open" and yesterday's chip open the list sheet (56 px targets: the contract rule at the end of the file) */
.kf-link { display: inline-flex; align-items: center; gap: 6px; padding: 4px 14px; border: 0; border-radius: 16px; cursor: pointer; font: inherit;
    font-size: 15px; font-weight: 800; letter-spacing: 0; text-transform: none; white-space: nowrap; color: rgb(var(--kiosk-gold-hi-rgb));
    background: rgba(var(--kiosk-gold-hi-rgb), .06); box-shadow: inset 0 0 0 1px rgba(var(--kiosk-gold-hi-rgb), .3); -webkit-tap-highlight-color: transparent; }
.kf-link:focus-visible { outline: 3px solid rgb(var(--kiosk-teal-glow-rgb)); outline-offset: 2px; }

/* an orb: the KioskOrb disc inside a status ring that drains through the grace window, then the words */
.kf-orb { all: unset; box-sizing: border-box; position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px;
    width: 100%; min-width: 0; padding: 10px 2px 2px; border-radius: 22px; text-align: center; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.kf-orb .kf-disc { --d: var(--kf-od) !important; }   /* beats the inline sizes */
.kf-orb .kiosk-orb { --orb: var(--kf-od) !important; }
.kf-orb:focus-visible, .kf-rorb:focus-visible { outline: 3px solid rgb(var(--kiosk-teal-glow-rgb)); outline-offset: 4px; }
.kf-orb:disabled { cursor: default; }
@media (hover: hover) { .kf-orb:not(:disabled):hover .kf-disc { transform: translateY(-3px); } }
.kf-orb:not(:disabled):active .kf-disc { transform: scale(.96); }
.kf-disc { position: relative; display: block; flex: none; width: var(--d); height: var(--d); transition: transform .2s ease; }
.kf-disc > .kiosk-orb { position: absolute; inset: 0; }
.kf-sring { position: absolute; inset: -12px; width: calc(100% + 24px); height: calc(100% + 24px); overflow: visible; pointer-events: none; }
.kf-sring circle { fill: none; }
.kf-sring-bg { stroke: rgba(var(--kiosk-gold-hi-rgb), .14); stroke-width: 2; }
.kf-sring-arc { stroke: rgb(var(--kiosk-teal-glow-rgb)); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 100;
    stroke-dashoffset: calc(100 - 100 * var(--kf-p, 1)); transition: stroke-dashoffset .6s ease, stroke .3s ease;
    filter: drop-shadow(0 0 5px rgba(var(--kiosk-teal-glow-rgb), .6)); }
.kf-orb--late .kf-sring-arc { stroke: rgb(var(--kiosk-orb-ember-rgb)); filter: drop-shadow(0 0 7px rgba(var(--kiosk-orb-ember-rgb), .75)); }
.kf-orb--missed .kf-sring-arc { stroke: rgb(var(--kiosk-orb-ember-rgb)); stroke-dasharray: 2 3; stroke-linecap: butt; filter: none; opacity: .75; }
.kf-orb--done .kf-sring-arc { stroke: rgb(var(--kiosk-gold-hi-rgb)); filter: drop-shadow(0 0 8px rgba(var(--kiosk-gold-rgb), .8)); }
.kf-sring-burn { stroke: rgb(var(--kiosk-orb-ember-rgb)); stroke-width: 1.2; stroke-dasharray: 1 3.5; opacity: .85;
    transform-box: fill-box; transform-origin: center; animation: kf-spin 9s linear infinite; }
@keyframes kf-spin { to { transform: rotate(360deg); } }
/* owner 11/12: the badge rides up onto the ring's bottom edge (not over the still), on a solid fill */
.kf-cap { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; max-width: 100%; margin-top: -16px; }
.kf-st { max-width: var(--kf-od); overflow: hidden; text-overflow: ellipsis; padding: 2px 8px; border-radius: 999px; font-size: 15px; font-weight: 800;
    white-space: nowrap; background: var(--kiosk-brown-deep); }
.kf-orb--due .kf-st { color: rgb(var(--kiosk-teal-glow-rgb)); box-shadow: inset 0 0 0 1.5px rgba(var(--kiosk-teal-glow-rgb), .55); }
.kf-orb--late .kf-st { color: var(--kiosk-brown-deep); background: rgb(var(--kiosk-orb-ember-rgb)); }
.kf-orb--missed .kf-st { color: rgb(var(--kiosk-orb-ember-rgb)); box-shadow: inset 0 0 0 1.5px rgba(var(--kiosk-orb-ember-rgb), .6); }
.kf-orb--later .kf-st { color: var(--mud-palette-drawer-icon); box-shadow: inset 0 0 0 1px rgba(var(--kiosk-gold-hi-rgb), .3); }
.kf-orb--done .kf-st { color: var(--kiosk-brown-deep); background: rgb(var(--kiosk-gold-hi-rgb)); }
/* 1273: Up next (KioskFloorNow.UpNextMinutes): a still, no status ring yet, a dashed teal chip beside Due's solid one */
.kf-orb--next .kf-st { color: rgb(var(--kiosk-teal-glow-rgb)); border: 1.5px dashed rgba(var(--kiosk-teal-glow-rgb), .7); }
.kf-t { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere;
    font-size: 15px; font-weight: 700; line-height: 1.2; }
/* a re-check (1246) wears a dashed ember rim wherever it sits */
.kf .kf-orb.is-recheck .kiosk-orb::after { opacity: 1; box-shadow: none; border: 2px dashed rgba(var(--kiosk-orb-ember-rgb), .9); }

/* seal (1263): the ring closes gold, a burst, the orb leaves its place (2171) and its timeline dot is green */
.kf-orb.is-sealing .kf-disc { animation: kf-seal .9s cubic-bezier(.3, .7, .3, 1) forwards; }
.kf-orb.is-sealing .kf-cap { animation: kf-fade .9s ease forwards; }
.kf-burst { position: absolute; left: 50%; top: 50%; pointer-events: none; }
.kf-burst i { position: absolute; width: 8px; height: 8px; margin: -4px; border-radius: 50%; background: rgb(var(--kiosk-gold-hi-rgb));
    box-shadow: 0 0 10px rgb(var(--kiosk-gold-rgb)); transform: rotate(var(--a)); animation: kf-fly .75s ease-out forwards; }
@keyframes kf-seal { 35% { transform: scale(1.1); } 70% { transform: scale(1.04); opacity: 1; } 100% { transform: scale(.4); opacity: 0; } }
@keyframes kf-fade { 60% { opacity: 1; } 100% { opacity: 0; } }
@keyframes kf-fly { to { transform: rotate(var(--a)) translateX(calc(var(--d, 100px) * .85)); opacity: 0; } }

/* 2177: the day timeline (KioskFloorRiver) in 1261's river look: opening to close, the teal now line, daypart bands with
   their counts, and every check on a mini orb (a still) on two lanes, above and below the line.
   1938: a lane is the stop button's height, so --kf-l never drops under the 48 px kiosk touch minimum. */
.kf-day { display: flex; flex-direction: column; gap: 2px; padding: 4px 18px; border-radius: 18px; background: rgba(var(--kiosk-gold-hi-rgb), .04);
    box-shadow: inset 0 0 0 1px rgba(var(--kiosk-gold-hi-rgb), .16); }
.kf-day-h { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; font-size: 15px; font-weight: 600; color: var(--mud-palette-drawer-icon); }
.kf-day-h > b { font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: rgb(var(--kiosk-gold-hi-rgb)); }
.kf-key { margin-left: auto; display: flex; gap: 14px; }
.kf-key > span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.kf-key-i { display: inline-block; box-sizing: border-box; width: 14px; height: 14px; border-radius: 50%; border: 2.5px solid currentColor; }
.kf-key--done { color: rgb(var(--kiosk-ok-rgb)); }
.kf-key--late, .kf-key--missed { color: rgb(var(--kiosk-orb-ember-rgb)); }
.kf-key--missed { border-width: 2px; border-style: dashed; }
.kf-key--tocome { color: rgb(var(--kiosk-teal-glow-rgb)); }
.kf-day-row { display: flex; align-items: center; gap: 14px; }
.kf-yday { flex: none; flex-direction: column; align-items: flex-start; gap: 0; line-height: 1.2; color: rgb(var(--kiosk-orb-ember-rgb));
    box-shadow: inset 0 0 0 1.5px rgba(var(--kiosk-orb-ember-rgb), .55); }
.kf-yday > span { font-weight: 600; color: var(--mud-palette-drawer-text); }
.kf-track { --kf-l: 48px; --kf-o: 40px; --kf-g: 6px; --kf-b: 22px;   /* lane height, stop orb, lane gap, band label row */
    --kf-axis: calc(var(--kf-l) + var(--kf-g));
    --kf-in: calc((var(--kf-l) - var(--kf-o)) / 2);   /* lane slack around the orb; connectors run to the orb's edge */
    position: relative; flex: 1 1 auto; min-width: 0; height: calc(2 * var(--kf-l) + 2 * var(--kf-g) + var(--kf-b) + 2px); margin: 0 24px; }
.kf-band { position: absolute; top: 0; bottom: 0; border-left: 1px dashed rgba(var(--kiosk-gold-hi-rgb), .2);
    background: linear-gradient(180deg, transparent, rgba(var(--kiosk-gold-rgb), .045)); }
.kf-band--mid { background: linear-gradient(180deg, transparent, rgba(var(--kiosk-teal-glow-rgb), .035)); }
.kf-band > span { position: absolute; left: 8px; right: 4px; bottom: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: 15px; font-weight: 700; line-height: var(--kf-b); color: rgba(var(--kiosk-gold-hi-rgb), .6); }
.kf-axis { position: absolute; left: 0; right: 0; top: var(--kf-axis); height: 2px; margin-top: -1px;
    background: linear-gradient(90deg, rgba(var(--kiosk-teal-glow-rgb), .75), rgba(var(--kiosk-gold-hi-rgb), .35) 30%, rgba(var(--kiosk-gold-hi-rgb), .12)); }
.kf-tick { position: absolute; top: var(--kf-axis); transform: translate(-50%, -50%); padding: 0 7px; border-radius: 6px; white-space: nowrap;
    font-size: 15px; font-weight: 600; line-height: 20px; font-variant-numeric: tabular-nums; color: var(--mud-palette-drawer-icon);
    background: var(--kiosk-brown-deep); box-shadow: inset 0 0 0 1px rgba(var(--kiosk-gold-hi-rgb), .16); }
.kf-tick--minor { width: 1px; height: 8px; padding: 0; background: rgba(var(--kiosk-gold-hi-rgb), .35); box-shadow: none; }
.kf-nowmark { position: absolute; top: 0; bottom: var(--kf-b); width: 2px; margin-left: -1px;
    background: linear-gradient(transparent, rgb(var(--kiosk-teal-glow-rgb)), transparent); box-shadow: 0 0 12px rgb(var(--kiosk-teal-glow-rgb)); }
.kf-nowmark > span { position: absolute; z-index: 2; top: var(--kf-axis); left: 1px; transform: translate(-50%, -50%); padding: 0 8px; border-radius: 6px;
    white-space: nowrap; font-size: 15px; font-weight: 800; line-height: 20px; letter-spacing: .08em; text-transform: uppercase;
    color: rgb(var(--kiosk-teal-glow-rgb)); background: var(--kiosk-brown-deep); box-shadow: inset 0 0 0 1.5px rgba(var(--kiosk-teal-glow-rgb), .7); }
/* a stop: one lane tall and wide, the orb at its time; Gap/Width in KioskFloorRiver keep a lane's stops a target apart */
.kf-stop { position: absolute; z-index: 1; width: var(--kf-l); height: var(--kf-l); margin-left: calc(var(--kf-l) / -2); }
.kf-lane-0 { top: 0; }
.kf-lane-1 { top: calc(var(--kf-axis) + var(--kf-g)); }
.kf-stop::before { content: ""; position: absolute; left: 50%; width: 1px; background: rgba(var(--kiosk-gold-hi-rgb), .32); }
.kf-lane-0::before { top: calc(var(--kf-l) - var(--kf-in)); height: calc(var(--kf-g) + var(--kf-in)); }
.kf-lane-1::before { top: calc(-1 * var(--kf-g)); height: calc(var(--kf-g) + var(--kf-in)); }
.kf-rorb { all: unset; box-sizing: border-box; display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; cursor: pointer;
    -webkit-tap-highlight-color: transparent; }
.kf-rorb .kf-disc { --d: var(--kf-o) !important; }   /* beats the inline 52 px */
.kf-rorb .kiosk-orb { --orb: var(--kf-o) !important; }
.kf-rorb:not(:disabled):active .kf-disc { transform: scale(.94); }
/* the state on the orb's ring: green + the check done, ember late (no pulse: a calm river), dashed ember missed, teal to come */
.kf-rorb .kiosk-orb--done { --orb-glow: var(--kiosk-ok-rgb); --orb-glow-a: .95; }
.kf-rorb .kiosk-orb--late::after { animation: none; }
.kf-count { position: absolute; right: -8px; top: -6px; min-width: 24px; height: 24px; padding: 0 6px; box-sizing: border-box; border-radius: 12px;
    font-size: 15px; font-weight: 800; line-height: 24px; text-align: center; color: var(--kiosk-brown-deep); background: rgb(var(--kiosk-gold-rgb)); }
.kf-rre { position: absolute; left: -8px; top: -6px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
    font-size: 15px; font-weight: 800; line-height: 1; color: var(--kiosk-brown-deep); background: rgb(var(--kiosk-orb-ember-rgb)); }

/* bottom row: item 1264's pulse strip, full width (2177: the Done today shelf went to the timeline) */
.kf-foot { margin-top: auto; }
.kf-pulse { min-width: 0; padding: 10px 16px; border-radius: 20px; background: rgba(var(--kiosk-gold-hi-rgb), .04);
    box-shadow: inset 0 0 0 1px rgba(var(--kiosk-gold-hi-rgb), .16); display: flex; align-items: center; gap: 8px 18px; }
.kf-label { min-width: 0; font-size: 15px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--mud-palette-drawer-icon); }
.kf-tiles { flex: none; margin-left: auto; display: flex; gap: 10px; }
.kf-tile { display: flex; align-items: center; gap: 12px; padding: 6px 16px 6px 8px; border-radius: 16px;
    background: rgba(var(--kiosk-gold-hi-rgb), .04); box-shadow: inset 0 0 0 1px rgba(var(--kiosk-gold-hi-rgb), .12); }
.kf-tile-t { display: grid; grid-template-columns: auto auto; align-items: baseline; column-gap: 10px; line-height: 1.15; }   /* word | count, then delta | last week */
.kf-tile-l { font-size: 15px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--mud-palette-drawer-icon); }
.kf-tile-n { font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; }
.kf-tile-then { font-size: 15px; color: var(--mud-palette-drawer-icon); }
.kf-delta { font-size: 15px; font-weight: 800; }
.kf-delta--up { color: rgb(var(--kiosk-teal-glow-rgb)); }
.kf-delta--down { color: rgb(var(--kiosk-orb-ember-rgb)); }
.kf-delta--flat { color: var(--mud-palette-drawer-icon); }
.kf-pulse-empty { display: flex; align-items: center; gap: 12px; font-size: 15px; color: var(--mud-palette-drawer-icon); }
.kf-pulse-empty b { display: block; font-size: 17px; color: var(--mud-palette-drawer-text); }
.kf-pulse-empty-icon { flex: none; width: 40px; height: 40px; color: rgb(var(--kiosk-gold-rgb)); }

/* the list sheet (a dot's checks, all open, yesterday's notes): a cream sheet that stays under the focus card's scrim (1200) */
.kiosk-sheet-backdrop.kf-stop-scrim { z-index: 1150; }
/* a long list scrolls, not the sheet, so Close stays on screen at 768px */
.kiosk-sheet.kf-stopsheet { z-index: 1151; display: flex; flex-direction: column; overflow: hidden; }
.kf-stoplist { display: flex; flex-direction: column; gap: 8px; margin: 12px 0 4px; flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 3px; }
.kf-stoprow { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 14px; cursor: pointer;
    font-size: 16px; font-weight: 700; color: var(--mud-palette-text-primary); border: 1px solid var(--mud-palette-lines-default); }
.kf-stoprow small { display: block; font-size: 15px; font-weight: 500; color: var(--mud-palette-text-secondary); }
.kf-stoprow:focus-visible { outline: 3px solid var(--kiosk-accent); outline-offset: 2px; }
/* the green check means done: a skip carries no check, a flagged reading an ember one */
.kf-stoprow.is-skip .kiosk-orb-check { display: none; }
.kf-stoprow.is-flag .kiosk-orb-check { background: rgb(var(--kiosk-orb-ember-rgb)); }

/* 1331: a check tapped before its daypart starts: confirm first (words carry it, both buttons wall-sized) */
.kiosk-sheet.kf-early { width: min(520px, calc(100vw - 32px)); }
.kf-early-q { margin: 12px 0 6px; font-size: 18px; font-weight: 700; line-height: 1.35; color: var(--mud-palette-text-primary); }
.kf-early-note { margin: 0; font-size: 15px; color: var(--mud-palette-text-secondary); }
.kf-early-actions { display: grid; grid-template-columns: 1fr 1fr; margin-top: 18px; }
.page.kiosk-mode .kf-early-actions .kiosk-btn { min-height: 64px; font-size: 1.15rem; }   /* outranks the kiosk-mode button floor (48px) */

/* narrower screens: one header row */
@media (max-width: 1500px) {
    .kf-head { gap: 10px 14px; }
    .kf-title { font-size: 1.7rem; }
    .kf-sub { font-size: 15px; }
    .kf-greet, .kf-dot { display: none; }
    .kf-clock { font-size: 2.2rem; }
    .kf-ring:not(.is-current) .kf-ring-t > b { display: none; }
}
/* 1273 compact density (1280 x 800, 1366 x 1024, 1785 x 878 class): a tighter header and board; text stays >= 15 px, nothing
   scrolls sideways */
@media (max-height: 900px), (max-width: 1499px) {
    .kf { gap: 6px; padding-top: 8px; padding-bottom: 6px; }
    .kf-head { min-height: 0; column-gap: 12px; }   /* 1254: room for the handoff chip at 1366 */
    .kf-title { font-size: 1.5rem; }
    .kf-clock { font-size: 2rem; }
    .kf-ring { padding: 4px 12px 4px 4px; }
    .kf-ring svg { width: 46px; height: 46px; }
    .kf-ring text { font-size: 19.6px; }   /* the 60-unit viewBox at 46 px: renders at 15 px */
    .kf-streak { max-width: 300px; padding: 5px 14px; border-radius: 18px; white-space: normal; text-align: center; line-height: 1.2; }
    /* 1254: the chip stacks (icon over the count words) to fit 1366 beside the rings and streak; "Handoff" rides the aria-label */
    .kf-notes-chip { flex-direction: column; gap: 2px; padding: 4px 10px 5px; border-radius: 18px; }
    .kf-notes-chip-l { display: none; }
    .kf-notes-chip-i { width: 22px; height: 22px; }
    .kf-notes-chip-t > b { font-size: 15px; }
    .kf-notes-chip.has-unread::after { top: 3px; left: calc(50% + 6px); }
    .kf-pulse { padding: 4px 12px; }
    .kf-tile { padding: 4px 12px 4px 6px; }
    .kf-tile .kiosk-orb { --orb: 40px !important; }
}
@media (prefers-reduced-motion: reduce) {
    .kf-orb.is-sealing, .kf-burst { display: none; }
    .kf-sring-burn, .kf-ring.is-bump { animation: none; }
    .kf-ring-arc, .kf-sring-arc, .kf-disc { transition: none; }
}

/* ---- item 1254: shift handoff notes (KioskHandoffNotes, /kiosk/handoff). Wall touchscreen: 56 px targets, >= 15 px text,
   status as a word. ---- */
.kho-page { max-width: 1000px; }
.kho { display: flex; flex-direction: column; gap: 10px; font-size: 1rem; }
.kho-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.kho-title { margin: 0; font-family: 'Fraunces', serif; font-size: 1.3rem; font-weight: 600; color: var(--mud-palette-text-primary, #3a2a1a); }
.kho-count { font-size: 1rem; font-weight: 700; color: var(--mud-palette-text-secondary, #6b5b47); }
.kho-new { margin-left: auto; }
.kho-empty { font-size: 1rem; padding: 10px 0; }
.kho-compose { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border-radius: 14px;
    background: var(--mud-palette-surface, #fffdf8); border: 1px solid var(--mud-palette-lines-default, #e6ddcd); }
.kho-step { font-size: 1.1rem; font-weight: 800; color: var(--mud-palette-text-primary, #3a2a1a); }
.kho-compose .kiosk-seg-btn { min-height: 56px; font-size: 1.05rem; }
.kho-about { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.kho-about-name { font-size: 1.05rem; font-weight: 700; color: var(--mud-palette-text-primary, #3a2a1a); }
.kho-about-pick { min-height: 56px; font-size: 1rem; }
.kho-compose .app-field-label { font-size: 1rem; }
.kho-compose textarea.kho-text { font-size: 1.05rem; line-height: 1.45; min-height: 104px; }
.kho-counter { font-size: .95rem; color: var(--mud-palette-text-secondary, #6b5b47); text-align: right; }
.kho-counter.over { color: var(--mud-palette-error); font-weight: 700; }
.kho-note { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 16px; padding: 14px 16px; border-radius: 14px;
    background: var(--mud-palette-surface, #fffdf8); border: 1px solid var(--mud-palette-lines-default, #e6ddcd);
    border-left: 6px solid rgba(var(--mud-palette-warning-rgb), .8); }
.kho-note--acknowledged { border-left-color: rgba(var(--mud-palette-info-rgb), .8); }
.kho-tags { grid-column: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.kho-tags .kiosk-status { font-size: .95rem; }
.kho-tag { font-size: .95rem; font-weight: 800; padding: 3px 12px; border-radius: 999px;
    color: var(--mud-palette-primary, #5b4a33); background: rgba(var(--mud-palette-primary-rgb), .10); }
.kho-tag--carry { color: var(--mud-palette-warning-darken, #7a5514); background: rgba(var(--mud-palette-warning-rgb), .16); }
.kho-note-text { grid-column: 1; font-size: 1.1rem; line-height: 1.45; color: var(--mud-palette-text-primary, #3a2a1a);
    white-space: pre-wrap; overflow-wrap: anywhere; }
.kho-note-about { grid-column: 1; font-size: 1rem; font-weight: 700; color: var(--mud-palette-text-primary, #3a2a1a); }
.kho-note-meta { grid-column: 1; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .95rem; color: var(--mud-palette-text-secondary, #6b5b47); }
.kho-actions { grid-column: 2; grid-row: 1 / span 4; display: flex; flex-direction: column; gap: 10px; justify-content: center; }
.kho-btn { min-height: 56px; min-width: 150px; padding: 0 20px; border-radius: 12px; cursor: pointer; font-size: 1.05rem; font-weight: 700;
    background: var(--mud-palette-surface, #fff); color: var(--mud-palette-primary, #5b4a33);
    border: 2px solid var(--mud-palette-primary, #5b4a33); }
.kho-btn--main { background: var(--mud-palette-primary, #4a2613); color: var(--mud-palette-primary-text, #fff); }
.kho-btn:disabled { opacity: .45; cursor: default; }
.kho-more { font-size: 1rem; }
.kho-section { margin: 10px 0 0; font-size: .95rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
    color: var(--mud-palette-text-secondary, #6b5b47); }
.kho-done { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding: 8px 0; font-size: 1rem;
    border-top: 1px solid var(--mud-palette-lines-default, #efe6d6); }
.kho-done .kiosk-status { font-size: .95rem; }
.kho-done-text { flex: 1 1 260px; min-width: 0; color: var(--mud-palette-text-primary, #3a2a1a); overflow-wrap: anywhere; }
.kho-done-meta { color: var(--mud-palette-text-secondary, #6b5b47); }
.kho-picker { width: min(760px, calc(100vw - 32px)); }
.kho-groups { margin: 4px 0 10px; }
.kho-groups .kiosk-chip { min-height: 56px; font-size: 1rem; }
.kho-subjects { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; max-height: 52vh; overflow-y: auto; }
.kho-subject { min-height: 64px; padding: 8px 14px; border-radius: 14px; cursor: pointer; text-align: left; font-size: 1rem; font-weight: 700;
    background: var(--mud-palette-surface, #fffaf0); color: var(--mud-palette-text-primary, #3b2f1e);
    border: 2px solid var(--mud-palette-lines-default, #e3d8c5); }
@media (max-width: 720px) { .kho-note { grid-template-columns: 1fr; } .kho-actions { grid-column: 1; grid-row: auto; flex-direction: row; flex-wrap: wrap; } }

/* ===== Kiosk Menu (Floor look) ===== */
/* Item 1277: /kiosk/menu and /kiosk/menu/{id} on the Floor's dark brand stage (both themes): drawer inks, kiosk tokens.
   Real product photos sit on the cream stage inside a gold ring; nothing spins, no KioskOrb. Wall touchscreen: text >= 15 px,
   56 px targets, status as a word. How To and Practice keep their own content on a theme card (.kmi-card). */
.kmf { position: relative; isolation: isolate; flex: 1 0 auto; display: flex; flex-direction: column; gap: 18px; min-width: 0;
    padding: 18px 28px 32px; box-sizing: border-box; font-size: 16px; color: var(--mud-palette-drawer-text); }
.kmf :is(button, a):focus-visible { outline: 3px solid rgb(var(--kiosk-teal-glow-rgb)); outline-offset: 4px; }
/* the shell's 48 px button floor (.page.kiosk-mode button) outranks plain rules: the Menu's control heights live here */
.page.kiosk-mode .kmf :is(.kmf-back, .km-pill, .kmi-tab) { min-height: 56px; }

/* header: logo, Fraunces title (+ the open category), the count, a hint on the right */
.kmf-head { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 20px; min-height: 64px; }
.kmf-brand { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.kmf-title { margin: 0; font-family: 'Fraunces', serif; font-size: 2rem; font-weight: 600; line-height: 1.05; color: var(--mud-palette-drawer-text); }
.kmf-tag { margin-left: 14px; font-family: inherit; font-size: 15px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
    color: rgb(var(--kiosk-gold-hi-rgb)); }
.kmf-sub { font-size: 17px; font-weight: 600; color: var(--mud-palette-drawer-icon); }
.kmf-title, .kmf-sub, .kmf-hint, .kmi-title, .kmi-head-title { text-shadow: 0 1px 12px rgba(0, 0, 0, .55); }
.kmf-hint { margin-left: auto; font-size: 15px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--mud-palette-drawer-icon); opacity: .85; }
.kmf-empty { padding: 32px 0; font-size: 18px; color: var(--mud-palette-drawer-icon); }
.kmf-empty .kmf-back { margin-left: 12px; }
.kmf-back { flex: none; display: inline-flex; align-items: center; box-sizing: border-box; min-height: 56px; padding: 0 22px; border: 0; border-radius: 999px;
    cursor: pointer; font-size: 17px; font-weight: 800; white-space: nowrap; text-decoration: none; color: rgb(var(--kiosk-gold-hi-rgb));
    background: rgba(var(--kiosk-gold-hi-rgb), .06); box-shadow: inset 0 0 0 1.5px rgba(var(--kiosk-gold-hi-rgb), .32); }
.kmf-back:active { transform: scale(.97); }

/* the photo orb: a real photo on the cream stage (multiply drops its white box), clipped round, gold ring and glow */
.kmf-photo { --o: 160px; --kmf-ring: var(--kiosk-gold-rgb); position: relative; isolation: isolate; flex: none; display: grid; place-items: center;
    box-sizing: border-box; width: var(--o); height: var(--o); padding: 0; border: 0; border-radius: 50%; overflow: hidden;
    background: radial-gradient(circle at 50% 36%, var(--kiosk-tile) 0%, var(--kiosk-stage-a) 52%, var(--kiosk-stage-b) 100%);
    box-shadow: 0 0 0 3px rgb(var(--kmf-ring)), 0 0 0 10px rgba(var(--kmf-ring), .13), 0 0 calc(var(--o) * .26) rgba(var(--kmf-ring), .42),
        0 14px 32px rgba(0, 0, 0, .45);
    transition: transform .2s ease; }
.kmf-photo::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: 50%; pointer-events: none;
    box-shadow: inset 0 -14px 30px var(--kiosk-stage-ink), inset 0 8px 20px rgba(var(--kiosk-rail-ink-rgb), .35); }
/* low stock: an ember ring plus a dashed halo; the words ride under it */
.kmf-photo--low { --kmf-ring: var(--kiosk-orb-ember-rgb); outline: 2px dashed rgba(var(--kiosk-orb-ember-rgb), .85); outline-offset: 12px; }
.kmf-letter { font-family: 'Fraunces', serif; font-size: calc(var(--o) * .38); line-height: 1; color: var(--kiosk-stage-ink); }
.km-item-img, .kmi-img, .kmi-orb-img { display: block; width: 86%; height: 86%; object-fit: contain; mix-blend-mode: multiply; }
@media (hover: hover) { :is(.km-cat, .km-item):hover .kmf-photo { transform: translateY(-3px); } }
:is(.km-cat, .km-item):active .kmf-photo, .kmi-orb:active { transform: scale(.96); }

/* level 1: categories as large orbs, up to three photos overlapped inside */
.km-cats { --km-cat: clamp(150px, 11vw, 216px); display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(var(--km-cat) + 40px), 1fr));
    gap: 26px 16px; padding-top: 4px; }
.km-cat { all: unset; box-sizing: border-box; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 16px 6px 8px; border-radius: 24px; text-align: center; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.km-cat-orb { --o: var(--km-cat); margin-bottom: 10px; }
.km-cat-name { font-family: 'Fraunces', serif; font-size: 1.3rem; font-weight: 600; line-height: 1.15; text-wrap: balance;
    color: var(--mud-palette-drawer-text); }
.km-cat-count { font-size: 15px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--mud-palette-drawer-icon); }
.km-cat-tile { position: absolute; top: 54%; width: 46%; height: 58%; object-fit: contain; mix-blend-mode: multiply; }
.km-cat-collage--1 .km-cat-tile--0 { left: 50%; transform: translate(-50%, -50%); width: 64%; height: 72%; }
.km-cat-collage--2 .km-cat-tile--0 { left: 35%; transform: translate(-50%, -50%) rotate(-8deg); width: 52%; height: 64%; z-index: 1; }
.km-cat-collage--2 .km-cat-tile--1 { left: 65%; transform: translate(-50%, -50%) rotate(8deg); width: 52%; height: 64%; }
.km-cat-collage--3 .km-cat-tile--0 { left: 28%; transform: translate(-50%, -47%) rotate(-10deg); }
.km-cat-collage--3 .km-cat-tile--1 { left: 50%; transform: translate(-50%, -53%); width: 52%; height: 68%; z-index: 1; }
.km-cat-collage--3 .km-cat-tile--2 { left: 72%; transform: translate(-50%, -47%) rotate(10deg); }

/* level 2: back, then the category rail (pills scroll sideways), then the items */
.km-bar { display: flex; align-items: center; gap: 14px; min-width: 0; }
.km-rail { flex: 1 1 auto; min-width: 0; display: flex; gap: 6px; padding: 6px; border-radius: 34px; overflow-x: auto; overscroll-behavior-x: contain;
    scrollbar-width: thin; scrollbar-color: rgba(var(--kiosk-gold-hi-rgb), .3) transparent;
    background: rgba(var(--kiosk-gold-hi-rgb), .05); box-shadow: inset 0 0 0 1px rgba(var(--kiosk-gold-hi-rgb), .2); }
.km-pill { flex: none; display: inline-flex; align-items: center; gap: 10px; box-sizing: border-box; min-height: 56px; padding: 0 12px 0 20px;
    border: 0; border-radius: 999px; cursor: pointer; font-size: 16px; font-weight: 700; white-space: nowrap;
    color: var(--mud-palette-drawer-text); background: transparent; transition: background .18s, color .18s; }
.km-pill b { min-width: 30px; padding: 2px 8px; box-sizing: border-box; border-radius: 999px; font-size: 15px; font-weight: 800; text-align: center;
    font-variant-numeric: tabular-nums; color: var(--mud-palette-drawer-icon); background: rgba(var(--kiosk-gold-hi-rgb), .09); }
.km-pill.is-on { color: var(--kiosk-brown-deep); background: linear-gradient(180deg, rgb(var(--kiosk-gold-hi-rgb)), rgb(var(--kiosk-gold-rgb)));
    box-shadow: 0 6px 18px rgba(var(--kiosk-gold-rgb), .3); }
.km-pill.is-on b { color: var(--kiosk-brown-deep); background: rgba(0, 0, 0, .1); }
.kmf .km-pill:focus-visible { outline-offset: -3px; }
.km-items { --km-item: clamp(120px, 8.6vw, 168px); display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(var(--km-item) + 44px), 1fr));
    gap: 24px 14px; padding-top: 6px; }
.km-item { min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 16px 4px 8px; border-radius: 22px;
    text-align: center; text-decoration: none; color: var(--mud-palette-drawer-text); -webkit-tap-highlight-color: transparent; }
.km-item-orb { --o: var(--km-item); margin-bottom: 6px; }
.km-item-name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere;
    font-size: 17px; font-weight: 700; line-height: 1.2; }
.km-low { padding: 3px 12px; border-radius: 999px; font-size: 15px; font-weight: 800; white-space: nowrap;
    color: var(--kiosk-brown-deep); background: rgb(var(--kiosk-orb-ember-rgb)); }
/* 1554: "Show hidden" (a header chip on the dark stage) and the off-menu drinks it lists: greyed, the word under the photo */
.kmf .km-hidden-toggle { flex: none; min-height: 48px; padding: 0 20px; border: 0; font-size: 16px; color: var(--mud-palette-drawer-text);
    background: rgba(var(--kiosk-gold-hi-rgb), .05); box-shadow: inset 0 0 0 1.5px rgba(var(--kiosk-gold-hi-rgb), .25); }
.kmf .km-hidden-toggle.on { color: var(--kiosk-brown-deep); background: rgb(var(--kiosk-gold-hi-rgb)); box-shadow: none; }
.page.kiosk-mode .kmf .km-hidden-toggle { min-height: 56px; }
.km-item--hidden .kmf-photo { filter: grayscale(1); opacity: .55; }
.km-item--hidden .km-item-name { opacity: .72; }
.km-off, .kmi-chip.kmi-offmenu { text-transform: uppercase; letter-spacing: .08em; font-weight: 800; color: var(--mud-palette-drawer-text);
    background: rgba(var(--kiosk-gold-hi-rgb), .08); border: 1.5px dashed rgba(var(--kiosk-gold-hi-rgb), .6); box-shadow: none; }
.km-off { padding: 3px 12px; border-radius: 999px; font-size: 15px; white-space: nowrap; }
/* ADR 219: a featured drink in practice before launch */
.km-off.km-coming, .kmi-chip.kmi-coming { color: var(--mud-palette-info); border-style: solid; border-color: rgba(var(--mud-palette-info-rgb), .7);
    background: rgba(var(--mud-palette-info-rgb), .12); }

/* /kiosk/menu/{id}: hero orb + words; a tab tap docks the photo as the orb top-right (1042) */
.kmi { --kmi-orb: clamp(96px, 8.5vw, 136px); }
.kmi-top { position: relative; display: flex; flex-direction: column; gap: 18px; }
.kmi-head { display: flex; align-items: center; gap: 16px; min-width: 0; }
.kmi-head-title { margin: 0; min-width: 0; font-family: 'Fraunces', serif; font-size: 1.9rem; font-weight: 600; line-height: 1.15;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--mud-palette-drawer-text); animation: kmi-fade-in .3s ease-out; }
.kmi--compact .kmi-top { min-height: var(--kmi-orb); padding-right: calc(var(--kmi-orb) + 30px); gap: 14px; justify-content: space-between; }
.kmi-hero { display: flex; align-items: center; flex-wrap: wrap; gap: 22px 46px; padding: 12px 0 4px 16px; animation: kmi-fade-in .3s ease-out; }
.kmi-photo { --o: clamp(200px, 15vw, 280px); }
.kmi-hero-body { flex: 1 1 360px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.kmi-cat { font-size: 15px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--mud-palette-drawer-icon); }
.kmi-title { margin: 0 0 4px; font-family: 'Fraunces', serif; font-size: 2.75rem; font-weight: 600; line-height: 1.08; text-wrap: balance;
    color: var(--mud-palette-drawer-text); }
.kmi-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.kmi-chip { display: inline-flex; align-items: center; gap: 8px; box-sizing: border-box; min-height: 40px; padding: 4px 16px; border-radius: 999px;
    font-size: 16px; font-weight: 700; white-space: nowrap; color: var(--mud-palette-drawer-text);
    background: rgba(var(--kiosk-gold-hi-rgb), .06); box-shadow: inset 0 0 0 1px rgba(var(--kiosk-gold-hi-rgb), .26); }
.kmi-chip small { font-size: 15px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .8; }
.kmi-size-default { color: var(--kiosk-brown-deep); background: linear-gradient(180deg, rgb(var(--kiosk-gold-hi-rgb)), rgb(var(--kiosk-gold-rgb))); box-shadow: none; }
.kmi-allergen { background: rgba(var(--kiosk-orb-ember-rgb), .12); box-shadow: inset 0 0 0 1.5px rgba(var(--kiosk-orb-ember-rgb), .7); }
.kmi-allergen b { font-size: 15px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: rgb(var(--kiosk-orb-ember-rgb)); }
/* 2170: the Build header's one chip, "Allergens Milk · Soy" */
.kmi-allergens { gap: 6px; color: rgb(var(--kiosk-orb-ember-rgb)); background: rgba(var(--kiosk-orb-ember-rgb), .1); box-shadow: inset 0 0 0 1.5px rgba(var(--kiosk-orb-ember-rgb), .6); }
.kmi-allergens b { font-weight: 800; color: var(--mud-palette-drawer-text); }
/* 1512: blank = not checked (a warning, never mistaken for none); "None" = checked, no major allergen */
.kmi-allergen-unlisted { color: var(--mud-palette-warning); background: rgba(var(--mud-palette-warning-rgb), .16);
    box-shadow: inset 0 0 0 1.5px rgba(var(--mud-palette-warning-rgb), .75); text-transform: uppercase; letter-spacing: .06em; font-weight: 800; }
.kmi-allergen-none { background: rgba(var(--mud-palette-success-rgb), .12); box-shadow: inset 0 0 0 1px rgba(var(--mud-palette-success-rgb), .55); }
.kmi-orb { --o: var(--kmi-orb); position: absolute; top: 0; right: 0; z-index: 3; cursor: pointer;
    animation: kmi-orb-in .42s cubic-bezier(.2, .9, .3, 1.15); }
@keyframes kmi-orb-in { from { opacity: 0; transform: translate(-60%, 40%) scale(1.8); } to { opacity: 1; transform: none; } }
@keyframes kmi-fade-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* tabs as segmented pills; docked chips on the right (compact) */
.kmi-tabbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 16px; }
.kmi-tabs { display: inline-flex; flex-wrap: wrap; gap: 6px; padding: 6px; border-radius: 34px;
    background: rgba(var(--kiosk-gold-hi-rgb), .05); box-shadow: inset 0 0 0 1px rgba(var(--kiosk-gold-hi-rgb), .22); }
.kmi-tab { min-height: 56px; padding: 0 28px; border: 0; border-radius: 999px; cursor: pointer; font-size: 16px; font-weight: 800;
    letter-spacing: .1em; text-transform: uppercase; color: var(--mud-palette-drawer-icon); background: transparent; transition: background .18s, color .18s; }
.kmi-tab-on { color: var(--kiosk-brown-deep); background: linear-gradient(180deg, rgb(var(--kiosk-gold-hi-rgb)), rgb(var(--kiosk-gold-rgb)));
    box-shadow: 0 6px 18px rgba(var(--kiosk-gold-rgb), .3); }
.kmf .kmi-tab:focus-visible { outline-offset: 2px; }
.kmi-dock { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 6px; min-width: 0; animation: kmi-fade-in .3s ease-out; }
.kmi-dock .kmi-chip { min-height: 36px; padding: 2px 12px; font-size: 15px; }

.kmi-panel { min-width: 0; }
.kmi-label { font-size: 15px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--mud-palette-drawer-icon); }

/* Recipe on file (1522: the Guide tab when there's no build card): one column per size, ingredients in build-plan order (RF-0a: unnumbered,
   they are not the steps); a short ingredient says so in words */
.kmi-recipe-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; align-items: start; max-width: 1560px; }
.kmi-recipe-col { min-width: 0; padding: 14px 16px 16px; border-radius: 22px; background: rgba(var(--kiosk-gold-hi-rgb), .04);
    box-shadow: inset 0 0 0 1px rgba(var(--kiosk-gold-hi-rgb), .16); }
.kmi-sub { margin: 0 0 12px 4px; font-family: 'Fraunces', serif; font-size: 1.35rem; font-weight: 600; color: rgb(var(--kiosk-gold-hi-rgb)); }
.kmi-step--short { box-shadow: inset 0 0 0 1px rgba(var(--kiosk-orb-ember-rgb), .4); }
.kmi-stk { justify-self: start; padding: 2px 12px; border-radius: 999px; font-size: 15px; font-weight: 800; white-space: nowrap; }
.kmi-stk-out { color: var(--kiosk-brown-deep); background: rgb(var(--kiosk-orb-ember-rgb)); }
.kmi-stk-low { color: rgb(var(--kiosk-orb-ember-rgb)); box-shadow: inset 0 0 0 1.5px rgba(var(--kiosk-orb-ember-rgb), .7); }
/* 1635: what to do after an Out of stock chip (screen only) */
.kiosk-oos-next { margin: 12px 0 0; padding: 10px 14px; border-radius: 14px; font-size: 15px; line-height: 1.4; max-width: 1560px;
    background: rgba(var(--kiosk-orb-ember-rgb), .08); box-shadow: inset 0 0 0 1px rgba(var(--kiosk-orb-ember-rgb), .35); }
.kiosk-oos-next b { margin-right: 6px; font-size: 15px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: rgb(var(--kiosk-orb-ember-rgb)); }
.kiosk-oos-next a { color: rgb(var(--kiosk-gold-hi-rgb)); font-weight: 700; text-decoration: underline; }
@media print { .kiosk-oos-next { display: none; } }

/* Sales: pulse tiles (units + rank, never money; ADR-0113), then the two trend lines */
.kmi-sales { display: flex; flex-direction: column; gap: 14px; max-width: 1560px; }
.kmi-sales-empty { display: flex; flex-direction: column; gap: 4px; padding: 28px 0; font-size: 16px; color: var(--mud-palette-drawer-icon); }
.kmi-sales-empty b { font-size: 19px; color: var(--mud-palette-drawer-text); }
.kmi-tiles { display: flex; flex-wrap: wrap; gap: 12px; }
.kmi-tile { display: flex; align-items: center; gap: 16px; box-sizing: border-box; min-width: 260px; padding: 12px 24px 12px 12px; border-radius: 24px;
    background: rgba(var(--kiosk-gold-hi-rgb), .04); box-shadow: inset 0 0 0 1px rgba(var(--kiosk-gold-hi-rgb), .14); }
.kmi-tile-rank { flex: none; display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; font-size: 19px; font-weight: 800;
    font-variant-numeric: tabular-nums; color: rgb(var(--kiosk-gold-hi-rgb));
    background: radial-gradient(circle at 50% 35%, rgba(var(--kiosk-gold-rgb), .22), rgba(var(--kiosk-gold-rgb), .04));
    box-shadow: inset 0 0 0 2px rgba(var(--kiosk-gold-rgb), .7); }
.kmi-tile.is-top .kmi-tile-rank { color: var(--kiosk-brown-deep); background: linear-gradient(180deg, rgb(var(--kiosk-gold-hi-rgb)), rgb(var(--kiosk-gold-rgb)));
    box-shadow: 0 0 22px rgba(var(--kiosk-gold-rgb), .45); }
.kmi-tile-t { display: flex; flex-direction: column; gap: 2px; line-height: 1.15; }
.kmi-tile-l { font-size: 15px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--mud-palette-drawer-icon); }
.kmi-tile-n { font-size: 34px; font-weight: 800; font-variant-numeric: tabular-nums; }
.kmi-tile-then { font-size: 15px; color: var(--mud-palette-drawer-icon); }
.kmi-trends { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 12px; }
.kmi-trend { min-width: 0; display: flex; flex-direction: column; gap: 8px; padding: 14px 18px; border-radius: 22px;
    background: rgba(var(--kiosk-gold-hi-rgb), .04); box-shadow: inset 0 0 0 1px rgba(var(--kiosk-gold-hi-rgb), .14); }
.kmi-trend-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; }
.kmi-trend-meta { font-size: 15px; color: var(--mud-palette-drawer-text); }
.kmf .kmi-trend .aed-sparkline { display: block; width: 100%; height: 110px; color: rgb(var(--kiosk-gold-rgb)); filter: drop-shadow(0 0 6px rgba(var(--kiosk-gold-rgb), .45)); }
.kmi-trend-range { display: flex; justify-content: space-between; font-size: 15px; color: var(--mud-palette-drawer-icon); }

/* How To and Practice: their content as before, on a theme card with the gold rim (like the clock's card) */
.kmi-card { min-width: 0; box-sizing: border-box; padding: 18px 20px; border-radius: 22px; color: var(--mud-palette-text-primary);
    background: color-mix(in srgb, var(--mud-palette-surface) 94%, var(--mud-palette-secondary));
    border: 1px solid rgba(var(--kiosk-gold-rgb), .7); box-shadow: var(--kiosk-rim); }
.kmi-training { max-width: 760px; margin-bottom: 16px; white-space: pre-line; font-size: 17px; line-height: 1.6; color: var(--mud-palette-text-primary); }
.kmi-doc { display: block; width: 100%; height: 72vh; border: 0; border-radius: 14px; background: var(--mud-palette-surface); }
.kmi-docpick { align-self: flex-start; margin: 0 0 12px; }

/* one guide (or a practice) in compact mode: the page fills the kiosk article and the frame takes what is left */
.kmf.kmi--fill { flex: 1 1 auto; min-height: 0; padding-bottom: 16px; }
.kmi--fill .kmi-panel { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.kmi--fill .kmi-card { padding: 12px 14px; }
.kmi--fill .kmi-doc { flex: 1 1 auto; height: auto; min-height: 280px; }
/* 1840: a screenshot guide in the image viewer (AppImageViewer); toolbar sized for touch on the 1280x800 tablet */
.zg-imgview.kmi-doc-img { height: 72vh; border-radius: 14px; border-color: rgba(var(--kiosk-gold-rgb), .35); }
.kmi--fill .zg-imgview.kmi-doc-img { flex: 1 1 auto; height: auto; min-height: 280px; }
.zg-imgview--kiosk .zg-imgview-bar { gap: 10px; padding: 4px 8px 4px 16px; }
.zg-imgview--kiosk .zg-imgview-bar .mud-icon-button { padding: 14px; }
.zg-imgview--kiosk .zg-imgview-name { font-size: 16px; color: var(--mud-palette-text-primary); }
.zg-imgview--kiosk .zg-imgview-zoom { font-size: 15px; min-width: 4em; }
/* 1833 (owner 11/5): a playing demo takes the page up to the top (the rail stays). The photo orb rides the stage's bottom-right corner,
   half over the frame: the pour meter and scoop dock fill the right side down to the hand bar, so the bar stops short of the orb instead. */
.kmi.kiosk-demo-playing .kmi-top { position: absolute; inset: 0; z-index: 4; min-height: 0; padding: 0; pointer-events: none; }
.kmi.kiosk-demo-playing :is(.kmi-head, .kmi-tabbar) { display: none; }
.kmi.kiosk-demo-playing .kmi-orb { --o: min(var(--kmi-orb), 116px); top: auto; right: 14px; bottom: 6px; pointer-events: none; animation: none; }
.kmi.kiosk-demo-playing .kpr-stage .trh-bottom { right: 104px; }
.kpr-x { position: absolute; top: 10px; right: 10px; z-index: 10; display: grid; place-items: center; width: 56px; height: 56px; padding: 0;
    border: 0; border-radius: 50%; cursor: pointer; background: var(--mud-palette-error); color: var(--mud-palette-error-text);
    box-shadow: 0 0 0 3px rgba(var(--mud-palette-surface-rgb), .85), var(--mud-elevation-6); }
.kpr-x svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 3.2; stroke-linecap: round; }
.kpr-x:active { transform: scale(.94); }

/* 1366 x 768 class: tighter field, smaller hero, text stays >= 15 px */
@media (max-height: 800px), (max-width: 1499px) {
    .kmf { gap: 12px; padding: 12px 22px 22px; }
    .kmf-head { min-height: 0; }
    .kmf-title { font-size: 1.6rem; }
    .kmf-sub { font-size: 16px; }
    .kmi-hero { gap: 16px 32px; padding-top: 8px; }
    .kmi-photo { --o: clamp(160px, 14vw, 200px); }
    .kmi-title { font-size: 2.2rem; }
    .kmi-head-title { font-size: 1.6rem; }
    .kmi-tile-n { font-size: 30px; }
}
@media (prefers-reduced-motion: reduce) {
    .kmi-orb, .kmi-hero, .kmi-head-title, .kmi-dock { animation: none; }
    .kmf-photo, .km-pill, .kmi-tab { transition: none; }
}

/* 1546: recipe card */
/* a row is [thumb] [big qty, small unit] [name], rows on one subgrid so the names line up; a narrow card (three sizes on
   a tablet) puts the name under the qty */
.kmi-rc { container-type: inline-size; }
.kmi-rc-list { --kmi-thumb: 52px; --kmi-chip-top: 14px; list-style: none; margin: 0; padding: 0; display: grid; gap: 8px 14px;
    grid-template-columns: auto max-content minmax(0, 1fr); }
.kmi-rc-row { position: relative; grid-column: 1 / -1; display: grid; grid-template-columns: var(--kmi-thumb) minmax(5.5rem, max-content) minmax(0, 1fr);
    grid-template-columns: subgrid; align-items: center; row-gap: 4px; box-sizing: border-box; min-height: 68px; padding: 8px 16px 8px 8px;
    border-radius: 18px; background: rgba(var(--kiosk-gold-hi-rgb), .04); box-shadow: inset 0 0 0 1px rgba(var(--kiosk-gold-hi-rgb), .1); }
.kmi-rc-row.kmi-step--short { box-shadow: inset 0 0 0 1px rgba(var(--kiosk-orb-ember-rgb), .4); }
.kmi-rc-thumb { align-self: center; }
.kmi-rc-qty { white-space: nowrap; font-size: 32px; font-weight: 800; line-height: 1.05; font-variant-numeric: tabular-nums;
    color: rgb(var(--kiosk-gold-hi-rgb)); }
.kmi-rc-qty small { font-size: 17px; font-weight: 700; letter-spacing: .03em; color: var(--mud-palette-drawer-icon); }
.kmi-rc-name { min-width: 0; font-size: 19px; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; color: var(--mud-palette-drawer-text); }
.kmi-rc-qty, .kmi-rc-name { align-self: baseline; }
/* 1546b: the stock chip flows after the name (a two-line name still fits the thumb's height) */
.kmi-rc-name .kmi-stk { display: inline-block; margin-left: 10px; padding: 1px 10px; line-height: 20px; vertical-align: middle; }
@container (max-width: 380px) {
    .kmi-rc-list { grid-template-columns: auto minmax(0, 1fr); }
    .kmi-rc-row { grid-template-columns: var(--kmi-thumb) minmax(0, 1fr); grid-template-columns: subgrid; row-gap: 2px; }
    .kmi-rc-thumb { grid-row: span 2; }
    /* the name has the full width here, the qty line has room to spare: the chip sits at its right end, out of flow */
    .kmi-rc-name .kmi-stk { position: absolute; top: var(--kmi-chip-top); right: 16px; margin: 0; }
}
@media (max-height: 800px), (max-width: 1499px) {
    .kmi-rc-list { --kmi-chip-top: 12px; }   /* centred on the 28 px qty line */
    .kmi-rc-qty { font-size: 28px; }
    .kmi-rc-name { font-size: 18px; }
}

/* ===== Kiosk game look: shared (kx-*) ===== */
/* Item 1274: the Floor's look (ADR #211) for the other kiosk screens. KioskStage puts a screen on the brand stage, a dark
   espresso field in both themes, so text uses the drawer inks and the kiosk gold / teal / ember tokens. Wall touchscreen:
   text >= 15 px, targets >= 56 px, status always a word. Sheets (number pad, PIN, label) keep their own surface. */
.kx-stage { position: relative; isolation: isolate; flex: 1 0 auto; display: flex; flex-direction: column; gap: 16px; min-width: 0;
    padding: 18px 28px 32px; box-sizing: border-box; font-size: 16px; color: var(--mud-palette-drawer-text); }
.kx-stage .kf-grid { height: min(58%, 460px); }
.page.kiosk-mode:has(.kx-stage) .kiosk-stardust { --ks-alpha: .7; --ks-density: .45; --ks-flare: .05; }   /* working screens: rows stay clear */

.kx-head { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 22px; min-height: 64px; }
.kx-brand { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.kx-title { margin: 0; font-family: 'Fraunces', serif; font-size: 2rem; font-weight: 600; line-height: 1.1;
    color: var(--mud-palette-drawer-text); text-shadow: 0 1px 12px rgba(0, 0, 0, .55); }
.kx-sub { font-size: 17px; font-weight: 600; color: var(--mud-palette-drawer-icon); text-shadow: 0 1px 12px rgba(0, 0, 0, .55); }
.kx-head-end { margin-left: auto; display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.kx-head > .kx-tabs { margin-left: auto; }

.kx-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.kx-tab { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: 0 24px;
    border-radius: 999px; cursor: pointer; font-size: 17px; font-weight: 800; letter-spacing: .02em; white-space: nowrap;
    color: var(--mud-palette-drawer-icon); background: rgba(var(--kiosk-gold-hi-rgb), .05); box-shadow: inset 0 0 0 1px rgba(var(--kiosk-gold-hi-rgb), .2);
    transition: background .18s, color .18s, box-shadow .18s, transform .12s; -webkit-tap-highlight-color: transparent; }
.kx-tab.on { color: var(--kiosk-brown-deep); background: linear-gradient(180deg, rgb(var(--kiosk-gold-hi-rgb)), rgb(var(--kiosk-gold-rgb)));
    box-shadow: 0 0 20px rgba(var(--kiosk-gold-rgb), .45); }
@media (hover: hover) { .kx-tab:not(.on):hover { color: var(--mud-palette-drawer-text); box-shadow: inset 0 0 0 1px rgba(var(--kiosk-gold-rgb), .6); } }
.kx-tab:active { transform: scale(.97); }

.kx-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; min-height: 48px; font-size: 17px; color: var(--mud-palette-drawer-icon); }
.kx-bar b { color: var(--mud-palette-drawer-text); }
.kx-bar-end { margin-left: auto; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.kx-label { font-size: 15px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--mud-palette-drawer-icon); }
.kx-empty { padding: 24px 0; font-size: 17px; color: var(--mud-palette-drawer-icon); }
.kx-clear { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 36px 0; text-align: center; font-size: 18px;
    color: var(--mud-palette-drawer-icon); }
.kx-clear b { font-family: 'Fraunces', serif; font-size: 1.9rem; font-weight: 600; color: rgb(var(--kiosk-gold-hi-rgb)); }

.kx-card { border-radius: 20px; padding: 14px 18px; background: rgba(var(--kiosk-gold-hi-rgb), .04); box-shadow: inset 0 0 0 1px rgba(var(--kiosk-gold-hi-rgb), .16); }

.kx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 14px; }
.kx-tile { all: unset; box-sizing: border-box; position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px;
    min-width: 0; min-height: 56px; padding: 16px 10px 14px; border-radius: 22px; text-align: center; cursor: pointer;
    background: rgba(var(--kiosk-gold-hi-rgb), .04); box-shadow: inset 0 0 0 1px rgba(var(--kiosk-gold-hi-rgb), .14);
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease; -webkit-tap-highlight-color: transparent; }
@media (hover: hover) {
    .kx-tile:not(:disabled):hover { transform: translateY(-3px);
        box-shadow: inset 0 0 0 1px rgba(var(--kiosk-gold-rgb), .5), 0 10px 24px rgba(0, 0, 0, .28); }
}
.kx-tile:not(:disabled):active { transform: scale(.97); }
.kx-tile:disabled { cursor: default; }
.kx-tile.is-on { background: rgba(var(--kiosk-gold-rgb), .12); box-shadow: inset 0 0 0 1.5px rgba(var(--kiosk-gold-rgb), .7), 0 0 26px rgba(var(--kiosk-gold-rgb), .25); }
.kx-tile-name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere;
    font-size: 17px; font-weight: 700; line-height: 1.2; color: var(--mud-palette-drawer-text); }
.kx-tile-meta { font-size: 15px; color: var(--mud-palette-drawer-icon); }

/* status as a word in a pill; the colours repeat the Floor's (teal = now, ember = late, gold = done) */
.kx-st { display: inline-flex; align-items: center; gap: 6px; padding: 3px 12px; border-radius: 999px; font-size: 15px; font-weight: 800; line-height: 1.3;
    white-space: nowrap; color: var(--mud-palette-drawer-icon); box-shadow: inset 0 0 0 1px rgba(var(--kiosk-gold-hi-rgb), .3); }
.kx-st--due { color: rgb(var(--kiosk-teal-glow-rgb)); box-shadow: inset 0 0 0 1.5px rgba(var(--kiosk-teal-glow-rgb), .55); }
.kx-st--missed { color: rgb(var(--kiosk-orb-ember-rgb)); box-shadow: inset 0 0 0 1.5px rgba(var(--kiosk-orb-ember-rgb), .6); }
.kx-st--late { color: var(--kiosk-brown-deep); background: rgb(var(--kiosk-orb-ember-rgb)); box-shadow: none; }
.kx-st--done { color: var(--kiosk-brown-deep); background: rgb(var(--kiosk-gold-hi-rgb)); box-shadow: none; }

.kx-btn { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 56px;
    padding: 0 26px; border-radius: 999px; cursor: pointer; font-size: 17px; font-weight: 800; text-align: center; white-space: nowrap;
    color: var(--kiosk-brown-deep); background: linear-gradient(180deg, rgb(var(--kiosk-gold-hi-rgb)), rgb(var(--kiosk-gold-rgb)));
    box-shadow: 0 0 18px rgba(var(--kiosk-gold-rgb), .35), 0 6px 16px rgba(0, 0, 0, .3); transition: transform .12s, opacity .12s;
    -webkit-tap-highlight-color: transparent; }
.kx-btn:not(:disabled):active { transform: scale(.97); }
.kx-btn:disabled { opacity: .4; cursor: default; box-shadow: none; }
.kx-btn--ghost { color: rgb(var(--kiosk-gold-hi-rgb)); background: rgba(var(--kiosk-gold-hi-rgb), .06);
    box-shadow: inset 0 0 0 1.5px rgba(var(--kiosk-gold-hi-rgb), .45); }
.kx-btn--warn { color: var(--kiosk-brown-deep); background: rgb(var(--kiosk-orb-ember-rgb)); box-shadow: 0 0 16px rgba(var(--kiosk-orb-ember-rgb), .3); }
.kx-btn--xl { min-height: 64px; padding: 0 32px; font-size: 19px; }
:is(.kx-tab, .kx-tile, .kx-btn):focus-visible { outline: 3px solid rgb(var(--kiosk-teal-glow-rgb)); outline-offset: 3px; }
/* beats the kiosk-wide 48 px button floor (.page.kiosk-mode button) */
.page.kiosk-mode .kx-stage :is(.kx-tab, .kx-tile, .kx-btn, .kiosk-chip, .kiosk-seg-btn, .kiosk-btn, .kws-reason, .kws-change):not(.kiosk-sheet *) { min-height: 56px; }
.page.kiosk-mode .kx-stage .kx-btn--xl { min-height: 64px; }

/* the shared kiosk primitives on the stage */
.kx-stage :is(.kiosk-page-title, .kiosk-side-title, .kg-prompt):not(.kiosk-sheet *) { color: var(--mud-palette-drawer-text); }
.kx-stage :is(.kiosk-sub, .kiosk-muted, .kiosk-empty, .kiosk-label, .kt-help, .kiosk-picker-sub, .kiosk-picker-empty):not(.kiosk-sheet *) {
    color: var(--mud-palette-drawer-icon); font-size: 15px; }
.kx-stage .kiosk-picker-link:not(.kiosk-sheet *) { color: rgb(var(--kiosk-gold-hi-rgb)); }
.kx-stage .kiosk-chip:not(.kiosk-sheet *) { padding: 0 20px; border: 0; font-size: 16px; color: var(--mud-palette-drawer-text);
    background: rgba(var(--kiosk-gold-hi-rgb), .05); box-shadow: inset 0 0 0 1.5px rgba(var(--kiosk-gold-hi-rgb), .25); }
.kx-stage .kiosk-chip.on:not(.kiosk-sheet *) { color: var(--kiosk-brown-deep); background: rgb(var(--kiosk-gold-hi-rgb)); box-shadow: none; }
.kx-stage .kiosk-chip:disabled:not(.kiosk-sheet *) { opacity: .45; }
.kx-stage .kiosk-seg:not(.kiosk-sheet *) { align-self: flex-start; padding: 5px; border-radius: 999px; background: rgba(var(--kiosk-gold-hi-rgb), .05);
    box-shadow: inset 0 0 0 1px rgba(var(--kiosk-gold-hi-rgb), .16); }
.kx-stage .kiosk-seg-btn:not(.kiosk-sheet *) { padding: 0 24px; border-radius: 999px; font-size: 17px; color: var(--mud-palette-drawer-icon); }
.kx-stage .kiosk-seg-btn.on:not(.kiosk-sheet *) { color: var(--kiosk-brown-deep);
    background: linear-gradient(180deg, rgb(var(--kiosk-gold-hi-rgb)), rgb(var(--kiosk-gold-rgb))); box-shadow: 0 0 16px rgba(var(--kiosk-gold-rgb), .4); }
.kx-stage .kiosk-btn:not(.kiosk-sheet *) { border-radius: 999px; font-size: 17px; }
.kx-stage .kiosk-btn--primary:not(.kiosk-sheet *) { color: var(--kiosk-brown-deep); border-color: transparent;
    background: linear-gradient(180deg, rgb(var(--kiosk-gold-hi-rgb)), rgb(var(--kiosk-gold-rgb))); box-shadow: 0 0 18px rgba(var(--kiosk-gold-rgb), .35); }
.kx-stage .kiosk-btn--ghost:not(.kiosk-sheet *) { color: rgb(var(--kiosk-gold-hi-rgb)); background: rgba(var(--kiosk-gold-hi-rgb), .06);
    border-color: rgba(var(--kiosk-gold-hi-rgb), .45); }
.kx-stage .kiosk-banner:not(.kiosk-sheet *) { font-size: 16px; color: var(--mud-palette-drawer-text); background: rgba(var(--kiosk-gold-hi-rgb), .06);
    border-color: rgba(var(--kiosk-gold-hi-rgb), .3); }
.kx-stage .kiosk-banner--ok:not(.kiosk-sheet *) { background: rgba(var(--kiosk-teal-glow-rgb), .1); border-color: rgba(var(--kiosk-teal-glow-rgb), .55); }
.kx-stage .kiosk-banner--ok .kiosk-banner-title:not(.kiosk-sheet *) { color: rgb(var(--kiosk-teal-glow-rgb)); }
.kx-stage .kiosk-banner--warn:not(.kiosk-sheet *) { background: rgba(var(--kiosk-gold-rgb), .12); border-color: rgba(var(--kiosk-gold-rgb), .6); }
.kx-stage .kiosk-banner--warn .kiosk-banner-title:not(.kiosk-sheet *) { color: rgb(var(--kiosk-gold-hi-rgb)); }
.kx-stage .kiosk-banner--err:not(.kiosk-sheet *) { background: rgba(var(--kiosk-orb-ember-rgb), .12); border-color: rgba(var(--kiosk-orb-ember-rgb), .6); }
.kx-stage .kiosk-banner--err .kiosk-banner-title:not(.kiosk-sheet *) { color: rgb(var(--kiosk-orb-ember-rgb)); }
.kx-stage .kiosk-status:not(.kiosk-sheet *) { font-size: 15px; color: var(--mud-palette-drawer-icon); background: transparent;
    box-shadow: inset 0 0 0 1px rgba(var(--kiosk-gold-hi-rgb), .3); }
.kx-stage .kiosk-status--info:not(.kiosk-sheet *) { color: rgb(var(--kiosk-teal-glow-rgb)); box-shadow: inset 0 0 0 1.5px rgba(var(--kiosk-teal-glow-rgb), .55); }
.kx-stage .kiosk-status--ok:not(.kiosk-sheet *) { color: var(--kiosk-brown-deep); background: rgb(var(--kiosk-gold-hi-rgb)); box-shadow: none; }
.kx-stage .kiosk-status--warn:not(.kiosk-sheet *) { color: rgb(var(--kiosk-gold-hi-rgb)); box-shadow: inset 0 0 0 1.5px rgba(var(--kiosk-gold-rgb), .7); }
.kx-stage .kiosk-status--err:not(.kiosk-sheet *) { color: rgb(var(--kiosk-orb-ember-rgb)); box-shadow: inset 0 0 0 1.5px rgba(var(--kiosk-orb-ember-rgb), .6); }
.kx-stage .kiosk-side:not(.kiosk-sheet *) { border: 0; border-radius: 20px; background: rgba(var(--kiosk-gold-hi-rgb), .04);
    box-shadow: inset 0 0 0 1px rgba(var(--kiosk-gold-hi-rgb), .16); color: var(--mud-palette-drawer-text); }
.kx-stage .kiosk-stepper:not(.kiosk-sheet *) { border: 0; border-radius: 999px; background: rgba(var(--kiosk-gold-hi-rgb), .05);
    box-shadow: inset 0 0 0 1.5px rgba(var(--kiosk-gold-hi-rgb), .3); }
.kx-stage .kiosk-stepper-btn:not(.kiosk-sheet *) { color: rgb(var(--kiosk-gold-hi-rgb)); background: rgba(var(--kiosk-gold-hi-rgb), .08); }
.kx-stage .kiosk-stepper-val:not(.kiosk-sheet *) { color: var(--mud-palette-drawer-text); }
.kx-stage :is(.kiosk-stepper-val, .kiosk-amount) small:not(.kiosk-sheet *) { font-size: 15px; color: var(--mud-palette-drawer-icon); }
.kx-stage .kiosk-amount:not(.kiosk-sheet *) { color: var(--mud-palette-drawer-text); background: rgba(var(--kiosk-gold-hi-rgb), .05);
    border-color: rgba(var(--kiosk-gold-hi-rgb), .35); }
.kx-stage .kiosk-amount.empty:not(.kiosk-sheet *) { color: rgb(var(--kiosk-gold-hi-rgb)); }

/* ===== ADR #211 Kiosk Floor: day stats (1342) ===== */
/* Item 1342 (owner 10/13): /kiosk/floor/stats, after the shared kx-* rules it builds on. Every figure is a word and a number
   (colour only adds), text >= 15 px, no sideways scroll at 1920 x 1080 or 1366 x 768 (the page scrolls down). */
.kx-stage.kx-stats { gap: 14px; }
.kfs-nav { gap: 10px; }
.kfs-loading { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 48px 0; font-size: 17px; color: var(--mud-palette-drawer-icon); }
.kfs-loading .zg-progress { width: min(360px, 60%); }
.kx-clear.kfs-empty { padding: 12px 0; }
.kfs-parts-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 20px; margin-top: 10px; }
.kfs-part { min-width: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; }
.kfs-part .kf-ring { flex: none; }
.kx-stats .kfs-part .kf-ring .kf-ring-t > b { display: inline; }   /* the Floor's narrow-screen rule hides it */
.kfs-part-trend { flex: 1 1 140px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.kfs-part-note { font-size: 15px; color: var(--mud-palette-drawer-icon); }
.kfs-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.kfs-tile { min-width: 0; display: flex; flex-direction: column; gap: 4px; padding: 12px 16px; border-radius: 18px;
    background: rgba(var(--kiosk-gold-hi-rgb), .04); box-shadow: inset 0 0 0 1px rgba(var(--kiosk-gold-hi-rgb), .14); }
.kfs-tile-n { font-size: 34px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--mud-palette-drawer-text); }
.kfs-tile-note { font-size: 15px; line-height: 1.25; color: var(--mud-palette-drawer-icon); }
.kfs-tile.is-good .kfs-tile-n { color: rgb(var(--kiosk-gold-hi-rgb)); }
.kfs-tile.is-bad .kfs-tile-n { color: rgb(var(--kiosk-orb-ember-rgb)); }
/* sparkline: the line in a quiet gold, the viewed day a teal dot ringed in the stage colour, a faint zero line */
.kfs-spark { display: block; width: 100%; max-width: 240px; height: 44px; margin-top: 4px; overflow: visible; color: rgba(var(--kiosk-gold-hi-rgb), .65); }
.kfs-spark-base { stroke: rgba(var(--kiosk-gold-hi-rgb), .16); stroke-width: 1; }
.kfs-spark-line { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.kfs-spark-pt { fill: currentColor; }
.kfs-spark-hit { fill: transparent; }
.kfs-spark-now { fill: rgb(var(--kiosk-teal-glow-rgb)); stroke: var(--kiosk-brown-deep); stroke-width: 2; }
.kfs-list { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; }
.kfs-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; padding: 8px 0; font-size: 16px;
    border-top: 1px solid rgba(var(--kiosk-gold-hi-rgb), .1); }
.kfs-row:first-child { border-top: 0; }
.kfs-row-t { font-weight: 700; color: var(--mud-palette-drawer-text); }
.kfs-row-m { min-width: 0; font-size: 15px; color: var(--mud-palette-drawer-icon); overflow-wrap: anywhere; }
.kx-st.kfs-st--flag { color: rgb(var(--kiosk-orb-ember-rgb)); box-shadow: none; border: 1.5px dashed rgba(var(--kiosk-orb-ember-rgb), .7); }
.kfs-look--clear { font-size: 16px; color: var(--mud-palette-drawer-icon); }
@media (max-width: 1100px) { .kfs-parts-row { grid-template-columns: minmax(0, 1fr); } }
@media (max-height: 800px), (max-width: 1499px) {
    .kx-stage.kx-stats { padding-top: 10px; gap: 10px; }
    .kx-stats .kx-head { min-height: 0; }
    .kx-stats .kx-title { font-size: 1.6rem; }
    .kfs-nav .kx-btn { padding: 0 18px; }
    .kfs-tiles { grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 10px; }
    .kfs-tile { padding: 10px 14px; }
    .kfs-tile-n { font-size: 28px; }
}

/* ===== Menu/Stock reskin (1274) ===== */
/* /kiosk/stock on KioskStage (the Menu reskin moved to the kiosk design session). Stock tiles carry the item's store model
   (KioskStockOrb): stills, and only the focused item turns. */
/* Stock: tab panes, item rows (orb, words, the big number, actions) and item tiles */
.kxs-pane { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.kxs-pane .kiosk-cols { gap: 20px; }
.kxs-group { margin: 8px 0 -2px; }
.kxs-rows { display: flex; flex-direction: column; gap: 10px; }
.kxs-row { all: unset; box-sizing: border-box; display: grid; grid-template-columns: auto minmax(240px, 1fr) auto auto; align-items: center; gap: 12px 18px;
    padding: 12px 16px 12px 12px; border-radius: 22px; color: var(--mud-palette-drawer-text);
    background: rgba(var(--kiosk-gold-hi-rgb), .04); box-shadow: inset 0 0 0 1px rgba(var(--kiosk-gold-hi-rgb), .14); }
button.kxs-row { cursor: pointer; transition: box-shadow .2s ease, background .2s ease, transform .12s; -webkit-tap-highlight-color: transparent; }
button.kxs-row:active { transform: scale(.99); }
button.kxs-row:focus-visible { outline: 3px solid rgb(var(--kiosk-teal-glow-rgb)); outline-offset: 3px; }
.kxs-row.is-on { background: rgba(var(--kiosk-gold-rgb), .1); box-shadow: inset 0 0 0 1.5px rgba(var(--kiosk-gold-rgb), .6), 0 0 26px rgba(var(--kiosk-gold-rgb), .18); }
.kxs-row.is-late { background: rgba(var(--kiosk-orb-ember-rgb), .06); box-shadow: inset 0 0 0 1.5px rgba(var(--kiosk-orb-ember-rgb), .5); }
.kxs-row.is-done { background: rgba(var(--kiosk-gold-hi-rgb), .025); }
.kxs-row-main { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.kxs-name { font-size: 18px; font-weight: 700; line-height: 1.2; color: var(--mud-palette-drawer-text); overflow-wrap: anywhere; }
.kxs-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 15px; color: var(--mud-palette-drawer-icon); }
.kxs-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px; max-width: 300px; }
.kxs-actions--start { justify-content: flex-start; max-width: none; }
.kxs-big { display: flex; flex-direction: column; align-items: center; min-width: 96px; padding: 8px 12px; border-radius: 16px; text-align: center;
    background: rgba(var(--kiosk-gold-hi-rgb), .05); }
.kxs-big b { font-family: 'Fraunces', serif; font-size: 1.9rem; font-weight: 700; line-height: 1.05; font-variant-numeric: tabular-nums;
    color: rgb(var(--kiosk-gold-hi-rgb)); }
.kxs-big span { font-size: 15px; color: var(--mud-palette-drawer-icon); white-space: nowrap; }
.kxs-big .kxs-big-par { font-weight: 600; color: rgba(var(--kiosk-gold-hi-rgb), .8); }
.kxs-sold.bad { color: rgb(var(--kiosk-orb-ember-rgb)); font-weight: 700; }
.kxs-print { font-size: 15px; font-weight: 700; color: rgb(var(--kiosk-gold-hi-rgb)); text-decoration: underline; }
/* 1343: the pull kinds in one line; the day label to stick and the time to write */
.kxs-kinds { font-size: 16px; line-height: 1.4; color: var(--mud-palette-drawer-text); }
.kx-stage .kxs-write { font-size: 16px; font-weight: 700; color: var(--mud-palette-drawer-text); }
/* the picked item, in focus while it's logged */
.kxs-focus { display: flex; align-items: center; gap: 22px; padding: 16px 22px; border-radius: 24px; background: rgba(var(--kiosk-gold-rgb), .08);
    box-shadow: inset 0 0 0 1.5px rgba(var(--kiosk-gold-rgb), .45), 0 0 30px rgba(var(--kiosk-gold-rgb), .14); }
.kxs-focus-main { flex: 1 1 auto; min-width: 0; }

/* waste / labels steps */
.kx-stage .kws-step { font-size: 19px; color: var(--mud-palette-drawer-text); }
.kx-stage .kws-summary { color: rgb(var(--kiosk-gold-hi-rgb)); }
.kx-stage .kws-change { padding: 0 12px; font-size: 15px; font-weight: 700; color: rgb(var(--kiosk-gold-hi-rgb)); }
/* a long category list scrolls sideways: the tiles stay in view */
.kx-stage :is(.kws-cats, .kct-picks) { flex-wrap: nowrap; overflow-x: auto; padding: 2px 2px 8px; scrollbar-width: thin; }
.kx-stage :is(.kws-cats, .kct-picks) > .kiosk-chip { flex: none; }
.kx-stage .kws-reasons { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.kx-stage .kws-reason { min-height: 72px; border: 0; border-radius: 20px; font-size: 18px; color: var(--mud-palette-drawer-text);
    background: rgba(var(--kiosk-gold-hi-rgb), .05); box-shadow: inset 0 0 0 1.5px rgba(var(--kiosk-gold-rgb), .55); }
.kx-stage .kws-reason:not(:disabled):active { transform: scale(.97); background: rgba(var(--kiosk-gold-rgb), .18); }
.kx-stage .kws-log-row { border-top-color: rgba(var(--kiosk-gold-hi-rgb), .14); font-size: 15px; }
.kx-stage .kws-log-time { color: var(--mud-palette-drawer-icon); }
.kx-stage .kws-log-why { color: rgb(var(--kiosk-gold-hi-rgb)); }
.kx-stage .kt-section { margin: 10px 0 -2px; font-size: 15px; opacity: 1; }
.kx-stage .kfl-top { margin: 0; }
.kx-stage .kfl-dot--sm { width: 40px; height: 40px; font-size: 15px; }   /* the day dot reads from across the room */
/* 1511: the written-date chip, the pull's date prompt and the dating chart */
.kx-stage .kfl-date { height: 40px; color: var(--mud-palette-drawer-text); box-shadow: inset 0 0 0 2px rgb(var(--kiosk-gold-hi-rgb)); }
.kx-stage .kxs-date { font-size: 16px; font-weight: 700; color: rgb(var(--kiosk-gold-hi-rgb)); }
.kx-stage .kxs-keep { font-size: 16px; font-weight: 700; color: var(--mud-palette-drawer-text); }   /* 1531: a continuous line keeps the case at par */
.kxs-chart-row { grid-template-columns: minmax(240px, 1fr) auto; }
.kxs-chart-when { font-size: 15px; font-weight: 600; color: var(--mud-palette-drawer-icon); }
/* 1432: prep batches: the yield beside the name, what goes in, a recipe that can't be made yet */
.kx-stage .kpb-yield { font-size: 15px; font-weight: 600; color: var(--mud-palette-drawer-icon); }
.kx-stage .kpb-inputs { font-size: 16px; color: var(--mud-palette-drawer-text); }
.kx-stage .kpb-problem { font-size: 15px; font-weight: 700; color: rgb(var(--kiosk-orb-ember-rgb)); }
/* 1539: made items on the runway go to their Prep recipe */
.kxs-make { text-decoration: none; }
.kx-stage .kpb-picked { box-shadow: 0 0 0 3px rgba(var(--kiosk-gold-hi-rgb), .8); background: rgba(var(--kiosk-gold-hi-rgb), .08); }   /* primary is dark brown: invisible on the stage */
/* 1539e: a made item below zero reads "Behind by ..." (ember, a word not a colour alone) */
.kx-stage .kpb-behind, .kx-stage .kxs-behind { font-size: 15px; font-weight: 700; color: rgb(var(--kiosk-orb-ember-rgb)); }
/* 1539e: the batch pad's Batches / Amount made toggle, its read-back and the earlier-only use-by */
.kpb-pad-head { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 8px; }
.kpb-pad-head .kiosk-seg { margin: 0; }
.kpb-approx { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--mud-palette-text-secondary, #8a7a66); }
.kpb-useby { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; }
.kpb-useby-k { font-size: 15px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--mud-palette-text-secondary, #8a7a66); }
.kpb-useby-day { min-width: 92px; text-align: center; font-size: 18px; font-variant-numeric: tabular-nums; color: var(--mud-palette-text-primary, #3b2f1e); }
.kiosk-seg-btn.kpb-useby-step { min-width: 56px; min-height: 48px; padding: 0; font-size: 22px; box-shadow: inset 0 0 0 1.5px var(--mud-palette-lines-default, #e3d8c5); }
.kiosk-seg-btn.kpb-useby-step:disabled { opacity: .35; cursor: default; }
.kpb-useby-moved { font-size: 15px; font-weight: 700; color: var(--mud-palette-warning, #b26a00); }
.kpb-useby-note { max-width: 360px; font-size: 15px; line-height: 1.3; text-align: center; color: var(--mud-palette-text-secondary, #8a7a66); }
.kfc .kpb-approx, .kfc .kpb-useby-k, .kfc .kpb-useby-note { color: var(--kfc-dim); }
.kfc .kpb-useby-day { color: var(--kfc-ink); }
.kfc .kpb-useby-moved { color: var(--kfc-gold-hi); }
.kfc .kpb-pad-head .kiosk-seg { background: var(--kfc-glass); box-shadow: inset 0 0 0 1px var(--kfc-line); }
.kfc .kpb-pad-head .kiosk-seg-btn { color: var(--kfc-dim); background: transparent; }
.kfc .kpb-pad-head .kiosk-seg-btn.on { color: var(--kfc-on-gold); background: var(--kfc-gold-hi); }
.kfc .kiosk-seg-btn.kpb-useby-step { color: var(--kfc-ink); box-shadow: inset 0 0 0 1.5px var(--kfc-line-2); }
.kfc .kfp-behind-why { font-size: 16px; font-weight: 700; text-align: center; color: var(--kfc-ember); }
/* 1539f: the target-runway suggestion: on the Prep row, preselected on the pad, a line on the Floor card */
.kx-stage .kxs-meta.kpb-suggest { font-size: 15px; font-weight: 700; color: rgb(var(--kiosk-gold-hi-rgb)); }
.kpb-pad-head .kpb-suggest { min-height: 48px; font-size: 16px; }
.kfc .kpb-pad-head .kpb-suggest { color: var(--kfc-on-gold); background: var(--kfc-gold-hi); border-color: var(--kfc-gold-hi); }
.kfc .kfp-suggest span:last-child { font-weight: 700; color: var(--kfc-gold-hi); }
.kfc .kfp-setup { font-size: 16px; font-weight: 700; color: var(--kfc-gold-hi); }
/* 1539f QA (1280 x 800): with its toggle, use-by and note the pad ran 899 px in the 768 px sheet. The Prep tab's sheet goes side by side;
   in the Floor card (460 px) the pad drops the big orb instead. */
@media (min-width: 700px) {
    .kiosk-np:not(.kfc *):has(> .kpb-pad-head) { width: min(780px, calc(100vw - 32px)); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        column-gap: 20px; align-content: start;
        grid-template-areas: "title title" "hint hint" "head display" "head err" "head quick" "head pad" "head actions"; }
    .kiosk-np:not(.kfc *):has(> .kpb-pad-head) > .kiosk-np-title { grid-area: title; }
    .kiosk-np:not(.kfc *):has(> .kpb-pad-head) > .kiosk-np-hint { grid-area: hint; }
    .kiosk-np:not(.kfc *):has(> .kpb-pad-head) > .kpb-pad-head { grid-area: head; align-self: center; margin-top: 0; }
    .kiosk-np:not(.kfc *):has(> .kpb-pad-head) > .kiosk-np-display { grid-area: display; }
    .kiosk-np:not(.kfc *):has(> .kpb-pad-head) > .kiosk-np-err { grid-area: err; }
    .kiosk-np:not(.kfc *):has(> .kpb-pad-head) > .kiosk-np-quick { grid-area: quick; }
    .kiosk-np:not(.kfc *):has(> .kpb-pad-head) > .kiosk-np-pad { grid-area: pad; }
    .kiosk-np:not(.kfc *):has(> .kpb-pad-head) > .kiosk-np-actions { grid-area: actions; }
}
.kfc.kfp--pad:has(.kpb-pad-head) .kfc-orbs { display: none; }
/* 1539g: the take-back confirm (as the Floor's early-check sheet) and the waste pad's quick fills */
.kiosk-sheet.kpb-undo { width: min(520px, calc(100vw - 32px)); }
.kpb-undo-q { margin: 12px 0 6px; font-size: 18px; font-weight: 700; line-height: 1.35; color: var(--mud-palette-text-primary); }
.kpb-undo-actions { display: grid; grid-template-columns: 1fr 1fr; margin-top: 18px; }
.kpb-undo-actions .kiosk-btn { min-height: 64px; font-size: 1.15rem; }
.kpb-undo-actions .kpb-undo-ok { grid-column: 1 / -1; }
.kpb-waste-quick { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 10px; }
/* 1790 (mock 1790-d3): the cold brew start sheet: two method cards, gallons started, the use-by, the method's how-to */
.page.kiosk-mode .kiosk-sheet.kcb { width: min(620px, calc(100vw - 32px)); padding: 26px 28px 22px; }
.kcb .kiosk-np-title { font-size: 1.6rem; color: rgb(var(--kiosk-gold-hi-rgb)); }
.kcb .kiosk-np-hint { margin-top: 4px; font-size: 17px; }
.kcb-methods { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 18px 0 12px; }
.kcb-method { all: unset; box-sizing: border-box; position: relative; display: flex; flex-direction: column; gap: 6px; min-height: 128px; padding: 16px 44px 16px 18px;
    border-radius: 16px; cursor: pointer; background: rgba(var(--kiosk-gold-hi-rgb), .07); box-shadow: inset 0 0 0 1px rgba(var(--kiosk-gold-rgb), .35); }
.kcb-method.on { box-shadow: inset 0 0 0 2px rgb(var(--kiosk-teal-glow-rgb)), 0 0 22px rgba(var(--kiosk-teal-glow-rgb), .25); }
.kcb-method:focus-visible { outline: 3px solid rgb(var(--kiosk-teal-glow-rgb)); outline-offset: 3px; }
.kcb-method-t { font: 600 20px/1.2 'Fraunces', serif; color: rgb(var(--kiosk-rail-ink-rgb)); }
.kcb-method-w { font-size: 15px; line-height: 1.3; color: rgba(var(--kiosk-rail-ink-rgb), .7); }
.kcb-method-ready { margin-top: auto; font-size: 16px; font-weight: 700; color: rgb(var(--kiosk-rail-ink-rgb)); }
.kcb-method.on .kcb-method-ready { color: rgb(var(--kiosk-teal-glow-rgb)); }
.kcb-tick { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
    font-size: 15px; font-weight: 800; box-shadow: inset 0 0 0 1.5px rgba(var(--kiosk-rail-ink-rgb), .45); }
.kcb-method.on .kcb-tick { color: var(--kiosk-pin-ok-ink); background: rgb(var(--kiosk-teal-glow-rgb)); box-shadow: none; }
.kcb-line { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-top: 12px; padding: 12px 16px;
    border-radius: 14px; box-shadow: inset 0 0 0 1px rgba(var(--kiosk-rail-ink-rgb), .16); }
.kcb-k { display: flex; flex-direction: column; font-size: 16px; font-weight: 600; color: rgb(var(--kiosk-rail-ink-rgb)); }
.kcb-k small { font-size: 15px; font-weight: 500; color: rgba(var(--kiosk-rail-ink-rgb), .7); }
.kcb-step { display: inline-flex; align-items: center; gap: 12px; }
.kcb-step-btn { all: unset; box-sizing: border-box; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; cursor: pointer;
    font-size: 26px; font-weight: 700; color: rgb(var(--kiosk-rail-ink-rgb)); background: var(--kiosk-brown-deep);
    box-shadow: inset 0 0 0 2px rgba(var(--kiosk-gold-rgb), .5); }
.kcb-step-btn:disabled { opacity: .35; cursor: default; }
.kcb-step-btn:focus-visible { outline: 3px solid rgb(var(--kiosk-teal-glow-rgb)); outline-offset: 2px; }
.kcb-gal { min-width: 44px; text-align: center; font: 600 32px/1 'Fraunces', serif; font-variant-numeric: tabular-nums; color: rgb(var(--kiosk-gold-hi-rgb)); }
.kcb-unit { font-size: 16px; font-weight: 700; color: rgb(var(--kiosk-rail-ink-rgb)); }
.kcb-useby { font-size: 16px; color: rgb(var(--kiosk-rail-ink-rgb)); }
.kcb-useby b { color: rgb(var(--kiosk-gold-hi-rgb)); }
.kcb-howto { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; margin-top: 8px; font-size: 16px; font-weight: 700;
    color: rgb(var(--kiosk-teal-glow-rgb)); text-decoration: none; }
.kcb-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 10px; }
.kcb-actions .kiosk-btn { min-height: 56px; padding: 0 26px; font-size: 17px; }
/* 1790 (mock 1790-d4): a brew on Stock › Prep: its timer, then the drain task */
.kx-stage .kcb-ready { color: rgb(var(--kiosk-teal-glow-rgb)); }
.kcb-bar { display: block; width: min(420px, 100%); height: 8px; border-radius: 999px; overflow: hidden; background: rgba(var(--kiosk-gold-hi-rgb), .1); }
.kcb-bar > span { display: block; height: 100%; border-radius: inherit; background: rgb(var(--kiosk-teal-glow-rgb)); }
.kx-stage .kcb-task { background: rgba(var(--kiosk-teal-glow-rgb), .04); box-shadow: inset 0 0 0 1.5px rgba(var(--kiosk-teal-glow-rgb), .6), 0 0 22px rgba(var(--kiosk-teal-glow-rgb), .15); }
.kx-stage .kcb-task.is-late { background: rgba(var(--kiosk-orb-ember-rgb), .06); box-shadow: inset 0 0 0 1.5px rgba(var(--kiosk-orb-ember-rgb), .5); }
.kcb-check { display: grid; place-items: center; width: 80px; height: 80px; border-radius: 50%; font-size: 34px; font-weight: 700;
    color: var(--kiosk-pin-ok-ink); background: rgb(var(--kiosk-teal-glow-rgb)); box-shadow: 0 0 0 3px var(--kiosk-brown-deep), 0 0 0 5px rgba(var(--kiosk-teal-glow-rgb), .55); }
.kcb-task.is-late .kcb-check { background: rgb(var(--kiosk-orb-ember-rgb)); box-shadow: 0 0 0 3px var(--kiosk-brown-deep), 0 0 0 5px rgba(var(--kiosk-orb-ember-rgb), .55); }
.kx-stage .kcb-task .kxs-name { font-family: 'Fraunces', serif; font-size: 20px; }
.kx-stage .kcb-line-say { font-size: 16px; line-height: 1.35; color: var(--mud-palette-drawer-text); }
.kx-st.kcb-due { color: rgb(var(--kiosk-rail-ink-rgb)); background: rgba(var(--kiosk-orb-ember-rgb), .4); box-shadow: none; }
.kx-btn.kcb-done { color: var(--kiosk-pin-ok-ink); background: rgb(var(--kiosk-teal-glow-rgb)); box-shadow: 0 0 18px rgba(var(--kiosk-teal-glow-rgb), .35); }

/* thaw pull: three numbered steps, the current one lit */
.kxs-steps { list-style: none; display: flex; flex-direction: column; gap: 6px; margin: 4px 0 0; padding: 0; }
.kxs-step { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 8px 10px 8px 8px;
    border-radius: 16px; background: rgba(var(--kiosk-gold-hi-rgb), .03); box-shadow: inset 0 0 0 1px rgba(var(--kiosk-gold-hi-rgb), .1); }
.kxs-step-n { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; font-size: 18px; font-weight: 800;
    color: var(--mud-palette-drawer-icon); box-shadow: inset 0 0 0 2px rgba(var(--kiosk-gold-hi-rgb), .3); }
.kxs-step-t { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; gap: 2px; line-height: 1.25; }
.kxs-step-t b { font-size: 17px; color: var(--mud-palette-drawer-text); }
.kxs-step-t span { font-size: 15px; color: var(--mud-palette-drawer-icon); }
.kxs-step-w { font-size: 15px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--mud-palette-drawer-icon); }
.kxs-step.is-now { background: rgba(var(--kiosk-teal-glow-rgb), .09); box-shadow: inset 0 0 0 1.5px rgba(var(--kiosk-teal-glow-rgb), .6), 0 0 22px rgba(var(--kiosk-teal-glow-rgb), .14); }
.kxs-step.is-now .kxs-step-n { color: var(--kiosk-brown-deep); background: rgb(var(--kiosk-teal-glow-rgb)); box-shadow: none; }
.kxs-step.is-now .kxs-step-w { color: rgb(var(--kiosk-teal-glow-rgb)); }
.kxs-step.is-done .kxs-step-n { color: var(--kiosk-brown-deep); background: rgb(var(--kiosk-gold-hi-rgb)); box-shadow: none; }
.kxs-step.is-done .kxs-step-w { color: rgb(var(--kiosk-gold-hi-rgb)); }
.kxs-step.is-next { opacity: .78; }

/* runway */
.kxs-risk { grid-template-columns: auto minmax(0, 1fr) minmax(170px, 220px) 140px; }
.kxs-bar { position: relative; display: block; height: 10px; overflow: hidden; border-radius: 5px; background: rgba(var(--kiosk-gold-hi-rgb), .1); }
.kxs-bar > i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 5px; background: rgba(var(--kiosk-gold-hi-rgb), .65); }
.kxs-bar > i.out { background: rgb(var(--kiosk-orb-ember-rgb)); }
.kxs-bar > i.red { background: rgb(var(--kiosk-teal-glow-rgb)); }
.kxs-when { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 14px; font-size: 16px; background: rgba(var(--kiosk-gold-hi-rgb), .05); }
.kxs-when b { font-weight: 800; color: rgb(var(--kiosk-gold-hi-rgb)); }
.kxs-when.out { background: rgba(var(--kiosk-orb-ember-rgb), .14); }
.kxs-when.out b { color: rgb(var(--kiosk-orb-ember-rgb)); }
.kxs-when.red { background: rgba(var(--kiosk-teal-glow-rgb), .08); }
.kxs-when.red b { color: rgb(var(--kiosk-teal-glow-rgb)); }
.kxs-d { font-size: 15px; color: var(--mud-palette-drawer-icon); }
.kxs-arriving { font-size: 15px; font-weight: 700; color: rgb(var(--kiosk-teal-glow-rgb)); }
.kxs-arriving.late, .kxs-arriving.draft { color: rgb(var(--kiosk-orb-ember-rgb)); }
.kxs-need { padding: 10px 12px; border-radius: 14px; text-align: right; background: rgba(var(--kiosk-gold-hi-rgb), .05); }
.kxs-need b { font-family: 'Fraunces', serif; font-size: 1.5rem; font-weight: 800; color: var(--mud-palette-drawer-text); }
.kxs-need .u { font-size: 15px; color: var(--mud-palette-drawer-icon); }
.kxs-need .kxs-d { display: block; }
.kxs-more { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: -4px 0 4px; padding: 12px 16px; border-radius: 18px;
    font-size: 16px; color: var(--mud-palette-drawer-icon); background: rgba(var(--kiosk-gold-rgb), .06); }
.kxs-more strong { color: var(--mud-palette-drawer-text); }
.kxs-msg { font-weight: 700; color: rgb(var(--kiosk-gold-hi-rgb)); }
.kxs-fold { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 8px; padding-top: 14px; font-size: 16px;
    border-top: 1px solid rgba(var(--kiosk-gold-hi-rgb), .14); color: var(--mud-palette-drawer-icon); }
.kxs-fold strong { color: var(--mud-palette-drawer-text); }
.kxs-showall { margin-left: auto; }
.kxs-stocked { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 4px 18px; }
.kxs-stk { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; font-size: 15px; border-bottom: 1px solid rgba(var(--kiosk-gold-hi-rgb), .1); }
.kxs-stk-nm { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--mud-palette-drawer-text); }
.kxs-stk-d { flex: none; white-space: nowrap; color: var(--mud-palette-drawer-icon); }
.kxs-foot { font-size: 15px; color: var(--mud-palette-drawer-icon); }
.kxs-foot a { font-weight: 700; color: rgb(var(--kiosk-gold-hi-rgb)); }

/* orders */
.kxs-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.kxs-card { display: flex; align-items: center; gap: 16px; min-height: 56px; padding: 16px 18px; border-radius: 22px; text-decoration: none;
    color: var(--mud-palette-drawer-text); background: rgba(var(--kiosk-gold-hi-rgb), .04); box-shadow: inset 0 0 0 1px rgba(var(--kiosk-gold-hi-rgb), .16);
    transition: transform .2s ease, box-shadow .2s ease; -webkit-tap-highlight-color: transparent; }
.kxs-card:active { transform: scale(.98); }
.kxs-card:focus-visible { outline: 3px solid rgb(var(--kiosk-teal-glow-rgb)); outline-offset: 3px; }
@media (hover: hover) { .kxs-card:hover { box-shadow: inset 0 0 0 1px rgba(var(--kiosk-gold-rgb), .55), 0 10px 24px rgba(0, 0, 0, .28); } }
.kxs-card-main { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.kxs-card-top { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
.kxs-card-cta { margin-top: 4px; font-size: 16px; font-weight: 800; color: rgb(var(--kiosk-gold-hi-rgb)); }

/* count */
.kxs-counts { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 12px; }
.kxs-count { display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 10px 18px 10px 10px; border-radius: 22px; text-decoration: none;
    color: var(--mud-palette-drawer-text); background: rgba(var(--kiosk-gold-hi-rgb), .04); box-shadow: inset 0 0 0 1px rgba(var(--kiosk-gold-hi-rgb), .16); }
.kxs-count:active { transform: scale(.98); }
.kxs-count .kf-ring { padding: 0; background: none; box-shadow: none; }
.kxs-count .kf-ring-t { display: none; }   /* the card says it */
.kxs-count-t { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.kxs-count-title { font-size: 18px; font-weight: 700; }
.kxs-count-meta { font-size: 15px; color: var(--mud-palette-drawer-icon); }
.kxs-count-go { margin-left: auto; font-size: 16px; font-weight: 800; white-space: nowrap; color: rgb(var(--kiosk-gold-hi-rgb)); }
/* 1348: submitted counts wait for a manager — a card, not a link */
.kxs-count--wait { box-shadow: inset 0 0 0 1px rgba(var(--mud-palette-warning-rgb), .45); }
.kxs-count--wait:active { transform: none; }
.kxs-count-wait { margin-left: auto; font-size: 15px; font-weight: 700; text-align: right; color: var(--mud-palette-warning); }
.kxs-sheet { display: flex; flex-direction: column; gap: 12px; }
.kxs-line.done { background: rgba(var(--kiosk-gold-rgb), .08); }

/* receive (the 1275 lane builds on this markup) */
.kxs .krc { max-width: 1100px; display: flex; flex-direction: column; gap: 4px; }
.kxs .krc .kiosk-back { align-self: flex-start; margin-bottom: 4px; }
.kxs .krc-head .kiosk-page-title { font-size: 2rem; }
.kxs .krc-sub, .kxs .krc-pack, .kxs .krc-qtys, .kxs .krc-note, .kxs .krc-temp-limit { font-size: 15px; color: var(--mud-palette-drawer-icon); }
.kxs .krc-line { align-items: center; gap: 14px 18px; padding: 12px 16px 12px 12px; border: 0; border-radius: 22px;
    background: rgba(var(--kiosk-gold-hi-rgb), .04); box-shadow: inset 0 0 0 1px rgba(var(--kiosk-gold-hi-rgb), .14); }
.kxs .krc-line.short { box-shadow: inset 0 0 0 1.5px rgba(var(--kiosk-gold-rgb), .55); }
.kxs .krc-line.none { box-shadow: inset 0 0 0 1.5px rgba(var(--kiosk-orb-ember-rgb), .55); }
.kxs .krc-line.full { opacity: .8; }
.kxs .krc-item { font-size: 18px; color: var(--mud-palette-drawer-text); }
.kxs .krc-full { color: rgb(var(--kiosk-gold-hi-rgb)); }
.kxs .krc-foot { border-top-color: rgba(var(--kiosk-gold-hi-rgb), .2); }
.kxs .krc-summary { color: var(--mud-palette-drawer-text); }
.kxs .krc-short { color: rgb(var(--kiosk-orb-ember-rgb)); }
.kxs .krc-line.over { box-shadow: inset 0 0 0 2px rgba(var(--kiosk-gold-hi-rgb), .75); }
.kxs .krc-over { color: rgb(var(--kiosk-gold-hi-rgb)); }
.kxs div.krc-over { font-size: 15px; }
.kxs .krc-temp { border: 0; border-radius: 18px; background: rgba(var(--kiosk-gold-hi-rgb), .04); box-shadow: inset 0 0 0 1px rgba(var(--kiosk-gold-hi-rgb), .14); }
.kxs .krc-temp.ok { box-shadow: inset 0 0 0 1.5px rgba(var(--kiosk-teal-glow-rgb), .55); }
.kxs .krc-temp.bad { box-shadow: inset 0 0 0 1.5px rgba(var(--kiosk-orb-ember-rgb), .6); }
.kxs .krc-temp-zone, .kxs .krc-temp-val { color: var(--mud-palette-drawer-text); }
/* 1275: the receive draft (who entered what) */
.kxs .krc-draft { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 4px 0 12px; padding: 12px 16px; border-radius: 18px;
    background: rgba(var(--kiosk-gold-hi-rgb), .04); box-shadow: inset 0 0 0 1px rgba(var(--kiosk-gold-hi-rgb), .14); }
.kxs .krc-draft-meta { font-size: 15px; color: var(--mud-palette-drawer-icon); }
.kxs .krc-ready .krc-draft-meta { margin-top: 4px; }
.kxs .krc-by { margin-top: 4px; font-size: 15px; font-weight: 700; color: rgb(var(--kiosk-teal-glow-rgb)); }
.kxs .krc-by--todo { color: var(--mud-palette-drawer-icon); font-weight: 600; }
/* 1764: something else came. A small round swap button (stepper-key size), the "Came instead" sub-row, its picker sheet */
.krc-swap { all: unset; box-sizing: border-box; display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
    cursor: pointer; color: rgb(var(--kiosk-gold-hi-rgb)); background: rgba(var(--kiosk-gold-hi-rgb), .08);
    box-shadow: inset 0 0 0 1.5px rgba(var(--kiosk-gold-hi-rgb), .3); -webkit-tap-highlight-color: transparent; }
.krc-swap:active { transform: scale(.95); }
.krc-swap:focus-visible { outline: 3px solid rgb(var(--kiosk-teal-glow-rgb)); outline-offset: 3px; }
.kxs .krc-line.swap { box-shadow: inset 0 0 0 2px rgba(var(--kiosk-gold-hi-rgb), .75); }
.krc-instead { flex: 1 0 100%; padding-top: 10px; border-top: 1.5px dashed rgba(var(--kiosk-gold-hi-rgb), .25); }
.krc-instead-label { margin: 0 0 6px 84px; font-size: 15px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
    color: rgb(var(--kiosk-gold-hi-rgb)); }
.krc-instead-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 18px; padding-left: 72px; }
.krc-instead-note { font-size: 15px; color: var(--mud-palette-drawer-icon); }
.kiosk-sheet.krc-pick { width: min(1060px, calc(100vw - 32px)); padding: 24px 26px 20px; }
.krc-pick-title { font: 600 28px/1.2 'Fraunces', serif; }
.krc-pick-sub { margin: 4px 0 14px; font-size: 16px; color: rgba(var(--kiosk-rail-ink-rgb), .75); }
.krc-pick-sec { margin: 16px 0 8px; font-size: 15px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: rgb(var(--kiosk-gold-hi-rgb)); }
.krc-pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.krc-pick-tile .kx-tile-name { font-size: 16px; color: rgb(var(--kiosk-rail-ink-rgb)); }
.krc-pick-tile .kx-tile-meta { font-size: 15px; color: rgba(var(--kiosk-rail-ink-rgb), .6); }
.kx-tile.krc-pick-tile.on { box-shadow: inset 0 0 0 2px rgb(var(--kiosk-teal-glow-rgb)), 0 0 18px rgba(var(--kiosk-teal-glow-rgb), .25); }
.kx-tile.krc-pick-tile.off { opacity: .45; }
.krc-pick-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 18px; padding-top: 14px;
    border-top: 1px solid rgba(var(--kiosk-rail-ink-rgb), .12); font-size: 15px; color: rgba(var(--kiosk-rail-ink-rgb), .7); }

@media (max-width: 1100px) {
    .kxs-row, .kxs-risk { grid-template-columns: auto minmax(0, 1fr); }
    .kxs-row > :nth-child(n+3) { grid-column: 2; }
    .kxs-actions { justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
    .kx-tab, .kx-tile, .kx-btn, button.kxs-row, .kxs-card, .kht-sw, .kht-sw::after { transition: none; }
    .kx-tile:not(:disabled):active, .kx-btn:not(:disabled):active, button.kxs-row:active, .kxs-card:active, .kxs-count:active { transform: none; }
}

/* ===== Day / Tips / Schedule on the stage (1281) ===== */
/* /kiosk/day, /kiosk/tips, /kiosk/schedule and /kiosk/drawer on KioskStage: colours, surfaces and type only. The website
   pieces they host (tip preview, day ledger, staff PINs, the week Board) are restyled under the stage class only, so
   Payroll, Scheduling and the Clock screen keep theirs. */
.kx-stage .kiosk-sheet { color: var(--mud-palette-text-primary); }   /* a sheet keeps its own surface: the stage's cream ink stops here */
:is(.kx-day, .kx-tips, .kx-drawer, .kx-inv, .kx-handoff) .kiosk-page-title { font-size: 2rem; font-weight: 600; line-height: 1.1; text-shadow: 0 1px 12px rgba(0, 0, 0, .55); }
.kx-day .kiosk-sub { font-size: 17px; font-weight: 600; }

/* Day card */
.kx-day .kd-grid { gap: 14px; margin-bottom: 14px; }
.kx-day .kd-card { padding: 16px 20px; border: 0; border-radius: 20px; color: var(--mud-palette-drawer-text);
    background: rgba(var(--kiosk-gold-hi-rgb), .04); box-shadow: inset 0 0 0 1px rgba(var(--kiosk-gold-hi-rgb), .16); }
.kx-day .kd-card--warn { background: rgba(var(--kiosk-orb-ember-rgb), .08); box-shadow: inset 0 0 0 1.5px rgba(var(--kiosk-orb-ember-rgb), .6); }
.kx-day .kd-card-title { margin-bottom: 8px; font-size: 15px; letter-spacing: .1em; opacity: 1; color: var(--mud-palette-drawer-icon); }
.kx-day .kd-big { font-size: 32px; font-weight: 800; color: rgb(var(--kiosk-gold-hi-rgb)); }
.kx-day .kd-card--warn .kd-big { color: rgb(var(--kiosk-orb-ember-rgb)); }
.kx-day .kd-goal { font-size: 15px; font-weight: 600; opacity: 1; color: var(--mud-palette-drawer-icon); }
.kx-day .kd-card--warn .kd-goal { font-weight: 800; color: rgb(var(--kiosk-orb-ember-rgb)); }
.kx-day .kd-meta { font-size: 16px; color: var(--mud-palette-drawer-text); }
.kx-day .kd-meta b { color: rgb(var(--kiosk-gold-hi-rgb)); }
.kx-day .kd-meta .kd-bad, .kx-day .kd-bad { font-weight: 800; color: rgb(var(--kiosk-orb-ember-rgb)); }
.kx-day .kt-section { color: var(--mud-palette-drawer-icon); letter-spacing: .1em; }
.kx-day .kd-recap .kiosk-chips { margin: 4px 0 12px; }
/* 1630: ZCF Zoom goal bands; the chip text carries the goal so colour is never the only cue */
.kx-day .kd-recap .kiosk-chip.kd-band--green:not(.kiosk-sheet *) { color: var(--kiosk-brown-deep); background: rgb(var(--kiosk-ok-rgb)); }
.kx-day .kd-recap .kiosk-chip.kd-band--amber:not(.kiosk-sheet *) { color: var(--kiosk-brown-deep); background: rgb(var(--mud-palette-warning-rgb)); }
.kx-day .kd-recap .kiosk-chip.kd-band--red:not(.kiosk-sheet *) { color: var(--mud-palette-drawer-text); background: rgb(var(--kiosk-orb-ember-rgb)); }
:is(.kx-day, .kx-handoff) .app-field-label, :is(.kx-day, .kx-handoff) .app-field-label * { font-size: 15px; color: var(--mud-palette-drawer-icon); }
:is(.kx-day, .kx-handoff) textarea.ant-input { font-size: 17px; border-radius: 16px; color: var(--mud-palette-drawer-text); color-scheme: dark;
    background: rgba(var(--kiosk-gold-hi-rgb), .05); border-color: rgba(var(--kiosk-gold-hi-rgb), .3); }
:is(.kx-day, .kx-handoff) textarea.ant-input::placeholder { color: rgba(var(--kiosk-rail-ink-rgb), .55); }
:is(.kx-day, .kx-handoff) textarea.ant-input:focus { border-color: rgb(var(--kiosk-gold-rgb)); box-shadow: 0 0 0 3px rgba(var(--kiosk-gold-rgb), .25); }
.kx-day .kt-btn { min-height: 56px; min-width: 140px; padding: 0 26px; border-radius: 999px; font-size: 17px; font-weight: 800; }
.kx-day .kt-btn--main { color: var(--kiosk-brown-deep); border-color: transparent;
    background: linear-gradient(180deg, rgb(var(--kiosk-gold-hi-rgb)), rgb(var(--kiosk-gold-rgb))); box-shadow: 0 0 18px rgba(var(--kiosk-gold-rgb), .35); }
.kx-day .kt-btn--skip { color: rgb(var(--kiosk-gold-hi-rgb)); background: rgba(var(--kiosk-gold-hi-rgb), .06); border-color: rgba(var(--kiosk-gold-hi-rgb), .45); }
/* staff PINs (shared with the Clock screen, which keeps its own look) */
.kx-day .kc-mgr-table td { padding: 10px 8px; border-bottom-color: rgba(var(--kiosk-gold-hi-rgb), .14); }
.kx-day .kc-mgr-name { font-size: 17px; color: var(--mud-palette-drawer-text); }
.kx-day .kc-mgr-pinstate { font-size: 15px; color: var(--mud-palette-drawer-icon); }
.kx-day :is(.kc-mgr-setbtn, .kc-mgr-save, .kc-mgr-cancel) { min-height: 56px; min-width: 56px; padding: 0 22px; border-radius: 999px; font-size: 16px; font-weight: 800; }
.kx-day .kc-mgr-setbtn { color: rgb(var(--kiosk-gold-hi-rgb)); background: rgba(var(--kiosk-gold-hi-rgb), .06); box-shadow: inset 0 0 0 1.5px rgba(var(--kiosk-gold-hi-rgb), .45); }
.kx-day .kc-mgr-save { color: var(--kiosk-brown-deep); background: linear-gradient(180deg, rgb(var(--kiosk-gold-hi-rgb)), rgb(var(--kiosk-gold-rgb))); }
.kx-day .kc-mgr-cancel { color: var(--mud-palette-drawer-text); background: rgba(var(--kiosk-gold-hi-rgb), .08); }
.kx-day .kc-mgr-input { box-sizing: border-box; min-height: 56px; padding: 0 14px; border: 0; border-radius: 14px; font-size: 18px; color-scheme: dark;
    color: var(--mud-palette-drawer-text); background: rgba(var(--kiosk-gold-hi-rgb), .08); box-shadow: inset 0 0 0 1.5px rgba(var(--kiosk-gold-hi-rgb), .35); }
/* print today's logs */
.kx-day .kpl-title { color: var(--mud-palette-drawer-text); }
.kx-day .kpl-text { color: var(--mud-palette-drawer-text); }
.kx-day .kpl-btn { border-radius: 999px; color: var(--kiosk-brown-deep);
    background: linear-gradient(180deg, rgb(var(--kiosk-gold-hi-rgb)), rgb(var(--kiosk-gold-rgb))); box-shadow: 0 0 18px rgba(var(--kiosk-gold-rgb), .35); }
.kx-day .kpl-btn--secondary { border: 0; color: rgb(var(--kiosk-gold-hi-rgb)); background: rgba(var(--kiosk-gold-hi-rgb), .06);
    box-shadow: inset 0 0 0 1.5px rgba(var(--kiosk-gold-hi-rgb), .45); }

/* Tips (was KioskTips' inline <style>) */
.kx-tips .kt { max-width: 1200px; }
.kx-tips .kt-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.kx-tips .kt-datenav { display: flex; align-items: center; gap: 10px; }
.kx-tips .kt-date { min-width: 8.5em; text-align: center; font-size: 19px; font-weight: 800; opacity: 1; color: var(--mud-palette-drawer-text); }
.kx-tips .kt-nav { width: 56px; height: 56px; border: 0; border-radius: 50%; cursor: pointer; font-size: 1.6rem; line-height: 1;
    color: rgb(var(--kiosk-gold-hi-rgb)); background: rgba(var(--kiosk-gold-hi-rgb), .06); box-shadow: inset 0 0 0 1.5px rgba(var(--kiosk-gold-hi-rgb), .4); }
.kx-tips .kt-nav:disabled { opacity: .35; cursor: default; }
.kx-tips .kt-cols { display: flex; gap: 18px; align-items: flex-start; }
.kx-tips .kt-main { flex: 1 1 auto; min-width: 0; }
/* 1103: the ledger sits on a deep-brown pane, so its small muted inks clear 4.5:1 even where the stage's gold glow is brightest */
.kx-tips .kt-ledger { flex: 0 0 clamp(320px, 36%, 480px); position: sticky; top: 8px; padding: 14px 16px; border-radius: 20px;
    background: rgba(var(--kiosk-brown-deep-rgb), .62); box-shadow: inset 0 0 0 1px rgba(var(--kiosk-gold-hi-rgb), .2); }
@media (max-width: 860px) { .kx-tips .kt-cols { flex-direction: column; } .kx-tips .kt-ledger { position: static; width: 100%; flex: 1 1 auto; } }
.kx-tips .kt-locked { margin-bottom: 12px; padding: 12px 16px; border-radius: 16px; font-size: 16px; font-weight: 700; color: rgb(var(--kiosk-gold-hi-rgb));
    background: rgba(var(--kiosk-gold-rgb), .12); box-shadow: inset 0 0 0 1.5px rgba(var(--kiosk-gold-rgb), .6); }
.kx-tips .kt-adjusted { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; padding: 12px 16px; border-radius: 16px;
    cursor: help; font-size: 16px; color: var(--mud-palette-drawer-text); background: rgba(var(--kiosk-orb-ember-rgb), .1);
    box-shadow: inset 5px 0 0 rgb(var(--kiosk-orb-ember-rgb)), inset 0 0 0 1.5px rgba(var(--kiosk-orb-ember-rgb), .55); }
.kx-tips .kt-adjusted-badge { font-weight: 800; white-space: nowrap; color: rgb(var(--kiosk-orb-ember-rgb)); }
.kx-tips .kt-adjusted-reason { font-weight: 600; }
.kx-tips .kt-addwrap { margin-top: 20px; padding-top: 16px; border-top: 2px dashed rgba(var(--kiosk-gold-hi-rgb), .22); }
.kx-tips .kt-addtitle { margin-bottom: 10px; font-size: 19px; font-weight: 800; color: rgb(var(--kiosk-gold-hi-rgb)); }
.kx-tips .kt-form { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.kx-tips .kt-field { display: flex; flex-direction: column; gap: 6px; }
.kx-tips .kt-field label { font-size: 15px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--mud-palette-drawer-icon); }
.kx-tips :is(.kt-select, .kt-amount) { box-sizing: border-box; min-width: 8em; min-height: 56px; padding: 0 14px; border: 0; border-radius: 16px;
    font-size: 18px; color-scheme: dark; color: var(--mud-palette-drawer-text); background: rgba(var(--kiosk-gold-hi-rgb), .06);
    box-shadow: inset 0 0 0 1.5px rgba(var(--kiosk-gold-hi-rgb), .35); }
.kx-tips .kt-select option { color: var(--mud-palette-drawer-text); background: var(--kiosk-brown-mid); }
.kx-tips .kt-amount { width: 7em; font-weight: 700; }
.kx-tips :is(.kt-select, .kt-amount):focus-visible { outline: 3px solid rgb(var(--kiosk-teal-glow-rgb)); outline-offset: 2px; }
.kx-tips :is(.kt-add, .kt-secondary) { min-height: 56px; padding: 0 26px; border: 0; border-radius: 999px; cursor: pointer; font-size: 17px; font-weight: 800; }
.kx-tips .kt-add { color: var(--kiosk-brown-deep); background: linear-gradient(180deg, rgb(var(--kiosk-gold-hi-rgb)), rgb(var(--kiosk-gold-rgb)));
    box-shadow: 0 0 18px rgba(var(--kiosk-gold-rgb), .35); }
.kx-tips .kt-secondary { color: rgb(var(--kiosk-gold-hi-rgb)); background: rgba(var(--kiosk-gold-hi-rgb), .06); box-shadow: inset 0 0 0 1.5px rgba(var(--kiosk-gold-hi-rgb), .45); }
.kx-tips :is(.kt-add, .kt-secondary):disabled { opacity: .45; cursor: default; }
.kx-tips .kt-added { padding: 16px 18px; border-radius: 18px; background: rgba(var(--kiosk-teal-glow-rgb), .09);
    box-shadow: inset 0 0 0 1.5px rgba(var(--kiosk-teal-glow-rgb), .55); }
.kx-tips .kt-added-msg { font-size: 17px; font-weight: 800; color: rgb(var(--kiosk-teal-glow-rgb)); }
.kx-tips .kt-added-q { margin: 8px 0 12px; font-size: 17px; font-weight: 700; color: var(--mud-palette-drawer-text); }
.kx-tips .kt-added-btns { display: flex; gap: 12px; flex-wrap: wrap; }
/* tip preview (shared with Payroll) */
.kx-tips :is(.tipprev-pool, .tipprev-card) { border: 0; border-radius: 18px; background: rgba(var(--kiosk-gold-hi-rgb), .04);
    box-shadow: inset 0 0 0 1px rgba(var(--kiosk-gold-hi-rgb), .16); }
.kx-tips .tipprev-pool--total { background: rgba(var(--kiosk-gold-rgb), .12); box-shadow: inset 0 0 0 1.5px rgba(var(--kiosk-gold-rgb), .6); }
.kx-tips .tipprev-pool-lbl { font-size: 15px; color: var(--mud-palette-drawer-icon); }
.kx-tips .tipprev-pool-amt { font-size: 1.7rem; color: var(--mud-palette-drawer-text); }
.kx-tips .tipprev-pool--total .tipprev-pool-amt { color: rgb(var(--kiosk-gold-hi-rgb)); }
.kx-tips .tipprev-pool--total .tipprev-pool-lbl { color: var(--mud-palette-drawer-text); }   /* 1103: the muted gold was 3.8:1 on the gold-tinted tile */
.kx-tips .tipprev-policy { font-size: 15px; color: var(--mud-palette-drawer-icon); }
.kx-tips .tipprev-note { font-size: 15px; border-radius: 12px; color: rgb(var(--kiosk-gold-hi-rgb)); background: rgba(var(--kiosk-gold-rgb), .1);
    border-color: rgba(var(--kiosk-gold-rgb), .5); }
.kx-tips .tipprev-pullchip { font-size: 15px; color: var(--mud-palette-drawer-text); background: rgba(var(--kiosk-gold-hi-rgb), .05);
    border-color: rgba(var(--kiosk-gold-hi-rgb), .3); }
.kx-tips .tipprev-pullamt { color: rgb(var(--kiosk-gold-hi-rgb)); }
.kx-tips .tipprev-avatar { color: var(--kiosk-brown-deep); background: linear-gradient(135deg, rgb(var(--kiosk-gold-hi-rgb)), rgb(var(--kiosk-gold-rgb))); }
.kx-tips .tipprev-name { font-size: 17px; color: var(--mud-palette-drawer-text); }
.kx-tips .tipprev-basis { padding: 2px 10px; font-size: 15px; background: transparent; }
.kx-tips .tipprev-basis--clock { color: rgb(var(--kiosk-teal-glow-rgb)); box-shadow: inset 0 0 0 1.5px rgba(var(--kiosk-teal-glow-rgb), .55); }
.kx-tips .tipprev-basis--sched { color: rgb(var(--kiosk-gold-hi-rgb)); box-shadow: inset 0 0 0 1.5px rgba(var(--kiosk-gold-hi-rgb), .45); }
.kx-tips .tipprev-basis--x { color: var(--mud-palette-drawer-icon); box-shadow: inset 0 0 0 1px rgba(var(--kiosk-gold-hi-rgb), .25); }
.kx-tips :is(.tipprev-role, .tipprev-sub, .tipprev-card-amt) { font-size: 15px; color: var(--mud-palette-drawer-icon); }
.kx-tips .tipprev-cash { font-size: 1.3rem; color: rgb(var(--kiosk-teal-glow-rgb)); }
.kx-tips .tipprev-total { font-size: 1.25rem; color: rgb(var(--kiosk-gold-hi-rgb)); }
.kx-tips .tipprev-empty { font-size: 16px; color: var(--mud-palette-drawer-icon); }
/* day ledger (shared with Payroll; its base rules are in theme-polish.css, which these two-class rules override on the stage) */
.kx-tips .tdl-title { font-size: 17px; color: rgb(var(--kiosk-gold-hi-rgb)); }
.kx-tips .tdl-empty { font-size: 16px; color: var(--mud-palette-drawer-icon); }
.kx-tips .tdl-row { padding: 10px 0; border-bottom-color: rgba(var(--kiosk-gold-hi-rgb), .16); }
.kx-tips .tdl-win { font-size: 16px; color: var(--mud-palette-drawer-text); }
.kx-tips .tdl-amt { font-size: 17px; color: rgb(var(--kiosk-teal-glow-rgb)); }
.kx-tips .tdl-amt.tdl-amt--empty { color: var(--mud-palette-drawer-icon); }
.kx-tips .tdl-audit { font-size: 15px; color: var(--mud-palette-drawer-icon); }
.kx-tips .tdl-crew-txt { font-size: 15px; color: var(--mud-palette-drawer-icon); }
.kx-tips .tdl-card .tdl-win { color: var(--mud-palette-drawer-text); }
/* 1103: ember text is ~3.6:1 on dark brown at best; lifted toward the drawer cream it reads, and still says "late" */
.kx-tips :is(.tdl-adjust-txt, .tdl-flag--open) { color: color-mix(in srgb, rgb(var(--kiosk-orb-ember-rgb)) 62%, var(--mud-palette-drawer-text)); }
.kx-tips .tdl-adjust-txt { font-size: 15px; }
.kx-tips .tdl-flag { font-size: 15px; }
.kx-tips .tdl-flag--open { background: rgba(var(--kiosk-orb-ember-rgb), .14); }
.kx-tips .tdl-flag--snoozed { color: var(--mud-palette-drawer-icon); background: transparent; border-color: rgba(var(--kiosk-orb-ember-rgb), .55); }
.kx-tips .tdl-sum { font-size: 17px; color: rgb(var(--kiosk-gold-hi-rgb)); border-top-color: rgba(var(--kiosk-gold-hi-rgb), .3); }
/* 1497: Today / My tips tabs + the PIN-verified staffer's own tips */
.kx-tips .kt-head > .kx-tabs { margin-right: auto; }
.kx-tips .kmt-wrap { margin-top: 14px; }
.kx-tips .kmt { display: flex; flex-direction: column; gap: 18px; }
.kx-tips :is(.kmt-intro, .kmt-empty, .kmt-none, .kmt-by, .kmt-formhelp) { font-size: 16px; line-height: 1.45; color: var(--mud-palette-drawer-icon); }
.kx-tips .kmt-period { display: flex; flex-direction: column; gap: 12px; padding: 16px 18px; border-radius: 20px;
    background: rgba(var(--kiosk-gold-hi-rgb), .04); box-shadow: inset 0 0 0 1px rgba(var(--kiosk-gold-hi-rgb), .18); }
.kx-tips .kmt-phead { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.kx-tips .kmt-ptitle { font-size: 15px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--mud-palette-drawer-icon); }
.kx-tips .kmt-prange { font-size: 21px; font-weight: 800; color: var(--mud-palette-drawer-text); }
.kx-tips .kmt-status { padding: 8px 16px; border-radius: 999px; font-size: 15px; font-weight: 800; white-space: nowrap; }
.kx-tips .kmt-status--inprogress { color: rgb(var(--kiosk-teal-glow-rgb)); box-shadow: inset 0 0 0 1.5px rgba(var(--kiosk-teal-glow-rgb), .55); }
.kx-tips :is(.kmt-status--locked, .kmt-status--senttopayroll) { color: rgb(var(--kiosk-gold-hi-rgb)); background: rgba(var(--kiosk-gold-hi-rgb), .08); }
.kx-tips .kmt-totals { display: flex; flex-wrap: wrap; gap: 10px; }
.kx-tips .kmt-pill { flex: 1 1 120px; display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border-radius: 16px;
    background: rgba(var(--kiosk-gold-hi-rgb), .05); }
.kx-tips .kmt-pill span { font-size: 15px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--mud-palette-drawer-icon); }
.kx-tips .kmt-pill strong { font-size: 1.3rem; font-variant-numeric: tabular-nums; color: var(--mud-palette-drawer-text); }
.kx-tips .kmt-pill--total strong { color: rgb(var(--kiosk-gold-hi-rgb)); }
.kx-tips .kmt-days { display: flex; flex-direction: column; }
.kx-tips .kmt-day { display: grid; grid-template-columns: 8.5em 4.5em 1fr 1fr 6em auto; align-items: center; gap: 6px 12px; padding: 10px 2px;
    font-size: 17px; font-variant-numeric: tabular-nums; color: var(--mud-palette-drawer-text); border-bottom: 1px solid rgba(var(--kiosk-gold-hi-rgb), .14); }
.kx-tips .kmt-dday { font-weight: 800; }
.kx-tips :is(.kmt-dcash) { color: rgb(var(--kiosk-teal-glow-rgb)); }
.kx-tips .kmt-dcard { color: var(--mud-palette-drawer-icon); }
.kx-tips .kmt-dtotal { text-align: right; color: rgb(var(--kiosk-gold-hi-rgb)); }
.kx-tips .kmt-dflags { display: flex; gap: 6px; justify-content: flex-end; }
.kx-tips .kmt-adjusted { font-size: 15px; font-weight: 800; white-space: nowrap;
    color: color-mix(in srgb, rgb(var(--kiosk-orb-ember-rgb)) 62%, var(--mud-palette-drawer-text)); }
.kx-tips .kmt-live { font-size: 15px; font-weight: 700; padding: 2px 10px; border-radius: 999px; color: var(--mud-palette-drawer-icon);
    box-shadow: inset 0 0 0 1px rgba(var(--kiosk-gold-hi-rgb), .3); }
.kx-tips .kmt-report { padding: 10px 14px; border-radius: 14px; font-size: 16px; color: var(--mud-palette-drawer-text);
    background: rgba(var(--kiosk-orb-ember-rgb), .10); }
.kx-tips .kmt-locked { margin: 0; }
.kx-tips .kmt-actions, .kx-tips .kmt-formbtns { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.kx-tips .kmt-form { display: flex; flex-direction: column; gap: 12px; padding-top: 12px; border-top: 2px dashed rgba(var(--kiosk-gold-hi-rgb), .22); }
.kx-tips .kmt-formtitle { font-size: 19px; font-weight: 800; color: rgb(var(--kiosk-gold-hi-rgb)); }
.kx-tips .kmt-amount { all: unset; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer;
    max-width: 26em; min-height: 64px; padding: 0 20px; border-radius: 16px; color: var(--kiosk-brown-deep); background: rgb(var(--kiosk-latte-rgb)); }
.kx-tips .kmt-amount span { font-size: 15px; font-weight: 800; }
.kx-tips .kmt-amount strong { font-size: 1.6rem; font-variant-numeric: tabular-nums; }
.kx-tips .kmt-amount:focus-visible { outline: 3px solid rgb(var(--kiosk-teal-glow-rgb)); outline-offset: 2px; }
.kx-tips .kmt-form .app-field-wrap { max-width: 26em; }
.kx-tips .kmt-done { display: flex; justify-content: flex-end; }
@media (max-width: 860px) { .kx-tips .kmt-day { grid-template-columns: 1fr auto; } .kx-tips :is(.kmt-dcash, .kmt-dcard) { font-size: 15px; } }

/* Schedule: the stage joins the scroll chain, so the header stays and the day scrolls (1037) */
.kx-stage.kx-sched { flex: 1 1 auto; min-height: 0; }
.kx-sched .ksd-arrow { border: 0; border-radius: 50%; color: rgb(var(--kiosk-gold-hi-rgb)); background: rgba(var(--kiosk-gold-hi-rgb), .06);
    box-shadow: inset 0 0 0 1.5px rgba(var(--kiosk-gold-hi-rgb), .4); }
.kx-sched .ksd-arrow:active { background: rgba(var(--kiosk-gold-rgb), .2); }
.kx-sched .ksd-dayname { font-size: 2rem; font-weight: 600; color: var(--mud-palette-drawer-text); text-shadow: 0 1px 12px rgba(0, 0, 0, .55); }
.kx-sched .ksd-date { font-size: 19px; font-weight: 600; color: var(--mud-palette-drawer-icon); }
.kx-sched .ksd-today-chip { padding: 4px 14px; border-radius: 999px; font-size: 15px; color: var(--kiosk-brown-deep); background: rgb(var(--kiosk-teal-glow-rgb)); }
.kx-sched .ksd-jump { min-height: 56px; padding: 0 22px; border: 0; border-radius: 999px; font-size: 16px; font-weight: 800;
    color: rgb(var(--kiosk-gold-hi-rgb)); background: rgba(var(--kiosk-gold-hi-rgb), .06); box-shadow: inset 0 0 0 1.5px rgba(var(--kiosk-gold-hi-rgb), .45); }
.kx-sched .ksd-toggle { gap: 0; padding: 5px; border-radius: 999px; background: rgba(var(--kiosk-gold-hi-rgb), .05);
    box-shadow: inset 0 0 0 1px rgba(var(--kiosk-gold-hi-rgb), .16); }
.kx-sched .ksd-tgl { min-height: 56px; padding: 0 24px; border: 0; border-radius: 999px; font-size: 17px; font-weight: 800;
    color: var(--mud-palette-drawer-icon); background: transparent; }
.kx-sched .ksd-tgl-on { color: var(--kiosk-brown-deep); background: linear-gradient(180deg, rgb(var(--kiosk-gold-hi-rgb)), rgb(var(--kiosk-gold-rgb)));
    box-shadow: 0 0 16px rgba(var(--kiosk-gold-rgb), .4); }
.kx-sched .ksd-mgr-btn { min-height: 56px; padding: 0 22px; border-radius: 999px; font-size: 16px; color: var(--mud-palette-drawer-icon);
    border-color: rgba(var(--kiosk-gold-hi-rgb), .4); }
.kx-sched .ksd-mgr-btn:hover, .kx-sched .ksd-mgr-btn:focus-visible { color: rgb(var(--kiosk-gold-hi-rgb)); border-color: rgb(var(--kiosk-gold-rgb)); }
.kx-sched .ksd-mgrbar { border: 0; border-radius: 18px; background: rgba(var(--kiosk-teal-glow-rgb), .09);
    box-shadow: inset 0 0 0 1.5px rgba(var(--kiosk-teal-glow-rgb), .55); }
.kx-sched .ksd-mgrbar-txt { font-size: 17px; color: var(--mud-palette-drawer-text); }
.kx-sched .ksd-mgrbar-txt strong { color: rgb(var(--kiosk-teal-glow-rgb)); }
/* day board: hour rail, blocks (the role band and wash stay inline), now line in the Floor's teal */
.kx-sched .ksd-hr { font-size: 15px; color: var(--mud-palette-drawer-icon); }
.kx-sched .ksd-body { border-left-color: rgba(var(--kiosk-gold-hi-rgb), .2); }
.kx-sched .ksd-line { border-top-color: rgba(var(--kiosk-gold-hi-rgb), .1); }
.kx-sched .ksd-now { border-top-color: rgb(var(--kiosk-teal-glow-rgb)); }
.kx-sched .ksd-now::before { background: rgb(var(--kiosk-teal-glow-rgb)); }
.kx-sched .ksd-blk { border-color: rgba(var(--kiosk-gold-hi-rgb), .16); color: var(--mud-palette-drawer-text); background: rgba(var(--kiosk-gold-hi-rgb), .05);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .25); }
.kx-sched :is(.ksd-time, .ksd-role, .ksd-clock-status) { color: var(--mud-palette-drawer-icon); }
.kx-sched .ksd-brk { color: rgb(var(--kiosk-gold-hi-rgb)); }
.kx-sched .ksd-pub { color: rgb(var(--kiosk-teal-glow-rgb)); }
.kx-sched .ksd-dot { box-shadow: 0 0 0 2px var(--kiosk-brown-deep); }
.kx-sched .ksd-blk .sched-presence--in, .kx-sched .ksd-clock-status--in { color: rgb(var(--kiosk-teal-glow-rgb)); }
.kx-sched .ksd-blk .sched-presence--done { color: var(--mud-palette-drawer-icon); }
.kx-sched .ksd-blk .sched-presence--none { color: rgba(var(--kiosk-rail-ink-rgb), .45); }
.kx-sched .ksd-blk .sched-att-badge { font-size: 15px; color: rgb(var(--kiosk-orb-ember-rgb)); background: rgba(var(--kiosk-orb-ember-rgb), .14); }
/* the PIN holder's own shift: lit gold, like a picked tile */
.kx-sched .ksd-mine { color: var(--kiosk-brown-deep); background: linear-gradient(180deg, rgb(var(--kiosk-gold-hi-rgb)), rgb(var(--kiosk-gold-rgb))) !important;
    box-shadow: 0 0 22px rgba(var(--kiosk-gold-rgb), .4); }
.kx-sched .ksd-mine :is(.ksd-time, .ksd-role, .ksd-brk, .ksd-pub, .ksd-clock-status, .sched-presence) { color: inherit; }
/* open slot: dashed ember, the word "Open" says it (the dark-theme warning rule has four classes too) */
.kx-sched .ksd-open { border-color: rgba(var(--kiosk-orb-ember-rgb), .75); background: rgba(var(--kiosk-orb-ember-rgb), .08); }
.kx-stage.kx-sched .ksd-open .ksd-who, .kx-stage.kx-sched .ksd-reopened { color: rgb(var(--kiosk-orb-ember-rgb)); }
.kx-sched .ksd-clock-btn { border-radius: 999px; }
.kx-sched .ksd-clock-btn--in { color: var(--kiosk-brown-deep); background: rgb(var(--kiosk-teal-glow-rgb)); }
.kx-sched .ksd-clock-btn--out { color: var(--kiosk-brown-deep); background: rgb(var(--kiosk-orb-ember-rgb)); }
.kx-sched .ksd-clock-btn:focus-visible { outline-color: rgb(var(--kiosk-gold-hi-rgb)); }
/* 1351: still clocked in past the shift's end: cherry edge and ring, the words in a cherry pill, a 56 px Clock Out (tail: by .ksd-now) */
.kx-sched .ksd-blk.ksd-blk--over { border: 2px solid rgba(var(--kiosk-orb-ember-rgb), .85); border-left: 7px solid rgb(var(--kiosk-orb-ember-rgb));
    box-shadow: 0 6px 16px rgba(0, 0, 0, .25), 0 0 20px rgba(var(--kiosk-orb-ember-rgb), .3); }
.kx-sched .ksd-blk .ksd-clock-status.ksd-clock-status--over { padding: 4px 12px; border-radius: 999px; font-size: 16px; font-weight: 800;
    font-variant-numeric: tabular-nums; color: var(--kiosk-brown-deep); background: rgb(var(--kiosk-orb-ember-rgb)); }
.kx-sched .ksd-clock-btn.ksd-clock-btn--urgent { min-height: 56px; padding: 0 24px; font-size: 18px;
    box-shadow: 0 0 0 3px rgba(var(--kiosk-orb-ember-rgb), .35), 0 0 18px rgba(var(--kiosk-orb-ember-rgb), .5); }
.kx-sched .ksd-walkin { font-size: 16px; color: var(--mud-palette-drawer-icon); }
.kx-sched .ksd-walkin a { display: inline-flex; align-items: center; padding: 0 12px; color: rgb(var(--kiosk-gold-hi-rgb)); }
/* 1407: the corrected-punch tag reads gold on the dark stage, and inks itself on the PIN holder's gold block */
.kx-sched .ksd-edited { font-size: 15px; color: rgb(var(--kiosk-gold-hi-rgb)); background: rgba(var(--kiosk-gold-hi-rgb), .12);
    box-shadow: inset 0 0 0 1px rgba(var(--kiosk-gold-hi-rgb), .45); }
.kx-sched .ksd-mine .ksd-edited { color: inherit; background: transparent; box-shadow: inset 0 0 0 1px currentColor; }
/* the week is the website's Board (ADR-0113): it keeps its theme surface, framed on the stage */
.kx-sched .ksd-weekboard { padding: 10px; border-radius: 20px; color: var(--mud-palette-text-primary); background: var(--mud-palette-surface);
    box-shadow: 0 0 0 1px rgba(var(--kiosk-gold-hi-rgb), .2), 0 18px 40px rgba(0, 0, 0, .35); }

/* Drawer: over / short / balanced stay words; the inks only echo them (teal balanced, gold over, ember short) */
.kx-drawer .kdr-hint { font-size: 16px; color: var(--mud-palette-drawer-icon); }
.kx-drawer .zg-progress { --tone: rgb(var(--kiosk-gold-rgb)); }
/* the PIN bar's buttons reach wall size (its caramel look is kiosk-wide, below) */
.kx-drawer .kg-switch { font-size: 15px; }
.page.kiosk-mode .kx-drawer :is(.kg-switch, .kg-keep):not(.kiosk-sheet *) { min-height: 56px; }
/* bill & coin grid: each face in its own cell (a sum no longer runs into the next label), wide enough for 56 px steppers */
.kx-drawer .kdr-denoms { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 10px 14px; }
.kx-drawer .kdr-denom { grid-template-columns: 64px auto 1fr; padding: 6px 18px 6px 16px; border-radius: 22px;
    background: rgba(var(--kiosk-gold-hi-rgb), .03); box-shadow: inset 0 0 0 1px rgba(var(--kiosk-gold-hi-rgb), .1); }
.kx-drawer .kdr-denom-label { font-size: 19px; color: var(--mud-palette-drawer-text); }
.kx-drawer .kdr-denom-sum { font-size: 17px; font-weight: 700; color: rgb(var(--kiosk-gold-hi-rgb)); }
.kx-drawer .kiosk-stepper--sm .kiosk-stepper-btn { width: 56px; }
.kx-drawer .kiosk-stepper--sm .kiosk-stepper-val { min-width: 72px; font-size: 19px; }
.page.kiosk-mode .kx-drawer .kiosk-stepper--sm :is(.kiosk-stepper-btn, .kiosk-stepper-val):not(.kiosk-sheet *) { min-height: 56px; }
.kx-drawer .kiosk-amount { border-radius: 18px; }
.page.kiosk-mode .kx-drawer .kiosk-amount:not(.kiosk-sheet *) { min-height: 64px; }   /* its own 64 px lost to the 48 px button floor */
.kx-drawer .kiosk-amount:disabled { color: rgb(var(--kiosk-gold-hi-rgb)); background: transparent; border-color: rgba(var(--kiosk-gold-hi-rgb), .2); }
.kx-drawer .kdr-variance { padding: 10px 24px; border-radius: 999px; font-size: 26px; }
.kx-drawer .kdr-variance.ok { color: rgb(var(--kiosk-teal-glow-rgb)); background: rgba(var(--kiosk-teal-glow-rgb), .1);
    box-shadow: inset 0 0 0 1.5px rgba(var(--kiosk-teal-glow-rgb), .55); }
.kx-drawer .kdr-variance.over { color: rgb(var(--kiosk-gold-hi-rgb)); background: rgba(var(--kiosk-gold-rgb), .12);
    box-shadow: inset 0 0 0 1.5px rgba(var(--kiosk-gold-rgb), .6); }
.kx-drawer .kdr-variance.short { color: rgb(var(--kiosk-orb-ember-rgb)); background: rgba(var(--kiosk-orb-ember-rgb), .12);
    box-shadow: inset 0 0 0 1.5px rgba(var(--kiosk-orb-ember-rgb), .6); }
/* 1633: the short/over checklist and low $5s / $1s, in ember words */
.kdr-checklist { margin-top: 12px; padding: 12px 18px; border-radius: 20px; background: rgba(var(--kiosk-orb-ember-rgb), .06);
    box-shadow: inset 0 0 0 1px rgba(var(--kiosk-orb-ember-rgb), .3); }
.kdr-checklist ol { margin: 6px 0 8px; padding-left: 22px; display: flex; flex-direction: column; gap: 4px; font-size: 16px; line-height: 1.35; }
.kdr-checklist[data-band="High"] .kdr-warn { color: rgb(var(--kiosk-orb-ember-rgb)); }
.kdr-low { margin-top: 8px; padding: 6px 14px; border-radius: 14px; font-size: 16px; font-weight: 600; color: rgb(var(--kiosk-orb-ember-rgb));
    box-shadow: inset 0 0 0 1px rgba(var(--kiosk-orb-ember-rgb), .45); }
/* shift drops + deposit math */
.kx-drawer .kdr-drops { padding: 14px 18px; border-radius: 20px; background: rgba(var(--kiosk-gold-hi-rgb), .04);
    box-shadow: inset 0 0 0 1px rgba(var(--kiosk-gold-hi-rgb), .16); }
.kx-drawer .kdr-drop { padding: 10px 0; font-size: 17px; color: var(--mud-palette-drawer-text); border-bottom-color: rgba(var(--kiosk-gold-hi-rgb), .14); }
.kx-drawer .kdr-drop-who { color: var(--mud-palette-drawer-icon); }
.kx-drawer .kdr-amt { font-weight: 800; color: rgb(var(--kiosk-gold-hi-rgb)); }
.kx-drawer .kdr-deposit { margin-top: 12px; font-size: 18px; color: var(--mud-palette-drawer-text); }
.kx-drawer .kdr-deposit b { font-size: 22px; color: rgb(var(--kiosk-gold-hi-rgb)); }
/* result + second counter */
.kx-drawer .kdr-warn { font-weight: 700; color: rgb(var(--kiosk-orb-ember-rgb)); }
.kx-drawer .kdr-witness { padding: 16px 20px; border: 2px dashed rgba(var(--kiosk-gold-hi-rgb), .35); border-radius: 20px;
    background: rgba(var(--kiosk-gold-hi-rgb), .03); }
.kx-drawer .kdr-witness-done { font-size: 19px; color: rgb(var(--kiosk-teal-glow-rgb)); }
/* closed drawers + count sheet */
.kx-drawer .kiosk-side { padding: 16px 18px; }
.kx-drawer .kiosk-side-title { font-size: 20px; }
.kx-drawer .kiosk-side-row { padding: 8px 0; font-size: 16px; }
.kx-drawer .kdr-log { padding: 10px 0; border-bottom-color: rgba(var(--kiosk-gold-hi-rgb), .14); }
.kx-drawer .kdr-log-head { font-size: 16px; color: var(--mud-palette-drawer-text); }
.kx-drawer .kdr-os { white-space: nowrap; }
.kx-drawer .kdr-os.ok { color: rgb(var(--kiosk-teal-glow-rgb)); }
.kx-drawer .kdr-os.over { color: rgb(var(--kiosk-gold-hi-rgb)); }
.kx-drawer .kdr-os.short { color: rgb(var(--kiosk-orb-ember-rgb)); }

/* PIN gate kiosk-wide, the Floor too (owner 10/7: nothing stark white): staff tiles on a page and the signed-in bar are
   caramel / latte with espresso ink; gold marks the active person. Sheets and the Clock card are the dark orb sheet (1791). */
.page.kiosk-mode .kiosk-picker-sub { font-size: 15px; }
.page.kiosk-mode .kiosk-picker-tile { min-height: 56px; border: 0; border-radius: 18px; font-size: 16px; color: var(--kiosk-brown-deep);
    background: linear-gradient(180deg, rgb(var(--kiosk-latte-rgb)), rgb(var(--kiosk-caramel-rgb)));
    box-shadow: inset 0 0 0 1.5px rgba(var(--kiosk-gold-hi-rgb), .55), 0 6px 16px rgba(0, 0, 0, .28); }
@media (hover: hover) {
    .page.kiosk-mode .kiosk-picker-tile:hover { box-shadow: inset 0 0 0 2px rgb(var(--kiosk-gold-hi-rgb)), 0 10px 22px rgba(0, 0, 0, .32); }
}
.page.kiosk-mode .kiosk-picker-tile:active { transform: scale(.97); }
.page.kiosk-mode .kiosk-picker-avatar { color: rgb(var(--kiosk-gold-hi-rgb)); background: var(--kiosk-brown-deep); }
.page.kiosk-mode .kiosk-picker-name { font-size: 17px; font-weight: 800; color: var(--kiosk-brown-deep); }
.page.kiosk-mode .kiosk-picker-shift { font-size: 15px; font-weight: 800; color: var(--kiosk-brown-mid); }
.page.kiosk-mode .kiosk-picker-tile.kc-tile--on { background: linear-gradient(180deg, rgb(var(--kiosk-gold-hi-rgb)), rgb(var(--kiosk-gold-rgb)));
    box-shadow: 0 0 0 3px rgb(var(--kiosk-gold-hi-rgb)), 0 0 28px rgba(var(--kiosk-gold-rgb), .7); }
.page.kiosk-mode :is(.kiosk-picker-link, .kiosk-keypad-link) { min-height: 56px; font-size: 16px; font-weight: 700; }
/* signed in: a caramel pill, the person's initials ringed gold */
.page.kiosk-mode .kg-bar { gap: 10px 16px; padding: 8px 8px 8px 10px; border: 0; border-radius: 999px; color: var(--kiosk-brown-deep);
    background: rgb(var(--kiosk-caramel-rgb)); box-shadow: inset 0 0 0 1.5px rgba(var(--kiosk-gold-hi-rgb), .5), 0 6px 18px rgba(0, 0, 0, .3); }
.page.kiosk-mode .kg-bar--ending { box-shadow: inset 0 0 0 2px rgb(var(--kiosk-orb-ember-rgb)), 0 0 0 4px rgba(var(--kiosk-orb-ember-rgb), .3); }
.page.kiosk-mode .kg-actor { gap: 12px; font-size: 17px; font-weight: 800; color: var(--kiosk-brown-deep); }
.page.kiosk-mode .kg-avatar { width: 44px; height: 44px; font-size: 16px; color: rgb(var(--kiosk-gold-hi-rgb)); background: var(--kiosk-brown-deep);
    box-shadow: 0 0 0 3px rgb(var(--kiosk-gold-hi-rgb)); }
.page.kiosk-mode .kg-countdown { font-size: 16px; color: var(--kiosk-brown-deep); }
.page.kiosk-mode :is(.kg-switch, .kg-keep) { min-height: 56px; padding: 0 22px; border: 0; border-radius: 999px; font-size: 16px; font-weight: 800;
    text-decoration: none; }
.page.kiosk-mode .kg-switch { color: rgb(var(--kiosk-gold-hi-rgb)); background: var(--kiosk-brown-deep); }
.page.kiosk-mode .kg-keep { color: var(--kiosk-brown-deep); background: linear-gradient(180deg, rgb(var(--kiosk-gold-hi-rgb)), rgb(var(--kiosk-gold-rgb))); }
/* the PIN sheet and the Clock card are the dark orb sheet (1791, top of file); their own pieces */
.page.kiosk-mode .kiosk-sheet:not(.kfc *) .kg-bar { background: rgba(var(--kiosk-rail-ink-rgb), .05); }
.page.kiosk-mode .kiosk-sheet:not(.kfc *) .kg-bar:not(.kg-bar--ending) { box-shadow: inset 0 0 0 1px rgba(var(--kiosk-gold-rgb), .35); }
.page.kiosk-mode .kiosk-sheet:not(.kfc *) :is(.kg-actor, .kg-countdown) { color: rgb(var(--kiosk-rail-ink-rgb)); }
.page.kiosk-mode .kg-sheet:not(.kfc *) .kg-prompt { font: 600 22px/1.3 'Fraunces', serif; }
.page.kiosk-mode :is(.kiosk-sheet:not(.kfc *), .kiosk-clock) .kc-face { border-color: rgba(var(--kiosk-gold-rgb), .55); }
.page.kiosk-mode .kiosk-clock .kc-pill { font-size: 15px; }
.page.kiosk-mode .kiosk-clock .kc-pill--in { color: rgb(var(--kiosk-gold-hi-rgb)); background: rgba(var(--kiosk-gold-rgb), .14); border-color: rgba(var(--kiosk-gold-rgb), .55); }
.page.kiosk-mode .kiosk-clock .kc-pill--out { color: rgb(var(--kiosk-teal-glow-rgb)); background: rgba(var(--kiosk-teal-glow-rgb), .1);
    border-color: rgba(var(--kiosk-teal-glow-rgb), .5); }
.page.kiosk-mode .kiosk-clock .kc-pill--out::before { background: rgb(var(--kiosk-teal-glow-rgb)); border-color: rgba(var(--kiosk-teal-glow-rgb), .25); }
.page.kiosk-mode .kiosk-clock .kc-pill--break { color: rgb(var(--kiosk-rail-ink-rgb)); background: rgba(var(--kiosk-rail-ink-rgb), .06);
    border-color: rgba(var(--kiosk-rail-ink-rgb), .25); }
.page.kiosk-mode .kiosk-clock :is(.kc-mgr-note, .kc-mgr-link) { font-size: 16px; }
.page.kiosk-mode .kiosk-clock :is(.kc-on, .kc-break, .kc-off, .kc-mgr-link) { font-weight: 800; }
.page.kiosk-mode .kiosk-clock .kc-on { color: rgb(var(--kiosk-teal-glow-rgb)); }
.page.kiosk-mode .kiosk-clock :is(.kc-break, .kc-mgr-link) { color: rgb(var(--kiosk-gold-hi-rgb)); }
.page.kiosk-mode .kiosk-clock :is(.kc-mgr-pinstate, .kiosk-muted) { font-size: 15px; }
.page.kiosk-mode .kiosk-clock :is(.kc-mgr-setbtn, .kc-mgr-save, .kc-mgr-cancel) { min-height: 56px; min-width: 56px; padding: 0 20px; border-radius: 999px;
    font-size: 16px; }
.page.kiosk-mode .kiosk-clock .kc-mgr-setbtn { color: rgb(var(--kiosk-gold-hi-rgb)); background: rgba(var(--kiosk-gold-hi-rgb), .06);
    box-shadow: inset 0 0 0 1.5px rgba(var(--kiosk-gold-hi-rgb), .45); }
.page.kiosk-mode .kiosk-clock .kc-mgr-save { color: var(--kiosk-pin-ok-ink); background: rgb(var(--kiosk-teal-glow-rgb)); }
.page.kiosk-mode .kiosk-clock .kc-mgr-input { box-sizing: border-box; min-height: 56px; padding: 0 12px; border: 0; border-radius: 14px; font-size: 18px;
    color-scheme: dark; color: rgb(var(--kiosk-rail-ink-rgb)); background: var(--kiosk-brown-mid); box-shadow: inset 0 0 0 1.5px rgba(var(--kiosk-gold-rgb), .35); }

/* the crew-change banner on a stage: still loud (a gold pulse), but caramel, not pale amber */
.page.kiosk-mode :is(.kx-stage, .kc-stage) .tip-crewalert { color: var(--kiosk-brown-deep); background: rgb(var(--kiosk-caramel-rgb));
    border-color: rgb(var(--kiosk-gold-hi-rgb)); animation-name: kx-crewflash; }
.page.kiosk-mode :is(.kx-stage, .kc-stage) .kiosk-crewbanner-later { min-height: 56px; border-radius: 999px; font-size: 16px; }
@keyframes kx-crewflash {
    0%, 100% { box-shadow: 0 0 0 rgba(var(--kiosk-gold-hi-rgb), 0); }
    50% { box-shadow: 0 0 0 3px rgba(var(--kiosk-gold-hi-rgb), .6), 0 0 26px rgba(var(--kiosk-gold-rgb), .7); }
}
@media (prefers-reduced-motion: reduce) { .page.kiosk-mode :is(.kx-stage, .kc-stage) .tip-crewalert { animation: none; } }

/* Schedule Week: the website's Board on a dark frame (kiosk only; the inline role / staff colours stay as accents) */
.kx-sched .ksd-weekboard { color: var(--mud-palette-drawer-text); background: rgba(var(--kiosk-gold-hi-rgb), .04);
    box-shadow: inset 0 0 0 1px rgba(var(--kiosk-gold-hi-rgb), .16), 0 18px 40px rgba(0, 0, 0, .35); }
.kx-sched .ksd-weekboard .bd-wrap { min-width: 1160px; }   /* wider columns scroll inside the frame, never the page */
.kx-sched :is(.ksd-scroll, .ksd-weekboard) { color-scheme: dark; scrollbar-color: rgba(var(--kiosk-gold-hi-rgb), .4) transparent; }
.kx-sched .bd-axis { width: 48px; flex-basis: 48px; }
.kx-sched .bd-hr { right: 6px; transform: translateY(-9px); font-size: 15px; font-weight: 700; color: var(--mud-palette-drawer-icon); }
.kx-sched .bd-col { min-width: 150px; padding: 0 4px; }
.kx-sched .bd-colhead { padding: 6px 0; border-radius: 12px; font-size: 15px; font-weight: 800; color: var(--mud-palette-drawer-text);
    background: rgba(var(--kiosk-gold-hi-rgb), .08); box-shadow: inset 0 0 0 1px rgba(var(--kiosk-gold-hi-rgb), .2); }
.kx-sched .bd-coldate { color: inherit; opacity: .8; }
.kx-sched .bd-colhead.bd-colhead-today { transform: none; color: var(--kiosk-brown-deep);
    background: linear-gradient(180deg, rgb(var(--kiosk-gold-hi-rgb)), rgb(var(--kiosk-gold-rgb))); box-shadow: 0 0 18px rgba(var(--kiosk-gold-rgb), .45); }
.kx-sched .bd-today-chip { padding: 1px 8px; font-size: 15px; color: rgb(var(--kiosk-gold-hi-rgb)); background: var(--kiosk-brown-deep); }
.kx-sched .bd-colhead-pill { font-size: 15px; }
.kx-sched .bd-adv-chip { padding: 1px 8px; font-size: 15px; color: rgb(var(--kiosk-gold-hi-rgb)); background: rgba(var(--kiosk-gold-rgb), .12);
    border-color: rgba(var(--kiosk-gold-rgb), .6); }
.kx-sched .bd-body { border-left-color: rgba(var(--kiosk-gold-hi-rgb), .2); }
.kx-sched .bd-line { border-top-color: rgba(var(--kiosk-gold-hi-rgb), .35); }
.kx-sched .bd-block { border-color: rgba(var(--kiosk-gold-hi-rgb), .2); border-radius: 8px; background: rgba(var(--kiosk-gold-hi-rgb), .04); }
.kx-sched .bd-watermark { font-size: 15px; }
.kx-sched .bd-filled { text-shadow: 0 1px 2px rgba(0, 0, 0, .65); }   /* white on any staff colour */
.kx-sched .bd-hole { height: 44px; padding: 3px 7px; border-radius: 6px; font-size: 15px; font-weight: 700; line-height: 1.1; }
.kx-sched .bd-hrole { font-size: 15px; line-height: 1.1; }
.kx-sched .bd-presence { font-size: 15px; }
/* open slots: the role colour stays on the border, the words turn cream (an inline role ink can sink into the dark) */
.kx-sched .bd-open { background: rgba(var(--kiosk-gold-hi-rgb), .05); }
.kx-sched .bd-open:not(.bd-reopened) { color: var(--mud-palette-drawer-text) !important; }
.kx-sched .bd-reopened { color: rgb(var(--kiosk-orb-ember-rgb)) !important; background: rgba(var(--kiosk-orb-ember-rgb), .12) !important;
    border-color: rgba(var(--kiosk-orb-ember-rgb), .75) !important; }
.kx-sched .bd-mine { box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .55), 0 0 0 3px rgb(var(--kiosk-gold-hi-rgb)), 0 0 18px rgba(var(--kiosk-gold-rgb), .6); }

/* Inventory (was its inline <style>) */
.kx-inv .kinv { max-width: 1200px; }
.kx-inv .kiosk-menu-group { margin-bottom: 22px; }
.kx-inv .kiosk-menu-cat { margin-bottom: 10px; font-size: 15px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
    color: var(--mud-palette-drawer-icon); }
.kx-inv .kiosk-inv-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.kx-inv .kiosk-inv-item { padding: 14px 18px; border-radius: 20px; background: rgba(var(--kiosk-gold-hi-rgb), .04);
    box-shadow: inset 0 0 0 1px rgba(var(--kiosk-gold-hi-rgb), .16); }
.kx-inv .kiosk-inv-item.low { background: rgba(var(--kiosk-gold-rgb), .1); box-shadow: inset 0 0 0 1.5px rgba(var(--kiosk-gold-rgb), .6); }
.kx-inv .kiosk-inv-item.out { background: rgba(var(--kiosk-orb-ember-rgb), .1); box-shadow: inset 0 0 0 1.5px rgba(var(--kiosk-orb-ember-rgb), .6); }
.kx-inv .kiosk-inv-name { margin-bottom: 6px; font-size: 18px; font-weight: 700; color: var(--mud-palette-drawer-text); }
.kx-inv .kiosk-inv-qty { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 16px; color: var(--mud-palette-drawer-icon); }
.kx-inv .kiosk-inv-qty strong { color: var(--mud-palette-drawer-text); }
.kx-inv :is(.kiosk-inv-qty strong.neg, .kiosk-inv-out) { font-weight: 800; color: rgb(var(--kiosk-orb-ember-rgb)); }
.kx-inv .kiosk-inv-oo { color: rgb(var(--kiosk-teal-glow-rgb)); }
.kx-inv .kiosk-inv-low { font-weight: 800; color: rgb(var(--kiosk-gold-hi-rgb)); }

/* Handoff (KioskHandoffNotes on its own page; where the Floor hosts it, the design session styles it) */
.kx-handoff .kho-title { font-size: 1.5rem; color: var(--mud-palette-drawer-text); }
.kx-handoff :is(.kho-count, .kho-counter, .kho-note-meta, .kho-section, .kho-done-meta) { font-size: 16px; color: var(--mud-palette-drawer-icon); }
.kx-handoff :is(.kho-compose, .kho-note) { border-color: rgba(var(--kiosk-gold-hi-rgb), .16); border-radius: 20px; background: rgba(var(--kiosk-gold-hi-rgb), .04); }
.kx-handoff .kho-note { border-left-color: rgba(var(--kiosk-gold-rgb), .8); }
.kx-handoff .kho-note--acknowledged { border-left-color: rgba(var(--kiosk-teal-glow-rgb), .8); }
.kx-handoff :is(.kho-step, .kho-about-name, .kho-note-text, .kho-note-about, .kho-done-text) { color: var(--mud-palette-drawer-text); }
.kx-handoff .kho-counter.over { color: rgb(var(--kiosk-orb-ember-rgb)); }
.kx-handoff .kho-tag { font-size: 15px; color: rgb(var(--kiosk-gold-hi-rgb)); background: rgba(var(--kiosk-gold-hi-rgb), .1); }
.kx-handoff .kho-tag--carry { color: rgb(var(--kiosk-orb-ember-rgb)); background: rgba(var(--kiosk-orb-ember-rgb), .14); }
.kx-handoff .kho-btn { border: 0; border-radius: 999px; font-size: 17px; font-weight: 800; color: rgb(var(--kiosk-gold-hi-rgb));
    background: rgba(var(--kiosk-gold-hi-rgb), .06); box-shadow: inset 0 0 0 1.5px rgba(var(--kiosk-gold-hi-rgb), .45); }
.kx-handoff .kho-btn--main { color: var(--kiosk-brown-deep); background: linear-gradient(180deg, rgb(var(--kiosk-gold-hi-rgb)), rgb(var(--kiosk-gold-rgb)));
    box-shadow: 0 0 18px rgba(var(--kiosk-gold-rgb), .35); }
.kx-handoff .kho-done { border-top-color: rgba(var(--kiosk-gold-hi-rgb), .14); }

/* ===== Kiosk staff picker: centred, schedule colours (owner 10/8) ===== */
/* initials wear the person's schedule colour (StaffProfile.ColorHex, ink contrast-picked inline); teal when unset */
.page.kiosk-mode .kiosk-picker-avatar { background: var(--staff-color, var(--kiosk-tile-teal)); color: var(--staff-ink, var(--mud-palette-white));
    box-shadow: 0 0 0 2px rgba(var(--kiosk-gold-hi-rgb), .55); }
.page.kiosk-mode .kc-tile--on .kiosk-picker-avatar { box-shadow: none; }
/* the PIN sheet: a few people sit centred, not pinned left in empty columns */
.page.kiosk-mode .kg-sheet .kiosk-picker-grid { grid-template-columns: repeat(auto-fit, minmax(160px, 200px)); justify-content: center; }
.page.kiosk-mode .kg-sheet :is(.kg-prompt, .kiosk-picker-sub, .kiosk-picker-empty) { text-align: center; }
.page.kiosk-mode .kg-sheet .kiosk-picker-link { display: block; margin-inline: auto; }

/* ===== 1289: picker while the roster loads: invisible for a quick load, a quiet line for a slow one ===== */
.kiosk-picker-loading { font-size: 15px; animation: kiosk-picker-wait .3s ease .6s both; }
@keyframes kiosk-picker-wait { from { opacity: 0; } }

/* Item 1400 — a person's unpaid break as a gray band behind their Day block's text. */
.ksd-break { position: absolute; left: 0; right: 0; z-index: -1; pointer-events: none;
    background: repeating-linear-gradient(135deg, rgba(var(--mud-palette-text-primary-rgb), .18) 0 6px, rgba(var(--mud-palette-text-primary-rgb), .08) 6px 12px);
    border-top: 1px dashed var(--mud-palette-text-disabled); border-bottom: 1px dashed var(--mud-palette-text-disabled); }

/* Item 1514: the viewed day's special-day mark (Closed / short hours) in the kiosk schedule header. */
.kx-sched .ksd-storeday { font-size: 15px; line-height: 22px; padding: 0 10px; border-radius: 11px; }

/* ===== 1534: kiosk sharpness ===== */
/* Every kiosk tap target is at least 56 x 56 px. (0,3,1) and last in the file, so it beats the shell's 48 px button floor
   (.page.kiosk-mode button:not(...)) and the plain class rules above. KioskTouchTargetDriftTests pins the list. */
.page.kiosk-mode :is(button, a):is(.kiosk-tap, .kf-link, .ksd-mgr-btn, .ksd-tgl, .ksd-jump, .kiosk-picker-link, .kiosk-keypad-link, .kws-change,
    .kg-switch, .kg-keep, .kiosk-chip, .kfc-link) {
    min-height: 56px; min-width: 56px; }
.page.kiosk-mode :is(.kiosk-picker-link, .kiosk-keypad-link) { padding-inline: 18px; }

/* the Clock card of a forgotten clock-out: a cherry ring and words, never a running "135h 0m" */
.page.kiosk-mode .kiosk-picker-tile.kc-tile--on.kc-tile--stale { box-shadow: 0 0 0 3px rgb(var(--kiosk-orb-ember-rgb)), 0 0 24px rgba(var(--kiosk-orb-ember-rgb), .55); }
.kc-pill.kc-pill--stale { white-space: normal; text-align: center; line-height: 1.25; padding: 4px 12px; font-size: 15px;
    color: var(--kiosk-brown-deep); background: rgb(var(--kiosk-orb-ember-rgb)); border-color: transparent; }
.kc-stale { max-width: 34rem; margin: 0 auto 12px; font-size: 16px; }

/* picker: someone the action would refuse stays visible, dimmed, with the reason */
.kiosk-picker-tile.kiosk-picker-tile--off { opacity: .5; filter: grayscale(.7); cursor: not-allowed; }
.page.kiosk-mode .kiosk-picker-tile.kiosk-picker-tile--off:active { transform: none; }
.kiosk-picker-why { font-size: 15px; font-weight: 800; color: var(--mud-palette-text-secondary); }
.page.kiosk-mode .kiosk-picker-why { color: var(--kiosk-brown-mid); }

/* sign-off footer: the reason sits in the sticky row, over the buttons */
.kso-actions.kso-actions--need .kso-need { grid-column: 1 / -1; text-align: center; }

/* Day view: on the clock with no shift today (completes 1351) */
.ksd-loose { display: flex; flex-direction: column; gap: 8px; margin: 0 0 12px; padding: 12px 14px; border-radius: 18px;
    background: rgba(var(--kiosk-orb-ember-rgb), .07); box-shadow: inset 0 0 0 1.5px rgba(var(--kiosk-orb-ember-rgb), .45); }
.ksd-loose-h { font-size: 15px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: rgb(var(--kiosk-orb-ember-rgb)); }
.ksd-loose-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; min-height: 56px; }
.ksd-loose-name { font-size: 18px; font-weight: 800; color: var(--mud-palette-drawer-text, var(--mud-palette-text-primary)); }
.ksd-loose .ksd-clock-status { font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; }
.ksd-loose .ksd-clock-status--over { padding: 4px 12px; border-radius: 999px; color: var(--kiosk-brown-deep); background: rgb(var(--kiosk-orb-ember-rgb)); }
.ksd-loose-row--over { border-left: 7px solid rgb(var(--kiosk-orb-ember-rgb)); padding-left: 10px; border-radius: 4px; }
.ksd-loose .ksd-clock-btn { margin-left: auto; border-radius: 999px; }
.ksd-loose-note { font-size: 15px; color: var(--mud-palette-drawer-icon, var(--mud-palette-text-secondary)); }
@media (prefers-reduced-motion: no-preference) {
    .ksd-loose-row--over { animation: ksd-loose-pulse 2.4s ease-in-out infinite; }
}
@keyframes ksd-loose-pulse { 50% { border-left-color: rgba(var(--kiosk-orb-ember-rgb), .45); } }

/* an empty list that says what to do */
.kx-empty b { display: block; font-size: 18px; color: var(--mud-palette-drawer-text, var(--mud-palette-text-primary)); }
.kx-empty span { display: block; margin-top: 4px; max-width: 40rem; }

/* waste: drink mode loads in place of the stock list */
.kws-loading { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 32px 0; font-size: 16px; color: var(--mud-palette-drawer-icon); }
.kws-loading .zg-progress { width: min(320px, 60%); }

/* focus card summary: the due slot, and late in words */
.kfc-sum-slot.bad { color: rgb(var(--kiosk-orb-ember-rgb)); font-weight: 700; }

/* Stock > Runway horizon (owner 10/19): the label over a full-width slider, 56 px thumb */
.kxs-horizon { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 0 auto 10px; width: min(760px, 100%); }
.kxs-horizon-label { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.kxs-horizon-label b { font-family: 'Fraunces', serif; font-size: 1.6rem; font-weight: 600; color: rgb(var(--kiosk-gold-hi-rgb)); }
.kxs-horizon-label span { font-size: 15px; color: var(--mud-palette-drawer-icon); }
.kxs-horizon-slider { width: 100%; }
.page.kiosk-mode .app-slider--touch { --app-slider-thumb: 56px; --app-slider-track: 10px; --app-slider-accent: rgb(var(--kiosk-gold-rgb)); --app-slider-thumb-bg: var(--kiosk-brown-deep); }
.page.kiosk-mode .app-slider--touch .app-slider-mark { font-size: 15px; color: var(--mud-palette-drawer-icon); }
.page.kiosk-mode .app-slider--touch .app-slider-mark.is-on { color: rgb(var(--kiosk-gold-hi-rgb)); font-weight: 800; }

/* 1534 QA: the discard total rides the footer, like the sign-off reason */
.kdc-actions .kdc-total { grid-column: 1 / -1; }
/* "Edited" is a tap: a 32 px chip with a 56 px hit area (a block's header can't grow), and its note at the page's foot */
button.ksd-edited { position: relative; min-height: 32px; border: 0; cursor: pointer; }
button.ksd-edited::before { content: ""; position: absolute; inset: -12px -6px; }
.ksd-edit-note { position: fixed; left: 50%; bottom: 24px; z-index: 1250; transform: translateX(-50%); display: flex; align-items: center; gap: 14px;
    max-width: min(640px, calc(100vw - 140px)); padding: 10px 10px 10px 18px; border-radius: 18px; font-size: 16px; font-weight: 600;
    color: rgb(var(--kiosk-gold-hi-rgb)); background: var(--kiosk-brown-deep);
    box-shadow: inset 0 0 0 1.5px rgba(var(--kiosk-gold-hi-rgb), .45), 0 12px 32px rgba(0, 0, 0, .45); }
.ksd-fx-why { margin: 4px 0 0; padding-left: 22px; font-size: 15px; color: var(--mud-palette-text-secondary); }

/* 1534 QA: the crew toast stays under sheets and the focus card, and steps aside where the page shows the banner */
.page.kiosk-mode .kiosk-crew-toast { z-index: 1150; }
.page.kiosk-mode:has(.kiosk-crewbanner) .kiosk-crew-toast { display: none; }
/* the forgotten-punch warning on the Clock card: espresso on highlight gold (about 12:1; it was 1.46:1) */
.page.kiosk-mode .kiosk-clock .kc-stale { color: var(--kiosk-brown-deep); background: rgb(var(--kiosk-gold-hi-rgb)); border-color: rgb(var(--kiosk-gold-rgb)); }
.page.kiosk-mode .kiosk-clock .kc-stale .kiosk-banner-title { color: inherit; }


/* owner 10/20-21: a pulled row's count is its big figure, with the Holds day dot (.kfl-dot) and the sticker line in the same block;
   who · when · note share one meta line; finished thaw steps are check chips */
.kxs-pulled .kxs-pulled-top { display: inline-flex; align-items: center; gap: 8px; }
.kxs-pulled .kxs-pulled-top .kfl-dot { margin: 0; }
.kxs-pulled span.kfl-dot { color: #fff; font-size: 15px; font-weight: 800; }
.kxs-pulled span.kfl-dot--tue { color: #1f2937; }
.kx-stage .kxs-who { font-size: 15px; }
.kx-stage .kxs-note { font-size: 15px; opacity: .75; }
.kxs-figs { display: flex; align-items: center; gap: 10px; }
.kxs-pulled { max-width: 220px; background: rgba(var(--kiosk-teal-glow-rgb), .1); box-shadow: inset 0 0 0 1.5px rgba(var(--kiosk-teal-glow-rgb), .35); }
.kx-stage .kxs-pulled .kxs-write { margin-top: 2px; font-size: 15px; line-height: 1.25; white-space: normal; }
.kxs-pullmeta > span + span::before { content: "·"; margin-right: 10px; }
.kxs-chk { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 999px; font-size: 15px; font-weight: 700; white-space: nowrap;
    color: rgb(var(--kiosk-gold-hi-rgb)); background: rgba(var(--kiosk-gold-hi-rgb), .08); box-shadow: inset 0 0 0 1px rgba(var(--kiosk-gold-hi-rgb), .3); }
/* a thaw row still to do: its steps take the row's width, side by side when there's room */
.kxs-row > .kxs-row-main:last-child { grid-column: 2 / -1; }
.kxs-row .kxs-steps { flex-direction: row; flex-wrap: wrap; }
.kxs-row .kxs-steps > .kxs-step { flex: 1 1 380px; min-width: 0; }
.kxs-row .kxs-steps .kxs-step-t { flex-basis: 160px; }
/* a compact secondary button (Undo, Recount), still a 48 px target */
.kx-stage .kx-btn.kx-btn--sm, .page.kiosk-mode .kx-stage .kxs-row .kx-btn.kx-btn--sm { min-height: 48px; padding: 0 18px; font-size: 15px; }

/* 1534 QA: a stage isolates its layers, so its sheets sat under the crew toast; a stage holding an open sheet rises to the
   sheet layer and every sheet's scrim covers the toast (the focus card's embedded pads have no scrim) */
.page.kiosk-mode :is(.kf, .kc-stage, .kx-stage, .kmf):has(.kiosk-sheet-backdrop:not(.kfc *)) { z-index: 1300; }

/* ===== 1539d: Floor prep task ===== */
/* KioskPrepTaskCard wears the focus card's shell (.kfc); these are its facts, lines and links, and the batch pad's chips in
   place. Kiosk tokens only (the stage is dark; --mud-palette-primary is dark brown there). Text >= 15 px, controls >= 56 px. */
.kfp-facts { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; }
.kfp-fact { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 140px; padding: 10px 18px; border-radius: 16px;
    background: var(--kfc-glass); box-shadow: inset 0 0 0 1px var(--kfc-line); }
.kfp-fact b { font-size: 28px; font-weight: 800; line-height: 1.15; font-variant-numeric: tabular-nums; color: var(--kfc-ink); }
.kfp-fact b small { font-size: 17px; font-weight: 600; color: var(--kfc-dim); }
.kfp-fact.is-out b { letter-spacing: .06em; color: var(--kfc-ember); }
.kfp-k { font-size: 15px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--kfc-faint); }
.kfp-line { display: flex; flex-direction: column; gap: 4px; font-size: 17px; line-height: 1.4; color: var(--kfc-ink); }
.kfp-say .kfl-dot { margin-right: 8px; font-size: 15px; }
.kfp-last { font-size: 15px; color: var(--kfc-dim); }
.kfp-problem { font-size: 15px; font-weight: 700; color: var(--kfc-ember); }
.kfc .kfp-flash { margin: 0; font-size: 16px; color: var(--kfc-ink); background: rgba(var(--kiosk-teal-glow-rgb), .12);
    border-color: rgba(var(--kiosk-teal-glow-rgb), .55); }
.kfp-more { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 10px; }
.page.kiosk-mode .kfc :is(.kfp-howto, .kfp-open) { min-height: 56px; display: inline-flex; align-items: center; justify-content: center; text-decoration-thickness: 1px; }
.page.kiosk-mode .kfc .kfp-howto { min-width: 140px; text-decoration: none; }
.kfc .kfp-open { font-size: 16px; }
.kfp--pad .kfc-orbs { padding: 18px 0 18px; }
.kfc .kiosk-np-quick { justify-content: center; }
.page.kiosk-mode .kfc .kiosk-np-quick .kiosk-chip { min-height: 56px; min-width: 88px; font-size: 18px; color: var(--kfc-ink); background: var(--kfc-glass);
    border: 1.5px solid var(--kfc-line-2); }

/* ===== 1522: drink card ===== */
/* KioskDrinkCard (.kbc-*; .kdc is the Floor's discard card) + KioskStepArt (KioskOrb shape rect) on the Menu's dark stage: drawer inks
   and kiosk golds (--mud-palette-primary is a dark brown, invisible here). Text >= 15 px, quantities big and tabular; the picked size
   is lit, the others dimmed. Tablet (1280 x 800): 96 x 72 art and rows of 98 px, so Build shows five steps above the fold. A card
   1500 px wide or more (the wall screen): 144 px art, bigger type. Print: one drink a landscape page, ink on white. */

/* shape 'rect': a 4:3 landscape still with no disc, ring or glow; the fallback art shows until orbs.js marks the face orb-ready */
.kiosk-orb--rect { width: var(--orb, 112px); height: calc(var(--orb, 112px) * .75); border-radius: 0; background: none; box-shadow: none; }
.kiosk-orb--rect::after { content: none; }
.kiosk-orb--rect .kiosk-orb-face { border-radius: 0; }
.kiosk-orb--rect .kiosk-orb-canvas { inset: 0; width: 100%; height: 100%; border-radius: 0; }
.kiosk-orb-fallback { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(var(--kiosk-gold-hi-rgb), .7); transition: opacity .25s ease; }
.kiosk-orb-fallback > svg { width: 62%; height: 62%; }
.kiosk-orb-face.orb-ready .kiosk-orb-fallback { opacity: 0; }
/* owner 10/26 ("shadow cups"): a hero still never has the step SVG behind it; the SVG shows only when the still can't draw */
.ksa-hero .kiosk-orb-face:has(> .kiosk-orb-canvas):not(.orb-no-model) > .kiosk-orb-fallback { opacity: 0; }
.kiosk-step-art { display: inline-grid; flex: none; vertical-align: middle; }
/* owner 10/26: a step's one hero (KioskStepArt), framed alone to fill its cell; screen and paper alike. 1589: the cell takes the still's
   shape, --ksa-r = height / width (tall 2:3, square, wide 4:3; StepStillShapes, orbs.js rectOf), so the canvas never stretches */
.ksa { position: relative; display: block; box-sizing: border-box; width: var(--orb, 112px); height: calc(var(--orb, 112px) * var(--ksa-r)); overflow: hidden;
    container-type: inline-size; print-color-adjust: exact; -webkit-print-color-adjust: exact; --ksa-r: .75; }
.ksa--tall { --ksa-r: 1.5; }
.ksa--square { --ksa-r: 1; }
.ksa-layer { position: absolute; display: block; }
.ksa-hero { inset: 0; z-index: 1; }
/* owner 10/28: soft edges so a still cropped by its cell fades out instead of cutting off; badges and vessel chips stay crisp */
.ksa-hero[data-layer=hero] {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 12%, #000 88%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 12%, #000 94%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to right, transparent 0, #000 12%, #000 88%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 12%, #000 94%, transparent 100%);
    mask-composite: intersect; }
.kbc-vessel .ksa-hero[data-layer=hero] { -webkit-mask-image: none; mask-image: none; }
.ksa-layer > .kiosk-orb--rect { width: 100%; height: 100%; }
/* a fountain fill: the soda's brand badge, its colours from the brand tokens */
.ksa-badge { --bb: var(--kiosk-caramel-rgb); --bi: var(--kiosk-brown-deep-rgb); --br: var(--bb); position: absolute; left: 6%; right: 6%; top: 50%; translate: 0 -50%;
    aspect-ratio: 1; box-sizing: border-box; container-type: inline-size; display: grid; place-items: center; padding: 8%; border-radius: 24%;
    background: rgb(var(--bb)); color: rgb(var(--bi)); box-shadow: inset 0 0 0 3px rgb(var(--br)), 0 2px 8px rgba(0, 0, 0, .35); }
/* 1599: words never break; a long word (--bw letters) shrinks the type until it fits the badge whole */
.ksa-badge b { font: 900 19cqw/1.02 system-ui, 'Segoe UI', sans-serif; font-size: clamp(15px, calc(132cqw / var(--bw, 5)), 19cqw); letter-spacing: .02em; text-align: center;
    text-transform: uppercase; overflow-wrap: normal; word-break: normal; hyphens: manual; }
.ksa-logo { position: absolute; inset: 6%; width: 88%; height: 88%; object-fit: contain; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .35)); }   /* owner 10/27: the brand's own logo */
.ksa-badge--pepsi { --bb: var(--kiosk-brand-pepsi-rgb); --bi: var(--kiosk-brand-ink-rgb); }
.ksa-badge--pepsi-zero { --bb: var(--kiosk-brand-black-rgb); --bi: var(--kiosk-brand-ink-rgb); --br: var(--kiosk-brand-pepsi-rgb); }
.ksa-badge--diet-pepsi { --bb: var(--kiosk-brand-silver-rgb); --bi: var(--kiosk-brand-pepsi-rgb); --br: var(--kiosk-brand-pepsi-rgb); }
.ksa-badge--dr-pepper { --bb: var(--kiosk-brand-drpepper-rgb); --bi: var(--kiosk-brand-ink-rgb); }
.ksa-badge--diet-dr-pepper { --bb: var(--kiosk-brand-silver-rgb); --bi: var(--kiosk-brand-drpepper-rgb); --br: var(--kiosk-brand-drpepper-rgb); }
.ksa-badge--mtn-dew { --bb: var(--kiosk-brand-dew-rgb); --bi: var(--kiosk-brand-ink-rgb); }
.ksa-badge--diet-mtn-dew { --bb: var(--kiosk-brand-silver-rgb); --bi: var(--kiosk-brand-dew-rgb); --br: var(--kiosk-brand-dew-rgb); }
.ksa-badge--starry { --bb: var(--kiosk-brand-starry-rgb); --bi: var(--kiosk-brand-starry-ink-rgb); }
.ksa-badge--mug { --bb: var(--kiosk-brand-mug-rgb); --bi: var(--kiosk-brand-mug-ink-rgb); }
.ksa-badge--lemonade { --bb: var(--kiosk-brand-lemonade-rgb); --bi: var(--kiosk-brand-lemonade-ink-rgb); }
.ksa-badge--sparkling { --bb: var(--kiosk-brand-sparkling-rgb); --bi: var(--kiosk-brand-sparkling-ink-rgb); }
/* 1522c: orbs.js prepareStillsForPrint lays an img of each still over its canvas; only paper shows it */
.kiosk-orb-print { display: none; }

/* the card: number 40 | art 72 | what | 7rem a size (wall: 48 | 112 | what | 10rem) */
.kbc { --kbc-n-w: 40px; --kbc-art-w: 96px; --kbc-amt-w: 7rem; --kbc-chip-h: 48px; container: kdc / inline-size; display: flex; flex-direction: column;
    gap: 10px; box-sizing: border-box; min-width: 0; padding: 12px 16px 16px; border-radius: 22px; color: var(--mud-palette-drawer-text);
    background: rgba(var(--kiosk-gold-hi-rgb), .04); box-shadow: inset 0 0 0 1px rgba(var(--kiosk-gold-hi-rgb), .16); }
.kbc :is(button, a):focus-visible { outline: 3px solid rgb(var(--kiosk-teal-glow-rgb)); outline-offset: 3px; }
.kbc--busy :is(.kbc-grid, .kbc-deck, .kbc-finish) { opacity: .55; transition: opacity .2s ease; }

/* 2170 (owner sample): two 46 px lines - back, name, Draft | host chips, tabs, toggle; then versions, size, modifiers */
.kbc-head { display: flex; flex-direction: column; gap: 8px; }
.kbc > .kbc-head { --kbc-chip-h: 40px; }
.kbc-corner { margin-left: auto; display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 8px 10px; }
.kbc-host { display: inline-flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 8px 10px; }
.kbc-head :is(.kmf-back, .kmi-tab), .page.kiosk-mode .kmf .kbc-head :is(.kmf-back, .kmi-tab) { min-height: var(--kbc-chip-h); }
.kbc-head .kmf-back { padding: 0 14px; font-size: 15px; }
.kbc-head .kbc-views { gap: 2px; }
.kbc-head .kbc-size { height: var(--kbc-chip-h); }
.kbc-head .kmi-tabs { flex-wrap: nowrap; gap: 2px; padding: 3px; }
.kbc-head .kmi-tab { padding: 0 10px; font-size: 15px; letter-spacing: .06em; }
.kbc-head .kmi-tab-on { box-shadow: none; }
.kbc-head .kmi-chip { min-height: 40px; padding: 0 12px; font-size: 15px; }
.kbc-views { display: inline-flex; gap: 4px; padding: 3px; border-radius: 999px; background: rgba(var(--kiosk-gold-hi-rgb), .05);
    box-shadow: inset 0 0 0 1px rgba(var(--kiosk-gold-hi-rgb), .22); }
.kbc-view { display: inline-grid; place-items: center; box-sizing: border-box; width: var(--kbc-chip-h); height: var(--kbc-chip-h); min-height: var(--kbc-chip-h); padding: 0; border: 0;
    border-radius: 999px; cursor: pointer; color: var(--mud-palette-drawer-icon); background: transparent; }
.kbc-view-icon { width: 24px; height: 24px; }
.kbc-view--on { color: var(--kiosk-brown-deep); background: linear-gradient(180deg, rgb(var(--kiosk-gold-hi-rgb)), rgb(var(--kiosk-gold-rgb))); }
.kbc-applied { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.kbc-applied-tag { padding: 0 12px; border-radius: 999px; font-size: 15px; font-weight: 700; line-height: 28px; white-space: nowrap;
    color: rgb(var(--kiosk-teal-glow-rgb)); background: rgba(var(--kiosk-teal-glow-rgb), .1); box-shadow: inset 0 0 0 1px rgba(var(--kiosk-teal-glow-rgb), .5); }
/* 1799: an applied chip's own allergen, shown only while it is on */
.kbc-addon-allergens { margin: 0; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.kbc-addon-allergen { padding: 0 12px; border-radius: 999px; font-size: 15px; font-weight: 700; line-height: 28px; white-space: nowrap;
    color: var(--mud-palette-drawer-text); background: rgba(var(--kiosk-orb-ember-rgb), .22); box-shadow: inset 0 0 0 1.5px rgba(var(--kiosk-orb-ember-rgb), .8); }
.kbc-photo { --o: 88px; }
button.kbc-photo { cursor: pointer; }
.kbc-img { display: block; width: 86%; height: 86%; object-fit: contain; mix-blend-mode: multiply; }
.kbc-head-body { min-width: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 8px 18px; padding-bottom: 8px;
    border-bottom: 1px solid rgba(var(--kiosk-gold-hi-rgb), .16); }
.kbc-title-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; }
.kbc-name { margin: 0; font-family: 'Fraunces', serif; font-size: clamp(22px, 1.75cqi, 28px); font-weight: 600; line-height: 1.1; color: var(--mud-palette-drawer-text);
    text-shadow: 0 1px 12px rgba(0, 0, 0, .55); }
.kbc-draft { padding: 2px 10px; border-radius: 999px; font-size: 15px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
    color: rgb(var(--kiosk-orb-ember-rgb)); background: rgba(var(--kiosk-orb-ember-rgb), .14); box-shadow: inset 0 0 0 1.5px rgba(var(--kiosk-orb-ember-rgb), .7); }
.kbc-label { font-size: 15px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--mud-palette-drawer-icon); }
.kbc-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.kbc-mods { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 18px; }
.kbc-mod-group { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.kbc-mod-group > .kbc-label { margin-right: 2px; }
.kbc-chip { display: inline-flex; align-items: center; box-sizing: border-box; min-height: var(--kbc-chip-h); padding: 0 18px; border: 0; border-radius: 999px;
    cursor: pointer; font-size: 16px; font-weight: 700; white-space: nowrap; color: var(--mud-palette-drawer-text);
    background: rgba(var(--kiosk-gold-hi-rgb), .06); box-shadow: inset 0 0 0 1px rgba(var(--kiosk-gold-hi-rgb), .26); }
.kbc-chip--on { color: var(--kiosk-brown-deep); background: linear-gradient(180deg, rgb(var(--kiosk-gold-hi-rgb)), rgb(var(--kiosk-gold-rgb))); box-shadow: none; }
.kbc-head .kbc-family .kbc-chip { padding: 0 14px; }
.kbc-head .kbc-family .kbc-chip:not(.kbc-chip--on) { background: transparent; box-shadow: none; }   /* 2170: one segmented control, as the size */
/* the emoji rides a pseudo-element so the chip's label stays plain text */
.kbc-chip[data-ic]::before { content: attr(data-ic); margin-right: 6px; line-height: 1; }
.kbc-chip[data-ic]:not(.kbc-chip--on)::before { filter: grayscale(1); opacity: .5; }
/* 1895 (owner 11/8 sample): one picker - the applied modifiers as chips in their group's colour; "+ add" opens the searchable, grouped list */
.kbc-mod-pick { flex: 0 1 auto; flex-wrap: nowrap; max-width: 40rem; }   /* 2170: sized to its chips, "+ add" alone when none */
.kbc-mod-pick > .app-gsel { flex: 0 1 auto; }
.kbc .kbc-mod-pick .app-gsel-box { flex: 0 1 auto; min-width: 0; min-height: var(--kbc-chip-h); padding: 2px 6px; border-radius: 20px; color: var(--mud-palette-drawer-text);
    background: transparent; border: 1.5px dashed rgba(var(--kiosk-gold-hi-rgb), .32); }
.kbc .kbc-mod-pick .app-gsel-chip { padding: 0 14px; line-height: calc(var(--kbc-chip-h) - 16px); font-size: 16px; font-weight: 700; color: rgb(var(--kiosk-brand-ink-rgb)); }
.kbc .kbc-mod-pick .app-gsel-add { font-size: 16px; font-weight: 700; color: var(--mud-palette-drawer-icon); }
.kbc .kbc-pick-dd { width: min(30rem, 92vw); padding: 0 0 6px; border: 0; border-radius: 16px; color: var(--mud-palette-drawer-text); background: var(--kiosk-brown-deep);
    box-shadow: 0 0 0 1px rgba(var(--kiosk-gold-hi-rgb), .3), 0 14px 36px rgba(0, 0, 0, .55); }
.kbc-pick-dd .app-gsel-search { padding: 10px 16px; font-size: 17px; color: var(--mud-palette-drawer-icon); border-bottom-color: rgba(var(--kiosk-gold-hi-rgb), .2); }
.kbc-pick-dd .app-gsel-input { font-size: 17px; color: var(--mud-palette-drawer-text); }
.kbc-pick-dd .app-gsel-search-icon { width: 22px; height: 22px; }
.kbc-pick-dd .app-gsel-grp { padding: 12px 16px 4px; font-size: 15px; color: var(--mud-palette-drawer-text); }
.kbc-pick-dd .app-gsel-grp::before { width: 11px; height: 11px; }
.kbc-pick-dd .app-gsel-grp small { font-size: 15px; color: var(--mud-palette-drawer-icon); }
.kbc-pick-dd .app-gsel-opt { min-height: 48px; padding: 0 18px 0 36px; font-size: 18px; font-weight: 600; }
.kbc-pick-dd .app-gsel-opt:hover { background: rgba(var(--kiosk-gold-hi-rgb), .08); }
.kbc-pick-dd .app-gsel-opt--on { font-weight: 800; background: rgba(var(--kiosk-gold-hi-rgb), .12); }
.kbc-pick-dd .app-gsel-opt--on::after { font-size: 20px; color: rgb(var(--kiosk-gold-hi-rgb)); }
.kbc-pick-dd .app-gsel-empty { padding: 12px 16px; font-size: 16px; color: var(--mud-palette-drawer-icon); }
/* 1522c Card view: the size as a segmented control (the columns are gone) */
.kbc-seg, .kbc-head .kbc-family { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: rgba(var(--kiosk-gold-hi-rgb), .06); box-shadow: inset 0 0 0 1px rgba(var(--kiosk-gold-hi-rgb), .26); }
.kbc-size { display: inline-flex; align-items: baseline; gap: 6px; box-sizing: border-box; min-height: var(--kbc-chip-h); padding: 0 16px; border: 0;
    border-radius: 999px; cursor: pointer; font: inherit; line-height: var(--kbc-chip-h); white-space: nowrap; color: var(--mud-palette-drawer-icon);
    background: transparent; }
.kbc-size b { font-size: 20px; font-weight: 800; }
.kbc-size small { font-size: 15px; font-weight: 700; opacity: .85; }
.kbc-size--on { color: var(--kiosk-brown-deep); background: linear-gradient(180deg, rgb(var(--kiosk-gold-hi-rgb)), rgb(var(--kiosk-gold-rgb))); }
.kbc-size--off { opacity: .5; }
.kbc-size--off.kbc-size--on { opacity: .8; }
.kbc-choice { margin: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 12px; font-size: 18px; }
.kbc-choice b { font-weight: 700; color: rgb(var(--kiosk-gold-hi-rgb)); }
.kbc-allergens { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; }
.kbc-print-only { display: none; }
.kbc-why { margin: 0; font-size: 18px; font-weight: 600; line-height: 1.4; }

/* steps: number | art | what | one column per size; the header row (sticky while the steps scroll) uses the same columns and picks the size */
.kbc-grid { padding-left: 40px; }   /* room for the bracket and its label */
.kbc-row { display: grid; grid-template-columns: var(--kbc-n-w) var(--kbc-art-w) minmax(0, 1fr) repeat(var(--kbc-sizes, 3), var(--kbc-amt-w));
    column-gap: 12px; align-items: center; }
.kbc-cols { position: sticky; top: 0; z-index: 2; margin-bottom: 6px; padding: 4px 10px 6px; border-radius: 0 0 14px 14px;
    background: linear-gradient(rgba(var(--kiosk-gold-hi-rgb), .05), rgba(var(--kiosk-gold-hi-rgb), .05)), var(--kiosk-brown-deep);
    box-shadow: 0 6px 14px rgba(0, 0, 0, .35); }
.kbc-col-lead { grid-column: 1 / 4; }
.kbc-col { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; box-sizing: border-box; min-height: 48px; padding: 3px 6px;
    border: 0; border-radius: 14px; cursor: pointer; font: inherit; line-height: 1.1; color: var(--mud-palette-drawer-icon); background: transparent;
    box-shadow: inset 0 0 0 1px rgba(var(--kiosk-gold-hi-rgb), .18); }
.kbc-col b { font-size: 20px; font-weight: 800; line-height: 1; }
.kbc-col small { font-size: 15px; font-weight: 700; opacity: .85; }
.kbc-col--on { color: var(--kiosk-brown-deep); background: linear-gradient(180deg, rgb(var(--kiosk-gold-hi-rgb)), rgb(var(--kiosk-gold-rgb))); box-shadow: none; }
.kbc-col--off { opacity: .5; }
.kbc-col--off.kbc-col--on { opacity: .8; }
.kbc-col-why { max-width: 100%; overflow: hidden; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }   /* the whole reason: title, aria-label */
.kbc-steps, .kbc-par-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.kbc-step { box-sizing: border-box; padding: 4px 10px; border-radius: 16px; background: rgba(var(--kiosk-gold-hi-rgb), .04);
    box-shadow: inset 0 0 0 1px rgba(var(--kiosk-gold-hi-rgb), .1); }
.kbc-step--short { box-shadow: inset 0 0 0 1.5px rgba(var(--kiosk-orb-ember-rgb), .55); }
.kbc-step--critical { box-shadow: inset 4px 0 0 rgb(var(--kiosk-orb-ember-rgb)), inset 0 0 0 1px rgba(var(--kiosk-gold-hi-rgb), .1); }
.kbc-n { font-family: 'Fraunces', serif; font-size: 28px; font-weight: 600; line-height: 1; text-align: center; font-variant-numeric: tabular-nums;
    color: rgb(var(--kiosk-gold-hi-rgb)); }
.kbc-art.ksa { --kbc-aw: min(var(--kbc-art-w), calc(var(--kbc-art-w) * .75 / var(--ksa-r))); width: var(--kbc-aw); height: calc(var(--kbc-aw) * var(--ksa-r));
    justify-self: center; }   /* the 4:3 slot; 1589: a taller still letterboxes in it */
.kbc-what { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.kbc-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.kbc-verb { font-size: 18px; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.kbc-ing { font-weight: 800; }
.kbc-sub { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 15px; font-weight: 600; line-height: 1.3;
    color: var(--mud-palette-drawer-icon); }
.kbc-tag { padding: 0 9px; border-radius: 999px; font-size: 15px; font-weight: 800; line-height: 22px; letter-spacing: .06em; text-transform: uppercase;
    white-space: nowrap; color: var(--mud-palette-drawer-icon); box-shadow: inset 0 0 0 1.5px rgba(var(--kiosk-gold-hi-rgb), .35); }
.kbc-tag--critical { color: rgb(var(--kiosk-orb-ember-rgb)); background: rgba(var(--kiosk-orb-ember-rgb), .12); box-shadow: inset 0 0 0 1.5px rgba(var(--kiosk-orb-ember-rgb), .7); }
.kbc-tag--added { font-weight: 700; letter-spacing: .02em; text-transform: none; background: rgba(var(--kiosk-gold-hi-rgb), .07); box-shadow: none; opacity: .85; }
.kbc-line .kmi-stk { padding: 0 10px; line-height: 22px; }
/* 1875 (owner): a modifier's mark on the step number, "+" it added the step, a dot it changed the amount (title / aria-label name it);
   1895: in its group's colour (--kbc-mod-c), the "+" a rounded square as the sample draws it */
.kbc-n { position: relative; }
.kbc-modmark { position: absolute; right: -7px; bottom: -5px; display: grid; place-items: center; width: 17px; height: 17px; border-radius: 50%;
    background: var(--kbc-mod-c, rgb(var(--kiosk-teal-glow-rgb))); box-shadow: 0 0 0 2px rgb(var(--kiosk-brown-deep-rgb)); }
.kbc-modmark--added { border-radius: 4px; }
.kbc-modmark--added::before { content: "+"; font-family: Inter, system-ui, sans-serif; font-size: 15px; font-weight: 900; line-height: 1; color: rgb(var(--kiosk-brand-ink-rgb)); }
.kbc-modmark--changed::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: rgb(var(--kiosk-brand-ink-rgb)); }
.kbc-amt { display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: baseline; column-gap: 4px; justify-self: stretch; text-align: center;
    font-size: 28px; font-weight: 800; line-height: 1.05; font-variant-numeric: tabular-nums; color: var(--mud-palette-drawer-text); opacity: .4; }
.kbc-amt small { font-size: 16px; font-weight: 700; letter-spacing: .03em; color: var(--mud-palette-drawer-icon); }
.kbc-amt .kbc-amt-text { font-size: 16px; line-height: 1.2; overflow-wrap: anywhere; }
.kbc-amt--on { opacity: 1; color: rgb(var(--kiosk-gold-hi-rgb)); }
.kbc-amt-none { color: var(--mud-palette-drawer-icon); }
/* rows of one shared order group (any order, TrainingContracts): a gold bracket in the left gutter, labelled up its side */
.kbc-par { position: relative; }
.kbc-par::before { content: ""; position: absolute; left: -16px; top: 10px; bottom: 10px; width: 12px; box-sizing: border-box; pointer-events: none;
    border: 3px solid rgb(var(--kiosk-gold-rgb)); border-right: 0; border-radius: 10px 0 0 10px; }
.kbc-par-label { position: absolute; left: -40px; top: 50%; transform: translateY(-50%) rotate(180deg); writing-mode: vertical-rl; white-space: nowrap;
    font-size: 15px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: rgb(var(--kiosk-gold-hi-rgb)); }
/* 1522b: the caption every bracketed row shares, said once above them in the "what" column (kbc-step padding + two column gaps) */
.kbc-par-caption { display: block; padding: 2px 10px 0 calc(var(--kbc-n-w) + var(--kbc-art-w) + 34px); font-size: 16px; font-weight: 700; line-height: 1.3;
    overflow-wrap: anywhere; color: rgb(var(--kiosk-gold-hi-rgb)); }

.kbc-finish { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; }
.kbc-finish-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; }
.kbc-finish-item { font-size: 17px; font-weight: 600; }
.kbc-finish-item b, .kbc-warnings b { margin-right: 6px; font-size: 15px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
    color: rgb(var(--kiosk-gold-hi-rgb)); }
.kbc-warnings { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 15px; line-height: 1.35;
    color: var(--mud-palette-drawer-icon); }
/* 1892: admins only, the planner's modifier notes behind an info icon */
.kbc-author-notes summary { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; cursor: pointer;
    list-style: none; font-size: 16px; font-weight: 800; font-style: italic; color: rgb(var(--kiosk-gold-hi-rgb));
    box-shadow: inset 0 0 0 1.5px rgba(var(--kiosk-gold-hi-rgb), .45); }
.kbc-author-notes summary::-webkit-details-marker { display: none; }
.kbc-author-notes ul { margin: 6px 0 0; padding-left: 20px; font-size: 15px; }
.kbc-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.kbc-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: 0 26px; border: 0; border-radius: 999px;
    font-size: 17px; font-weight: 800; }
.kbc-btn--demo { color: var(--kiosk-brown-deep); background: linear-gradient(180deg, rgb(var(--kiosk-gold-hi-rgb)), rgb(var(--kiosk-gold-rgb)));
    box-shadow: 0 6px 18px rgba(var(--kiosk-gold-rgb), .3); }
.kbc-btn--ghost { color: rgb(var(--kiosk-gold-hi-rgb)); background: transparent; box-shadow: inset 0 0 0 1.5px rgba(var(--kiosk-gold-hi-rgb), .45); }
.kbc-print-foot { display: none; }
.kbc-preview { padding-top: 24px; }
.kbc-preview .kbc { max-width: 1560px; }
.kbc-preview-said { margin: 0; font-size: 15px; font-weight: 600; color: var(--mud-palette-drawer-icon); }

/* 1522c Card view: the steps flow along the row, then wrap. Columns per band come from the step count (KioskBuildView.Cols, the
   --kbc-cols-tab / --kbc-cols-wall vars); the page, the card and the deck grow into the screen's height and the rows share it, so the
   whole card sits above the fold. Each step card is a size container: the art takes what the words leave (min of width and height),
   the type follows the card's width, never under 15 px. A deck too tall for its rows' floor scrolls (a tablet with many steps). */
.kmi--build:has(.kbc--card) .kmi-build { flex: 1 0 auto; display: flex; flex-direction: column; }
.kbc--card { --kbc-art-max: 420px; flex: 1 0 auto; }
.kbc--n6 { --kbc-art-max: 520px; }
.kbc-deck { --kbc-cols: var(--kbc-cols-tab, 4); --kbc-gap: 10px; --kbc-row-min: 190px; flex: 1 0 auto; display: grid;
    grid-template-columns: repeat(var(--kbc-cols), minmax(0, 1fr)); grid-auto-rows: minmax(var(--kbc-row-min), var(--kbc-row-max)); gap: var(--kbc-gap);
    --kbc-rows: var(--kbc-rows-tab, 1); --kbc-row-max: min(var(--kbc-row-tab, 440px), var(--kbc-row-fit)); align-content: start; list-style: none; margin: 0; padding: 10px 0 0; }   /* owner 10/27: rows stop at 440 px, never stretched to the screen; 1589: lower for wide cards (KioskBuildView.RowMax) */
/* 2170: a row's share of the screen under the two-line header (--kbc-above: header and margins), never under the floor */
.kbc-deck { --kbc-above: 176px; --kbc-row-fit: max(var(--kbc-row-min), calc((100dvh - var(--kbc-above) - (var(--kbc-rows) - 1) * var(--kbc-gap)) / var(--kbc-rows))); }
.kbc-card { container: kbc-card / size; position: relative; box-sizing: border-box; min-width: 0; display: flex; flex-direction: column; gap: 4px;
    padding: 8px 8px 10px; border-radius: 16px; background: rgba(var(--kiosk-gold-hi-rgb), .04); box-shadow: inset 0 0 0 1px rgba(var(--kiosk-gold-hi-rgb), .1);
    --kbc-pad: 8px; border: 1.5px solid transparent; }
.kbc-card--short { box-shadow: inset 0 0 0 1.5px rgba(var(--kiosk-orb-ember-rgb), .55); }
.kbc-card--critical { box-shadow: inset 4px 0 0 rgb(var(--kiosk-orb-ember-rgb)), inset 0 0 0 1px rgba(var(--kiosk-gold-hi-rgb), .1); }
.kbc-card-pic { grid-area: pic; position: relative; min-height: 56px; container-type: size; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); isolation: isolate; }
/* 1589 (mock B, owner 10/27): number and tags, the step, the picture filling the middle, the amount and sub at the foot. A picture too big
   for the middle keeps its size and runs up to --kbc-under under the foot's words, faded there, instead of shrinking */
.kbc-card-in { --kbc-under: 34px; flex: 1 1 0; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr) auto;
    grid-template-areas: "head" "title" "pic" "foot"; row-gap: 4px; }
.kbc-card--noamt .kbc-card-in { --kbc-under: 0px; }   /* a lone sub hides on short cards: nothing sure to run under */
.kbc-card-head { grid-area: head; position: relative; min-width: 0; display: flex; align-items: flex-start; gap: 6px; }
.kbc-card .kbc-n { flex: none; display: grid; place-items: center; width: 31px; height: 31px; border-radius: 50%;
    font-family: inherit; font-size: 17px; font-weight: 800; line-height: 1; background: rgba(var(--kiosk-brown-deep-rgb), .6); box-shadow: inset 0 0 0 1px rgba(var(--kiosk-gold-hi-rgb), .35); }
/* 2170 (owner sample): no pills, so the number rides the step's line (a narrow card keeps the row: the words need the width) */
@container kbc-card (min-width: 220px) {
    .kbc-card-head:not(:has(.kbc-callouts)) { grid-area: title; align-self: start; z-index: 2; margin-left: -4px; }
    .kbc-card-head:not(:has(.kbc-callouts)) + .kbc-verb { min-height: 31px; padding: 0 6px 0 32px; }
}
.kbc-stock-dot { position: absolute; top: -3px; right: -3px; width: 11px; height: 11px; border-radius: 50%; box-shadow: 0 0 0 2px rgb(var(--kiosk-brown-deep-rgb)); }
.kbc-stock-dot--out { background: rgb(var(--kiosk-orb-ember-rgb)); }
.kbc-stock-dot--low { background: var(--mud-palette-warning); }
/* owner 10/27: out over the card's padding to its edges; 1589: centred, or from the top when it runs under the words */
.kbc-card .kbc-art.ksa { --a: min(calc(100cqw + 2 * var(--kbc-pad)), calc((100cqh + var(--kbc-under)) / var(--ksa-r)), var(--kbc-art-max)); width: var(--a);
    height: calc(var(--a) * var(--ksa-r)); justify-self: center; margin: auto calc(-1 * var(--kbc-pad)); }
/* the part under the words (100% - 100cqh: the overrun) fades out, and the words glow, so they read over it; no overrun, no fade */
.kbc-card .kbc-art.ksa { -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 2 * max(0px, 100% - 100cqh)), transparent calc(100% - max(0px, 100% - 100cqh) / 2));
    mask-image: linear-gradient(to bottom, black calc(100% - 2 * max(0px, 100% - 100cqh)), transparent calc(100% - max(0px, 100% - 100cqh) / 2)); }
.kbc-card .kbc-verb { grid-area: title; text-align: center; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: clamp(15px, 7cqw, 17px); line-height: 1.15; }
.kbc-card--noamt .kbc-verb { font-size: clamp(18px, 9cqw, 19px); }   /* no amount line: the caption takes its room */
.kbc-card-foot { grid-area: foot; position: relative; z-index: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 1px; text-align: center;
    text-shadow: 0 0 6px rgba(var(--kiosk-brown-deep-rgb), .95), 0 0 14px rgba(var(--kiosk-brown-deep-rgb), .8); }
.kbc-card-amt { display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: baseline; column-gap: 4px; font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(26px, 17cqw, 38px); font-weight: 700; line-height: 1.05; font-variant-numeric: tabular-nums; color: var(--kiosk-amount); }
.kbc-card-amt small { font-family: system-ui, 'Segoe UI', sans-serif; font-size: 16px; font-weight: 700; letter-spacing: .03em; color: var(--kiosk-amount); opacity: .85; }
.kbc-card-amt .kbc-amt-text { font-size: 16px; line-height: 1.2; overflow-wrap: anywhere; }
.kbc-card .kbc-sub { text-align: center; }
.kbc--n12 .kbc-card .kbc-sub, .kbc--n13up .kbc-card .kbc-sub { display: none; }   /* dense decks: the art keeps the room */
@container kbc-card (max-height: 320px) and (max-aspect-ratio: 5 / 4) { .kbc-card .kbc-sub { display: none; } }
/* 1589 (mock C, owner 10/27 "wide cards nice!"): a wide card puts the picture beside the words; a 4:3 picture takes more of the width */
@container kbc-card (min-aspect-ratio: 5 / 4) {
    .kbc-card-in { --kbc-under: 0px; grid-template-columns: var(--kbc-pic-w, 46%) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto;
        grid-template-areas: "head head" "pic title" "pic foot"; column-gap: 12px; }
    .kbc-card--wide .kbc-card-in { --kbc-pic-w: 54%; }
    .kbc-card .kbc-art.ksa { --a: min(100cqw, calc(100cqh / var(--ksa-r)), var(--kbc-art-max)); margin: auto; }
    .kbc-card .kbc-verb { align-self: center; text-align: left; }
    .kbc-card-foot { align-self: start; align-items: flex-start; text-align: left; }
    .kbc-card-amt { justify-content: flex-start; }
    .kbc-card .kbc-sub { text-align: left; }
}
/* owner 10/27 (syrup-spot mock B): a pump step's syrup locator in the picture's corner. The bottle (about the middle third of its still,
   --kss-body each side) slides left until it clears the panel, never past the picture's left edge: a wide card leaves it centred with
   room to spare, a tight one overlaps it with the panel only when even that is not enough (cq units: the picture's size container) */
.kbc-card-pic--spot { --kss-w: clamp(92px, 34cqw, 136px); --kss-gap: 6px; --kss-body: .16; }
.kbc-card-pic--spot .kbc-art.ksa { translate: calc(-1 * clamp(0px, var(--kss-w) + var(--kss-gap) + var(--kss-body) * var(--a) - 50cqw, 50cqw - var(--kss-body) * var(--a))) 0; }
.kss { position: absolute; right: 0; bottom: 0; z-index: 1; width: var(--kss-w); box-sizing: border-box; padding: 4px; border-radius: 10px;
    background: rgba(var(--kiosk-brown-deep-rgb), .72); backdrop-filter: blur(2px); pointer-events: none; }
.kss-svg { display: block; width: 100%; height: auto; overflow: visible; }
.kss-bar { font: 800 12px system-ui, 'Segoe UI', sans-serif; letter-spacing: 1.2px; fill: var(--kiosk-amount); }
.kss-rack { fill: rgba(var(--kiosk-spot-ring-rgb), .07); stroke: rgba(var(--kiosk-gold-hi-rgb), .35); }
.kss-dot { fill: rgb(var(--kiosk-brown-deep-rgb)); stroke: rgba(var(--kiosk-gold-hi-rgb), .45); stroke-width: 1; }
.kss-target { fill: rgb(var(--kiosk-gold-rgb)); stroke: rgb(var(--kiosk-spot-ring-rgb)); stroke-width: 2; }
.kss-key { font: 10px system-ui, 'Segoe UI', sans-serif; fill: rgba(var(--kiosk-gold-hi-rgb), .75); }
/* owner 10/26: an any-order set is a subgroup inside its vessel run: a gold bracket along its tiles' tops (bridging the gaps, row by
   row: data-gt / data-gw marked like the ribbon) and a small tag on each tile's number row, first of its tags (1589) */
.kbc-card--par .kbc-card-head::before { content: ""; position: absolute; top: -3px; left: 0; right: 0; height: 3px; border-radius: 2px; pointer-events: none;
    background: rgb(var(--kiosk-gold-rgb)); }
@container kdc (width < 1500px) {
    .kbc-card--par:not([data-gt~="e"]) .kbc-card-head::before { right: calc(-2 * var(--kbc-pad) - 3px - var(--kbc-gap)); border-top-right-radius: 0; border-bottom-right-radius: 0; }
    .kbc-card--par:not([data-gt~="s"]) .kbc-card-head::before { border-top-left-radius: 0; border-bottom-left-radius: 0; }
}
@container kdc (min-width: 1500px) {
    .kbc-card--par:not([data-gw~="e"]) .kbc-card-head::before { right: calc(-2 * var(--kbc-pad) - 3px - var(--kbc-gap)); border-top-right-radius: 0; border-bottom-right-radius: 0; }
    .kbc-card--par:not([data-gw~="s"]) .kbc-card-head::before { border-top-left-radius: 0; border-bottom-left-radius: 0; }
}
/* owner 10/26 (mock v4): a run of steps into one vessel rides ONE bar in its colour across its cards on each row (KioskDrinkCard.VesselRuns marks
   each card per band: data-vt tablet, data-vw wall; s starts a row's bar, e ends it, c continues the run, n carries "steps a-b"), matching borders */
.kbc-card[data-vessel] { --kbc-v: var(--kiosk-vessel-pitcher-rgb); border-color: rgb(var(--kbc-v)); }
.kbc-card[data-vessel="cup"] { --kbc-v: var(--kiosk-vessel-cup-rgb); }
.kbc-card[data-vessel="jar"] { --kbc-v: var(--kiosk-vessel-jar-rgb); }
.kbc-vessel { --kbc-bleed: calc(-1 * (var(--kbc-pad) + 1.5px)); flex: none; display: flex; align-items: center; gap: 8px; height: 30px;
    margin: var(--kbc-bleed) var(--kbc-bleed) 0; padding: 0 12px; overflow: hidden; border-radius: 12px 12px 0 0; background: rgb(var(--kbc-v));
    color: rgb(var(--kiosk-rail-ink-rgb)); font-size: 15px; font-weight: 800; letter-spacing: .06em; white-space: nowrap; }   /* 2170: 30 px (was 54) */
/* owner 10/26: never "BLEN…". 1825: the name always shows: it takes the bar's line first (row-reverse wrap, the label first in the markup);
   the thumbnail rides left of it while the name's longest word still fits beside it, else it wraps out of sight. The name wraps to two
   lines at most (KioskDrinkCard.NoBreak); "continued" comes last, so a hidden third line takes it */
.kbc-vessel-head { flex: 1 1 0; min-width: 0; height: 30px; display: flex; flex-direction: row-reverse; flex-wrap: wrap; align-items: center; align-content: flex-start;
    gap: 0 8px; overflow: hidden; text-transform: uppercase; }
.kbc-vessel-label { flex: 1 1 0; height: 30px; display: flex; align-items: center; white-space: normal; }
.kbc-vessel-text { max-height: 30px; overflow: hidden; line-height: 15px; }
.kbc-vessel-cont, .kbc-vessel-steps { font-size: 15px; font-weight: 600; letter-spacing: .02em; text-transform: none; opacity: .85; }
.kbc-vessel-cont { line-height: 1; }
.kbc-vessel-steps { margin-left: auto; padding-left: 8px; }
/* the empty vessel's still, 26 px tall in its own shape, cropped to the vessel */
.kbc-vessel .ksa { flex: none; width: 22px; height: 26px; }
.kbc-vessel .ksa-hero { inset: 0 auto; left: 50%; width: calc(26px / var(--ksa-r)); translate: -50% 0; }
.kbc-vessel--none { background: none; }   /* off a run: the bar's room only */
@container kdc (width < 1500px) {
    .kbc-card:not([data-vt~="e"]) > .kbc-vessel { margin-right: calc(var(--kbc-bleed) - var(--kbc-gap)); border-top-right-radius: 0; }
    .kbc-card:not([data-vt~="s"]) > .kbc-vessel { border-top-left-radius: 0; }
    .kbc-card:not([data-vt~="s"]) .kbc-vessel-head, .kbc-card:not([data-vt~="c"]) .kbc-vessel-cont, .kbc-card:not([data-vt~="n"]) .kbc-vessel-steps { display: none; }
}
@container kdc (min-width: 1500px) {
    .kbc-card:not([data-vw~="e"]) > .kbc-vessel { margin-right: calc(var(--kbc-bleed) - var(--kbc-gap)); border-top-right-radius: 0; }
    .kbc-card:not([data-vw~="s"]) > .kbc-vessel { border-top-left-radius: 0; }
    .kbc-card:not([data-vw~="s"]) .kbc-vessel-head, .kbc-card:not([data-vw~="c"]) .kbc-vessel-cont, .kbc-card:not([data-vw~="n"]) .kbc-vessel-steps { display: none; }
}
/* owner 10/26: helper steps (StepCallouts: wipe, purge, swirl) as chips on their parent's tile and indented lines under its row */
.kbc-callouts { flex: 1 1 0; min-width: 0; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 4px; padding-top: 4px; }
/* owner 10/26: a tile's status chips are pills, never a line under the amount; 1589: on the number's row; 2170: Critical / Optional only */
.kbc-callouts > .kbc-tag { max-width: 100%; box-sizing: border-box; overflow: hidden; text-overflow: ellipsis; padding: 0 8px; line-height: 20px;
    background-color: rgba(var(--kiosk-brown-deep-rgb), .85); }
.kbc-callout { padding: 2px 8px; border-radius: 999px; font-size: 15px; font-weight: 700; line-height: 1.25; white-space: nowrap;
    background: rgba(var(--kiosk-brown-deep-rgb), .7); box-shadow: inset 0 0 0 1px rgba(var(--kiosk-gold-hi-rgb), .45); color: rgb(var(--kiosk-rail-ink-rgb)); }
.kbc-callout-lines { display: flex; flex-direction: column; gap: 2px; margin-top: 2px; padding-left: 18px; }
.kbc-callout-line { position: relative; font-size: 15px; line-height: 1.3; opacity: .85; }
.kbc-callout-line::before { content: ""; position: absolute; left: -12px; top: .65em; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .6; }
/* Finish on the left, the buttons on the right: one row */
.kbc-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 24px; }

.kmi-sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.kmi-build { min-width: 0; max-width: 1760px; }
/* Guide with no build card: why in one line, then the recipe on file (1546) and the guide */
.kmi-guide-why { margin: 0; font-size: 17px; font-weight: 600; line-height: 1.4; color: var(--mud-palette-drawer-text); }
.kmi-recipe-fallback { flex: none; min-width: 0; }

/* the wall screen: a card 1500 px wide or more */
@container kdc (min-width: 1500px) {
    .kbc > * { --kbc-n-w: 48px; --kbc-art-w: 144px; --kbc-amt-w: 10rem; --kbc-chip-h: 56px; }
    .kbc-photo { --o: 96px; }
    .kbc-n { font-size: 34px; }
    .kbc-step { padding: 6px 12px; }
    .kbc-amt { font-size: 36px; }
    .kbc-amt small { font-size: 18px; }
    .kbc-verb { font-size: 20px; }
    .kbc-sub, .kbc-tag { font-size: 16px; }
    .kbc-par-caption { padding-left: calc(var(--kbc-n-w) + var(--kbc-art-w) + 36px); font-size: 18px; }
    .kbc-deck { --kbc-cols: var(--kbc-cols-wall, 6); --kbc-gap: 14px; --kbc-row-min: 196px; --kbc-rows: var(--kbc-rows-wall, 1);
        --kbc-row-max: min(var(--kbc-row-wall, 440px), var(--kbc-row-fit)); }
    .kbc-card { padding: 10px 10px 12px; }
    .kbc-card { --kbc-pad: 10px; }
    .kbc-size b { font-size: 22px; }
    .kbc-card-amt small { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
    .kiosk-orb-fallback, .kbc--busy :is(.kbc-grid, .kbc-deck, .kbc-finish) { transition: none; }
}
@media print {
    @page kdc { size: landscape; margin: 10mm; }
    /* isolate the card: everything that neither holds a card nor sits in one goes, and its ancestors stop being layout */
    body:has(.kbc) :not(:has(.kbc), .kbc, .kbc *) { display: none !important; }
    body:has(.kbc) :has(.kbc) { display: block !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important;
        box-shadow: none !important; overflow: visible !important; width: auto !important; height: auto !important; min-height: 0 !important;
        max-height: none !important; position: static !important; transform: none !important; }
    /* paper: ink on white whatever the theme */
    .kbc { page: kdc; break-inside: avoid; padding: 0; border-radius: 0; color: black; background: white; box-shadow: none; }
    .kbc + .kbc { break-before: page; }
    .kbc * { color: black !important; text-shadow: none !important; }
    .kbc :is(.kbc-family, .kbc-mods, .kbc-actions, .kbc-views, .kbc-applied) { display: none !important; }
    .kbc .kbc-host { display: none !important; }
    .kbc-head-body { border: 0; }
    .kbc .kbc-author-notes { display: none !important; }
    .kbc .kbc-print-only { display: flex; }
    .kbc-photo { box-shadow: none; background: none; }
    .kbc-photo::after { content: none; }
    .kbc-cols { position: static; background: none; box-shadow: none; }
    .kbc-step { break-inside: avoid; background: none; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25); }
    .kbc-amt, .kbc-amt--on { opacity: 1; font-weight: 800; }
    .kbc-col, .kbc-col--on, .kbc-col--off { opacity: 1; background: none; box-shadow: inset 0 -2px 0 black; border-radius: 0; }
    .kbc-chip, .kbc-draft, .kbc-tag, .kbc .kmi-chip, .kbc .kmi-stk, .kbc-modmark { background: none; box-shadow: inset 0 0 0 1px black; }
    .kbc-modmark--added::before { color: black; }
    .kbc-modmark--changed::before { background: black; }
    .kbc-par::before { border-color: black; }
    .kbc .kbc-art.ksa { outline: 1.5px solid black; outline-offset: 2px; }
    .kbc-vessel { background: none; box-shadow: inset 0 -2px 0 black; }
    .kbc-card[data-vessel] { border-color: black; }
    .kbc-callout, .kbc .kbc-callouts > * { background: none; box-shadow: inset 0 0 0 1px black; color: black; }
    /* 1522c: the still's img (prepareStillsForPrint) prints; its canvas and the step SVG don't */
    .kiosk-orb-face.orb-print > .kiosk-orb-print { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
    .kiosk-orb-face.orb-print > :is(.kiosk-orb-canvas, .kiosk-orb-fallback) { display: none !important; }
    /* Card view on paper: the same deck, rows tall enough for the art */
    .kbc-deck { --kbc-row-min: 220px; }
    .kbc-card { break-inside: avoid; background: none; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25); }
    .kbc-card--par .kbc-card-head::before { background: black; }
    .kbc-print-foot { display: block; margin-top: 4px; font-size: 15px; font-weight: 600; }
}

/* ===== Kiosk How-to (1550) ===== */
/* /kiosk/howto (search + topic chips + cards) and /kiosk/howto/{id} (KioskGuideView) on the dark stage, plus the How-to links on
   the Floor focus card and the menu Guide tab. Kiosk tokens only (--mud-palette-primary is dark brown on the stage).
   Touch tablet: text >= 15 px, targets >= 56 px; the search box uses the OS keyboard. */
.kht { display: flex; flex-direction: column; gap: 18px; min-width: 0; padding: 0; }
.kht :is(a, button):focus-visible { outline: 3px solid rgb(var(--kiosk-teal-glow-rgb)); outline-offset: 3px; }
.kht-search { display: flex; align-items: center; gap: 12px; max-width: 880px; }
.kx-howto .kht-search .ant-input.kht-search-in { flex: 1 1 auto; min-width: 0; box-sizing: border-box; min-height: 64px; padding: 0 26px;
    border-radius: 999px; font-size: 20px; color: var(--mud-palette-drawer-text); color-scheme: dark;
    background: rgba(var(--kiosk-gold-hi-rgb), .05); border: 1.5px solid rgba(var(--kiosk-gold-hi-rgb), .3); }
.kx-howto .kht-search .ant-input.kht-search-in::placeholder { color: rgba(var(--kiosk-rail-ink-rgb), .55); }
.kx-howto .kht-search .ant-input.kht-search-in:hover { border-color: rgba(var(--kiosk-gold-hi-rgb), .5); }
.kx-howto .kht-search .ant-input.kht-search-in:focus { border-color: rgb(var(--kiosk-gold-rgb)); box-shadow: 0 0 0 3px rgba(var(--kiosk-gold-rgb), .25); outline: none; }
.kht-clear { flex: none; }
.kht-vid { flex: none; gap: 12px; }
.kht-sw { position: relative; flex: none; width: 44px; height: 26px; border-radius: 999px; background: rgba(var(--kiosk-gold-hi-rgb), .14);
    box-shadow: inset 0 0 0 1px rgba(var(--kiosk-gold-hi-rgb), .35); transition: background .18s; }
.kht-sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--mud-palette-drawer-icon); transition: transform .18s; }
.kht-vid.on .kht-sw { background: var(--kiosk-brown-deep); box-shadow: none; }
.kht-vid.on .kht-sw::after { transform: translateX(18px); background: rgb(var(--kiosk-gold-hi-rgb)); }
.kht-loading { display: flex; align-items: center; gap: 14px; padding: 24px 0; font-size: 17px; color: var(--mud-palette-drawer-icon); }
.kht-loading > :first-child { flex: 0 0 220px; }
.kht-results { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.kht-group { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.kht-group-h { margin: 0; font-family: 'Fraunces', serif; font-size: 1.45rem; font-weight: 600; line-height: 1.2; color: rgb(var(--kiosk-gold-hi-rgb)); }
.kht-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.kht-card { box-sizing: border-box; min-width: 0; min-height: 96px; display: flex; flex-direction: column; gap: 8px; padding: 16px 20px; border-radius: 22px;
    text-decoration: none; color: var(--mud-palette-drawer-text); background: rgba(var(--kiosk-gold-hi-rgb), .04);
    box-shadow: inset 0 0 0 1px rgba(var(--kiosk-gold-hi-rgb), .16); transition: transform .12s, box-shadow .18s; -webkit-tap-highlight-color: transparent; }
@media (hover: hover) { .kht-card:hover { box-shadow: inset 0 0 0 1px rgba(var(--kiosk-gold-rgb), .55), 0 10px 24px rgba(0, 0, 0, .28); } }
.kht-card:active { transform: scale(.98); }
.kht-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.kht-card-title { min-width: 0; font-size: 19px; font-weight: 800; line-height: 1.25; overflow-wrap: anywhere; }
.kht-topic { flex: none; padding: 3px 12px; border-radius: 999px; font-size: 15px; font-weight: 800; line-height: 1.3; white-space: nowrap;
    color: rgb(var(--kiosk-gold-hi-rgb)); box-shadow: inset 0 0 0 1.5px rgba(var(--kiosk-gold-hi-rgb), .45); }
.kht-card-sum { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; font-size: 16px; line-height: 1.4;
    color: var(--mud-palette-drawer-icon); }
.kht-card-use { font-size: 15px; line-height: 1.35; color: var(--mud-palette-drawer-icon); }
.kht-card-use b { font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: rgb(var(--kiosk-teal-glow-rgb)); }
.kht-drink-row { display: flex; flex-wrap: wrap; gap: 10px; }
.kht-drink, .kht-use.kht-use--link { display: inline-flex; align-items: center; gap: 10px; box-sizing: border-box; min-height: 56px; padding: 0 22px;
    border-radius: 999px; font-size: 17px; font-weight: 800; text-decoration: none; color: var(--mud-palette-drawer-text);
    background: rgba(var(--kiosk-gold-hi-rgb), .06); box-shadow: inset 0 0 0 1.5px rgba(var(--kiosk-gold-hi-rgb), .4); -webkit-tap-highlight-color: transparent; }
.kht-drink:active, .kht-use.kht-use--link:active { transform: scale(.97); }
.kht-go { font-size: 20px; line-height: 1; color: rgb(var(--kiosk-gold-hi-rgb)); }

/* one guide */
.kht-guide { display: flex; flex-direction: column; gap: 16px; min-width: 0; max-width: 1280px; }
.kht-guide-top { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 16px; }
.kht-guide-title { font-size: 2.3rem; text-wrap: balance; }
.kht-guide-sum { margin: 0; max-width: 900px; font-size: 19px; line-height: 1.45; color: var(--mud-palette-drawer-icon); }
.kht-uses { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.kht-use { display: inline-flex; align-items: center; box-sizing: border-box; min-height: 44px; padding: 4px 16px; border-radius: 999px; font-size: 16px;
    font-weight: 700; color: var(--mud-palette-drawer-text); background: rgba(var(--kiosk-gold-hi-rgb), .06); box-shadow: inset 0 0 0 1px rgba(var(--kiosk-gold-hi-rgb), .26); }
.kht-body { box-sizing: border-box; max-width: 980px; padding: 20px 26px; border-radius: 22px; font-size: 20px; line-height: 1.6;
    color: var(--mud-palette-drawer-text); background: rgba(var(--kiosk-gold-hi-rgb), .04); box-shadow: inset 0 0 0 1px rgba(var(--kiosk-gold-hi-rgb), .16); }
.kht-body > :first-child { margin-top: 0; }
.kht-body > :last-child { margin-bottom: 0; }
.kht-body :is(h1, h2, h3, h4) { margin: 1.3em 0 .45em; font-family: 'Fraunces', serif; font-weight: 600; line-height: 1.2; color: rgb(var(--kiosk-gold-hi-rgb)); }
.kht-body h1 { font-size: 1.9rem; }
.kht-body h2 { font-size: 1.6rem; }
.kht-body :is(h3, h4) { font-size: 1.3rem; }
.kht-body :is(p, li) { font-size: 20px; }
.kht-body li + li { margin-top: 18px; }
.kht-body a { color: rgb(var(--kiosk-gold-hi-rgb)); }
.kht-body :is(code, pre) { font-size: 17px; }
.kht-body table { border-collapse: collapse; }
.kht-body :is(th, td) { padding: 8px 12px; font-size: 18px; border: 1px solid rgba(var(--kiosk-gold-hi-rgb), .25); }
.kht-body hr { border: 0; border-top: 1px solid rgba(var(--kiosk-gold-hi-rgb), .25); }
.kht-files { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.kht-filepick { margin: 0; }
.kht-doc { display: block; width: 100%; height: 72vh; min-height: 360px; border: 0; border-radius: 14px; background: var(--mud-palette-surface); }
.kht-strip { display: flex; flex-direction: column; gap: 14px; max-width: 980px; }
.kht-shot { margin: 0; overflow: hidden; border-radius: 18px; background: rgba(var(--kiosk-gold-hi-rgb), .04); box-shadow: inset 0 0 0 1px rgba(var(--kiosk-gold-hi-rgb), .16); }
.kht-shot-img { display: block; width: 100%; height: auto; }
.kht-shot .kiosk-photo-ph { display: block; aspect-ratio: 4 / 3; }
.kht-missing { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
/* item 1659: guide videos (native controls; CC picks the caption language) */
/* 1795: the player fills the stage under the title, 16:9 kept and centred; a body or files above/below still scroll */
.kx-howto .kht:has(.kht-videos), .kht-guide:has(.kht-videos) { flex: 1 1 auto; }
.kht-videos { flex: 1 1 0; display: flex; flex-direction: column; gap: 12px; min-height: min(560px, 70vh); }
.kht-videos > .zg-video { flex: 1 1 0; min-height: 0; container-type: size; display: flex; align-items: center; justify-content: center; }
.kht-video { width: min(100cqw, 100cqh * 16 / 9); margin: 0; overflow: hidden; border-radius: 18px; background: var(--mud-palette-black);
    box-shadow: inset 0 0 0 1px rgba(var(--kiosk-gold-hi-rgb), .16); }
.kht-player { display: block; width: 100%; aspect-ratio: 16 / 9; background: var(--mud-palette-black); }
.kht-video-cap { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; font-size: 15px; color: var(--mud-palette-drawer-icon); }
.kht-video-cap b { font-weight: 800; color: var(--mud-palette-drawer-text); }
.kht-body .zg-body-play { margin: 10px 0 18px; }
.kht-body .zg-photo img { border-radius: 14px; }
.kht-body .zg-photo-open img { max-width: min(100%, 440px); }
.kht-body .zg-photo-cap { font-size: 15px; color: var(--mud-palette-drawer-icon); }
.kht-body .zg-photo-close .zg-photo-cap { font-size: 17px; color: var(--mud-palette-white); }
/* 1843: steps, sub-steps and headings breathe at arm's length */
.kht-body p { margin: 0 0 .7em; }
.kht-body li > p { margin: 0 0 8px; }
.kht-body li li + li { margin-top: 10px; }
/* 1788: the file-picker row carries the change-log button; its sheet is wider than the small pads */
.kht-filebar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.kht-filebar .kht-filepick { margin: 0; }
.kht-log-btn { min-height: 52px; padding: 0 22px; font-size: 1.02rem; }
.kht-log-btn svg { width: 20px; height: 20px; fill: currentColor; }
.page.kiosk-mode .kiosk-sheet.kht-log { width: min(720px, calc(100vw - 32px)); padding: 26px 28px 20px; }
.kht-log-list { list-style: none; margin: 14px 0 0; padding: 0; }
.kht-log-row { display: grid; grid-template-columns: 8em minmax(0, 1fr); gap: 16px; padding: 16px 0; font-size: 17px; line-height: 1.45;
    border-top: 1px solid rgba(var(--kiosk-rail-ink-rgb), .12); }
.kht-log-at { font-weight: 800; white-space: nowrap; color: rgb(var(--kiosk-gold-hi-rgb)); }
.kht-log-actions { display: flex; justify-content: flex-end; margin-top: 10px; }
.kht-log-actions .kiosk-btn { min-height: 52px; padding: 0 26px; }
/* 1786: a PDF-only guide (Speed of Service pages) fills the stage under the title like 1795's video: no page scroll at 1280x800 */
.kx-howto .kht:has(.kht-doc):not(:has(.kht-body)), .kht-guide:has(.kht-doc):not(:has(.kht-body)) { flex: 1 1 auto; }
.kht-guide:not(:has(.kht-body)) > .kht-files:has(> .kht-doc) { flex: 1 1 0; min-height: min(480px, 60vh); }
.kht-guide:not(:has(.kht-body)) > .kht-files > .kht-doc { flex: 1 1 0; height: auto; min-height: 0; }
.kht-card-video { align-self: flex-start; padding: 2px 12px; border-radius: 999px; font-size: 15px; font-weight: 800;
    color: rgb(var(--kiosk-teal-glow-rgb)); background: rgba(var(--kiosk-teal-glow-rgb), .1); }
/* 1874: the Opus courses (cards, a lesson's place on its card and page) and the Manager view */
.kht-course-cards { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.kht-course { min-height: 84px; justify-content: space-between; background: rgba(var(--kiosk-gold-hi-rgb), .08); }
.kht-course-meta { font-size: 16px; font-weight: 700; line-height: 1.3; color: var(--mud-palette-drawer-icon); }
.kht-card-path { font-size: 15px; font-weight: 700; line-height: 1.3; color: rgb(var(--kiosk-teal-glow-rgb)); overflow-wrap: anywhere; }
.kht-card-tags { flex: none; display: inline-flex; align-items: center; gap: 6px; }
.kht-mgr-tag { flex: none; padding: 3px 10px; border-radius: 999px; font-size: 15px; font-weight: 800; line-height: 1.3; white-space: nowrap;
    color: var(--kiosk-brown-deep); background: rgb(var(--kiosk-gold-hi-rgb)); }
.kht-mgr-bar { display: flex; align-items: center; gap: 14px; box-sizing: border-box; max-width: 880px; padding: 6px 6px 6px 24px; border-radius: 999px;
    font-size: 17px; font-weight: 800; color: var(--kiosk-brown-deep);
    background: linear-gradient(180deg, rgb(var(--kiosk-gold-hi-rgb)), rgb(var(--kiosk-gold-rgb))); }
.kht-mgr-what { flex: 1 1 auto; min-width: 0; }
.kx-btn.kht-lock { flex: none; min-height: 56px; color: rgb(var(--kiosk-gold-hi-rgb)); background: var(--kiosk-brown-deep); box-shadow: none; }
.kht-lesson-up { white-space: normal; text-align: left; }
.kht-lesson-n { font-size: 17px; font-weight: 800; color: var(--mud-palette-drawer-text); }
.kht-lesson-bar { height: 6px; max-width: 980px; border-radius: 999px;
    background: linear-gradient(90deg, rgb(var(--kiosk-gold-hi-rgb)) var(--kht-done, 0%), rgba(var(--kiosk-gold-hi-rgb), .14) var(--kht-done, 0%)); }
.kht-lesson-step { display: flex; flex-wrap: wrap; gap: 12px; max-width: 980px; }
.kht-lesson-step .kx-btn { min-height: 56px; max-width: 100%; white-space: normal; text-align: left; }
.kht-lesson-step .kht-next { margin-left: auto; text-align: right; }

/* the Floor focus card and the menu Guide tab */
.kfc-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 100%; }
.page.kiosk-mode .kfc .kfc-howto, .page.kiosk-mode .kfc .kfc-screen { display: inline-flex; align-items: center; justify-content: center; min-height: 56px; min-width: 140px; text-decoration: none; }
.kmi-howtos { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-bottom: 14px; }
.page.kiosk-mode .kmf .kmi-howto { min-height: 56px; padding: 4px 22px; white-space: normal; text-decoration: none;
    box-shadow: inset 0 0 0 1.5px rgba(var(--kiosk-gold-hi-rgb), .5); }

@media (max-height: 800px), (max-width: 1499px) {
    .kht-guide-title { font-size: 1.9rem; }
    .kht-body, .kht-body :is(p, li) { font-size: 18px; }
    .kht-cards { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
    .kht-card, .kht-drink, .kht-use--link { transition: none; }
}
/* Item 1890: Check yourself on the How-to stage (owner sample 11/9, 1280x800): kiosk palette, 72 px options, every button 56 px. */
.gq--kiosk { --gq-hi: var(--kiosk-gold-hi-rgb); --gq-ok: var(--kiosk-teal-glow-rgb); --gq-bad: var(--kiosk-orb-ember-rgb); --gq-ok-ink: var(--kiosk-pin-ok-ink);
    --gq-bad-ink: var(--kiosk-pin-err-ink); --gq-ink: var(--mud-palette-drawer-text); --gq-mute: var(--mud-palette-drawer-icon); flex: 1 1 auto; gap: 16px; font-size: 17px; }
.gq--kiosk .gq-title { font-size: 30px; color: rgb(var(--kiosk-gold-hi-rgb)); }
.gq--kiosk .gq-prog { font-size: 16px; }
.gq--kiosk .gq-dot { width: 13px; height: 13px; }
.page.kiosk-mode .gq--kiosk :is(.gq-btn, .gq-x) { min-height: 56px; font-size: 17px; }
.gq--kiosk .gq-x { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; font-size: 22px;
    background: rgba(var(--gq-hi), .06); box-shadow: inset 0 0 0 1.5px rgba(var(--gq-hi), .3); }
.gq--kiosk .gq-title + .gq-x { margin-left: auto; }
.gq--kiosk .gq-card { flex: 1 1 auto; padding: 22px 28px; border-radius: 22px; }
.gq--kiosk :is(.gq-type, .gq-qn, .gq-model small) { font-size: 15px; }
.gq--kiosk .gq-q { font-size: 29px; }
.page.kiosk-mode .gq--kiosk .gq-opt { min-height: 72px; padding: 8px 24px; gap: 16px; border-radius: 18px; font-size: 21px; }
.gq--kiosk .gq-opt--wrong, .gq--kiosk .gq-step--bad { background: var(--kiosk-pin-err-bg); color: var(--kiosk-pin-err-ink); }
.gq--kiosk .gq-lt { width: 40px; height: 40px; font-size: 17px; }
.gq--kiosk .gq-mk { font-size: 15px; }
.gq--kiosk .gq-pic { height: 120px; }
.gq--kiosk .gq-why { padding: 14px 20px; border-radius: 16px; font-size: 19px; }
.gq--kiosk .gq-why--bad b { color: var(--kiosk-pin-err-ink); }
.gq--kiosk .gq-btn--p { color: var(--kiosk-brown-deep); background: rgb(var(--kiosk-gold-rgb)); }
.page.kiosk-mode .gq--kiosk .gq-step { min-height: 56px; padding: 6px 18px; gap: 14px; border-radius: 14px; font-size: 19px; }
.gq--kiosk .gq-sn { width: 34px; height: 34px; font-size: 16px; }
.gq--kiosk :is(.gq-hint, .gq-tag) { font-size: 16px; }
.gq--kiosk .gq-h { font-size: 15px; }
.gq--kiosk .gq-model { padding: 18px 24px; border-radius: 18px; }
.gq--kiosk .gq-model p { font-size: 24px; }
.page.kiosk-mode .gq--kiosk .gq-btn--yes { min-height: 64px; padding: 0 30px; font-size: 19px; }
.gq--kiosk .gq-big { font-size: 54px; }
.gq--kiosk .gq-s { font-size: 21px; }
.gq--kiosk .gq-qq { font-size: 20px; }
.gq--kiosk .gq-row { font-size: 17px; line-height: 1.4; }
.gq--kiosk .gq-row b { width: 120px; }
.gq--kiosk :is(.gq-got, .gq-fine) { font-size: 16px; }
.kht-guide .gq-start { gap: 20px; margin-top: 0; padding: 18px 24px; border-radius: 22px; background: rgba(var(--kiosk-teal-glow-rgb), .08);
    box-shadow: inset 0 0 0 1.5px rgba(var(--kiosk-teal-glow-rgb), .5); }
.kht-guide .gq-start-ic { width: 56px; height: 56px; font-size: 26px; color: rgb(var(--kiosk-teal-glow-rgb)); background: rgba(var(--kiosk-teal-glow-rgb), .18); }
.kht-guide .gq-start b { font-size: 22px; }
.kht-guide .gq-start div span { font-size: 17px; color: var(--mud-palette-drawer-icon); }

/* ===== 1440: policy re-accept sheet (after Clock IN) ===== */
.kiosk-sheet.kpr { width: min(700px, calc(100vw - 32px)); padding: 26px 30px 22px; border-radius: 24px;
    background: rgba(var(--kiosk-pin-sheet-rgb), .97); color: rgb(var(--kiosk-rail-ink-rgb));
    border: 1px solid rgba(var(--kiosk-teal-glow-rgb), .55);
    box-shadow: 0 0 26px rgba(var(--kiosk-teal-glow-rgb), .22), 0 24px 60px rgba(0, 0, 0, .6); }
.kpr-punch { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px; border-radius: 999px;
    font-size: 15px; font-weight: 700; color: rgb(var(--kiosk-teal-glow-rgb)); background: rgba(var(--kiosk-teal-glow-rgb), .14);
    box-shadow: inset 0 0 0 1.5px rgba(var(--kiosk-teal-glow-rgb), .5); }
.kpr-title { margin: 14px 0 2px; font-family: 'Fraunces', Georgia, serif; font-size: 30px; font-weight: 600; color: rgb(var(--kiosk-gold-hi-rgb)); }
.kpr-meta { font-size: 16px; color: rgba(var(--kiosk-rail-ink-rgb), .72); }
.kpr-what { margin: 16px 0 10px; padding: 14px 18px; border-radius: 16px; background: rgba(var(--kiosk-gold-hi-rgb), .05);
    box-shadow: inset 0 0 0 1px rgba(var(--kiosk-gold-hi-rgb), .18); }
.kpr-what-label { margin-bottom: 6px; font-size: 15px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(var(--kiosk-gold-rgb), .95); }
.kpr-what ul { margin: 0; padding: 0; list-style: none; }
.kpr-what li { position: relative; padding: 7px 0 7px 30px; font-size: 19px; line-height: 1.35; }
.kpr-what li::before { content: ""; position: absolute; left: 4px; top: 15px; width: 12px; height: 12px; border-radius: 50%;
    background: rgb(var(--kiosk-teal-glow-rgb)); box-shadow: 0 0 10px rgba(var(--kiosk-teal-glow-rgb), .6); }
.kpr-read { display: inline-flex; align-items: center; gap: 10px; min-height: 56px; padding: 0 22px; border-radius: 999px; text-decoration: none;
    font-size: 17px; font-weight: 700; color: rgb(var(--kiosk-gold-hi-rgb)); background: rgba(var(--kiosk-gold-hi-rgb), .06);
    border: 1px solid rgba(var(--kiosk-gold-hi-rgb), .45); }
.kpr-row { display: flex; justify-content: flex-end; align-items: center; gap: 14px; margin-top: 18px; }
.page.kiosk-mode .kpr-row button { min-height: 64px; border-radius: 999px; cursor: pointer; }
.kpr-later { padding: 0 30px; font-size: 19px; font-weight: 700; color: rgb(var(--kiosk-gold-hi-rgb)); background: rgba(var(--kiosk-gold-hi-rgb), .06);
    border: 1px solid rgba(var(--kiosk-gold-hi-rgb), .45); }
.kpr-accept { padding: 0 34px; font-size: 20px; font-weight: 800; color: rgb(var(--kiosk-pin-sheet-rgb)); background: rgb(var(--kiosk-teal-glow-rgb));
    border: 0; box-shadow: 0 0 18px rgba(var(--kiosk-teal-glow-rgb), .3); }
.kpr-row button:disabled { opacity: .5; cursor: default; }
.kpr-fine { display: flex; flex-direction: column; margin-top: 14px; font-size: 15px; line-height: 1.5; color: rgba(var(--kiosk-rail-ink-rgb), .6); }