/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* Shell styling lives in wwwroot/app.css (global, uses logical properties for RTL).
   The Blazor #blazor-error-ui rules also moved there so they apply to the element,
   which is rendered outside this component's scoped markup. Intentionally empty. */
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-j37naz21ay],
.components-reconnect-repeated-attempt-visible[b-j37naz21ay],
.components-reconnect-failed-visible[b-j37naz21ay],
.components-pause-visible[b-j37naz21ay],
.components-resume-failed-visible[b-j37naz21ay],
.components-rejoining-animation[b-j37naz21ay] {
    display: none;
}

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


#components-reconnect-modal[b-j37naz21ay] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-j37naz21ay 0.5s both;
    &[open]

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

}

#components-reconnect-modal[b-j37naz21ay]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-j37naz21ay 0.5s ease-in-out;
    opacity: 1;
}

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

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

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

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

#components-reconnect-modal p[b-j37naz21ay] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-j37naz21ay] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-j37naz21ay] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-j37naz21ay] {
        background-color: #6b9ed2;
    }

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

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

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

@keyframes components-rejoining-animation-b-j37naz21ay {
    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/Login.razor.rz.scp.css */
/* The till door.
   Deep green and muted gold on a warm off-white ground — the palette a dining room is decorated in,
   and deliberately not the terracotta-on-cream that every "restaurant app" reaches for first.
   Logical properties throughout so it flips under RTL without a second stylesheet. */

.login-wrap[b-9oi544tzcn] {
    --ink: #23281f;
    --ink-2: #6d7468;
    --paper: #ffffff;
    --ground: #faf7f2;
    --line: #e6e1d7;
    --brand: #1f5d4c;
    --brand-soft: #eaf1ee;
    --brand-ink: #ffffff;
    --gold: #b8935a;
    --gold-soft: #f7f0e4;
    --danger: #a3342a;
    --danger-soft: #fbecea;
    --ring: rgba(31, 93, 76, .16);

    /* Every duration reads from these two, so the reduced-motion block can flatten the whole page
       by rewriting two numbers instead of hunting every rule. */
    --t-fast: 140ms;
    --t-slow: 460ms;

    display: grid;
    place-items: center;
    min-height: 100vh;
    padding: 20px;
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(1100px 620px at 12% -5%, rgba(31, 93, 76, .07), transparent 60%),
        radial-gradient(820px 520px at 92% 105%, rgba(184, 147, 90, .10), transparent 58%),
        var(--ground);
    font-family: var(--font, 'Cairo', 'Inter', 'Segoe UI', Tahoma, sans-serif);
    color: var(--ink);
}

@media (prefers-color-scheme: dark) {
    .login-wrap:not([data-theme="light"])[b-9oi544tzcn] {
        --ink: #eef1ea;
        --ink-2: #9aa294;
        --paper: #1b201c;
        --ground: #141815;
        --line: #2f3730;
        --brand: #4d9c85;
        --brand-soft: #1d2a26;
        --brand-ink: #0e1512;
        --gold: #cfa96c;
        --gold-soft: #2a241a;
        --danger: #ef9a90;
        --danger-soft: #34201d;
        --ring: rgba(77, 156, 133, .22);
        background:
            radial-gradient(1100px 620px at 12% -5%, rgba(77, 156, 133, .10), transparent 60%),
            radial-gradient(820px 520px at 92% 105%, rgba(207, 169, 108, .08), transparent 58%),
            var(--ground);
    }
}

/* ── The ground ─────────────────────────────────────────────────────────────────────────────
   Two very large, very soft warm washes that breathe on a two-minute cycle. This replaced six
   drifting service icons, which read as clip-art at every opacity I tried — and one of them, a
   delivery bag, read as a shopping bag, which is the one thing a restaurant product must not
   look like. Light is atmosphere; objects are decoration, and decoration on a login screen is
   something the eye keeps returning to instead of the passcode field. */
.glow[b-9oi544tzcn] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.glow__a[b-9oi544tzcn],
.glow__b[b-9oi544tzcn] {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    will-change: transform, opacity;
}

.glow__a[b-9oi544tzcn] {
    width: 46vmax;
    height: 46vmax;
    inset-block-start: -14vmax;
    inset-inline-start: -10vmax;
    background: radial-gradient(circle, rgba(31, 93, 76, .16), transparent 68%);
    animation: breathe-a-b-9oi544tzcn 120s ease-in-out infinite;
}

.glow__b[b-9oi544tzcn] {
    width: 38vmax;
    height: 38vmax;
    inset-block-end: -12vmax;
    inset-inline-end: -8vmax;
    background: radial-gradient(circle, rgba(184, 147, 90, .18), transparent 68%);
    animation: breathe-b-b-9oi544tzcn 150s ease-in-out infinite;
}

/* Percentages of their own size, so the movement scales with the screen instead of looking
   frantic on a phone and static on a monitor. */
@keyframes breathe-a-b-9oi544tzcn {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50%      { transform: translate3d(6%, 4%, 0) scale(1.08); }
}

@keyframes breathe-b-b-9oi544tzcn {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50%      { transform: translate3d(-5%, -5%, 0) scale(1.06); }
}

@media (prefers-color-scheme: dark) {
    .login-wrap:not([data-theme="light"]) .glow__a[b-9oi544tzcn] {
        background: radial-gradient(circle, rgba(77, 156, 133, .18), transparent 68%);
    }
    .login-wrap:not([data-theme="light"]) .glow__b[b-9oi544tzcn] {
        background: radial-gradient(circle, rgba(207, 169, 108, .14), transparent 68%);
    }
}

/* ── The card ───────────────────────────────────────────────────────────────────────────────── */
.card[b-9oi544tzcn] {
    position: relative;
    width: 100%;
    max-width: 428px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 22px;
    padding: 26px 26px 18px;
    box-shadow:
        0 1px 2px rgba(35, 40, 31, .04),
        0 12px 28px rgba(35, 40, 31, .07),
        0 32px 64px rgba(35, 40, 31, .06);
    animation: card-in-b-9oi544tzcn var(--t-slow) cubic-bezier(.22, 1, .36, 1) both;
}

@keyframes card-in-b-9oi544tzcn {
    from { opacity: 0; transform: translate3d(0, 14px, 0) scale(.985); }
    to   { opacity: 1; transform: none; }
}

/* A hairline of gold along the top edge. One flourish, and it earns its place by being the only
   one. */
.card[b-9oi544tzcn]::before {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline: 22px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    opacity: .75;
}

/* The children arrive after the card, in reading order. Staggered by hand because there are only
   five of them and a loop would cost more than it saves. */
.card > *[b-9oi544tzcn] { animation: rise-b-9oi544tzcn var(--t-slow) cubic-bezier(.22, 1, .36, 1) both; }
.card > *:nth-child(1)[b-9oi544tzcn] { animation-delay: 60ms; }
.card > *:nth-child(2)[b-9oi544tzcn] { animation-delay: 110ms; }
.card > *:nth-child(3)[b-9oi544tzcn] { animation-delay: 160ms; }
.card > *:nth-child(4)[b-9oi544tzcn] { animation-delay: 200ms; }
.card > *:nth-child(5)[b-9oi544tzcn] { animation-delay: 240ms; }

@keyframes rise-b-9oi544tzcn {
    from { opacity: 0; transform: translate3d(0, 8px, 0); }
    to   { opacity: 1; transform: none; }
}

/* ── Language ───────────────────────────────────────────────────────────────────────────────── */
.card__lang[b-9oi544tzcn] {
    display: flex;
    gap: 5px;
    justify-content: flex-end;
    margin-block-end: 4px;
}

.card__lang a[b-9oi544tzcn] {
    /* Sized to the flag's own 3:2, so nothing is letterboxed. */
    width: 34px;
    height: 23px;
    display: grid;
    place-items: center;
    border-radius: 6px;
    border: 1px solid var(--line);
    overflow: hidden;
    padding: 0;
    text-decoration: none;
    opacity: .55;
    transition: opacity var(--t-fast) ease, border-color var(--t-fast) ease,
                transform var(--t-fast) ease, box-shadow var(--t-fast) ease;
}

.card__lang a:hover[b-9oi544tzcn] { opacity: .9; border-color: var(--brand); }
.card__lang a:active[b-9oi544tzcn] { transform: scale(.94); }

/* The active language is the one at full strength — the others are dimmed rather than the active
   one being boxed, so three flags read as one choice instead of three buttons. */
.card__lang a.on[b-9oi544tzcn] {
    opacity: 1;
    border-color: var(--brand);
    box-shadow: 0 0 0 2px var(--ring);
}

.flag[b-9oi544tzcn] { display: block; width: 100%; height: 100%; }

/* ── Brand ──────────────────────────────────────────────────────────────────────────────────── */
.brand[b-9oi544tzcn] {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-block-end: 14px;
}

.brand__mark[b-9oi544tzcn] {
    width: 54px;
    height: 54px;
    flex: 0 0 54px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    background: var(--brand-soft);
    color: var(--brand);
    overflow: hidden;
    animation: mark-in-b-9oi544tzcn 560ms cubic-bezier(.22, 1, .36, 1) 120ms both;
}

@keyframes mark-in-b-9oi544tzcn {
    from { opacity: 0; transform: scale(.82) rotate(-6deg); }
    to   { opacity: 1; transform: none; }
}

.brand__logo[b-9oi544tzcn] { max-width: 78%; max-height: 78%; object-fit: contain; }
.brand__cloche[b-9oi544tzcn] { width: 31px; height: 31px; fill: none; stroke: currentColor; stroke-width: 3.2; stroke-linecap: round; }
.brand__mark.has-logo .brand__cloche[b-9oi544tzcn] { display: none; }

.brand__name[b-9oi544tzcn] { font-weight: 800; font-size: 1.08rem; line-height: 1.25; letter-spacing: -.01em; }
.brand__tag[b-9oi544tzcn] { font-size: .8rem; color: var(--ink-2); }

/* What this system actually runs. Five words instead of a paragraph — it tells a cashier they are
   at the right screen, which is the only job this line has. */
.runs[b-9oi544tzcn] {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-block-end: 16px;
}

.runs span[b-9oi544tzcn] {
    font-size: .7rem;
    font-weight: 600;
    color: var(--ink-2);
    background: var(--gold-soft);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 3px 9px;
    white-space: nowrap;
}

/* ── Mode tabs ──────────────────────────────────────────────────────────────────────────────── */
.modes[b-9oi544tzcn] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    padding: 4px;
    background: var(--ground);
    border: 1px solid var(--line);
    border-radius: 13px;
    margin-block-end: 16px;
}

.modes__btn[b-9oi544tzcn] {
    min-height: 40px;
    display: grid;
    place-items: center;
    text-decoration: none;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--ink-2);
    font: inherit;
    font-size: .85rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color var(--t-fast) ease, color var(--t-fast) ease,
                box-shadow var(--t-fast) ease;
}

.modes__btn:hover[b-9oi544tzcn] { color: var(--ink); }

.modes__btn--on[b-9oi544tzcn] {
    background: var(--paper);
    color: var(--brand);
    box-shadow: 0 1px 2px rgba(35, 40, 31, .06), 0 2px 8px rgba(35, 40, 31, .05);
}

/* ── Panes ──────────────────────────────────────────────────────────────────────────────────── */
.pane--hidden[b-9oi544tzcn] { display: none; }
.pane[b-9oi544tzcn] { animation: pane-in-b-9oi544tzcn 280ms cubic-bezier(.22, 1, .36, 1) both; }

@keyframes pane-in-b-9oi544tzcn {
    from { opacity: 0; transform: translate3d(0, 6px, 0); }
    to   { opacity: 1; transform: none; }
}

.pane__title[b-9oi544tzcn] { font-weight: 800; font-size: 1.06rem; }
.pane__hint[b-9oi544tzcn] { font-size: .83rem; color: var(--ink-2); margin-block-end: 14px; }

/* ── Alert ──────────────────────────────────────────────────────────────────────────────────── */
.alert[b-9oi544tzcn] {
    background: var(--danger-soft);
    color: var(--danger);
    border: 1px solid currentColor;
    border-radius: 11px;
    padding: 9px 12px;
    font-size: .85rem;
    font-weight: 600;
    margin-block-end: 14px;
    animation: shake-b-9oi544tzcn 420ms cubic-bezier(.36, .07, .19, .97) both;
}

/* Small enough to read as "that was wrong", not as a malfunction. */
@keyframes shake-b-9oi544tzcn {
    0%, 100% { transform: translateX(0); }
    18% { transform: translateX(-5px); }
    38% { transform: translateX(4px); }
    58% { transform: translateX(-3px); }
    78% { transform: translateX(2px); }
}

/* ── Who is at the till ─────────────────────────────────────────────────────────────────────── */
.who[b-9oi544tzcn] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(122px, 1fr));
    gap: 8px;
}

.who__btn[b-9oi544tzcn] {
    display: flex;
    align-items: center;
    gap: 9px;
    /* 58px: a thumb on a greasy service tablet, not a mouse. */
    min-height: 58px;
    padding: 8px 10px;
    border-radius: 14px;
    border: 1px solid var(--line);
    background: transparent;
    color: var(--ink);
    cursor: pointer;
    text-align: start;
    font: inherit;
    transition: border-color var(--t-fast) ease, background-color var(--t-fast) ease,
                transform var(--t-fast) ease, box-shadow var(--t-fast) ease;
}

.who__btn:hover[b-9oi544tzcn] {
    border-color: var(--brand);
    background: var(--brand-soft);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(35, 40, 31, .07);
}

.who__btn:active[b-9oi544tzcn] { transform: translateY(0) scale(.985); }

.who__initial[b-9oi544tzcn] {
    width: 35px;
    height: 35px;
    flex: 0 0 35px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--brand);
    color: var(--brand-ink);
    font-weight: 800;
}

/* Two lines, not one with an ellipsis.
   A single nowrap line left roughly 135px of room, so "Demo Cashier" rendered as "…Cashier" — and
   in RTL the ellipsis eats the LEADING word, which is the half that identifies the person. Any
   ordinary Arabic full name ("عبد الرحمن الجبوري") clipped exactly the same way, leaving a tile
   that names nobody. Two lines cost a few pixels of height and let the tile do its one job. */
.who__name[b-9oi544tzcn] {
    font-size: .87rem;
    font-weight: 600;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}

/* ── The pad ────────────────────────────────────────────────────────────────────────────────── */
.pad__who[b-9oi544tzcn] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    margin-block-end: 12px;
}

.pad__back[b-9oi544tzcn] {
    width: 37px;
    height: 37px;
    border-radius: 11px;
    border: 1px solid var(--line);
    background: transparent;
    color: var(--ink);
    font-size: 1.1rem;
    cursor: pointer;
    transition: border-color var(--t-fast) ease, background-color var(--t-fast) ease;
}

.pad__back:hover[b-9oi544tzcn] { border-color: var(--brand); background: var(--brand-soft); }

.dots[b-9oi544tzcn] {
    display: flex;
    justify-content: center;
    gap: 11px;
    margin-block-end: 16px;
    min-height: 16px;
}

.dot[b-9oi544tzcn] {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    border: 2px solid var(--line);
    transition: background-color var(--t-fast) ease, border-color var(--t-fast) ease,
                transform var(--t-fast) cubic-bezier(.22, 1, .36, 1);
}

.dot--on[b-9oi544tzcn] {
    background: var(--brand);
    border-color: var(--brand);
    animation: dot-pop-b-9oi544tzcn 200ms cubic-bezier(.22, 1, .36, 1);
}

@keyframes dot-pop-b-9oi544tzcn {
    0% { transform: scale(.55); }
    60% { transform: scale(1.18); }
    100% { transform: scale(1); }
}

.keys[b-9oi544tzcn] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.key[b-9oi544tzcn] {
    /* 62px tall. The whole point of a passcode is that it is fast, and a small key is not fast. */
    position: relative;
    overflow: hidden;
    min-height: 62px;
    border-radius: 15px;
    border: 1px solid var(--line);
    background: transparent;
    color: var(--ink);
    font-size: 1.45rem;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    -webkit-tap-highlight-color: transparent;
    transition: background-color var(--t-fast) ease, border-color var(--t-fast) ease,
                transform 90ms ease;
}

.key:hover[b-9oi544tzcn] { border-color: var(--brand); }
.key:active[b-9oi544tzcn] { transform: scale(.955); background: var(--brand-soft); border-color: var(--brand); }
.key--soft[b-9oi544tzcn] { font-size: .92rem; font-weight: 600; color: var(--ink-2); }

/* The ripple. One element, positioned by the script at the point of contact, so the feedback comes
   from where the finger actually landed rather than from the middle of the key. */
.key__ripple[b-9oi544tzcn] {
    position: absolute;
    border-radius: 50%;
    background: var(--ring);
    transform: translate(-50%, -50%) scale(0);
    animation: ripple-b-9oi544tzcn 420ms ease-out forwards;
    pointer-events: none;
}

@keyframes ripple-b-9oi544tzcn {
    to { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}

/* ── Password fields ────────────────────────────────────────────────────────────────────────── */
.lbl[b-9oi544tzcn] { display: block; font-size: .82rem; font-weight: 700; margin-block-end: 5px; }

.field[b-9oi544tzcn] {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--line);
    border-radius: 13px;
    padding: 0 10px;
    margin-block-end: 12px;
    background: transparent;
    transition: border-color var(--t-fast) ease, box-shadow var(--t-fast) ease;
}

.field:focus-within[b-9oi544tzcn] {
    border-color: var(--brand);
    box-shadow: 0 0 0 4px var(--ring);
}

.field__ic[b-9oi544tzcn] { color: var(--ink-2); display: grid; place-items: center; transition: color var(--t-fast) ease; }
.field:focus-within .field__ic[b-9oi544tzcn] { color: var(--brand); }

.inp[b-9oi544tzcn] {
    flex: 1;
    min-width: 0;
    /* 50px so a cashier can hit it without aiming. */
    height: 50px;
    border: 0;
    outline: none;
    background: transparent;
    color: var(--ink);
    font: inherit;
    font-size: .95rem;
}

.field__eye[b-9oi544tzcn] {
    border: 0;
    background: transparent;
    color: var(--ink-2);
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: color var(--t-fast) ease;
}

.field__eye:hover[b-9oi544tzcn] { color: var(--brand); }

.remember[b-9oi544tzcn] {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: .85rem;
    color: var(--ink-2);
    margin-block-end: 12px;
}

/* ── Actions ────────────────────────────────────────────────────────────────────────────────── */
.go[b-9oi544tzcn] {
    position: relative;
    width: 100%;
    min-height: 54px;
    margin-block-start: 14px;
    border: 0;
    border-radius: 15px;
    background: var(--brand);
    color: var(--brand-ink);
    font-size: 1rem;
    font-weight: 800;
    cursor: pointer;
    font-family: inherit;
    overflow: hidden;
    transition: transform 90ms ease, box-shadow var(--t-fast) ease, opacity var(--t-fast) ease;
    box-shadow: 0 2px 8px rgba(31, 93, 76, .22);
}

.go:hover:not(:disabled)[b-9oi544tzcn] { box-shadow: 0 6px 18px rgba(31, 93, 76, .28); }
.go:active:not(:disabled)[b-9oi544tzcn] { transform: translateY(1px) scale(.995); }
.go:disabled[b-9oi544tzcn] { opacity: .45; cursor: not-allowed; box-shadow: none; }

/* Submitting. The label is replaced by a spinner rather than sitting beside one, so the button
   cannot be read as still-clickable while the request is in flight. */
.go.is-busy[b-9oi544tzcn] { color: transparent; pointer-events: none; }

.go.is-busy[b-9oi544tzcn]::after {
    content: "";
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    width: 20px;
    height: 20px;
    margin-block-start: -10px;
    margin-inline-start: -10px;
    border-radius: 50%;
    border: 2.5px solid rgba(255, 255, 255, .35);
    border-block-start-color: var(--brand-ink);
    animation: spin-b-9oi544tzcn 620ms linear infinite;
}

@keyframes spin-b-9oi544tzcn { to { transform: rotate(360deg); } }

.swap[b-9oi544tzcn] {
    width: 100%;
    margin-block-start: 10px;
    border: 0;
    background: transparent;
    color: var(--ink-2);
    font-size: .84rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: color var(--t-fast) ease;
}

.swap:hover[b-9oi544tzcn] { color: var(--brand); }

.credit[b-9oi544tzcn] {
    margin-block-start: 14px;
    text-align: center;
    font-size: .73rem;
    color: var(--ink-2);
}

/* Keyboard users get the same ring the mouse never sees. */
.key:focus-visible[b-9oi544tzcn],
.who__btn:focus-visible[b-9oi544tzcn],
.go:focus-visible[b-9oi544tzcn],
.modes__btn:focus-visible[b-9oi544tzcn],
.card__lang a:focus-visible[b-9oi544tzcn],
.pad__back:focus-visible[b-9oi544tzcn],
.swap:focus-visible[b-9oi544tzcn] {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

/* ── Sizes ──────────────────────────────────────────────────────────────────────────────────── */
@media (max-width: 430px) {
    .card[b-9oi544tzcn] { padding: 20px 16px 14px; border-radius: 18px; }
    .who[b-9oi544tzcn] { grid-template-columns: 1fr 1fr; }
    .key[b-9oi544tzcn] { min-height: 56px; }
}

/* Short landscape — a laptop lid or a tablet on a stand at the pass. Trim the vertical rhythm
   rather than let the card scroll, because a login that scrolls on a fixed terminal is a login
   people mis-tap.

   The threshold is 820px, not the 700 it started at: with the pad open the card stands about 790,
   so a 1366x768 laptop — the commonest cashier screen there is — fell through the gap and scrolled.
   Measured, not guessed. */
@media (max-height: 820px) and (orientation: landscape) {
    .login-wrap[b-9oi544tzcn] { padding: 12px; }
    .card[b-9oi544tzcn] { padding: 18px 22px 12px; }
    .brand[b-9oi544tzcn] { margin-block-end: 10px; }
    .runs[b-9oi544tzcn] { display: none; }
    .key[b-9oi544tzcn] { min-height: 52px; }
    .go[b-9oi544tzcn] { min-height: 48px; margin-block-start: 10px; }
}

/* ── Reduced motion ─────────────────────────────────────────────────────────────────────────────
   Not "slower" — off. Someone who asks for reduced motion is not asking for a gentler version of
   the same movement. The drifting room stops entirely and holds at its resting opacity; everything
   else appears in place. Colour and shadow feedback survives, because that is not motion. */
@media (prefers-reduced-motion: reduce) {
    .login-wrap[b-9oi544tzcn] { --t-fast: 1ms; --t-slow: 1ms; }

    .glow__a[b-9oi544tzcn],
    .glow__b[b-9oi544tzcn] {
        animation: none;
    }

    .card[b-9oi544tzcn],
    .card > *[b-9oi544tzcn],
    .brand__mark[b-9oi544tzcn],
    .pane[b-9oi544tzcn],
    .alert[b-9oi544tzcn],
    .dot--on[b-9oi544tzcn] {
        animation: none !important;
    }

    .key:active[b-9oi544tzcn],
    .go:active:not(:disabled)[b-9oi544tzcn],
    .who__btn:hover[b-9oi544tzcn],
    .who__btn:active[b-9oi544tzcn],
    .card__lang a:active[b-9oi544tzcn] {
        transform: none;
    }

    .key__ripple[b-9oi544tzcn] { display: none; }

    /* The spinner is the one exception: it is the only thing telling the user the request is still
       running, and a frozen spinner would read as a hung screen. Slowed, not stopped. */
    .go.is-busy[b-9oi544tzcn]::after { animation-duration: 1.6s; }
}