/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
/* Circuit reconnect dialog — on the shared --zp-* tokens (ADR-029), so it follows the light/dark theme instead of
   flashing a white box over a dark lane. The show/hide state classes below are the framework's contract. */
.components-reconnect-first-attempt-visible[b-nt7sd7o8bx],
.components-reconnect-repeated-attempt-visible[b-nt7sd7o8bx],
.components-reconnect-failed-visible[b-nt7sd7o8bx],
.components-pause-visible[b-nt7sd7o8bx],
.components-resume-failed-visible[b-nt7sd7o8bx],
.components-rejoining-animation[b-nt7sd7o8bx] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-nt7sd7o8bx],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-nt7sd7o8bx],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-nt7sd7o8bx],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-nt7sd7o8bx],
#components-reconnect-modal.components-reconnect-retrying[b-nt7sd7o8bx],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-nt7sd7o8bx],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-nt7sd7o8bx],
#components-reconnect-modal.components-reconnect-failed[b-nt7sd7o8bx],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-nt7sd7o8bx] {
    display: block;
}


#components-reconnect-modal[b-nt7sd7o8bx] {
    background-color: var(--zp-elevated);
    color: var(--zp-text);
    font-family: var(--zp-font);
    width: 21rem;
    max-width: calc(100vw - 2rem);
    margin: 20vh auto;
    padding: 2rem 1.75rem 1.75rem;
    border: 1px solid var(--zp-line-strong);
    border-radius: 16px;
    box-shadow: var(--zp-shadow-lg);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-nt7sd7o8bx 0.5s both;

    &[open] {
        animation: components-reconnect-modal-slideUp-b-nt7sd7o8bx 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-nt7sd7o8bx 0.5s ease-in-out 0.3s;
        animation-fill-mode: both;
    }
}

#components-reconnect-modal[b-nt7sd7o8bx]::backdrop {
    background-color: rgba(5, 15, 11, 0.45);
    backdrop-filter: blur(2px);
    animation: components-reconnect-modal-fadeInOpacity-b-nt7sd7o8bx 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-nt7sd7o8bx {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-nt7sd7o8bx {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-nt7sd7o8bx {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-nt7sd7o8bx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-nt7sd7o8bx] {
    margin: 0;
    text-align: center;
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.5;
    color: var(--zp-text);
}

#components-reconnect-modal button[b-nt7sd7o8bx] {
    border: 0;
    background: linear-gradient(180deg, var(--zp-accent), var(--zp-accent-2));
    color: var(--zp-on-accent);
    padding: 0.55rem 1.6rem;
    border-radius: var(--zp-radius-sm);
    font: 750 0.9rem var(--zp-font);
    cursor: pointer;
    transition: filter 0.15s;
}

    #components-reconnect-modal button:hover[b-nt7sd7o8bx] {
        filter: brightness(1.06);
    }

    #components-reconnect-modal button:active[b-nt7sd7o8bx] {
        filter: brightness(0.96);
    }

    #components-reconnect-modal button:focus-visible[b-nt7sd7o8bx] {
        outline: 2px solid var(--zp-accent);
        outline-offset: 3px;
    }

.components-rejoining-animation[b-nt7sd7o8bx] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-nt7sd7o8bx] {
        position: absolute;
        border: 3px solid var(--zp-accent);
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-nt7sd7o8bx 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-nt7sd7o8bx] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-nt7sd7o8bx {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/About.razor.rz.scp.css */
/* Public About page — reuses the Emerald Meridian --zp-* tokens (app.css) with literal fallbacks so the
   marketing surface matches the app exactly while staying self-contained and offline-safe. */

.about-root[b-d576kghrzb] {
    min-height: 100vh;
    color: var(--zp-text, var(--zp-text));
    font-family: var(--zp-font, -apple-system, "Segoe UI", system-ui, "Helvetica Neue", sans-serif);
    background:
        radial-gradient(1100px 620px at 82% -8%, var(--zp-aurora-1), transparent 60%),
        radial-gradient(900px 700px at 0% 108%, var(--zp-aurora-2), transparent 55%),
        linear-gradient(160deg, var(--zp-bg-2, var(--zp-bg-2)), var(--zp-bg, var(--zp-bg)));
    background-attachment: fixed;
    line-height: 1.55;
}

/* ---- Brand gem + wordmark ---- */
.about-gem[b-d576kghrzb] {
    width: 30px; height: 30px; border-radius: 9px; flex: 0 0 30px;
    background: radial-gradient(circle at 30% 30%, var(--zp-accent-bright), var(--zp-accent) 70%);
    box-shadow: 0 6px 18px -6px rgba(0, 229, 160, 0.7), inset 0 0 0 1px var(--zp-accent-line);
}
.about-brand[b-d576kghrzb] { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; }
.about-word[b-d576kghrzb] { font-weight: 750; font-size: 1.2rem; letter-spacing: -0.03em; color: var(--zp-text); }
.about-brand.small .about-gem[b-d576kghrzb] { width: 24px; height: 24px; flex-basis: 24px; }
.about-brand.small .about-word[b-d576kghrzb] { font-size: 1.05rem; }

/* ---- Top nav ---- */
.about-nav[b-d576kghrzb] {
    position: sticky; top: 0; z-index: 10;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.85rem clamp(1rem, 4vw, 3rem);
    background: var(--zp-veil); backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--zp-line, var(--zp-line));
}
.about-nav-links[b-d576kghrzb] { display: flex; align-items: center; gap: clamp(0.75rem, 2vw, 1.75rem); }
.about-nav-links a[b-d576kghrzb] { color: var(--zp-text-dim, var(--zp-text-dim)); text-decoration: none; font-size: 0.9rem; font-weight: 500; }
.about-nav-links a:hover[b-d576kghrzb] { color: var(--zp-text, var(--zp-text)); }
.about-nav-links a.about-signin[b-d576kghrzb] {
    color: var(--zp-on-accent); font-weight: 700; padding: 0.4rem 0.9rem; border-radius: 999px;
    background: linear-gradient(180deg, var(--zp-accent, var(--zp-accent)), var(--zp-accent-2, var(--zp-accent-2)));
}
@media (max-width: 640px) { .about-nav-links a:not(.about-signin)[b-d576kghrzb] { display: none; } }

/* ---- Buttons ---- */
.btn[b-d576kghrzb] {
    display: inline-flex; align-items: center; gap: 0.45rem; text-decoration: none; cursor: pointer;
    padding: 0.7rem 1.3rem; border-radius: var(--zp-radius-xs, 8px); font-weight: 650; font-size: 0.95rem;
    border: 1px solid var(--zp-line-strong, var(--zp-line-strong)); color: var(--zp-text, var(--zp-text));
    background: var(--zp-elevated, var(--zp-elevated)); transition: transform 0.15s var(--zp-ease, ease), filter 0.15s;
}
.btn:hover[b-d576kghrzb] { transform: translateY(-1px); }
.btn.primary[b-d576kghrzb] {
    border: none; color: var(--zp-on-accent); font-weight: 750;
    background: linear-gradient(180deg, var(--zp-accent, var(--zp-accent)), var(--zp-accent-2, var(--zp-accent-2)));
    box-shadow: 0 10px 26px -12px rgba(0, 229, 160, 0.7);
}
.btn.primary:hover[b-d576kghrzb] { filter: brightness(1.06); }
.btn.ghost[b-d576kghrzb] { background: transparent; }
.btn.lg[b-d576kghrzb] { padding: 0.9rem 1.7rem; font-size: 1.05rem; }

/* ---- Eyebrow / headings ---- */
.about-eyebrow[b-d576kghrzb] {
    display: inline-block; text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.72rem;
    font-weight: 600; color: var(--zp-text-faint, var(--zp-text-faint));
}
.about-eyebrow.center[b-d576kghrzb] { display: block; text-align: center; }
.about-h2[b-d576kghrzb] {
    text-align: center; font-size: clamp(1.6rem, 3.5vw, 2.3rem); font-weight: 700; letter-spacing: -0.03em;
    margin: 0.4rem 0 2rem; background: linear-gradient(180deg, var(--zp-text), var(--zp-text-dim));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---- Hero ---- */
.about-hero[b-d576kghrzb] { max-width: 1120px; margin: 0 auto; padding: clamp(3rem, 8vw, 6rem) clamp(1rem, 4vw, 3rem) 3rem; text-align: center; }
.about-hero h1[b-d576kghrzb] {
    font-size: clamp(2.2rem, 6vw, 4rem); font-weight: 720; letter-spacing: -0.035em; line-height: 1.05;
    margin: 0.6rem auto 0; max-width: 16ch;
    background: linear-gradient(180deg, var(--zp-text), var(--zp-text-dim)); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.about-lede[b-d576kghrzb] { max-width: 62ch; margin: 1.2rem auto 0; color: var(--zp-text-dim, var(--zp-text-dim)); font-size: clamp(1rem, 2vw, 1.15rem); }
.about-cta[b-d576kghrzb] { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; margin-top: 1.75rem; }

.about-props[b-d576kghrzb] {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0.75rem;
    max-width: 1120px; margin: 3rem auto 0; text-align: left;
}
.prop[b-d576kghrzb] {
    display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 0.6rem; row-gap: 0.15rem;
    padding: 0.9rem 1rem; border-radius: var(--zp-radius-sm, 10px);
    background: linear-gradient(180deg, var(--zp-surface-2, var(--zp-surface-2)), var(--zp-surface, var(--zp-surface)));
    border: 1px solid var(--zp-line, var(--zp-line));
}
.prop-ic[b-d576kghrzb] { grid-row: 1 / span 2; font-size: 1.4rem; align-self: center; }
.prop b[b-d576kghrzb] { color: var(--zp-text); font-weight: 650; font-size: 0.95rem; }
.prop span:last-child[b-d576kghrzb] { color: var(--zp-text-dim, var(--zp-text-dim)); font-size: 0.85rem; }

/* ---- Sections ---- */
.about-section[b-d576kghrzb] { max-width: 1120px; margin: 0 auto; padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1rem, 4vw, 3rem); }

.about-grid[b-d576kghrzb] { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; }
.card[b-d576kghrzb] {
    padding: 1.4rem; border-radius: var(--zp-radius, 16px);
    background: linear-gradient(180deg, var(--zp-surface-2, var(--zp-surface-2)), var(--zp-surface, var(--zp-surface)));
    border: 1px solid var(--zp-line, var(--zp-line));
    box-shadow: var(--zp-shadow); transition: transform 0.2s var(--zp-ease, ease), border-color 0.2s;
}
.card:hover[b-d576kghrzb] { transform: translateY(-3px); border-color: var(--zp-accent-line, var(--zp-accent-line)); }
.card-ic[b-d576kghrzb] {
    display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; font-size: 1.4rem;
    border-radius: 11px; background: var(--zp-accent-soft, var(--zp-accent-soft));
    border: 1px solid var(--zp-accent-line, var(--zp-accent-line)); margin-bottom: 0.9rem;
}
.card h3[b-d576kghrzb] { margin: 0 0 0.4rem; font-size: 1.15rem; font-weight: 650; color: var(--zp-text); letter-spacing: -0.01em; }
.card p[b-d576kghrzb] { margin: 0; color: var(--zp-text-dim, var(--zp-text-dim)); font-size: 0.92rem; }

/* ---- How it works ---- */
.how[b-d576kghrzb] { border-top: 1px solid var(--zp-line, var(--zp-line)); border-bottom: 1px solid var(--zp-line, var(--zp-line)); }
.about-steps[b-d576kghrzb] { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; counter-reset: step; }
.about-steps li[b-d576kghrzb] {
    display: flex; flex-direction: column; gap: 0.35rem; padding: 1.2rem 1rem; border-radius: var(--zp-radius-sm, 10px);
    background: linear-gradient(180deg, var(--zp-surface-2, var(--zp-surface-2)), var(--zp-surface, var(--zp-surface)));
    border: 1px solid var(--zp-line, var(--zp-line)); position: relative;
}
.step-n[b-d576kghrzb] {
    display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px;
    background: var(--zp-accent-soft, var(--zp-accent-soft)); color: var(--zp-accent, var(--zp-accent));
    border: 1px solid var(--zp-accent-line, var(--zp-accent-line)); font-family: var(--zp-mono, monospace); font-weight: 700;
}
.about-steps b[b-d576kghrzb] { color: var(--zp-text); font-weight: 650; }
.about-steps span:last-child[b-d576kghrzb] { color: var(--zp-text-dim, var(--zp-text-dim)); font-size: 0.88rem; }

/* ---- Why ---- */
.about-why[b-d576kghrzb] { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; }
.why[b-d576kghrzb] { padding: 1.3rem; border-radius: var(--zp-radius, 16px); background: linear-gradient(180deg, var(--zp-surface-2, var(--zp-surface-2)), var(--zp-surface, var(--zp-surface))); border: 1px solid var(--zp-line, var(--zp-line)); border-left: 3px solid var(--zp-accent, var(--zp-accent)); }
.why b[b-d576kghrzb] { color: var(--zp-text); font-size: 1.05rem; }
.why p[b-d576kghrzb] { margin: 0.4rem 0 0; color: var(--zp-text-dim, var(--zp-text-dim)); font-size: 0.92rem; }

/* ---- Final CTA + footer ---- */
.about-final[b-d576kghrzb] { text-align: center; padding: clamp(3rem, 7vw, 5rem) 1rem; }
.about-final h2[b-d576kghrzb] { font-size: clamp(1.5rem, 4vw, 2.2rem); font-weight: 720; letter-spacing: -0.03em; margin: 0 0 1.5rem; color: var(--zp-text); }

.about-footer[b-d576kghrzb] {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
    max-width: 1120px; margin: 0 auto; padding: 1.75rem clamp(1rem, 4vw, 3rem);
    border-top: 1px solid var(--zp-line, var(--zp-line));
}
.about-foot-note[b-d576kghrzb] { color: var(--zp-text-faint, var(--zp-text-faint)); font-size: 0.8rem; }
.about-back[b-d576kghrzb] { color: var(--zp-accent, var(--zp-accent)); text-decoration: none; font-size: 0.9rem; font-weight: 600; }
.about-back:hover[b-d576kghrzb] { text-decoration: underline; }

@media (prefers-reduced-motion: reduce) { .btn[b-d576kghrzb], .card[b-d576kghrzb] { transition: none; } }
/* /Components/Pages/Account/Security.razor.rz.scp.css */
.security-root[b-lvezam606c] {
    display: flex;
    justify-content: center;
    padding: 2.5rem 1.25rem;
    color: var(--zp-text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, "Helvetica Neue", sans-serif;
}

.security-card[b-lvezam606c] {
    width: 100%;
    max-width: 30rem;
    padding: 2rem;
    background: var(--zp-surface);
    border: 1px solid var(--zp-line-strong);
    border-radius: 16px;
    box-shadow: var(--zp-shadow-lg);
}

.security-card h1[b-lvezam606c] { font-size: 1.3rem; margin: 0 0 0.5rem; }
.security-lede[b-lvezam606c] { font-size: 0.85rem; color: var(--zp-text-dim); line-height: 1.6; margin: 0 0 1.5rem; }
.security-empty[b-lvezam606c] { font-size: 0.85rem; color: var(--zp-text-dim); margin: 0 0 1.25rem; }

.security-list[b-lvezam606c] { list-style: none; margin: 0 0 1.5rem; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.security-list li[b-lvezam606c] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--zp-line);
    border-radius: 10px;
    background: var(--zp-sunken);
}
.security-list-label[b-lvezam606c] { font-weight: 600; flex: 1; }
.security-list-date[b-lvezam606c] { font-size: 0.72rem; color: var(--zp-text-faint); }

.security-remove[b-lvezam606c] {
    border: 1px solid rgba(255, 122, 122, 0.35);
    background: transparent;
    color: var(--zp-danger);
    border-radius: 8px;
    padding: 0.35rem 0.6rem;
    font-size: 0.75rem;
    cursor: pointer;
}
.security-remove:hover[b-lvezam606c] { background: rgba(255, 122, 122, 0.1); }

.security-add[b-lvezam606c] { display: flex; flex-direction: column; gap: 0.75rem; padding-top: 1rem; border-top: 1px solid var(--zp-line); }

.security-field[b-lvezam606c] { display: flex; flex-direction: column; gap: 0.35rem; }
.security-field span[b-lvezam606c] { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--zp-text-dim); font-weight: 600; }
.security-field input[b-lvezam606c] {
    padding: 0.6rem 0.75rem;
    border-radius: 9px;
    border: 1px solid var(--zp-line-strong);
    background: var(--zp-sunken);
    color: var(--zp-text);
    font-size: 0.95rem;
}

.security-btn[b-lvezam606c] {
    padding: 0.75rem;
    border: none;
    border-radius: 10px;
    background: linear-gradient(180deg, var(--zp-accent), var(--zp-accent-2));
    color: var(--zp-on-accent);
    font-weight: 700;
    cursor: pointer;
}
.security-btn:disabled[b-lvezam606c] { opacity: 0.5; cursor: not-allowed; }

.security-error[b-lvezam606c] {
    padding: 0.5rem 0.7rem;
    border-radius: 8px;
    background: rgba(255, 122, 122, 0.1);
    border: 1px solid rgba(255, 122, 122, 0.3);
    color: var(--zp-danger);
    font-size: 0.8rem;
}

.security-back[b-lvezam606c] { display: inline-block; margin-top: 1.5rem; font-size: 0.8rem; color: var(--zp-accent-text); text-decoration: none; }
.security-back:hover[b-lvezam606c] { text-decoration: underline; }
/* /Components/Pages/Admin/ChannelMix.razor.rz.scp.css */
/* Online vs shop floor (§17): the multi-series marks the shared single-series charts don't cover. Three
   series, three fixed hues, and never colour alone — every mark carries a title naming its figures, and a
   legend sits under each chart. */
.col-chart.scroll[b-f8vc7gbiu9] { overflow-x: auto; }
.col-chart.scroll .col[b-f8vc7gbiu9] { flex: 1 0 16px; }

/* Stacked: one column per day, online sitting on top of the shop floor, so the total and the mix are
   readable from the same mark. */
.col-stack[b-f8vc7gbiu9] { display: flex; flex-direction: column-reverse; width: 72%; min-height: 2px; border-radius: 3px 3px 0 0; overflow: hidden; }
.col-seg[b-f8vc7gbiu9] { display: block; width: 100%; }
.col-seg.instore[b-f8vc7gbiu9] { background: var(--zp-accent); flex: 1 1 auto; }
.col-seg.online[b-f8vc7gbiu9] { background: var(--zp-warn); flex: 0 0 auto; }
.col-seg.whatsapp[b-f8vc7gbiu9] { background: var(--zp-accent-text); flex: 0 0 auto; }

/* Paired: thin bars side by side, for comparing shape rather than total. */
.col-pair[b-f8vc7gbiu9] { display: flex; align-items: flex-end; justify-content: center; gap: 2px; width: 100%; height: 100%; }
.col-bar[b-f8vc7gbiu9] { width: 6px; min-height: 2px; border-radius: 3px 3px 0 0; }
.col-bar.online[b-f8vc7gbiu9] { background: var(--zp-warn); }
.col-bar.instore[b-f8vc7gbiu9] { background: var(--zp-accent); }
.col-bar.whatsapp[b-f8vc7gbiu9] { background: var(--zp-accent-text); }

.channel-legend[b-f8vc7gbiu9] { margin: 0.75rem 0 0; }
.legend-swatch.online[b-f8vc7gbiu9] { background: var(--zp-warn); }
.legend-swatch.instore[b-f8vc7gbiu9] { background: var(--zp-accent); }
.legend-swatch.whatsapp[b-f8vc7gbiu9] { background: var(--zp-accent-text); }

/* Split tender bar: one method's online / shop-floor shares side by side in one track. */
.hbar-track.split[b-f8vc7gbiu9] { display: flex; }
.hbar-track.split .hbar-fill[b-f8vc7gbiu9] { border-radius: 0; min-width: 0; }
.hbar-fill.online[b-f8vc7gbiu9] { background: var(--zp-warn); }
.hbar-fill.instore[b-f8vc7gbiu9] { background: var(--zp-accent); }
/* /Components/Pages/Admin/CustomerAdmin.razor.rz.scp.css */
/* The customer name opens the Rewards panel: a real button (keyboard-reachable) that reads as a link. There is no global
   link-button utility yet (ADR-029), so this one rule stays scoped. Stat tiles and h3 now come from app.css. */
.link-btn[b-a3rokmp08z] {
    background: none;
    border: none;
    padding: 0;
    color: inherit;
    font: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.link-btn:focus-visible[b-a3rokmp08z] {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}
/* /Components/Pages/Admin/Insights.razor.rz.scp.css */
/* AI narrative and the insight list — prose-shaped content no shared component covers. */
.ai-narrative[b-tgzq40b7uc] { font-size: 1.02rem; line-height: 1.6; color: var(--zp-text); margin: 0.5rem 0; max-width: 78ch; }
.ai-highlights[b-tgzq40b7uc] { margin: 0.5rem 0 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: 0.3rem; }
.ai-highlights li[b-tgzq40b7uc] { color: var(--zp-text-dim); }

.ai-insights[b-tgzq40b7uc] { list-style: none; margin: 0.5rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.ai-insight[b-tgzq40b7uc] { display: flex; gap: 0.75rem; align-items: flex-start; padding: 0.65rem 0.8rem; border-radius: var(--zp-radius-sm); background: var(--zp-surface-2); border: 1px solid var(--zp-line); }
.ai-insight p[b-tgzq40b7uc] { margin: 0.2rem 0 0; color: var(--zp-text-dim); font-size: 0.9rem; }

.ai-answer[b-tgzq40b7uc] { margin: 0.5rem 0 0; line-height: 1.55; }
/* /Components/Pages/Admin/Labels.razor.rz.scp.css */
/* The on-screen facsimile of a printed shelf label — page-specific, so it stays scoped (ADR-029). */
.label-preview-grid[b-bynye5vi50] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
    gap: 0.75rem;
}

.label-preview[b-bynye5vi50] {
    border: 1px dashed var(--zp-line-strong);
    border-radius: var(--zp-radius-sm);
    padding: 0.5rem 0.75rem;
    aspect-ratio: 5 / 3;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: var(--zp-surface);
    color: var(--zp-text);
}

.label-name[b-bynye5vi50] { font-weight: 600; line-height: 1.2; }
.label-price[b-bynye5vi50] { font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.label-price small[b-bynye5vi50] { font-size: 0.8rem; font-weight: 400; }
.label-was[b-bynye5vi50] { font-size: 0.8rem; text-decoration: line-through; color: var(--zp-text-dim); }
.label-code[b-bynye5vi50] { font-family: var(--zp-mono); letter-spacing: 0.1em; }
.label-meta[b-bynye5vi50] { font-size: 0.7rem; color: var(--zp-text-faint); text-align: right; }
/* /Components/Pages/Admin/OnlineOrders.razor.rz.scp.css */
/* Online orders & delivery (§17/§37): the two-series and highlighted marks the shared single-series charts
   don't cover. Never colour alone — every mark carries a title naming its figures, and a legend sits under
   the stacked chart. */
.col-chart.scroll[b-ef4z0sf959] { overflow-x: auto; }
.col-chart.scroll .col[b-ef4z0sf959] { flex: 1 0 16px; }

/* Stacked: one column per day, failures sitting on top of the deliveries, so the volume and the failure
   share are readable from the same mark. */
.col-stack[b-ef4z0sf959] { display: flex; flex-direction: column-reverse; width: 72%; min-height: 2px; border-radius: 3px 3px 0 0; overflow: hidden; }
.col-seg[b-ef4z0sf959] { display: block; width: 100%; }
.col-seg.delivered[b-ef4z0sf959] { background: var(--zp-accent); flex: 1 1 auto; }
.col-seg.failed[b-ef4z0sf959] { background: var(--zp-danger); flex: 0 0 auto; }

.delivery-legend[b-ef4z0sf959] { margin: 0.75rem 0 0; }
.legend-swatch.delivered[b-ef4z0sf959] { background: var(--zp-accent); }
.legend-swatch.failed[b-ef4z0sf959] { background: var(--zp-danger); }

/* The open-ended last band of the fulfilment distribution — the orders a customer rings about. */
.hbar-fill.late[b-ef4z0sf959] { background: var(--zp-danger); }
/* /Components/Pages/Admin/Reports.razor.rz.scp.css */
/* The report picker (a vertical list beside the report) is specific to this page. */
.rep-layout[b-4oumrdnf0p] { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: 1.25rem; align-items: start; }
@media (max-width: 820px) { .rep-layout[b-4oumrdnf0p] { grid-template-columns: 1fr; } }

.rep-list[b-4oumrdnf0p] { display: flex; flex-direction: column; gap: 2px; position: sticky; top: 1rem; }
.rep-group[b-4oumrdnf0p] { font-size: 0.7rem; font-weight: 750; text-transform: uppercase; letter-spacing: 0.06em; color: var(--zp-text-faint); margin: 0.9rem 0 0.3rem; }
.rep-group:first-child[b-4oumrdnf0p] { margin-top: 0; }
.rep-item[b-4oumrdnf0p] { text-align: left; padding: 0.45rem 0.7rem; border-radius: var(--zp-radius-xs); cursor: pointer; background: transparent; border: 1px solid transparent; color: var(--zp-text-dim); font: 600 0.88rem var(--zp-font); }
.rep-item:hover[b-4oumrdnf0p] { background: var(--zp-surface-2); color: var(--zp-text); }
.rep-item.on[b-4oumrdnf0p] { background: var(--zp-accent-soft); border-color: var(--zp-accent-line); color: var(--zp-accent-text); font-weight: 700; }
/* /Components/Pages/Admin/SystemConfig.razor.rz.scp.css */
/* The runtime flag switch (role=switch). Page-specific: no other staff page toggles a setting in place. */
.flag-toggle[b-h0316hwu1c] {
    position: relative;
    width: 46px; height: 26px; flex: none;
    border-radius: 999px;
    border: 1px solid var(--zp-line-strong);
    background: var(--zp-line);
    cursor: pointer;
    padding: 0;
    vertical-align: middle;
    transition: background 0.2s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.2s;
}
.flag-toggle.on[b-h0316hwu1c] {
    background: linear-gradient(180deg, var(--zp-accent), var(--zp-accent-2));
    border-color: transparent;
    box-shadow: 0 6px 16px -6px rgba(0, 229, 160, 0.6);
}
.flag-toggle:focus-visible[b-h0316hwu1c] { outline: none; box-shadow: 0 0 0 3px var(--zp-accent-soft); border-color: var(--zp-accent); }
.flag-toggle:disabled[b-h0316hwu1c] { opacity: 0.5; cursor: default; }

.flag-knob[b-h0316hwu1c] {
    position: absolute; top: 2px; left: 2px;
    width: 20px; height: 20px; border-radius: 50%;
    background: #cdd6d0;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
    transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), background 0.2s;
}
.flag-toggle.on .flag-knob[b-h0316hwu1c] { transform: translateX(20px); background: var(--zp-on-accent); }
/* /Components/Pages/CustomerCare/Dashboards.razor.rz.scp.css */
/* Delivered vs failed per day — the one chart here with two series side by side, which the shared
   ColumnChart (single series) does not draw. Everything else on the page uses the global chart marks.
   Mark spec: 8px bars, 4px rounded top, 2px gap between the delivered/failed pair, baseline-anchored. */
.trend-chart[b-w4dw3oen2q] { display: flex; align-items: flex-end; gap: 0.5rem; height: 160px; padding-top: 0.5rem; overflow-x: auto; }
.trend-day[b-w4dw3oen2q] { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 0.35rem; flex: none; min-width: 32px; height: 100%; }
.trend-bars[b-w4dw3oen2q] { display: flex; align-items: flex-end; gap: 2px; height: 120px; }
.trend-bar[b-w4dw3oen2q] { width: 8px; min-height: 2px; border-radius: 4px 4px 0 0; }
.trend-label[b-w4dw3oen2q] { font-size: 0.66rem; color: var(--zp-text-faint); white-space: nowrap; font-variant-numeric: tabular-nums; }
.trend-good[b-w4dw3oen2q] { background: var(--zp-accent); }
.trend-bad[b-w4dw3oen2q] { background: var(--zp-danger); }
/* /Components/Pages/CustomerCare/InTransit.razor.rz.scp.css */
/* Leaflet sizes the map to its container, so the container needs an explicit height — there is no
   utility for a fixed map height, and an unsized container renders a zero-height (invisible) map. */
.rider-map[b-pshwlzkp46] { height: 420px; border-radius: var(--zp-radius-sm); }
/* /Components/Pages/DeliveryRider.razor.rz.scp.css */
/* Rider mobile page (§37, ADR-014) — touch-first, one-handed, out on the road. Reuses the shared
   Emerald Meridian tokens (app.css) but none of the lane/admin chrome — a rider never sees either. */
.rider-root[b-893wcb4fg3] {
    min-height: 100vh;
    padding: 0 0 3rem;
    color: var(--zp-text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, "Helvetica Neue", sans-serif;
    background: linear-gradient(160deg, var(--zp-bg-2), var(--zp-bg));
}

.rider-head[b-893wcb4fg3] {
    position: sticky; top: 0; z-index: 5;
    display: flex; align-items: center; gap: 0.6rem;
    padding: 1rem 1.1rem;
    background: var(--zp-veil); backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--zp-line);
}
.rider-brand[b-893wcb4fg3] {
    font-weight: 750; font-size: 1.1rem; letter-spacing: -0.02em;
    background: linear-gradient(180deg, var(--zp-text), var(--zp-text-dim));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.rider-title[b-893wcb4fg3] { color: var(--zp-text-dim); font-size: 0.9rem; }
.rider-signout[b-893wcb4fg3] { margin-left: auto; }
.rider-signout button[b-893wcb4fg3] {
    padding: 0.55rem 1rem; min-height: 2.75rem; border-radius: 8px; cursor: pointer;
    background: transparent; border: 1px solid var(--zp-line-strong); color: var(--zp-text-dim); font-size: 0.85rem;
}

.rider-error[b-893wcb4fg3], .rider-notice[b-893wcb4fg3] {
    margin: 0.9rem 1.1rem 0; padding: 0.75rem 0.9rem; border-radius: 10px; font-size: 0.9rem;
}
.rider-error[b-893wcb4fg3] { background: var(--zp-warn-soft); border: 1px solid var(--zp-warn-line); color: var(--zp-text); }
.rider-notice[b-893wcb4fg3] { background: var(--zp-accent-soft); border: 1px solid var(--zp-accent-line); color: var(--zp-accent-text); }
.rider-empty[b-893wcb4fg3] { padding: 3rem 1.5rem; text-align: center; color: var(--zp-text-faint); }

.rider-card[b-893wcb4fg3] {
    margin: 1rem 1.1rem; padding: 1.1rem 1.2rem; border-radius: 16px;
    background: linear-gradient(180deg, var(--zp-surface-2), var(--zp-surface));
    border: 1px solid var(--zp-line); box-shadow: var(--zp-shadow, 0 24px 50px -30px rgba(0,0,0,0.85));
}
.rider-card-head[b-893wcb4fg3] { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.6rem; }
.rider-order-id[b-893wcb4fg3] { font-family: ui-monospace, Consolas, monospace; font-weight: 700; color: var(--zp-text); }
.rider-status[b-893wcb4fg3] {
    font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700;
    padding: 0.2rem 0.6rem; border-radius: 999px; border: 1px solid var(--zp-line-strong); color: var(--zp-text-dim);
}
.rider-status.Assigned[b-893wcb4fg3] { color: var(--zp-warn); border-color: rgba(242,181,82,0.4); }
.rider-status.OutForDelivery[b-893wcb4fg3] { color: var(--zp-accent-text); border-color: var(--zp-accent-line); background: var(--zp-accent-soft); }

.rider-address[b-893wcb4fg3] { display: block; margin: 0 0 0.4rem; font-style: normal; color: var(--zp-text-dim); font-size: 0.95rem; }
.rider-call[b-893wcb4fg3] {
    display: inline-block; margin-bottom: 0.9rem; color: var(--zp-accent-text); text-decoration: none; font-weight: 600;
}

.rider-btn[b-893wcb4fg3] {
    min-height: 3rem; padding: 0.7rem 1.1rem; border-radius: 11px; font-size: 1rem; font-weight: 700; cursor: pointer;
    border: 1px solid var(--zp-line-strong); background: var(--zp-elevated); color: var(--zp-text);
    width: 100%; margin-top: 0.4rem;
}
.rider-btn.primary[b-893wcb4fg3] { background: linear-gradient(180deg, var(--zp-accent), var(--zp-accent-2)); color: var(--zp-on-accent); border: none; box-shadow: 0 12px 26px -12px rgba(0,229,160,0.6); }
.rider-btn.danger[b-893wcb4fg3] { color: var(--zp-danger); border-color: rgba(255,122,122,0.4); background: rgba(255,122,122,0.07); }
.rider-btn.ghost[b-893wcb4fg3] { background: transparent; }
.rider-btn:disabled[b-893wcb4fg3] { opacity: 0.5; cursor: not-allowed; }

.rider-sig-actions[b-893wcb4fg3] { display: flex; gap: 0.6rem; margin-top: 0.4rem; }
.rider-sig-actions .rider-btn[b-893wcb4fg3] { margin-top: 0; }

.rider-signature[b-893wcb4fg3] { margin-top: 0.6rem; }
.rider-hint[b-893wcb4fg3] { color: var(--zp-text-faint); font-size: 0.82rem; margin: 0 0 0.5rem; }
.rider-canvas[b-893wcb4fg3] {
    width: 100%; height: 12rem; border-radius: 10px; touch-action: none;
    background: #fff; border: 1px solid var(--zp-line-strong);
}

.rider-fail[b-893wcb4fg3] { margin-top: 0.6rem; }
.rider-input[b-893wcb4fg3] {
    width: 100%; padding: 0.75rem 0.9rem; min-height: 3rem; font-size: 1rem; border-radius: 10px;
    border: 1px solid var(--zp-line-strong); background: var(--zp-sunken); color: var(--zp-text);
}

/* How long the customer has been waiting (§37) — ticked in the browser by elapsed-timer.js. The
   .elapsed/.is-late styling itself is global (app.css); this only positions the line. */
.rider-waiting[b-893wcb4fg3] { margin: 0 0 0.5rem; font-size: 0.9rem; color: var(--zp-text-dim); }
.rider-waiting[b-893wcb4fg3]  .elapsed { color: var(--zp-text); font-weight: 700; }
/* /Components/Pages/KioskCheckout.razor.rz.scp.css */
/* Self-checkout kiosk (P7-05, ADR-029). A shopper's touch screen: generous targets, large type, the basket on the
   left and the total + payment tiles on the right. Tokens only, so it is correct in light and dark. */
.kiosk[b-ixv03m0spc] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    color: var(--zp-text);
    font-family: var(--zp-font);
    background:
        radial-gradient(1100px 600px at 90% -10%, var(--zp-aurora-1), transparent 60%),
        radial-gradient(900px 700px at -5% 110%, var(--zp-aurora-2), transparent 55%),
        linear-gradient(160deg, var(--zp-bg-2), var(--zp-bg));
}

.kiosk-header[b-ixv03m0spc] {
    position: relative;
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 2rem;
    padding: 1.3rem clamp(1.25rem, 4vw, 3rem);
    background: var(--zp-veil); backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--zp-line);
}
.kiosk-header[b-ixv03m0spc]::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
    background: linear-gradient(90deg, var(--zp-accent), var(--zp-accent-2) 50%, transparent 90%);
}
.kiosk-header .brand[b-ixv03m0spc] {
    display: inline-flex; align-items: center; gap: 0.75rem;
    font-size: clamp(1.4rem, 2.6vw, 2rem); font-weight: 800; letter-spacing: -0.03em; color: var(--zp-text);
}
.kiosk-header .brand-mark[b-ixv03m0spc] {
    width: 1.6em; height: 1.6em; border-radius: 0.4em; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.75em; font-weight: 800; color: var(--zp-on-accent);
    background: radial-gradient(circle at 30% 30%, var(--zp-accent-bright), var(--zp-accent) 70%);
    box-shadow: 0 8px 22px -10px color-mix(in srgb, var(--zp-accent) 70%, transparent);
}
.kiosk-header .hint[b-ixv03m0spc] {
    display: inline-flex; align-items: center; gap: 0.5rem;
    font-size: clamp(1rem, 1.8vw, 1.25rem); font-weight: 650; color: var(--zp-text-dim);
}
.kiosk-header .hint[b-ixv03m0spc]  svg { flex: none; color: var(--zp-accent-text); }

.kiosk-body[b-ixv03m0spc] {
    flex: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(21rem, 1fr);
    gap: clamp(1rem, 3vw, 2.25rem);
    padding: clamp(1.25rem, 4vw, 2.75rem);
    align-items: stretch;
}

.kiosk-basket[b-ixv03m0spc] {
    display: flex; flex-direction: column; min-width: 0;
    padding: 1.5rem 1.75rem; border-radius: 20px;
    background: var(--zp-surface); border: 1px solid var(--zp-line); box-shadow: var(--zp-shadow);
}
.kiosk-section-title[b-ixv03m0spc] {
    display: inline-flex; align-items: center; gap: 0.5rem; margin-bottom: 1rem;
    font-size: 0.9rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--zp-text-faint);
}
.kiosk-section-title[b-ixv03m0spc]  svg { color: var(--zp-accent-text); }
.kiosk-basket ul[b-ixv03m0spc] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.kiosk-basket li[b-ixv03m0spc] {
    padding: 0.85rem 1.1rem; border-radius: 12px;
    font-size: clamp(1.15rem, 2.2vw, 1.5rem); font-weight: 650; line-height: 1.3;
    font-variant-numeric: tabular-nums; white-space: pre-wrap; overflow-wrap: anywhere;
    color: var(--zp-text-dim); border: 1px solid transparent;
}
.kiosk-basket li:last-child[b-ixv03m0spc] { color: var(--zp-text); font-weight: 800; background: var(--zp-accent-soft); border-color: var(--zp-accent-line); }
.kiosk-idle[b-ixv03m0spc] {
    flex: 1; margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem;
    font-size: clamp(1.4rem, 2.8vw, 2rem); font-weight: 700; color: var(--zp-text-faint); text-align: center;
}
.kiosk-idle-icon[b-ixv03m0spc] {
    width: 5.5rem; height: 5.5rem; border-radius: 24px; display: flex; align-items: center; justify-content: center;
    color: var(--zp-accent-text); background: var(--zp-accent-soft); border: 1px dashed var(--zp-accent-line);
}

.kiosk-side[b-ixv03m0spc] { display: flex; flex-direction: column; gap: 1.25rem; min-width: 0; }

.kiosk-total[b-ixv03m0spc] {
    display: flex; flex-direction: column; gap: 0.5rem;
    padding: 1.75rem 2rem; border-radius: 20px;
    background: radial-gradient(120% 100% at 100% 0%, var(--zp-accent-soft), transparent 70%), var(--zp-surface);
    border: 1px solid var(--zp-accent-line); box-shadow: var(--zp-shadow-lg);
}
.kiosk-total .label[b-ixv03m0spc] {
    font-size: clamp(1rem, 1.8vw, 1.2rem); font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--zp-text-dim);
}
.kiosk-total .amount[b-ixv03m0spc] {
    font-size: clamp(2.75rem, 6vw, 4.75rem); font-weight: 800; letter-spacing: -0.04em; line-height: 1;
    font-variant-numeric: tabular-nums; color: var(--zp-accent-text); overflow-wrap: anywhere;
}

.kiosk-tenders[b-ixv03m0spc] { display: grid; gap: 0.75rem; }
.kiosk-tenders p[b-ixv03m0spc] {
    margin: 0 0 0.1rem; font-size: 0.95rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--zp-text-faint);
}
.kiosk-tender[b-ixv03m0spc] {
    display: flex; align-items: center; gap: 0.9rem; width: 100%;
    min-height: 4.5rem; padding: 1rem 1.4rem; border-radius: 16px; cursor: pointer; text-align: left;
    font: 800 clamp(1.2rem, 2.2vw, 1.5rem) var(--zp-font); color: var(--zp-text);
    background: var(--zp-surface); border: 1px solid var(--zp-line-strong); border-bottom-width: 3px;
    box-shadow: var(--zp-shadow);
    -webkit-tap-highlight-color: transparent; touch-action: manipulation; user-select: none;
    transition: border-color 0.15s var(--zp-ease), background 0.15s var(--zp-ease), transform 0.1s var(--zp-ease);
}
.kiosk-tender[b-ixv03m0spc]  svg { flex: none; color: var(--zp-accent-text); }
.kiosk-tender:hover[b-ixv03m0spc] { border-color: var(--zp-accent-line); background: var(--zp-accent-soft); }
.kiosk-tender:active[b-ixv03m0spc] { transform: translateY(2px); border-bottom-width: 1px; margin-bottom: 2px; }
.kiosk-tender:focus-visible[b-ixv03m0spc] { outline: 3px solid var(--zp-accent); outline-offset: 3px; }

.kiosk-attendant[b-ixv03m0spc] {
    display: flex; align-items: flex-start; gap: 0.75rem;
    padding: 1.25rem 1.4rem; border-radius: 16px;
    font-size: clamp(1.1rem, 2vw, 1.35rem); font-weight: 750; line-height: 1.4;
    color: var(--zp-warn); background: var(--zp-warn-soft); border: 1px solid var(--zp-warn-line);
}
.kiosk-attendant[b-ixv03m0spc]  svg { flex: none; margin-top: 0.15rem; }

@media (max-width: 860px) {
    .kiosk-body[b-ixv03m0spc] { grid-template-columns: 1fr; }
}
/* /Components/Pages/PoleDisplay.razor.rz.scp.css */
/* Customer pole display (P7-02, ADR-029). Read by a shopper from a metre or two away: oversized type, high
   contrast, the newest line called out, and the running total as the hero. Tokens only, so both themes work. */
.pole-display[b-rr4rm15ywj] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    color: var(--zp-text);
    font-family: var(--zp-font);
    background:
        radial-gradient(1100px 600px at 90% -10%, var(--zp-aurora-1), transparent 60%),
        radial-gradient(900px 700px at -5% 110%, var(--zp-aurora-2), transparent 55%),
        linear-gradient(160deg, var(--zp-bg-2), var(--zp-bg));
}

.pole-header[b-rr4rm15ywj] {
    position: relative;
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 2rem;
    padding: 1.4rem clamp(1.25rem, 4vw, 3rem);
    background: var(--zp-veil); backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--zp-line);
}
.pole-header[b-rr4rm15ywj]::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
    background: linear-gradient(90deg, var(--zp-accent), var(--zp-accent-2) 50%, transparent 90%);
}
.pole-header .brand[b-rr4rm15ywj] {
    display: inline-flex; align-items: center; gap: 0.75rem;
    font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 800; letter-spacing: -0.03em; color: var(--zp-text);
}
.pole-header .brand-mark[b-rr4rm15ywj] {
    width: 1.6em; height: 1.6em; border-radius: 0.4em; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.75em; font-weight: 800; color: var(--zp-on-accent);
    background: radial-gradient(circle at 30% 30%, var(--zp-accent-bright), var(--zp-accent) 70%);
    box-shadow: 0 8px 22px -10px color-mix(in srgb, var(--zp-accent) 70%, transparent);
}
.pole-header .welcome[b-rr4rm15ywj] { font-size: clamp(1.05rem, 2vw, 1.4rem); font-weight: 650; color: var(--zp-text-dim); }

.pole-body[b-rr4rm15ywj] {
    flex: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(20rem, 1fr);
    gap: clamp(1rem, 3vw, 2.5rem);
    padding: clamp(1.25rem, 4vw, 3rem);
    align-items: stretch;
}

.pole-lines[b-rr4rm15ywj] {
    display: flex; flex-direction: column; min-width: 0;
    padding: 1.5rem 1.75rem; border-radius: 20px;
    background: var(--zp-surface); border: 1px solid var(--zp-line); box-shadow: var(--zp-shadow);
}
.pole-section-title[b-rr4rm15ywj] {
    display: inline-flex; align-items: center; gap: 0.5rem; margin-bottom: 1rem;
    font-size: 0.9rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--zp-text-faint);
}
.pole-section-title[b-rr4rm15ywj]  svg { color: var(--zp-accent-text); }
.pole-lines ul[b-rr4rm15ywj] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.pole-lines li[b-rr4rm15ywj] {
    padding: 0.85rem 1.1rem; border-radius: 12px;
    font-size: clamp(1.25rem, 2.4vw, 1.7rem); font-weight: 650; line-height: 1.3;
    font-variant-numeric: tabular-nums; white-space: pre-wrap; overflow-wrap: anywhere;
    color: var(--zp-text-dim); border: 1px solid transparent;
}
/* The line just scanned — what the shopper is checking against the shelf price. */
.pole-lines li:last-child[b-rr4rm15ywj] {
    color: var(--zp-text); font-weight: 800;
    background: var(--zp-accent-soft); border-color: var(--zp-accent-line);
    animation: pole-in-b-rr4rm15ywj 0.3s var(--zp-ease) both;
}
.pole-idle[b-rr4rm15ywj] {
    flex: 1; margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem;
    font-size: clamp(1.5rem, 3vw, 2.2rem); font-weight: 700; color: var(--zp-text-faint); text-align: center;
}
.pole-idle-icon[b-rr4rm15ywj] {
    width: 5.5rem; height: 5.5rem; border-radius: 24px; display: flex; align-items: center; justify-content: center;
    color: var(--zp-accent-text); background: var(--zp-accent-soft); border: 1px dashed var(--zp-accent-line);
}

.pole-total[b-rr4rm15ywj] {
    display: flex; flex-direction: column; justify-content: center; gap: 0.5rem;
    padding: 2rem 2.25rem; border-radius: 20px;
    background: radial-gradient(120% 100% at 100% 0%, var(--zp-accent-soft), transparent 70%), var(--zp-surface);
    border: 1px solid var(--zp-accent-line); box-shadow: var(--zp-shadow-lg);
}
.pole-total .label[b-rr4rm15ywj] {
    font-size: clamp(1rem, 2vw, 1.3rem); font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--zp-text-dim);
}
.pole-total .amount[b-rr4rm15ywj] {
    font-size: clamp(3rem, 7vw, 5.5rem); font-weight: 800; letter-spacing: -0.04em; line-height: 1;
    font-variant-numeric: tabular-nums; color: var(--zp-accent-text); overflow-wrap: anywhere;
}

.pole-status[b-rr4rm15ywj] { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 1.5rem; }
.pole-tender[b-rr4rm15ywj], .pole-fiscal[b-rr4rm15ywj] {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.8rem 1rem; border-radius: 12px;
    font-size: clamp(1rem, 1.8vw, 1.25rem); font-weight: 700; line-height: 1.35;
}
.pole-tender[b-rr4rm15ywj]  svg, .pole-fiscal[b-rr4rm15ywj]  svg { flex: none; }
.pole-tender[b-rr4rm15ywj] { color: var(--zp-info); background: var(--zp-info-soft); border: 1px solid var(--zp-info-line); }
.pole-fiscal[b-rr4rm15ywj] { color: var(--zp-success); background: var(--zp-success-soft); border: 1px solid var(--zp-accent-line); }

@keyframes pole-in-b-rr4rm15ywj { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

@media (max-width: 860px) {
    .pole-body[b-rr4rm15ywj] { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    .pole-lines li:last-child[b-rr4rm15ywj] { animation: none; }
}
/* /Components/Pages/Pos.razor.rz.scp.css */
/* Lane (POS) — ADR-029 refresh on the shared --zp-* tokens (app.css): self-hosted Manrope, tabular figures for
   money, one radius scale, theme-correct surfaces in light and dark. Class names are the contract with the
   keyboard engine (Pos.FocusTarget) and the bUnit/Playwright specs — this sheet only restyles them.
   Organised: 1 root · 2 header · 3 sale-complete bar · 4 cart · 5 totals + checkout · 6 shared controls (buttons,
   keycaps, inputs, lists) · 7 overlays (scrim, frame, header/footer) · 8 individual panels · 9 status + F-key bars ·
   10 help drawer · 11 responsive + motion. */

/* ---- 1. Root ------------------------------------------------------------------------------------------------ */
.pos-root[b-mo85d9wezd] {
    --lane-pad: 1.15rem;
    --lane-radius-lg: 16px;               /* dialogs */
    --lane-radius: var(--zp-radius);      /* 12px — inputs, panels, hero blocks */
    --lane-radius-sm: var(--zp-radius-sm);/* 9px — buttons, list rows */
    --lane-radius-xs: var(--zp-radius-xs);/* 7px — small chips inside panels */
    --lane-scrim: rgba(5, 15, 11, 0.42);  /* dims the lane behind a dialog; dark in both themes by design */
    --lane-glow: color-mix(in srgb, var(--zp-accent) 55%, transparent);

    display: flex;
    flex-direction: column;
    height: 100vh;
    outline: none;
    color: var(--zp-text);
    font-family: var(--zp-font);
    background:
        radial-gradient(1000px 560px at 88% -10%, var(--zp-aurora-1), transparent 60%),
        radial-gradient(820px 620px at -6% 110%, var(--zp-aurora-2), transparent 55%),
        linear-gradient(160deg, var(--zp-bg-2), var(--zp-bg));
}

/* Every figure on the lane is money or a count: tabular figures keep columns and totals from jittering. */
.pos-root .num[b-mo85d9wezd],
.pos-root strong[b-mo85d9wezd],
.pos-root dd[b-mo85d9wezd] { font-variant-numeric: tabular-nums; }

/* ---- 2. Header: identity (left) · status + actions (right) --------------------------------------------------- */
.pos-top[b-mo85d9wezd] {
    position: relative;
    /* Above the dialog scrim, so theme / Till / sign-out stay reachable while the lane is gated. */
    z-index: calc(var(--zp-z-overlay) + 1);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.55rem 1.25rem;
    padding: 0.6rem var(--lane-pad);
    background: var(--zp-veil);
    backdrop-filter: saturate(1.4) blur(12px);
    border-bottom: 1px solid var(--zp-line);
    box-shadow: var(--zp-shadow-1);
}
/* A hairline of brand colour across the very top — where a cashier's eyes land every time they look up. */
.pos-top[b-mo85d9wezd]::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, var(--zp-accent), var(--zp-accent-2) 45%, transparent 85%);
}

.top-identity[b-mo85d9wezd] {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.75rem;
    flex: 1 1 24rem; min-width: 0;
}
.top-actions[b-mo85d9wezd] {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.45rem;
    flex: 0 1 auto; margin-left: auto;
}

.pos-top .brand[b-mo85d9wezd] {
    display: inline-flex; align-items: center; gap: 0.5rem; flex: none;
    font-weight: 800; font-size: 1.15rem; letter-spacing: -0.02em; color: var(--zp-text);
}
.pos-top .brand[b-mo85d9wezd]::before {
    content: "Z"; width: 26px; height: 26px; border-radius: 8px; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.9rem; font-weight: 800; line-height: 1; color: var(--zp-on-accent);
    background: radial-gradient(circle at 30% 30%, var(--zp-accent-bright), var(--zp-accent) 70%);
    box-shadow: 0 4px 12px -5px var(--lane-glow), inset 0 0 0 1px var(--zp-accent-line);
}
.pos-top .banner[b-mo85d9wezd] {
    display: inline-flex; align-items: center; gap: 0.35rem; min-width: 0; max-width: 100%;
    padding: 0.2rem 0.6rem; border-radius: 999px;
    font-weight: 750; letter-spacing: 0.06em; font-size: 0.76rem; text-transform: uppercase;
    color: var(--zp-text-dim); background: var(--zp-sunken); border: 1px solid var(--zp-line);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pos-top .banner[b-mo85d9wezd]  svg { flex: none; color: var(--zp-text-faint); }

/* Customer recognition (§10.3 CUST-K2/K4) and Neighbourhood Rewards (§40.5) chips: they wrap onto a second
   line before they ever push the action zone off-screen, and a runaway offer name truncates. */
.pos-top .recognition[b-mo85d9wezd] { display: flex; flex-wrap: wrap; gap: 0.3rem; align-items: center; min-width: 0; max-width: 100%; }
.pos-top .recognition .chip[b-mo85d9wezd] {
    display: inline-flex; align-items: center; gap: 0.3rem;
    max-width: 18rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    padding: 0.14rem 0.55rem; border-radius: 999px; font-size: 0.72rem; font-weight: 650;
    background: var(--zp-surface); border: 1px solid var(--zp-line-strong); color: var(--zp-text-dim);
}
.pos-top .recognition .chip.tier[b-mo85d9wezd] { color: var(--zp-accent-text); border-color: var(--zp-accent-line); background: var(--zp-accent-soft); }
.pos-top .recognition .chip.credit[b-mo85d9wezd] { color: var(--zp-text); }
.pos-top .recognition .chip.offer[b-mo85d9wezd] { color: var(--zp-warn); background: var(--zp-warn-soft); border-color: var(--zp-warn-line); }
.pos-top .recognition.rewards .chip.tier[b-mo85d9wezd] { font-family: var(--zp-mono); }
.pos-top .recognition.rewards .chip.next[b-mo85d9wezd] { color: var(--zp-text); white-space: normal; max-width: 28rem; line-height: 1.35; }
.pos-top .recognition.rewards .chip.voucher[b-mo85d9wezd] { color: var(--zp-accent-text); border-color: var(--zp-accent-line); }

/* Status + actions share one control height so the right zone reads as a single toolbar. */
.top-actions > *[b-mo85d9wezd],
.top-actions[b-mo85d9wezd]  .theme-toggle { min-height: 2rem; }

.shift-chip[b-mo85d9wezd] {
    display: inline-flex; align-items: center; gap: 0.45rem;
    padding: 0.2rem 0.7rem; border-radius: 999px; font-size: 0.76rem; font-weight: 700;
    border: 1px solid var(--zp-line-strong); color: var(--zp-text-dim); background: var(--zp-surface);
}
.shift-chip.on[b-mo85d9wezd] { color: var(--zp-success); border-color: var(--zp-accent-line); background: var(--zp-success-soft); }
.shift-chip.on[b-mo85d9wezd]::before {
    content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--zp-accent); flex: none;
    animation: shift-live-pulse-b-mo85d9wezd 2.2s ease-out infinite;
}
.shift-chip.off[b-mo85d9wezd] { color: var(--zp-warn); border-color: var(--zp-warn-line); background: var(--zp-warn-soft); }
@keyframes shift-live-pulse-b-mo85d9wezd {
    0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--zp-accent) 55%, transparent); }
    70% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--zp-accent) 0%, transparent); }
    100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--zp-accent) 0%, transparent); }
}

.pos-top .op[b-mo85d9wezd] {
    display: inline-flex; align-items: center; gap: 0.35rem;
    color: var(--zp-text-dim); font-size: 0.82rem; font-weight: 600; white-space: nowrap;
}
.pos-top .op[b-mo85d9wezd]  svg { flex: none; color: var(--zp-text-faint); }
.pos-top .op .lang[b-mo85d9wezd] {
    display: inline-flex; align-items: center; padding: 0.1rem 0.5rem; border-radius: 999px; cursor: pointer;
    color: var(--zp-accent-text); font-weight: 750; border: 1px solid transparent;
    transition: background 0.15s var(--zp-ease), border-color 0.15s var(--zp-ease);
}
.pos-top .op .lang:hover[b-mo85d9wezd] { background: var(--zp-accent-soft); border-color: var(--zp-accent-line); }
.pos-top .op .lang:focus-visible[b-mo85d9wezd] { outline: 2px solid var(--zp-accent); outline-offset: 2px; }

.pos-top .pos-link[b-mo85d9wezd],
.pos-top .pos-admin-link[b-mo85d9wezd] {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.25rem 0.8rem; border-radius: 999px; text-decoration: none; white-space: nowrap;
    font-weight: 700; font-size: 0.8rem;
    color: var(--zp-accent-text); border: 1px solid var(--zp-accent-line); background: transparent;
    transition: background 0.15s var(--zp-ease), color 0.15s var(--zp-ease);
}
.pos-top .pos-link:hover[b-mo85d9wezd], .pos-top .pos-admin-link:hover[b-mo85d9wezd] { background: var(--zp-accent-soft); color: var(--zp-text); }
/* The admin way in borrows the sidebar's deep emerald, so it reads as "leave the lane", not a lane action. */
.pos-top .pos-admin-link[b-mo85d9wezd] { color: var(--zp-nav-text-strong); background: var(--zp-nav-bg); border-color: var(--zp-nav-bg); }
.pos-top .pos-admin-link:hover[b-mo85d9wezd] { background: var(--zp-nav-bg-2); color: var(--zp-nav-text-strong); }

/* Sign out (§22): present but quiet — reachable at a glance, never mistaken for a checkout key. */
.pos-top .signout-btn[b-mo85d9wezd] {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.25rem 0.75rem; border-radius: var(--lane-radius-sm); cursor: pointer;
    font: 650 0.78rem var(--zp-font);
    background: transparent; border: 1px solid var(--zp-line-strong); color: var(--zp-text-dim);
    transition: border-color 0.15s var(--zp-ease), color 0.15s var(--zp-ease), background 0.15s var(--zp-ease);
}
.pos-top .signout-btn:hover[b-mo85d9wezd], .pos-top .signout-btn:focus-visible[b-mo85d9wezd] {
    border-color: var(--zp-danger-line); color: var(--zp-danger); background: var(--zp-danger-soft);
}
.pos-top .signout-btn:focus-visible[b-mo85d9wezd] { outline: 2px solid var(--zp-danger-line); outline-offset: 2px; }

/* ---- 3. Sale-complete bar ------------------------------------------------------------------------------------ */
.sale-complete[b-mo85d9wezd] {
    display: flex; align-items: center; justify-content: space-between; gap: 0.75rem 1rem; flex-wrap: wrap;
    padding: 0.75rem var(--lane-pad);
    background: linear-gradient(90deg, var(--zp-success-soft), transparent 85%), var(--zp-surface-2);
    border-bottom: 1px solid var(--zp-accent-line);
    animation: lane-slide-down-b-mo85d9wezd 0.25s var(--zp-ease) both;
}
.sale-complete .sc-main[b-mo85d9wezd] { display: flex; align-items: center; gap: 0.5rem 1.4rem; flex-wrap: wrap; min-width: 0; }
.sale-complete .sc-badge[b-mo85d9wezd] { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 800; color: var(--zp-success); font-size: 1.02rem; }
.sale-complete .sc-receipt[b-mo85d9wezd], .sale-complete .sc-fig[b-mo85d9wezd] { color: var(--zp-text-dim); font-size: 0.9rem; }
.sale-complete .sc-receipt strong[b-mo85d9wezd], .sale-complete .sc-fig strong[b-mo85d9wezd] { color: var(--zp-text); font-weight: 750; margin-left: 0.2rem; }
.sale-complete .sc-receipt strong[b-mo85d9wezd] { font-family: var(--zp-mono); font-size: 0.86rem; letter-spacing: 0.02em; }
/* Change is the one figure the cashier hands over physically — it gets the loudest treatment on the bar. */
.sale-complete .sc-fig.change[b-mo85d9wezd] {
    padding: 0.2rem 0.7rem; border-radius: 999px; color: var(--zp-success);
    background: var(--zp-success-soft); border: 1px solid var(--zp-accent-line); font-weight: 700;
}
.sale-complete .sc-fig.change strong[b-mo85d9wezd] { color: var(--zp-success); font-size: 1.15rem; font-weight: 800; }
/* Post-sale capture (§10.2): who this finalised sale was credited to, and what they earned. */
.sale-complete .sc-fig.credited strong[b-mo85d9wezd] { color: var(--zp-accent-text); }
.sale-complete .sc-fig.points[b-mo85d9wezd] { color: var(--zp-accent-text); font-variant-numeric: tabular-nums; }
.sale-complete .sc-fig.stamp.earned[b-mo85d9wezd] { color: var(--zp-success); font-weight: 700; }
.sale-complete .sc-fig.stamp.missed[b-mo85d9wezd] { color: var(--zp-text-dim); }
.sale-complete .sc-actions[b-mo85d9wezd] { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* ---- 4. Cart ------------------------------------------------------------------------------------------------- */
.pos-body[b-mo85d9wezd] { display: flex; flex: 1; min-height: 0; }
.cart[b-mo85d9wezd] { flex: 1; display: flex; flex-direction: column; min-width: 0; }

.scan-row[b-mo85d9wezd] { padding: 0.8rem var(--lane-pad) 0.6rem; }
.scan-input[b-mo85d9wezd] {
    width: 100%; padding: 0.8rem 0.95rem 0.8rem 2.65rem; font: 600 1.1rem var(--zp-font); border-radius: var(--lane-radius);
    border: 1px solid var(--zp-line-strong); background-color: var(--zp-surface); color: var(--zp-text);
    box-shadow: var(--zp-shadow-1);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2393a99e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='2' height='16'/%3E%3Crect x='7' y='4' width='1' height='16'/%3E%3Crect x='10' y='4' width='3' height='16'/%3E%3Crect x='15' y='4' width='1' height='16'/%3E%3Crect x='18' y='4' width='2' height='16'/%3E%3Crect x='21' y='4' width='1' height='16'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: 0.9rem center; background-size: 1.15rem;
    transition: border-color 0.15s var(--zp-ease), box-shadow 0.15s var(--zp-ease);
}
.scan-input[b-mo85d9wezd]::placeholder { color: var(--zp-text-faint); font-weight: 500; }
.scan-input:focus[b-mo85d9wezd] { outline: none; border-color: var(--zp-accent); box-shadow: 0 0 0 3px var(--zp-accent-soft), var(--zp-shadow-1); }
.scan-input:disabled[b-mo85d9wezd] { opacity: 0.55; cursor: not-allowed; }

.cart-head[b-mo85d9wezd] {
    display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
    padding: 0.15rem var(--lane-pad) 0.45rem;
}
.cart-head .cart-title[b-mo85d9wezd] {
    display: inline-flex; align-items: center; gap: 0.4rem;
    font-size: 0.72rem; font-weight: 750; letter-spacing: 0.1em; text-transform: uppercase; color: var(--zp-text-faint);
}
.cart-head .cart-count[b-mo85d9wezd] {
    padding: 0.12rem 0.6rem; border-radius: 999px; font-size: 0.74rem; font-weight: 700;
    color: var(--zp-text-dim); background: var(--zp-sunken); border: 1px solid var(--zp-line);
    font-variant-numeric: tabular-nums;
}

/* Fixed layout so a long description truncates (full text on hover via title) instead of squeezing the money. */
.cart-table[b-mo85d9wezd] { width: 100%; border-collapse: collapse; table-layout: fixed; }
.cart-table col.col-qty[b-mo85d9wezd] { width: 5.5rem; }
.cart-table col.col-price[b-mo85d9wezd] { width: 7.5rem; }
.cart-table col.col-total[b-mo85d9wezd] { width: 8.5rem; }
.cart-table thead th[b-mo85d9wezd] {
    text-align: left; padding: 0.55rem var(--lane-pad); color: var(--zp-text-faint);
    font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 750;
    border-bottom: 1px solid var(--zp-line-strong);
}
.cart-table thead th.num[b-mo85d9wezd] { text-align: right; }
.cart-table td[b-mo85d9wezd] { padding: 0.68rem var(--lane-pad); border-bottom: 1px solid var(--zp-line); font-size: 0.95rem; }
.cart-table td.desc[b-mo85d9wezd] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.cart-table .num[b-mo85d9wezd] { text-align: right; white-space: nowrap; }
.cart-table td.num:last-child[b-mo85d9wezd] { font-weight: 750; }
.cart-table tbody tr[b-mo85d9wezd] { cursor: pointer; transition: background 0.12s var(--zp-ease); }
.cart-table tbody tr:hover[b-mo85d9wezd] { background: var(--zp-sunken); }
/* The selected line is what Del / +/− / discount act on, so it must be unmistakable from across the counter. */
.cart-table tr.sel[b-mo85d9wezd],
.cart-table tr.sel:hover[b-mo85d9wezd] { background: var(--zp-accent-soft); box-shadow: inset 4px 0 0 var(--zp-accent); }
.cart-table tr.sel td[b-mo85d9wezd] { color: var(--zp-text); border-bottom-color: var(--zp-accent-line); }
.cart-table tr.sel td.desc[b-mo85d9wezd] { font-weight: 750; }

.cart-table tr.empty[b-mo85d9wezd] { cursor: default; }
.cart-table tr.empty:hover[b-mo85d9wezd] { background: transparent; }
.cart-table tr.empty td[b-mo85d9wezd] { padding: 3.5rem 2rem 4rem; text-align: center; border-bottom: 0; }
.cart-table tr.empty .empty-icon[b-mo85d9wezd] {
    width: 3.4rem; height: 3.4rem; margin: 0 auto 0.85rem; border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    color: var(--zp-accent-text); background: var(--zp-accent-soft); border: 1px dashed var(--zp-accent-line);
}
.cart-table tr.empty .empty-text[b-mo85d9wezd] { display: block; color: var(--zp-text-faint); font-size: 0.95rem; font-weight: 600; }

/* ---- 5. Totals + checkout -------------------------------------------------------------------------------------- */
.totals[b-mo85d9wezd] {
    position: relative;
    width: 23rem; padding: 1.25rem; flex-shrink: 0; overflow-y: auto;
    background: linear-gradient(180deg, var(--zp-surface-2), var(--zp-surface));
    border-left: 1px solid var(--zp-line);
    box-shadow: var(--zp-shadow);
}
/* The rail reads as its own receipt-like surface, set slightly apart from the cart behind it. */
.totals[b-mo85d9wezd]::before {
    content: ""; position: absolute; top: 0; left: -1px; bottom: 0; width: 2px;
    background: linear-gradient(180deg, var(--zp-accent), transparent 40%);
}
.totals .line[b-mo85d9wezd] { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.38rem 0; color: var(--zp-text-dim); font-size: 0.93rem; }
.totals .line span:last-child[b-mo85d9wezd] { color: var(--zp-text); font-weight: 650; font-variant-numeric: tabular-nums; }
.totals .grand[b-mo85d9wezd] {
    font-size: 1.7rem; font-weight: 800; letter-spacing: -0.02em; color: var(--zp-text);
    border-top: 1px solid var(--zp-line-strong); margin-top: 0.55rem; padding-top: 0.8rem;
}
.totals .grand span:first-child[b-mo85d9wezd] { color: var(--zp-text-dim); font-size: 0.74rem; font-weight: 750; letter-spacing: 0.12em; align-self: center; }
.totals .grand span:last-child[b-mo85d9wezd] { color: var(--zp-accent-text); font-weight: 800; }
.totals .vat[b-mo85d9wezd] { color: var(--zp-text-faint); font-size: 0.83rem; padding-top: 0.5rem; }
.totals .vat span:last-child[b-mo85d9wezd] { color: var(--zp-text-dim); font-weight: 600; }
.totals .vat-band[b-mo85d9wezd] { color: var(--zp-text-faint); font-size: 0.75rem; padding: 0.08rem 0 0 0.6rem; }
.totals .vat-band span:last-child[b-mo85d9wezd] { color: var(--zp-text-faint); font-weight: 500; }
/* Change is cash leaving the drawer — emphasised so it is read out correctly. */
.totals .change[b-mo85d9wezd] {
    margin-top: 0.35rem; padding: 0.55rem 0.75rem; border-radius: var(--lane-radius-sm);
    background: var(--zp-success-soft); border: 1px solid var(--zp-accent-line); color: var(--zp-success); font-weight: 700;
}
.totals .change span:last-child[b-mo85d9wezd] { color: var(--zp-success); font-size: 1.35rem; font-weight: 800; }

.totals .checkout[b-mo85d9wezd] { margin-top: 1.3rem; padding-top: 1.05rem; border-top: 1px solid var(--zp-line); }
/* Hero: while anything is owed, this figure outranks the TOTAL — it is what the cashier says out loud. */
.totals .checkout-due[b-mo85d9wezd] {
    display: flex; flex-direction: column; gap: 0.2rem;
    margin-bottom: 0.9rem; padding: 0.85rem 1rem 0.9rem; border-radius: var(--lane-radius);
    background: var(--zp-warn-soft); border: 1px solid var(--zp-warn-line);
    animation: lane-pop-b-mo85d9wezd 0.22s var(--zp-ease) both;
}
.totals .checkout-due .cd-label[b-mo85d9wezd] { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--zp-warn); }
.totals .checkout-due strong[b-mo85d9wezd] {
    font-size: 2.5rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; color: var(--zp-text);
    font-variant-numeric: tabular-nums;
}
.totals .pay-row[b-mo85d9wezd] { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; margin-bottom: 0.6rem; }
.totals .pay-btn[b-mo85d9wezd] {
    display: flex; flex-direction: column; align-items: center; gap: 0.3rem;
    padding: 0.7rem 0.4rem; border-radius: var(--lane-radius-sm); cursor: pointer;
    background: var(--zp-surface); border: 1px solid var(--zp-line-strong); color: var(--zp-text);
    font: 700 0.9rem var(--zp-font); box-shadow: var(--zp-shadow-1);
    transition: border-color 0.15s var(--zp-ease), transform 0.12s var(--zp-ease), background 0.15s var(--zp-ease);
}
.totals .pay-btn:hover[b-mo85d9wezd] { border-color: var(--zp-accent-line); background: var(--zp-accent-soft); transform: translateY(-1px); }
.totals .pay-btn:active[b-mo85d9wezd] { transform: translateY(0); }

/* ---- 6. Shared controls -------------------------------------------------------------------------------------- */
/* Primary action (checkout, gate, sign-out confirm). */
.finalize-btn[b-mo85d9wezd],
.overlay.signout .signout-confirm[b-mo85d9wezd] {
    width: 100%; padding: 0.9rem; border: none; border-radius: var(--lane-radius); cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 0.55rem;
    background: linear-gradient(180deg, var(--zp-accent), var(--zp-accent-2)); color: var(--zp-on-accent);
    font: 800 1.06rem var(--zp-font); letter-spacing: -0.01em;
    box-shadow: 0 12px 28px -14px var(--lane-glow);
    transition: filter 0.15s var(--zp-ease), transform 0.12s var(--zp-ease), box-shadow 0.15s var(--zp-ease);
}
.finalize-btn:hover:not(:disabled)[b-mo85d9wezd],
.overlay.signout .signout-confirm:hover[b-mo85d9wezd] { filter: brightness(1.06); transform: translateY(-1px); }
.finalize-btn:focus-visible[b-mo85d9wezd],
.overlay.signout .signout-confirm:focus-visible[b-mo85d9wezd] { outline: 2px solid var(--zp-accent); outline-offset: 3px; }
.finalize-btn:disabled[b-mo85d9wezd] {
    background: var(--zp-sunken); color: var(--zp-text-faint); cursor: not-allowed; box-shadow: none;
    border: 1px dashed var(--zp-line-strong);
}

/* Secondary buttons on the sale-complete bar, refund-complete and shift-report panels (one definition). */
.sc-btn[b-mo85d9wezd] {
    display: inline-flex; align-items: center; gap: 0.45rem; cursor: pointer; text-decoration: none;
    padding: 0.5rem 0.95rem; border-radius: var(--lane-radius-sm); font: 700 0.88rem var(--zp-font);
    background: var(--zp-surface); border: 1px solid var(--zp-line-strong); color: var(--zp-text);
    box-shadow: var(--zp-shadow-1);
    transition: border-color 0.15s var(--zp-ease), background 0.15s var(--zp-ease), transform 0.12s var(--zp-ease);
}
.sc-btn:hover[b-mo85d9wezd] { border-color: var(--zp-accent-line); background: var(--zp-accent-soft); transform: translateY(-1px); }
.sc-btn.primary[b-mo85d9wezd] {
    background: linear-gradient(180deg, var(--zp-accent), var(--zp-accent-2)); color: var(--zp-on-accent);
    border-color: transparent; font-weight: 800; box-shadow: 0 10px 22px -14px var(--lane-glow);
}
.sc-btn.primary:hover[b-mo85d9wezd] { filter: brightness(1.06); background: linear-gradient(180deg, var(--zp-accent), var(--zp-accent-2)); }

/* Keycaps take the global kbd style (app.css); on an accent fill they turn translucent in the button's own
   ink so they never read as a grey sticker on a green button. */
.sc-btn.primary kbd[b-mo85d9wezd],
.finalize-btn kbd[b-mo85d9wezd],
.overlay.signout .signout-confirm kbd[b-mo85d9wezd] {
    color: inherit;
    background: color-mix(in srgb, currentColor 14%, transparent);
    border-color: color-mix(in srgb, currentColor 30%, transparent);
}
.finalize-btn:disabled kbd[b-mo85d9wezd] { color: var(--zp-text-faint); background: var(--zp-surface); border-color: var(--zp-line-strong); }

/* Text inputs used inside panels — one look, one focus ring. */
.search-input[b-mo85d9wezd], .tender-input[b-mo85d9wezd], .palette-input[b-mo85d9wezd], .customer-input[b-mo85d9wezd], .mpesa-input[b-mo85d9wezd], .loyalty-input[b-mo85d9wezd],
.return-sale-input[b-mo85d9wezd], .return-phone-input[b-mo85d9wezd], .disc-input[b-mo85d9wezd], .capture-input[b-mo85d9wezd], .enrol-input[b-mo85d9wezd], .enrol-phone[b-mo85d9wezd] {
    width: 100%; padding: 0.78rem 0.95rem; font: 600 1.08rem var(--zp-font); border-radius: var(--lane-radius);
    border: 1px solid var(--zp-line-strong); background: var(--zp-surface-2); color: var(--zp-text);
    transition: border-color 0.15s var(--zp-ease), box-shadow 0.15s var(--zp-ease);
}
.search-input[b-mo85d9wezd]::placeholder, .tender-input[b-mo85d9wezd]::placeholder, .palette-input[b-mo85d9wezd]::placeholder, .customer-input[b-mo85d9wezd]::placeholder,
.mpesa-input[b-mo85d9wezd]::placeholder, .loyalty-input[b-mo85d9wezd]::placeholder, .return-sale-input[b-mo85d9wezd]::placeholder, .return-phone-input[b-mo85d9wezd]::placeholder,
.disc-input[b-mo85d9wezd]::placeholder, .capture-input[b-mo85d9wezd]::placeholder, .enrol-input[b-mo85d9wezd]::placeholder, .enrol-phone[b-mo85d9wezd]::placeholder {
    color: var(--zp-text-faint); font-weight: 500;
}
.search-input:focus[b-mo85d9wezd], .tender-input:focus[b-mo85d9wezd], .palette-input:focus[b-mo85d9wezd], .customer-input:focus[b-mo85d9wezd], .mpesa-input:focus[b-mo85d9wezd],
.loyalty-input:focus[b-mo85d9wezd], .return-sale-input:focus[b-mo85d9wezd], .return-phone-input:focus[b-mo85d9wezd], .disc-input:focus[b-mo85d9wezd],
.capture-input:focus[b-mo85d9wezd], .enrol-input:focus[b-mo85d9wezd], .enrol-phone:focus[b-mo85d9wezd] {
    outline: none; border-color: var(--zp-accent); box-shadow: 0 0 0 3px var(--zp-accent-soft);
}
.tender-input[b-mo85d9wezd], .disc-input[b-mo85d9wezd], .loyalty-input[b-mo85d9wezd] { font-variant-numeric: tabular-nums; }

/* Keyboard-driven result lists (search, customer, palette, capture, parked sales, card choices). */
.results[b-mo85d9wezd] { list-style: none; margin: 0.8rem 0 0; padding: 0; max-height: 20rem; overflow: auto; }
.results li[b-mo85d9wezd] {
    display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem;
    padding: 0.68rem 0.8rem; border-radius: var(--lane-radius-sm); cursor: pointer;
    border: 1px solid transparent; transition: background 0.12s var(--zp-ease);
}
.results li + li[b-mo85d9wezd] { margin-top: 2px; }
.results li:hover[b-mo85d9wezd] { background: var(--zp-sunken); }
.results li.sel[b-mo85d9wezd] { background: var(--zp-accent-soft); border-color: var(--zp-accent-line); box-shadow: inset 3px 0 0 var(--zp-accent); }
.results .keys[b-mo85d9wezd], .results .price[b-mo85d9wezd] { color: var(--zp-accent-text); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.results .keys[b-mo85d9wezd] { font-family: var(--zp-mono); font-size: 0.82rem; }

.loyalty-note[b-mo85d9wezd] { color: var(--zp-text-dim); margin-top: 0.5rem; font-size: 0.9rem; line-height: 1.5; }

/* ---- 7. Overlays: scrim, frame, header, key-hint footer -------------------------------------------------------- */
.overlay-scrim[b-mo85d9wezd] {
    position: fixed; inset: 0; z-index: var(--zp-z-overlay);
    background: var(--lane-scrim); backdrop-filter: blur(2px);
    animation: lane-fade-in-b-mo85d9wezd 0.18s var(--zp-ease) both;
}
.overlay[b-mo85d9wezd] {
    position: fixed; top: 16%; left: 50%; transform: translateX(-50%);
    z-index: calc(var(--zp-z-overlay) + 2);
    width: 34rem; max-width: calc(100vw - 2rem); max-height: 76vh; overflow-y: auto;
    background: var(--zp-elevated); color: var(--zp-text);
    border: 1px solid var(--zp-line-strong); border-radius: var(--lane-radius-lg); padding: 1.15rem 1.25rem 1.25rem;
    box-shadow: var(--zp-shadow-lg), inset 0 1px 0 var(--zp-line);
    animation: lane-overlay-in-b-mo85d9wezd 0.2s var(--zp-ease) both;
}

/* Small consistent header: what this panel is, and (where Esc closes it) the Esc keycap. */
.ov-head[b-mo85d9wezd] {
    display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
    margin: 0 0 0.9rem; padding-bottom: 0.7rem; border-bottom: 1px solid var(--zp-line);
}
.ov-head .ov-title[b-mo85d9wezd],
.ov-head > .due[b-mo85d9wezd],
.ov-head > .capture-title[b-mo85d9wezd],
.ov-head > h3[b-mo85d9wezd] {
    display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0.45rem; min-width: 0;
    margin: 0; font-size: 0.98rem; font-weight: 750; letter-spacing: -0.005em; color: var(--zp-text);
}
.ov-head[b-mo85d9wezd]  svg { flex: none; color: var(--zp-accent-text); }
.ov-head .ov-esc[b-mo85d9wezd] { flex: none; margin-left: auto; }

/* Key-hint footer, for list panels whose placeholder scrolls out of mind once typing starts. */
.ov-keys[b-mo85d9wezd],
.overlay .hint[b-mo85d9wezd] {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem;
    margin-top: 0.85rem; padding-top: 0.65rem; border-top: 1px solid var(--zp-line);
    font-size: 0.76rem; color: var(--zp-text-faint);
}
.ov-keys .ov-sep[b-mo85d9wezd] { margin: 0 0.2rem; opacity: 0.6; }

/* A title-style .due (returns, discount, reports…) by default; the tender panels below turn it into a figure. */
.overlay .due[b-mo85d9wezd] { font-size: 1rem; font-weight: 700; margin-bottom: 0.85rem; color: var(--zp-text); }
.overlay .due strong[b-mo85d9wezd] { color: var(--zp-accent-text); font-weight: 800; }
.ov-head > .due[b-mo85d9wezd] { margin: 0; }

/* Money hero in the tender, M-Pesa and card-wait panels: the amount is the largest thing on screen. */
.overlay.tender .due[b-mo85d9wezd],
.overlay.mpesa .due[b-mo85d9wezd],
.overlay.card-wait .due[b-mo85d9wezd] {
    display: flex; flex-direction: column; gap: 0.15rem;
    margin: 0 0 0.9rem; padding: 0.8rem 1rem; border-radius: var(--lane-radius);
    background: var(--zp-surface-2); border: 1px solid var(--zp-line);
}
.overlay.tender .due .due-label[b-mo85d9wezd],
.overlay.mpesa .due .due-label[b-mo85d9wezd] { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--zp-text-faint); }
.overlay.tender .due strong[b-mo85d9wezd],
.overlay.mpesa .due strong[b-mo85d9wezd],
.overlay.card-wait .due strong[b-mo85d9wezd] {
    font-size: 2.6rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; color: var(--zp-text);
}
.overlay.card-wait .due[b-mo85d9wezd] { align-items: center; text-align: center; }

/* ---- 8. Individual panels ------------------------------------------------------------------------------------ */
/* Open-till gate — the lane cannot sell until it clears, so it gets the till page's start-shift hero. */
.overlay.open-till-gate[b-mo85d9wezd] {
    text-align: center; padding: 1.75rem 1.6rem 1.5rem;
    border-color: var(--zp-accent-line);
    background: radial-gradient(120% 90% at 50% 0%, var(--zp-accent-soft), transparent 70%), var(--zp-elevated);
}
.overlay.open-till-gate .gate-icon[b-mo85d9wezd] {
    width: 3.4rem; height: 3.4rem; margin: 0 auto 0.9rem; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: var(--zp-accent-text); background: var(--zp-accent-soft); border: 1px solid var(--zp-accent-line);
}
.overlay.open-till-gate h3[b-mo85d9wezd] { margin: 0 0 0.45rem; font-size: 1.4rem; font-weight: 800; letter-spacing: -0.015em; color: var(--zp-text); }
.overlay.open-till-gate .loyalty-note[b-mo85d9wezd] { color: var(--zp-text-dim); margin: 0 auto; max-width: 26rem; }
.overlay.open-till-gate .tender-input[b-mo85d9wezd] { margin: 1rem 0 0.85rem; text-align: center; font-size: 1.35rem; font-weight: 750; }
.overlay.open-till-gate .gate-actions[b-mo85d9wezd] { display: flex; flex-direction: column; gap: 0.6rem; align-items: stretch; }
.overlay.open-till-gate .gate-link[b-mo85d9wezd] { color: var(--zp-text-dim); text-decoration: none; font-size: 0.85rem; font-weight: 600; }
.overlay.open-till-gate .gate-link:hover[b-mo85d9wezd] { color: var(--zp-accent-text); }
.overlay.open-till-gate .gate-status[b-mo85d9wezd] {
    margin-top: 0.75rem; padding: 0.45rem 0.7rem; border-radius: var(--lane-radius-sm);
    color: var(--zp-warn); background: var(--zp-warn-soft); font-size: 0.85rem;
}

/* Favourites (quick keys). */
.favourites h3 small[b-mo85d9wezd] { color: var(--zp-text-faint); font-weight: 500; font-size: 0.8rem; }
.favourites .empty[b-mo85d9wezd] { color: var(--zp-text-faint); }
.fav-grid[b-mo85d9wezd] { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.55rem; }
.fav-grid li[b-mo85d9wezd] {
    display: flex; align-items: center; gap: 0.6rem; padding: 0.75rem 0.8rem; border-radius: var(--lane-radius-sm);
    background: var(--zp-surface-2); border: 1px solid var(--zp-line); cursor: pointer; font-weight: 650;
    transition: border-color 0.12s var(--zp-ease), background 0.12s var(--zp-ease);
}
.fav-grid li:hover[b-mo85d9wezd], .fav-grid li.sel[b-mo85d9wezd] { border-color: var(--zp-accent-line); background: var(--zp-accent-soft); }
.fav-num[b-mo85d9wezd] {
    display: inline-flex; align-items: center; justify-content: center; width: 1.7rem; height: 1.7rem; flex: none;
    border-radius: 6px; background: var(--zp-surface); color: var(--zp-accent-text); font: 800 0.82rem var(--zp-mono);
    border: 1px solid var(--zp-accent-line); border-bottom-width: 2px;
}

/* Tender: split legs taken so far, and the sub-key hint (§11/§23). */
.overlay.tender .tender-legs[b-mo85d9wezd] { list-style: none; margin: 0 0 0.75rem; padding: 0; }
.overlay.tender .tender-legs li[b-mo85d9wezd] {
    display: flex; justify-content: space-between; gap: 1rem;
    padding: 0.4rem 0.7rem; border-radius: var(--lane-radius-xs); background: var(--zp-sunken);
    color: var(--zp-text-dim); font-size: 0.88rem;
}
.overlay.tender .tender-legs li + li[b-mo85d9wezd] { margin-top: 0.3rem; }
.overlay.tender .tender-legs .amt[b-mo85d9wezd] { font-variant-numeric: tabular-nums; color: var(--zp-text); font-weight: 700; }
.overlay.tender .tender-methods[b-mo85d9wezd] {
    margin-top: 0.75rem; padding-top: 0.6rem; border-top: 1px solid var(--zp-line);
    color: var(--zp-text-faint); font-size: 0.8rem;
}
.overlay.tender .change-line[b-mo85d9wezd] {
    margin-top: 0.75rem; padding: 0.6rem 0.8rem; border-radius: var(--lane-radius-sm);
    background: var(--zp-success-soft); border: 1px solid var(--zp-accent-line); color: var(--zp-success); font-weight: 650;
}
.overlay.tender .change-line strong[b-mo85d9wezd] { font-size: 1.35rem; font-weight: 800; color: var(--zp-success); }
.legend-alert[b-mo85d9wezd] {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem;
    margin-bottom: 0.75rem; padding: 0.55rem 0.8rem; border-radius: var(--lane-radius-sm);
    background: var(--zp-warn-soft); border: 1px solid var(--zp-warn-line); color: var(--zp-text); font-size: 0.88rem;
}
.legend-alert strong[b-mo85d9wezd] { display: inline-flex; align-items: center; gap: 0.3rem; color: var(--zp-warn); font-weight: 800; }

/* M-Pesa: who the STK prompt goes to, and when that is not the number on file (§11). */
.overlay.mpesa .mpesa-payer[b-mo85d9wezd] {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem;
    margin-bottom: 0.65rem; color: var(--zp-text-dim); font-size: 0.9rem;
}
.overlay.mpesa .mpesa-payer strong[b-mo85d9wezd] { color: var(--zp-text); }
.overlay.mpesa .mpesa-payer .on-file[b-mo85d9wezd] { font-variant-numeric: tabular-nums; }
.overlay.mpesa .mpesa-payer .on-file.none[b-mo85d9wezd] { color: var(--zp-warn); }
/* Deliberately prominent: sending the prompt to the wrong line is the mistake this panel can make. */
.overlay.mpesa .mpesa-override[b-mo85d9wezd] {
    margin-top: 0.6rem; padding: 0.55rem 0.75rem; border-radius: var(--lane-radius-sm);
    background: var(--zp-warn-soft); border: 1px solid var(--zp-warn-line); color: var(--zp-text); font-size: 0.85rem;
}
.overlay.mpesa .mpesa-error[b-mo85d9wezd] {
    margin-top: 0.6rem; padding: 0.55rem 0.75rem; border-radius: var(--lane-radius-sm);
    background: var(--zp-danger-soft); border: 1px solid var(--zp-danger-line); color: var(--zp-danger);
    font-size: 0.85rem; font-weight: 650;
}
.mpesa-state[b-mo85d9wezd] {
    display: flex; align-items: center; gap: 0.55rem;
    margin-top: 0.85rem; padding: 0.65rem 0.85rem; border-radius: var(--lane-radius-sm);
    background: var(--zp-sunken); border: 1px solid var(--zp-line); color: var(--zp-text-dim); font-weight: 600;
}
.mpesa-state[b-mo85d9wezd]::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; opacity: 0.7; }
.mpesa-state.waiting[b-mo85d9wezd] { color: var(--zp-warn); background: var(--zp-warn-soft); border-color: var(--zp-warn-line); }
.mpesa-state.waiting[b-mo85d9wezd]::before { opacity: 1; animation: lane-blink-b-mo85d9wezd 1.2s ease-in-out infinite; }
.mpesa-state.approved[b-mo85d9wezd] { color: var(--zp-success); background: var(--zp-success-soft); border-color: var(--zp-accent-line); }
.mpesa-state.approved[b-mo85d9wezd]::before { opacity: 1; }
.mpesa-state.declined[b-mo85d9wezd] { color: var(--zp-danger); background: var(--zp-danger-soft); border-color: var(--zp-danger-line); }
.mpesa-state.declined[b-mo85d9wezd]::before { opacity: 1; }
.mpesa-state.timedout[b-mo85d9wezd] { color: var(--zp-warn); background: var(--zp-warn-soft); border-color: var(--zp-warn-line); }
.mpesa-state.timedout[b-mo85d9wezd]::before { opacity: 1; }

/* Loyalty / vouchers (F5). */
.voucher-list[b-mo85d9wezd] { outline: none; border-radius: var(--lane-radius-sm); }
.voucher-list:focus-visible[b-mo85d9wezd] { outline: 2px solid var(--zp-accent); outline-offset: 4px; }
.voucher-list ul[b-mo85d9wezd] { list-style: none; margin: 0.4rem 0 0; padding: 0; }
.voucher-list li[b-mo85d9wezd] {
    display: flex; gap: 0.8rem; justify-content: space-between; align-items: baseline;
    padding: 0.5rem 0.7rem; border-radius: var(--lane-radius-sm); color: var(--zp-text-dim); border: 1px solid transparent;
}
.voucher-list li + li[b-mo85d9wezd] { margin-top: 2px; }
.voucher-list li.sel[b-mo85d9wezd] { background: var(--zp-accent-soft); color: var(--zp-text); border-color: var(--zp-accent-line); }
.voucher-list .code[b-mo85d9wezd] { font-family: var(--zp-mono); font-size: 0.86rem; }
.voucher-list .amt[b-mo85d9wezd] { color: var(--zp-accent-text); font-weight: 750; font-variant-numeric: tabular-nums; }
.voucher-list .exp[b-mo85d9wezd] { color: var(--zp-text-faint); font-size: 0.8rem; }
.voucher-applied[b-mo85d9wezd] {
    margin-top: 0.4rem; padding: 0.55rem 0.75rem; border-radius: var(--lane-radius-sm);
    color: var(--zp-success); background: var(--zp-success-soft); font-weight: 700;
}

/* Returns (F11). */
.return-lines[b-mo85d9wezd] { list-style: none; margin: 0.75rem 0; padding: 0; }
.return-lines li[b-mo85d9wezd] { display: flex; gap: 0.6rem; justify-content: space-between; padding: 0.45rem 0; border-bottom: 1px solid var(--zp-line); color: var(--zp-text-dim); }
.return-lines .qty[b-mo85d9wezd] { color: var(--zp-text-faint); margin-left: auto; font-variant-numeric: tabular-nums; }
.return-lines .price[b-mo85d9wezd] { color: var(--zp-text); font-weight: 700; font-variant-numeric: tabular-nums; }

/* Discount / price override. */
.disc-input[b-mo85d9wezd] { margin-top: 0.75rem; }
.disc-kind[b-mo85d9wezd] { display: flex; gap: 0.5rem; margin-top: 0.25rem; }
.disc-kind label[b-mo85d9wezd] {
    display: inline-flex; align-items: center; gap: 0.4rem; cursor: pointer;
    padding: 0.35rem 0.75rem; border-radius: 999px; border: 1px solid var(--zp-line-strong);
    color: var(--zp-text-dim); font-weight: 700; font-size: 0.85rem;
}
.disc-kind label:has(input:checked)[b-mo85d9wezd] { color: var(--zp-accent-text); border-color: var(--zp-accent-line); background: var(--zp-accent-soft); }
.disc-kind input[b-mo85d9wezd] { accent-color: var(--zp-accent); }

/* Reprint. */
.reprint-text[b-mo85d9wezd] {
    margin: 0; padding: 0.9rem 1rem; max-height: 22rem; overflow-y: auto;
    background: var(--zp-surface-2); border: 1px solid var(--zp-line); border-radius: var(--lane-radius);
    font-family: var(--zp-mono); font-size: 0.78rem; line-height: 1.55; white-space: pre-wrap; color: var(--zp-text-dim);
}

/* Refund complete (§16.3) — a theme-correct success card, not a hard-coded dark slab. */
.overlay.refund-done[b-mo85d9wezd] {
    text-align: center;
    border-color: var(--zp-accent-line);
    background: radial-gradient(120% 90% at 50% 0%, var(--zp-success-soft), transparent 70%), var(--zp-elevated);
}
.refund-done .rc-badge[b-mo85d9wezd],
.shift-report .rc-badge[b-mo85d9wezd],
.end-shift .rc-badge[b-mo85d9wezd] {
    display: inline-flex; align-items: center; gap: 0.45rem;
    font-weight: 800; font-size: 0.95rem; color: var(--zp-success); letter-spacing: 0.04em; text-transform: uppercase;
}
.refund-done .rc-amount[b-mo85d9wezd] {
    font-size: 2.8rem; font-weight: 800; color: var(--zp-text); font-variant-numeric: tabular-nums;
    margin: 0.3rem 0 0.9rem; letter-spacing: -0.03em; line-height: 1.1;
}
.refund-done .rc-meta[b-mo85d9wezd],
.shift-report .rc-meta[b-mo85d9wezd] {
    display: grid; gap: 0.35rem; margin: 0 0 1.1rem; text-align: left;
    padding: 0.8rem 0; border-top: 1px solid var(--zp-line); border-bottom: 1px solid var(--zp-line);
}
.refund-done .rc-meta > div[b-mo85d9wezd],
.shift-report .rc-meta > div[b-mo85d9wezd] { display: flex; justify-content: space-between; gap: 1rem; }
.refund-done .rc-meta dt[b-mo85d9wezd],
.shift-report .rc-meta dt[b-mo85d9wezd] { color: var(--zp-text-faint); font-size: 0.83rem; }
.refund-done .rc-meta dd[b-mo85d9wezd],
.shift-report .rc-meta dd[b-mo85d9wezd] { margin: 0; font-size: 0.9rem; font-weight: 650; color: var(--zp-text); font-variant-numeric: tabular-nums; }
.refund-done .rc-meta dd[b-mo85d9wezd] { font-family: var(--zp-mono); font-size: 0.84rem; }
.refund-done .rc-actions[b-mo85d9wezd],
.shift-report .rc-actions[b-mo85d9wezd] { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; }
.refund-done .rc-hint[b-mo85d9wezd],
.shift-report .rc-hint[b-mo85d9wezd],
.end-shift .rc-hint[b-mo85d9wezd] { margin-top: 0.85rem; color: var(--zp-text-faint); font-size: 0.8rem; }

/* Shift lifecycle (§13): X / Z report, end shift, close till. */
.overlay.shift-report[b-mo85d9wezd] { text-align: center; }
.shift-report .due[b-mo85d9wezd] { font-size: 1.05rem; margin: 0.35rem 0 0.9rem; }
.shift-report .rc-meta .grand[b-mo85d9wezd] { margin-top: 0.2rem; padding-top: 0.45rem; border-top: 1px dashed var(--zp-line-strong); }
.shift-report .rc-meta .grand dd[b-mo85d9wezd],
.shift-report .rc-meta .variance.ok dd[b-mo85d9wezd] { color: var(--zp-success); font-weight: 800; font-size: 1rem; }
.shift-report .rc-meta .variance.off dd[b-mo85d9wezd] { color: var(--zp-warn); font-weight: 800; font-size: 1rem; }
.overlay.end-shift .loyalty-note[b-mo85d9wezd] { margin-bottom: 0.75rem; }
/* Drawer breakdown: each cash movement, signed, so the lines add up to the expected figure. */
.overlay.shift-report .rc-meta .movement[b-mo85d9wezd] { padding-left: 0.75rem; }
.overlay.shift-report .rc-meta .movement dt[b-mo85d9wezd] {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem; color: var(--zp-text-dim); font-size: 0.84rem;
}
.overlay.shift-report .rc-meta .movement .mv-reason[b-mo85d9wezd] { color: var(--zp-text-faint); font-style: italic; }
.overlay.shift-report .rc-meta .movement .mv-time[b-mo85d9wezd] { color: var(--zp-text-faint); font-variant-numeric: tabular-nums; }
.overlay.shift-report .rc-meta .movement dd.out[b-mo85d9wezd] { color: var(--zp-warn); }
.overlay.shift-report .rc-meta .movement dd.in[b-mo85d9wezd] { color: var(--zp-success); }

/* Post-sale capture + quick enrol (§10.2 CUST-W4/W6, §10.3 CUST-K8). */
.overlay.capture .capture-note[b-mo85d9wezd], .overlay.enrol .capture-note[b-mo85d9wezd], .overlay.signout .capture-note[b-mo85d9wezd], .overlay.resume .capture-note[b-mo85d9wezd] {
    margin-top: 0.85rem; padding-top: 0.7rem; border-top: 1px solid var(--zp-line);
    color: var(--zp-text-dim); font-size: 0.82rem; line-height: 1.45;
}
.overlay .capture-empty[b-mo85d9wezd] {
    margin-top: 0.85rem; padding: 0.7rem 0.85rem; border-radius: var(--lane-radius-sm);
    background: var(--zp-sunken); color: var(--zp-text-dim); font-size: 0.9rem; line-height: 1.5;
}
.overlay.enrol .enrol-phone[b-mo85d9wezd] { margin-top: 0.6rem; }
.enrol-estate[b-mo85d9wezd] {
    width: 100%; margin-top: 0.6rem; padding: 0.6rem 0.75rem; border-radius: var(--lane-radius);
    border: 1px solid var(--zp-line-strong); background: var(--zp-surface-2); color: var(--zp-text); font: 600 0.95rem var(--zp-font);
}
.enrol-estate:focus[b-mo85d9wezd] { outline: none; border-color: var(--zp-accent); box-shadow: 0 0 0 3px var(--zp-accent-soft); }
.overlay.enrol .enrol-consent[b-mo85d9wezd] {
    display: flex; align-items: center; gap: 0.5rem; margin-top: 0.75rem;
    color: var(--zp-text-dim); font-size: 0.9rem; cursor: pointer;
}
.overlay.enrol .enrol-consent input[b-mo85d9wezd] { accent-color: var(--zp-accent); width: 16px; height: 16px; }

/* Sign out (§22). */
.overlay.signout[b-mo85d9wezd] {
    text-align: center;
    background: radial-gradient(120% 90% at 50% 0%, var(--zp-warn-soft), transparent 70%), var(--zp-elevated);
}
.overlay.signout .signout-icon[b-mo85d9wezd] {
    width: 3.2rem; height: 3.2rem; margin: 0 auto 0.8rem; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: var(--zp-text-dim); background: var(--zp-surface-2); border: 1px solid var(--zp-line-strong);
}
.overlay.signout .capture-title[b-mo85d9wezd] { margin-bottom: 0.6rem; font-weight: 800; font-size: 1.1rem; color: var(--zp-text); }
.overlay.signout .signout-who[b-mo85d9wezd] {
    display: inline-flex; align-items: center; gap: 0.4rem;
    margin: 0 auto 0.9rem; padding: 0.3rem 0.9rem; border-radius: 999px;
    background: var(--zp-sunken); border: 1px solid var(--zp-line); color: var(--zp-text); font-weight: 700; font-size: 0.88rem;
}
.overlay.signout .signout-warn[b-mo85d9wezd] {
    margin-bottom: 0.6rem; padding: 0.55rem 0.75rem; border-radius: var(--lane-radius-sm); font-size: 0.85rem;
    background: var(--zp-warn-soft); border: 1px solid var(--zp-warn-line); color: var(--zp-text);
}
.overlay.signout .signout-note[b-mo85d9wezd] { margin-bottom: 0.6rem; color: var(--zp-text-faint); font-size: 0.82rem; }
.overlay.signout .signout-form[b-mo85d9wezd] { margin: 0; }
.overlay.signout .signout-security-link[b-mo85d9wezd] {
    display: block; margin-top: 0.7rem; text-align: center; font-size: 0.78rem; font-weight: 650;
    color: var(--zp-accent-text); text-decoration: none;
}
.overlay.signout .signout-security-link:hover[b-mo85d9wezd] { text-decoration: underline; }

/* Parked-sale recall (§9) and card-payment choice (ADR-027). */
.overlay .parked-list li[b-mo85d9wezd] { display: grid; grid-template-columns: auto 1fr auto; gap: 0.6rem; align-items: baseline; }
.overlay .parked-label[b-mo85d9wezd] { font-family: var(--zp-mono); font-weight: 750; color: var(--zp-text); font-size: 0.86rem; }
.overlay .parked-detail[b-mo85d9wezd] { color: var(--zp-text-faint); font-size: 0.8rem; }
.overlay .parked-total[b-mo85d9wezd] { font-variant-numeric: tabular-nums; color: var(--zp-text); font-weight: 700; }
.overlay.card-choose .parked-list li[b-mo85d9wezd] { grid-template-columns: auto 1fr; }
.overlay.card-choose .parked-label[b-mo85d9wezd] { font-family: var(--zp-font); font-size: 1rem; font-variant-numeric: tabular-nums; }
/* Focus sink: the recall list has no text entry, but its keys must land somewhere focusable. */
.overlay.resume .resume-input[b-mo85d9wezd] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* Card on the terminal: a quiet "listening" pulse, so a waiting lane never looks frozen. */
.overlay.card-wait[b-mo85d9wezd] { text-align: center; }
.overlay.card-wait .card-pulse[b-mo85d9wezd] { display: flex; justify-content: center; margin: 0.2rem 0 0.9rem; }
.overlay.card-wait .card-pulse span[b-mo85d9wezd] {
    width: 12px; height: 12px; border-radius: 50%; background: var(--zp-accent);
    animation: lane-listen-b-mo85d9wezd 1.6s ease-out infinite;
}

/* Next-best-action strip (§17). Quiet by default: it must never compete with the total. */
.suggestions[b-mo85d9wezd] { padding: 0.8rem 0 0; }
.suggestions .sug-title[b-mo85d9wezd] {
    color: var(--zp-text-faint); font-size: 0.7rem; font-weight: 750; text-transform: uppercase; letter-spacing: 0.08em;
    margin-bottom: 0.4rem;
}
.suggestions .sug[b-mo85d9wezd] {
    display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 0.15rem 0.5rem;
    width: 100%; text-align: left; cursor: pointer; margin-bottom: 0.35rem;
    padding: 0.5rem 0.65rem; border-radius: var(--lane-radius-sm); font-family: var(--zp-font);
    background: var(--zp-surface); border: 1px solid var(--zp-line); color: var(--zp-text);
    transition: border-color 0.15s var(--zp-ease), background 0.15s var(--zp-ease);
}
.suggestions .sug:hover[b-mo85d9wezd], .suggestions .sug:focus-visible[b-mo85d9wezd] { border-color: var(--zp-accent-line); background: var(--zp-accent-soft); outline: none; }
.suggestions .sug-name[b-mo85d9wezd] { font-size: 0.86rem; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.suggestions .sug-why[b-mo85d9wezd] { grid-column: 2; color: var(--zp-text-faint); font-size: 0.72rem; }
.suggestions .sug-price[b-mo85d9wezd] { font-size: 0.86rem; font-variant-numeric: tabular-nums; color: var(--zp-text-dim); font-weight: 650; }

/* ---- 9. Status bar (severity-toned) + F-key bar (keycaps) --------------------------------------------------- */
.pos-status[b-mo85d9wezd] {
    display: flex; align-items: center; gap: 0.55rem;
    padding: 0.42rem var(--lane-pad); min-height: 2rem; font-size: 0.85rem; font-weight: 600;
    color: var(--zp-text-dim); background: var(--zp-surface-2); border-top: 1px solid var(--zp-line);
    transition: background 0.2s var(--zp-ease), color 0.2s var(--zp-ease);
}
.pos-status .msg[b-mo85d9wezd] { min-width: 0; }
.pos-status.tone-success[b-mo85d9wezd]::before,
.pos-status.tone-warning[b-mo85d9wezd]::before,
.pos-status.tone-error[b-mo85d9wezd]::before,
.pos-status.tone-busy[b-mo85d9wezd]::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.pos-status.tone-success[b-mo85d9wezd] { color: var(--zp-success); background: var(--zp-success-soft); }
.pos-status.tone-warning[b-mo85d9wezd] { color: var(--zp-warn); background: var(--zp-warn-soft); }
.pos-status.tone-error[b-mo85d9wezd] { color: var(--zp-danger); background: var(--zp-danger-soft); font-weight: 700; }
.pos-status.tone-busy[b-mo85d9wezd]::before { color: var(--zp-accent); animation: lane-blink-b-mo85d9wezd 1s ease-in-out infinite; }

.fkeys[b-mo85d9wezd] {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; padding: 0.55rem var(--lane-pad);
    background: var(--zp-veil); backdrop-filter: blur(12px); border-top: 1px solid var(--zp-line);
}
/* Each hint is a physical-looking keycap: the key on its own cap, the action beside it. Touch-ready (§9/§23):
   on a screen with no F-row the chip is the control, so it is sized for a finger and kills tap-flash. */
.fkey[b-mo85d9wezd] {
    display: inline-flex; align-items: center; gap: 0.45rem; flex: none;
    white-space: nowrap; min-height: 2.45rem; padding: 0.25rem 0.65rem 0.25rem 0.3rem;
    border-radius: var(--lane-radius-sm); font: 650 0.8rem var(--zp-font); color: var(--zp-text-dim);
    background: var(--zp-surface); border: 1px solid var(--zp-line-strong); border-bottom-width: 3px;
    box-shadow: var(--zp-shadow-1);
    cursor: pointer; appearance: none; -webkit-appearance: none;
    -webkit-tap-highlight-color: transparent; touch-action: manipulation; user-select: none;
    transition: background 0.12s var(--zp-ease), border-color 0.12s var(--zp-ease), transform 0.08s var(--zp-ease);
}
.fkey b[b-mo85d9wezd] {
    display: inline-flex; align-items: center; justify-content: center; min-width: 2.15rem; height: 1.65rem; padding: 0 0.35rem;
    border-radius: 6px; font: 800 0.72rem var(--zp-mono); color: var(--zp-accent-text);
    background: var(--zp-accent-soft); border: 1px solid var(--zp-accent-line);
}
.fkey:hover[b-mo85d9wezd] { border-color: var(--zp-accent-line); color: var(--zp-text); }
.fkey:active[b-mo85d9wezd] { transform: translateY(2px); border-bottom-width: 1px; margin-bottom: 2px; background: var(--zp-accent-soft); }
.fkey:focus-visible[b-mo85d9wezd] { outline: 2px solid var(--zp-accent); outline-offset: 2px; }

.fkeys-sep[b-mo85d9wezd] { flex: 1 1 auto; }
.fkey.help-link[b-mo85d9wezd] {
    justify-content: center; padding: 0; width: 2.45rem;
    background: transparent; border-style: dashed; border-bottom-width: 1px; box-shadow: none; color: var(--zp-text-faint);
}
.fkey.help-link:hover[b-mo85d9wezd] { color: var(--zp-accent-text); background: var(--zp-accent-soft); }

/* ---- 10. Support-material side drawer (§32/P7-16) — a pullout, not a modal: the cart stays visible. ---------- */
.help-drawer[b-mo85d9wezd] {
    position: fixed; top: 0; right: 0; height: 100vh; width: min(560px, 94vw);
    display: flex; flex-direction: column;
    background: var(--zp-surface); border-left: 1px solid var(--zp-line-strong);
    box-shadow: var(--zp-shadow-lg);
    z-index: var(--zp-z-drawer);
    animation: help-drawer-in-b-mo85d9wezd 0.22s var(--zp-ease);
}
@keyframes help-drawer-in-b-mo85d9wezd { from { transform: translateX(100%); } to { transform: translateX(0); } }
.help-drawer-head[b-mo85d9wezd] {
    display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
    padding: 0.7rem 0.6rem 0.7rem 1.1rem; border-bottom: 1px solid var(--zp-line); background: var(--zp-elevated);
}
.help-drawer-title[b-mo85d9wezd] { font-weight: 750; font-size: 0.92rem; color: var(--zp-text); }
.help-drawer-close[b-mo85d9wezd] {
    width: 2.2rem; height: 2.2rem; border-radius: var(--lane-radius-sm); border: 1px solid var(--zp-line-strong);
    background: transparent; color: var(--zp-text-dim); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.help-drawer-close:hover[b-mo85d9wezd] { background: var(--zp-sunken); color: var(--zp-text); }
/* The runbooks are standalone printable pages with their own white paper background. */
.help-drawer-frame[b-mo85d9wezd] { flex: 1; border: 0; width: 100%; background: #fff; }

/* ---- 11. Motion + responsive --------------------------------------------------------------------------------- */
@keyframes lane-fade-in-b-mo85d9wezd { from { opacity: 0; } to { opacity: 1; } }
@keyframes lane-overlay-in-b-mo85d9wezd {
    from { opacity: 0; transform: translate(-50%, 10px) scale(0.985); }
    to { opacity: 1; transform: translate(-50%, 0) scale(1); }
}
@keyframes lane-slide-down-b-mo85d9wezd { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes lane-pop-b-mo85d9wezd { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes lane-blink-b-mo85d9wezd { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
@keyframes lane-listen-b-mo85d9wezd {
    0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--zp-accent) 50%, transparent); }
    100% { box-shadow: 0 0 0 18px color-mix(in srgb, var(--zp-accent) 0%, transparent); }
}

@media (prefers-reduced-motion: reduce) {
    .shift-chip.on[b-mo85d9wezd]::before,
    .mpesa-state.waiting[b-mo85d9wezd]::before,
    .pos-status.tone-busy[b-mo85d9wezd]::before,
    .overlay.card-wait .card-pulse span[b-mo85d9wezd] { animation: none; }
    .overlay[b-mo85d9wezd], .overlay-scrim[b-mo85d9wezd], .sale-complete[b-mo85d9wezd], .totals .checkout-due[b-mo85d9wezd], .help-drawer[b-mo85d9wezd] { animation: none; }
}

@media (max-width: 1100px) {
    .totals[b-mo85d9wezd] { width: 20rem; }
    .totals .checkout-due strong[b-mo85d9wezd] { font-size: 2.1rem; }
}
@media (max-width: 760px) {
    .pos-body[b-mo85d9wezd] { flex-direction: column; overflow-y: auto; }
    .totals[b-mo85d9wezd] { width: auto; border-left: 0; border-top: 1px solid var(--zp-line); }
    .totals[b-mo85d9wezd]::before { display: none; }
    .help-drawer[b-mo85d9wezd] { width: 100vw; }
    .overlay[b-mo85d9wezd] { top: 8%; }
}
/* /Components/Pages/SignIn.razor.rz.scp.css */
/* Operator sign-in (ADR-009, refreshed by ADR-029). The aurora atmosphere comes from app.css .signin-root; this
   scoped sheet styles the card and controls on the shared --zp-* tokens, so it is correct in light and dark.
   Deliberately does NOT set the .signin-root background so the shared atmosphere shows through. */

.signin-root[b-42zykqa7ac] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    gap: 1.5rem;
    padding: 1.5rem 1rem;
    color: var(--zp-text);
    font-family: var(--zp-font);
}

.signin-card[b-42zykqa7ac] {
    position: relative;
    width: 24rem;
    max-width: calc(100vw - 2rem);
    padding: 2.25rem 2.25rem 2rem;
    background: var(--zp-elevated);
    border: 1px solid var(--zp-line-strong);
    border-radius: 20px;
    box-shadow: var(--zp-shadow-lg), 0 1px 0 var(--zp-line) inset;
    animation: signin-rise-b-42zykqa7ac 0.6s var(--zp-ease) both;
    overflow: hidden;
}
/* The same brand hairline the lane carries across its top edge — a quiet thread of continuity between
   the first screen an operator sees and the one they work in all shift. */
.signin-card[b-42zykqa7ac]::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, var(--zp-accent), var(--zp-accent-2) 55%, transparent 95%);
}

@keyframes signin-rise-b-42zykqa7ac {
    from { opacity: 0; transform: translateY(18px) scale(0.99); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.signin-head[b-42zykqa7ac] { display: flex; align-items: center; gap: 0.85rem; margin-bottom: 1.75rem; }
.signin-logo[b-42zykqa7ac] {
    width: 44px; height: 44px; border-radius: 12px; flex: none;
    background: radial-gradient(circle at 30% 28%, var(--zp-accent-bright), var(--zp-accent) 72%);
    box-shadow:
        0 10px 26px -10px color-mix(in srgb, var(--zp-accent) 75%, transparent),
        0 0 0 1px var(--zp-accent-line) inset;
    position: relative;
    animation: signin-logo-glow-b-42zykqa7ac 3.4s ease-in-out infinite;
}
@keyframes signin-logo-glow-b-42zykqa7ac {
    0%, 100% { box-shadow: 0 10px 26px -10px color-mix(in srgb, var(--zp-accent) 75%, transparent), 0 0 0 1px var(--zp-accent-line) inset; }
    50% { box-shadow: 0 10px 32px -8px color-mix(in srgb, var(--zp-accent) 95%, transparent), 0 0 0 1px var(--zp-accent-line) inset; }
}
.signin-logo[b-42zykqa7ac]::after {
    content: ""; position: absolute; inset: 12px; border-radius: 4px;
    border: 2px solid var(--zp-on-accent); border-right-color: transparent; border-bottom-color: transparent;
    opacity: 0.9;
    transform: rotate(45deg);
}
.signin-brand[b-42zykqa7ac] { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.03em; color: var(--zp-text); line-height: 1.05; }
.signin-title[b-42zykqa7ac] { font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.16em; color: var(--zp-text-faint); font-weight: 750; margin-top: 0.15rem; }

.signin-card form[b-42zykqa7ac] { display: flex; flex-direction: column; gap: 1rem; }

.signin-field[b-42zykqa7ac] { display: flex; flex-direction: column; gap: 0.4rem; }
.signin-field span[b-42zykqa7ac] { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.09em; color: var(--zp-text-dim); font-weight: 750; }
.signin-field input[b-42zykqa7ac] {
    padding: 0.72rem 0.85rem;
    border-radius: var(--zp-radius);
    border: 1px solid var(--zp-line-strong);
    background-color: var(--zp-surface-2);
    color: var(--zp-text);
    font: 600 1.05rem var(--zp-font);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.06em;
    transition: border-color 0.18s var(--zp-ease), box-shadow 0.18s var(--zp-ease);
}
.signin-field input[b-42zykqa7ac]::placeholder { color: var(--zp-text-faint); letter-spacing: normal; font-weight: 500; }
.signin-field input:focus[b-42zykqa7ac] {
    outline: none;
    border-color: var(--zp-accent);
    box-shadow: 0 0 0 3px var(--zp-accent-soft);
}

/* A small identity cue on each field — who you are, then how you prove it. (A data-URI icon cannot read a CSS
   token, so the stroke is the mid emerald that reads on both the light and the dark field.) */
.signin-field input[name="code"][b-42zykqa7ac], .signin-field input[name="pin"][b-42zykqa7ac] {
    padding-left: 2.55rem;
    background-repeat: no-repeat; background-position: 0.85rem center; background-size: 1.1rem;
}
.signin-field input[name="code"][b-42zykqa7ac] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300a676' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
}
.signin-field input[name="pin"][b-42zykqa7ac] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300a676' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");
}

.signin-btn[b-42zykqa7ac] {
    margin-top: 0.5rem;
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
    padding: 0.82rem;
    border: none;
    border-radius: var(--zp-radius);
    background: linear-gradient(180deg, var(--zp-accent), var(--zp-accent-2));
    color: var(--zp-on-accent);
    font: 800 0.98rem var(--zp-font);
    letter-spacing: 0.01em;
    cursor: pointer;
    box-shadow: 0 14px 30px -14px color-mix(in srgb, var(--zp-accent) 70%, transparent);
    transition: filter 0.16s var(--zp-ease), transform 0.12s var(--zp-ease), box-shadow 0.16s var(--zp-ease);
}
.signin-btn:hover[b-42zykqa7ac] { filter: brightness(1.06); transform: translateY(-1px); box-shadow: 0 18px 36px -14px color-mix(in srgb, var(--zp-accent) 80%, transparent); }
.signin-btn:active[b-42zykqa7ac] { transform: translateY(0); }
.signin-btn:focus-visible[b-42zykqa7ac] { outline: 2px solid var(--zp-accent); outline-offset: 3px; }
.signin-btn-arrow[b-42zykqa7ac] { transition: transform 0.18s var(--zp-ease); }
.signin-btn:hover .signin-btn-arrow[b-42zykqa7ac] { transform: translateX(4px); }

.signin-btn-secondary[b-42zykqa7ac] {
    background: var(--zp-surface-2);
    color: var(--zp-text);
    box-shadow: none;
    border: 1px solid var(--zp-line-strong);
}
.signin-btn-secondary:hover[b-42zykqa7ac] { filter: none; box-shadow: none; border-color: var(--zp-accent-line); background: var(--zp-accent-soft); }

.signin-error[b-42zykqa7ac] {
    padding: 0.6rem 0.8rem;
    border-radius: var(--zp-radius-sm);
    background: var(--zp-danger-soft);
    border: 1px solid var(--zp-danger-line);
    color: var(--zp-danger);
    font-size: 0.85rem;
    font-weight: 650;
    margin: -0.25rem 0 0.25rem;
}

.signin-hint[b-42zykqa7ac] {
    margin-top: 1.6rem; padding-top: 1.2rem;
    border-top: 1px solid var(--zp-line);
    font-size: 0.76rem; color: var(--zp-text-dim); line-height: 1.75;
}
.signin-hint-label[b-42zykqa7ac] {
    display: block; margin-bottom: 0.3rem; text-transform: uppercase; letter-spacing: 0.1em;
    font-size: 0.66rem; font-weight: 750; color: var(--zp-text-faint);
}
.signin-hint code[b-42zykqa7ac], .signin-error code[b-42zykqa7ac] {
    font-family: var(--zp-mono); color: var(--zp-accent-text); background: var(--zp-accent-soft);
    padding: 0.05rem 0.32rem; border-radius: 5px;
}

.signin-footnote[b-42zykqa7ac] { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--zp-text-faint); text-align: center; }
.signin-about[b-42zykqa7ac] { display: block; margin-top: 0.5rem; color: var(--zp-accent-text); text-decoration: none; font-weight: 700; }
.signin-about:hover[b-42zykqa7ac] { text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
    .signin-card[b-42zykqa7ac], .signin-logo[b-42zykqa7ac] { animation: none; }
}
/* /Components/Pages/Till.razor.rz.scp.css */
/* Till & cash — operator surface on the shared --zp-* tokens (app.css, ADR-029). Theme-correct in light and dark:
   every colour is a token, money is tabular, and the radius scale matches the lane. */
.ops-root[b-tsv54dxaeq] {
    min-height: 100vh;
    padding: 1.75rem 2rem 3rem;
    color: var(--zp-text);
    font-family: var(--zp-font);
    background:
        radial-gradient(1000px 560px at 85% -10%, var(--zp-aurora-1), transparent 60%),
        radial-gradient(820px 620px at -6% 110%, var(--zp-aurora-2), transparent 55%),
        linear-gradient(160deg, var(--zp-bg-2), var(--zp-bg));
}
.ops-root dd[b-tsv54dxaeq], .ops-root .num[b-tsv54dxaeq], .ops-root .mono[b-tsv54dxaeq] { font-variant-numeric: tabular-nums; }

.ops-head[b-tsv54dxaeq] { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.4rem; }
.ops-head h1[b-tsv54dxaeq] { font-size: 1.7rem; font-weight: 800; letter-spacing: -0.03em; margin: 0 0 0.25rem; color: var(--zp-text); }
.ops-sub[b-tsv54dxaeq] { color: var(--zp-text-dim); font-size: 0.88rem; margin: 0; }
.ops-back[b-tsv54dxaeq] {
    display: inline-flex; align-items: center; gap: 0.35rem; white-space: nowrap; text-decoration: none;
    color: var(--zp-accent-text); border: 1px solid var(--zp-accent-line); background: var(--zp-surface);
    padding: 0.42rem 0.95rem; border-radius: 999px; font-size: 0.85rem; font-weight: 700;
    box-shadow: var(--zp-shadow-1); transition: background 0.15s var(--zp-ease);
}
.ops-back:hover[b-tsv54dxaeq] { background: var(--zp-accent-soft); }

.ops-help[b-tsv54dxaeq] { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 1.2rem; }
.ops-help-label[b-tsv54dxaeq] {
    font-size: 0.68rem; font-weight: 750; text-transform: uppercase; letter-spacing: 0.1em; color: var(--zp-text-faint);
    margin-right: 0.15rem;
}
.ops-help-link[b-tsv54dxaeq] {
    display: inline-flex; align-items: center; gap: 0.4rem;
    font: 650 0.8rem var(--zp-font); color: var(--zp-text-dim); cursor: pointer;
    background: var(--zp-surface); border: 1px solid var(--zp-line-strong); border-radius: 999px;
    padding: 0.35rem 0.85rem; box-shadow: var(--zp-shadow-1);
    transition: background 0.12s var(--zp-ease), color 0.12s var(--zp-ease), transform 0.08s var(--zp-ease);
}
.ops-help-link[b-tsv54dxaeq]  svg { flex: none; color: var(--zp-accent-text); }
.ops-help-link:hover[b-tsv54dxaeq] { background: var(--zp-accent-soft); color: var(--zp-accent-text); border-color: var(--zp-accent-line); }
.ops-help-link:active[b-tsv54dxaeq] { transform: scale(0.97); }
.ops-help-link:focus-visible[b-tsv54dxaeq] { outline: 2px solid var(--zp-accent); outline-offset: 2px; }

.ops-status[b-tsv54dxaeq] {
    background: var(--zp-accent-soft); border: 1px solid var(--zp-accent-line); color: var(--zp-accent-text);
    padding: 0.6rem 0.9rem; border-radius: var(--zp-radius-sm); margin-bottom: 1.2rem; font-size: 0.88rem; font-weight: 600;
}

.ops-grid[b-tsv54dxaeq] { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.25rem; align-items: start; }

.ops-card[b-tsv54dxaeq] {
    background: var(--zp-surface);
    border: 1px solid var(--zp-line); border-radius: var(--zp-radius);
    padding: 1.35rem 1.5rem; margin-bottom: 1.25rem; box-shadow: var(--zp-shadow);
    max-width: 620px;
}
.ops-grid .ops-card[b-tsv54dxaeq] { margin-bottom: 0; max-width: none; }
.ops-card-head[b-tsv54dxaeq] { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 1rem; }
.ops-card h2[b-tsv54dxaeq] { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--zp-text-dim); margin: 0 0 0.9rem; font-weight: 800; }
.ops-card-head h2[b-tsv54dxaeq] { margin: 0; }
.ops-tag[b-tsv54dxaeq] {
    font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--zp-text-faint); background: var(--zp-sunken); border: 1px solid var(--zp-line-strong);
    padding: 0.12rem 0.55rem; border-radius: 999px;
}
.ops-tag.ok[b-tsv54dxaeq] { color: var(--zp-success); background: var(--zp-success-soft); border-color: var(--zp-accent-line); }
.ops-tag.warn[b-tsv54dxaeq] { color: var(--zp-warn); background: var(--zp-warn-soft); border-color: var(--zp-warn-line); }
.ops-hint[b-tsv54dxaeq] { color: var(--zp-text-dim); font-size: 0.84rem; margin: 0 0 1rem; line-height: 1.55; }

.ops-form[b-tsv54dxaeq] { display: flex; flex-wrap: wrap; gap: 0.85rem; align-items: flex-end; }
.ops-form label[b-tsv54dxaeq] {
    display: flex; flex-direction: column; gap: 0.35rem; flex: 1; min-width: 8rem;
    font-size: 0.7rem; font-weight: 750; text-transform: uppercase; letter-spacing: 0.06em; color: var(--zp-text-faint);
}
.ops-form input[b-tsv54dxaeq], .ops-form select[b-tsv54dxaeq] {
    background: var(--zp-surface-2); border: 1px solid var(--zp-line-strong); color: var(--zp-text);
    border-radius: var(--zp-radius-xs); padding: 0.58rem 0.75rem; font: 600 0.95rem var(--zp-font);
    font-variant-numeric: tabular-nums; text-transform: none; letter-spacing: normal;
    transition: border-color 0.15s var(--zp-ease), box-shadow 0.15s var(--zp-ease);
}
.ops-form input[b-tsv54dxaeq]::placeholder { color: var(--zp-text-faint); font-weight: 500; }
.ops-form input:focus[b-tsv54dxaeq], .ops-form select:focus[b-tsv54dxaeq] { outline: none; border-color: var(--zp-accent); box-shadow: 0 0 0 3px var(--zp-accent-soft); }

.ops-btn[b-tsv54dxaeq] {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; text-decoration: none;
    background: var(--zp-surface); border: 1px solid var(--zp-line-strong); color: var(--zp-text);
    border-radius: var(--zp-radius-xs); padding: 0.6rem 1.1rem; font: 700 0.85rem var(--zp-font); cursor: pointer;
    box-shadow: var(--zp-shadow-1);
    transition: transform 0.12s var(--zp-ease), background 0.15s var(--zp-ease), border-color 0.15s var(--zp-ease), box-shadow 0.15s var(--zp-ease);
}
.ops-btn:hover[b-tsv54dxaeq] { transform: translateY(-1px); background: var(--zp-surface-2); border-color: var(--zp-accent-line); }
.ops-btn:focus-visible[b-tsv54dxaeq] { outline: 2px solid var(--zp-accent); outline-offset: 2px; }
.ops-btn.primary[b-tsv54dxaeq] {
    background: linear-gradient(180deg, var(--zp-accent), var(--zp-accent-2)); border-color: transparent; color: var(--zp-on-accent);
    box-shadow: 0 10px 24px -14px color-mix(in srgb, var(--zp-accent) 70%, transparent);
}
.ops-btn.primary:hover[b-tsv54dxaeq] { filter: brightness(1.06); background: linear-gradient(180deg, var(--zp-accent), var(--zp-accent-2)); }
.ops-btn.danger[b-tsv54dxaeq] { color: var(--zp-danger); border-color: var(--zp-danger-line); background: var(--zp-danger-soft); }
.ops-btn.danger:hover[b-tsv54dxaeq] { border-color: var(--zp-danger); background: var(--zp-danger-soft); }
.ops-btn:disabled[b-tsv54dxaeq] { opacity: 0.5; cursor: not-allowed; transform: none; }

.ops-figures[b-tsv54dxaeq] { display: flex; flex-direction: column; gap: 0; margin: 0; }
.ops-figures > div[b-tsv54dxaeq] { display: flex; justify-content: space-between; gap: 1rem; padding: 0.6rem 0; border-bottom: 1px solid var(--zp-line); }
.ops-figures > div:last-child[b-tsv54dxaeq] { border-bottom: 0; }
.ops-figures dt[b-tsv54dxaeq] { color: var(--zp-text-dim); font-size: 0.88rem; margin: 0; }
.ops-figures dd[b-tsv54dxaeq] { margin: 0; font-size: 0.95rem; font-weight: 650; color: var(--zp-text); text-align: right; }
.ops-figures .grand[b-tsv54dxaeq] { margin-top: 0.15rem; border-top: 1px solid var(--zp-line-strong); }
.ops-figures .grand dt[b-tsv54dxaeq] { color: var(--zp-text); font-weight: 750; }
.ops-figures .grand dd[b-tsv54dxaeq] { color: var(--zp-accent-text); font-size: 1.2rem; font-weight: 800; }
.ops-figures .grand.bad dd[b-tsv54dxaeq] { color: var(--zp-warn); }
.ops-meta[b-tsv54dxaeq] { display: block; margin-top: 0.9rem; color: var(--zp-text-faint); font-size: 0.75rem; }

/* ---- Start-shift hero: the first thing a cashier sees before they can sell anything (§13) ---- */
.ops-card.open-shift[b-tsv54dxaeq] {
    text-align: center;
    max-width: 30rem;
    margin: 2rem auto 1.25rem;
    padding: 2.25rem 2rem 2rem;
    border-color: var(--zp-accent-line);
    background: radial-gradient(120% 90% at 50% 0%, var(--zp-accent-soft), transparent 70%), var(--zp-surface);
    box-shadow: var(--zp-shadow-lg);
}
.ops-card.open-shift .open-shift-icon[b-tsv54dxaeq] {
    width: 3.4rem; height: 3.4rem; margin: 0 auto 0.9rem; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: var(--zp-accent-text); background: var(--zp-accent-soft); border: 1px solid var(--zp-accent-line);
}
.ops-card.open-shift h2[b-tsv54dxaeq] {
    font-size: 1.35rem; font-weight: 800; text-transform: none; letter-spacing: -0.015em; color: var(--zp-text); margin: 0 0 0.6rem;
}
.ops-card.open-shift .ops-hint[b-tsv54dxaeq] { max-width: 26rem; margin: 0 auto 1rem; }
.ops-card.open-shift .ops-form[b-tsv54dxaeq] { flex-direction: column; align-items: stretch; margin-top: 0.5rem; }
.ops-card.open-shift .ops-form label[b-tsv54dxaeq] { text-align: left; }
.ops-card.open-shift .ops-form input[b-tsv54dxaeq] { font-size: 1.3rem; font-weight: 750; text-align: center; padding: 0.75rem; }
.ops-card.open-shift .ops-btn.primary[b-tsv54dxaeq] { width: 100%; padding: 0.85rem; font-size: 1rem; }

.shift-sales-table[b-tsv54dxaeq] { width: 100%; border-collapse: collapse; margin-top: 0.5rem; }
.shift-sales-table thead th[b-tsv54dxaeq] {
    text-align: left; padding: 0.45rem 0.55rem; color: var(--zp-text-faint); font-size: 0.7rem; font-weight: 750;
    text-transform: uppercase; letter-spacing: 0.06em; border-bottom: 1px solid var(--zp-line-strong);
}
.shift-sales-table thead th.num[b-tsv54dxaeq] { text-align: right; }
.shift-sales-table td[b-tsv54dxaeq] { padding: 0.5rem 0.55rem; border-bottom: 1px solid var(--zp-line); font-size: 0.9rem; color: var(--zp-text); }
.shift-sales-table tbody tr:hover[b-tsv54dxaeq] { background: var(--zp-sunken); }
.shift-sales-table tr:last-child td[b-tsv54dxaeq] { border-bottom: 0; }
.shift-sales-table tr.open td[b-tsv54dxaeq] { background: var(--zp-accent-soft); }
.shift-sales-table .num[b-tsv54dxaeq] { text-align: right; font-weight: 650; }
.shift-sales-table .num.bad[b-tsv54dxaeq] { color: var(--zp-warn); }
.shift-sales-table .mono[b-tsv54dxaeq] { font-family: var(--zp-mono); font-size: 0.84rem; color: var(--zp-text-dim); letter-spacing: 0.02em; }

/* ---- Drawer breakdown: individual cash movements, signed (§13) ---- */
.ops-figures .movement[b-tsv54dxaeq] { padding-left: 0.75rem; }
.ops-figures .movement dt[b-tsv54dxaeq] { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem; font-size: 0.86rem; }
.ops-figures .movement .mv-reason[b-tsv54dxaeq] { color: var(--zp-text-faint); font-style: italic; }
.ops-figures .movement .mv-time[b-tsv54dxaeq] { color: var(--zp-text-faint); font-variant-numeric: tabular-nums; }
.ops-figures .movement dd.out[b-tsv54dxaeq] { color: var(--zp-warn); }
.ops-figures .movement dd.in[b-tsv54dxaeq] { color: var(--zp-success); }

@media (max-width: 640px) {
    .ops-root[b-tsv54dxaeq] { padding: 1.25rem 1rem 2.5rem; }
    .ops-head[b-tsv54dxaeq] { flex-direction: column; }
}