@import '_content/AERetail.ItemBrowser.Ui/AERetail.ItemBrowser.Ui.uqvgvvmccg.bundle.scp.css';
@import '_content/AERetail.KioskMenu.Ui/AERetail.KioskMenu.Ui.xdui395m8q.bundle.scp.css';
@import '_content/AERetail.PosLayout.Ui/AERetail.PosLayout.Ui.tu2ghy6796.bundle.scp.css';
@import '_content/AERetail.UICommon/AERetail.UICommon.xna4kt9lvk.bundle.scp.css';

/* _content/AERetail.WebOffice/Components/Layout/MainLayout.razor.rz.scp.css */
/* What is left of the Blazor template's layout stylesheet.

   It used to style .page, .sidebar and .top-row - a blue-to-purple gradient sidebar among them -
   none of which this application has ever drawn; the shell's real classes live in the shared
   aeretail.css. Only the error strip is kept, because Blazor renders that div itself when a
   circuit fails and nothing else styles it. */

#blazor-error-ui[b-5qrwds681x] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-5qrwds681x] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* _content/AERetail.WebOffice/Components/Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-c7m8auo3yc] {
    appearance: none;
    cursor: pointer;
    width: 3.5rem;
    height: 2.5rem;
    color: white;
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1);
}

.navbar-toggler:checked[b-c7m8auo3yc] {
    background-color: rgba(255, 255, 255, 0.5);
}

.top-row[b-c7m8auo3yc] {
    min-height: 3.5rem;
    background-color: rgba(0,0,0,0.4);
}

.navbar-brand[b-c7m8auo3yc] {
    font-size: 1.1rem;
}

.bi[b-c7m8auo3yc] {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: -1px;
    background-size: cover;
}

.bi-house-door-fill-nav-menu[b-c7m8auo3yc] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

.bi-plus-square-fill-nav-menu[b-c7m8auo3yc] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
}

.bi-list-nested-nav-menu[b-c7m8auo3yc] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

.nav-item[b-c7m8auo3yc] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

    .nav-item:first-of-type[b-c7m8auo3yc] {
        padding-top: 1rem;
    }

    .nav-item:last-of-type[b-c7m8auo3yc] {
        padding-bottom: 1rem;
    }

    .nav-item[b-c7m8auo3yc]  .nav-link {
        color: #d7d7d7;
        background: none;
        border: none;
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
        width: 100%;
    }

.nav-item[b-c7m8auo3yc]  a.active {
    background-color: rgba(255,255,255,0.37);
    color: white;
}

.nav-item[b-c7m8auo3yc]  .nav-link:hover {
    background-color: rgba(255,255,255,0.1);
    color: white;
}

.nav-scrollable[b-c7m8auo3yc] {
    display: none;
}

.navbar-toggler:checked ~ .nav-scrollable[b-c7m8auo3yc] {
    display: block;
}

@media (min-width: 641px) {
    .navbar-toggler[b-c7m8auo3yc] {
        display: none;
    }

    .nav-scrollable[b-c7m8auo3yc] {
        /* Never collapse the sidebar for wide screens */
        display: block;

        /* Allow sidebar to scroll for tall menus */
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
    }
}
/* _content/AERetail.WebOffice/Components/Views/CashCardPricingView.razor.rz.scp.css */
/* Cash and card pricing. Everything else on the screen is Card processing's (app.css: cpwrap, cpsec,
   setbar, settoggle); these are the parts it does not have. */

.ccp-pad[b-v1hqoksttq] { padding: 14px 16px 16px; }

.ccp-choices[b-v1hqoksttq] { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; padding: 16px; }
.ccp-choice[b-v1hqoksttq] { display: flex; flex-direction: column; gap: 4px; padding: 11px 13px; border: 1px solid var(--rule-2);
    border-radius: 10px; background: var(--surface); cursor: pointer; min-width: 0; }
.ccp-choice.on[b-v1hqoksttq] { border-color: var(--h-accent); background: var(--h-tint-2); box-shadow: inset 0 0 0 1px var(--h-accent); }
.ccp-choice-head[b-v1hqoksttq] { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ink); }
.ccp-choice-head input[b-v1hqoksttq] { width: 16px; height: 16px; margin: 0; accent-color: var(--h-accent); }
.ccp-choice-what[b-v1hqoksttq] { font-size: 12.5px; line-height: 1.45; color: var(--ink-2); }
.ccp-rate[b-v1hqoksttq] { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 12.5px; color: var(--ink-2); }
.ccp-rate .setfld.num[b-v1hqoksttq] { width: 90px; }

/* The two short sections side by side where there is room. The grid's own padding is the sections'. */
.ccp-pair[b-v1hqoksttq] { padding: 0; gap: 0 16px; }
.ccp-pair > .cpsec[b-v1hqoksttq] { margin-top: 16px; }

.ccp-receipt[b-v1hqoksttq] { margin: 0; padding: 10px 12px; border: 1px dashed var(--rule-2); border-radius: 8px; background: var(--surface-2);
    font: 12px/1.45 var(--mono, ui-monospace, Consolas, monospace); color: var(--ink); white-space: pre; overflow-x: auto; }

.ccp-dates[b-v1hqoksttq] { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: flex-end; }
.ccp-dates > .cpnote[b-v1hqoksttq] { flex-basis: 100%; }

.ccp-table[b-v1hqoksttq] { width: 100%; border-collapse: collapse; font-size: 13px; }
.ccp-table th[b-v1hqoksttq] { text-align: left; font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    color: var(--ink-3); padding: 6px 8px; border-bottom: 1px solid var(--rule); }
.ccp-table td[b-v1hqoksttq] { padding: 7px 8px; border-bottom: 1px solid var(--rule); vertical-align: middle; }
.ccp-table .vh[b-v1hqoksttq] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.ccp-notice[b-v1hqoksttq] { margin: 0 0 12px; padding-left: 20px; display: grid; gap: 4px; font-size: 13px; color: var(--ink-2); }
.ccp-agree[b-v1hqoksttq] { align-items: flex-start; line-height: 1.45; }
.ccp-agree input[b-v1hqoksttq] { margin-top: 2px; }
/* _content/AERetail.WebOffice/Components/Views/CustomersHostView.razor.rz.scp.css */
/* Customers, hosted without reaching into the screens.

   CustomerListView and CustomerEntryView are the till's screens too (AERetail.ItemBrowser.Ui). They
   carry their own colours and take their height from whoever hosts them (root height: 100%), so the
   office decides only the box: the window's height, so the list's grid scrolls inside itself as it
   does at a till, on a plain white ground with the office's frame. The till is untouched. */

.cux[b-noxwfehltj] {
    height: calc(100vh - 150px);
    min-height: 480px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 12px;
    border: 1px solid var(--rule);
    border-radius: var(--r-card);
    background: var(--surface);
}
/* _content/AERetail.WebOffice/Components/Views/DashboardView.razor.rz.scp.css */
/* The dashboard, in the office's own theme (office-light: amber accent, pale page, white cards).
   The layout is the demo's (demo\AERetail.WebOffice.Demo): a main column of what needs somebody and
   the stores, a side column of today's figures, and the directory underneath. Only aeretail.css and
   office-light tokens are used - no colour of its own. */

.dash-head[b-gnw9p2qvpi] { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.dash-head > div[b-gnw9p2qvpi] { flex: 1 1 360px; min-width: 0; }
.dash-title[b-gnw9p2qvpi] { font-size: 1.6rem; font-weight: 700; letter-spacing: -.02em; margin: 0; color: var(--ink); }
.dash-lede[b-gnw9p2qvpi] { margin: 4px 0 0; color: var(--ink-2); }
.dash-section[b-gnw9p2qvpi] { font-size: 1.05rem; font-weight: 650; margin: 0 0 10px; color: var(--ink); }
.dash-section-row[b-gnw9p2qvpi] { display: flex; align-items: baseline; gap: 12px; }
.dash-more[b-gnw9p2qvpi] { margin-left: auto; font-size: 13px; font-weight: 600; }
.dash-empty[b-gnw9p2qvpi] { padding: 18px; color: var(--ink-2); }

.home[b-gnw9p2qvpi] { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 22px; align-items: start; }
.home-main[b-gnw9p2qvpi], .home-side[b-gnw9p2qvpi] { display: grid; gap: 22px; min-width: 0; }
.home-main > *[b-gnw9p2qvpi], .home-side > *[b-gnw9p2qvpi] { min-width: 0; }

/* Needs attention: one row per kind of thing, the whole row answering a click through its link. */
.attn[b-gnw9p2qvpi] { list-style: none; margin: 0; padding: 0; }
.attn-row[b-gnw9p2qvpi] {
    position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 14px; align-items: center;
    padding: 11px 16px; border-bottom: 1px solid var(--rule);
}
.attn-row:last-child[b-gnw9p2qvpi] { border-bottom: 0; }
.attn-row:hover[b-gnw9p2qvpi] { background: var(--surface-2); }
.attn-n[b-gnw9p2qvpi] {
    justify-self: start; min-width: 44px; text-align: center; padding: 3px 10px; border-radius: 999px;
    background: var(--h-tint-2); color: var(--h-ink); font-weight: 700; font-variant-numeric: tabular-nums;
}
.attn-what[b-gnw9p2qvpi] { color: var(--ink); }
.attn-go[b-gnw9p2qvpi] { font-weight: 600; white-space: nowrap; }
.attn-go[b-gnw9p2qvpi]::after { content: ""; position: absolute; inset: 0; }

/* Stores at a glance. */
.glance table[b-gnw9p2qvpi] { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
/* Headings may wrap: the table fits its card rather than running off the side of it. They stay in the
   text face; only the figures under them take the office's number face (.num). */
.glance th[b-gnw9p2qvpi] { text-align: left; font-weight: 600; color: var(--ink-2); padding: 9px 10px; border-bottom: 1px solid var(--rule); vertical-align: bottom; }
.glance th.r[b-gnw9p2qvpi] { text-align: right; }
.glance td[b-gnw9p2qvpi] { padding: 9px 10px; border-bottom: 1px solid var(--rule); vertical-align: middle; }
.glance tbody tr:last-child td[b-gnw9p2qvpi] { border-bottom: 0; }
.glance th:first-child[b-gnw9p2qvpi], .glance td:first-child[b-gnw9p2qvpi] { padding-left: 16px; white-space: nowrap; }
.glance .num[b-gnw9p2qvpi] { text-align: right; }
.glance .sub[b-gnw9p2qvpi] { display: block; color: var(--ink-3); font-size: 12px; }

/* Today so far. */
.today[b-gnw9p2qvpi] { padding: 16px 18px; }
.today-head[b-gnw9p2qvpi] { display: flex; align-items: baseline; gap: 8px; justify-content: space-between; }
.ts[b-gnw9p2qvpi] { margin: 0 0 6px; display: grid; gap: 12px; }
.ts-kpi[b-gnw9p2qvpi] { padding-bottom: 12px; border-bottom: 1px solid var(--rule); }
.ts-kpi dt[b-gnw9p2qvpi] { font-size: 13px; color: var(--ink-2); font-weight: 600; }
.ts-kpi dd[b-gnw9p2qvpi] { margin: 0; }
.ts-kpi .v[b-gnw9p2qvpi] { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); }
.ts-kpi.lead .v[b-gnw9p2qvpi] { font-size: 28px; letter-spacing: -.02em; }
.ts-kpi .c[b-gnw9p2qvpi] { font-size: 12.5px; color: var(--ink-2); }
.side-title[b-gnw9p2qvpi] { font-size: 13px; font-weight: 600; color: var(--ink-2); margin: 16px 0 6px; }
.topstores[b-gnw9p2qvpi] { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.topstores td[b-gnw9p2qvpi] { padding: 6px 0; border-bottom: 1px solid var(--rule); }
.topstores tr:last-child td[b-gnw9p2qvpi] { border-bottom: 0; }
.topstores .bar[b-gnw9p2qvpi] { width: 36%; padding: 0 10px; }
.topstores .num[b-gnw9p2qvpi] { text-align: right; }
.meter[b-gnw9p2qvpi] { display: block; height: 6px; border-radius: 3px; background: var(--surface-3); overflow: hidden; }
.meter > i[b-gnw9p2qvpi] { display: block; height: 100%; background: var(--brand); border-radius: 3px; }

/* The directory of every screen. */
.goto[b-gnw9p2qvpi] { margin-top: 30px; }
.dir[b-gnw9p2qvpi] { columns: 4 200px; column-gap: 24px; }
.dir-group[b-gnw9p2qvpi] { break-inside: avoid; margin-bottom: 18px; }
.dir-group h3[b-gnw9p2qvpi] { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 650; margin: 0 0 6px; color: var(--ink); }
.dir-group h3 svg[b-gnw9p2qvpi] { width: 16px; height: 16px; color: var(--ink-3); flex: none; }
.dir-group ul[b-gnw9p2qvpi] { list-style: none; margin: 0; padding: 0 0 0 24px; }
.dir-group li[b-gnw9p2qvpi] { padding: 2px 0; }
.dir-group a[b-gnw9p2qvpi] { color: var(--ink-2); text-decoration: none; }
.dir-group a:hover[b-gnw9p2qvpi] { color: var(--h-ink, var(--ink)); text-decoration: underline; }

@media (max-width: 1279px) {
    .home[b-gnw9p2qvpi] { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 599px) {
    .attn-row[b-gnw9p2qvpi] { grid-template-columns: auto minmax(0, 1fr); }
    .attn-go[b-gnw9p2qvpi] { grid-column: 2; }
}
/* _content/AERetail.WebOffice/Components/Views/GlobalChangesView.razor.rz.scp.css */
/* Global changes, drawn as the demo draws it (demo\AERetail.WebOffice.Demo, Pages\GlobalChanges.razor.css) in the
   office's own theme: its surfaces, ink and amber accent (app.css, office-light). The page brings its own panels,
   fields, grid, chips and pills under gc- names, so nothing here reaches another screen and the office's own
   .fld, .card and .num, which look different, never reach these.

   Colour marks where you are and what needs a look, always beside words: the accent for the step you are on and
   what you have chosen, green for done and for what will change, amber for what to check or finish, red for what
   is skipped, blue for help. */

.gc[b-150bpdynuy] {
    /* What the office's tokens do not have. The accent is a light amber, so text in it uses the dark amber the
       office uses for words on its accent (--brand-on-dark), which reads on white. */
    --gc-accent-text: #8A5A02;
    --gc-accent-tint-2: rgba(245, 165, 36, .26);
    --gc-warn: #B54708;  --gc-warn-tint: #FEF3E6;
    --gc-info: #175CD3;  --gc-info-tint: #EEF4FF;
    --gc-hover: var(--surface-2);
    --gc-shadow-pop: 0 4px 8px rgba(16, 24, 40, .06), 0 16px 36px -12px rgba(16, 24, 40, .22);
    --gc-r: 10px;
    --gc-r-ctl: 7px;
    font-size: 14px;
    color: var(--ink);
}

/* ── The page's own pieces ────────────────────────────────────────────────────────────────────────────────────── */

.gc-panel[b-150bpdynuy] { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--gc-r); min-width: 0; }
.gc-card-head[b-150bpdynuy] { display: flex; align-items: center; gap: 12px; padding: 14px 18px 0; flex-wrap: wrap; }
.gc-card-title[b-150bpdynuy] { font-size: 1rem; font-weight: 600; margin: 0; }
.gc-body[b-150bpdynuy] { padding: 16px 18px; }
.gc-spacer[b-150bpdynuy] { flex: 1; }
.gc-muted[b-150bpdynuy] { color: var(--ink-2); }
.gc-faint[b-150bpdynuy] { color: var(--ink-3); }
.gc-num[b-150bpdynuy] { font-variant-numeric: tabular-nums; }
.gc-mono[b-150bpdynuy] { font-family: "JetBrains Mono", ui-monospace, Consolas, monospace; font-size: 12.5px; }
.gc-vh[b-150bpdynuy] {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.gc-ico[b-150bpdynuy] { flex: none; display: inline-block; vertical-align: -2px; }
.gc-loading[b-150bpdynuy] { display: flex; align-items: center; gap: 10px; padding: 24px 18px; color: var(--ink-2); }
.gc-alert[b-150bpdynuy] { margin-bottom: 12px; align-items: center; }
.gc-flash[b-150bpdynuy] {
    display: flex; align-items: center; gap: 8px; margin-bottom: 12px; padding: 10px 14px; border-radius: var(--gc-r-ctl);
    background: var(--good-tint); color: var(--good); font-weight: 500;
}

.gc .btn[b-150bpdynuy] { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.gc-btn-sm[b-150bpdynuy] { height: 30px; padding: 0 10px; font-size: 13px; }
.gc-btn-text[b-150bpdynuy] { border-color: transparent !important; background: transparent !important; color: var(--gc-accent-text); box-shadow: none !important; }
.gc-btn-text:hover:not(:disabled)[b-150bpdynuy] { background: var(--brand-tint) !important; }
.gc-btn-danger[b-150bpdynuy] { border-color: transparent !important; background: transparent !important; color: var(--bad); box-shadow: none !important; }
.gc-btn-danger:hover:not(:disabled)[b-150bpdynuy] { background: var(--bad-tint) !important; }
.gc button:disabled[b-150bpdynuy] { opacity: .45; cursor: not-allowed; }

.gc-iconbtn[b-150bpdynuy] {
    width: 34px; height: 34px; display: inline-grid; place-items: center; border: 0; border-radius: 8px;
    background: transparent; color: var(--ink-2); cursor: pointer; flex: none;
}
.gc-iconbtn:hover:not(:disabled)[b-150bpdynuy] { background: var(--surface-3); color: var(--ink); }
.gc-iconbtn:disabled[b-150bpdynuy] { opacity: .35; cursor: default; }

.gc-ctl[b-150bpdynuy] {
    height: 36px; padding: 0 10px; border: 1px solid var(--rule-2); border-radius: var(--gc-r-ctl);
    background: var(--surface); color: var(--ink); font: inherit; min-width: 0; width: 100%;
}
.gc-ctl:hover[b-150bpdynuy] { border-color: var(--ink-3); }
.gc-ctl:focus[b-150bpdynuy] { border-color: var(--brand); box-shadow: 0 0 0 3px var(--gc-accent-tint-2); outline: none; }
textarea.gc-ctl[b-150bpdynuy] { height: auto; min-height: 72px; padding: 8px 10px; resize: vertical; }
select.gc-ctl[b-150bpdynuy] { padding-right: 28px; }

.gc-fld[b-150bpdynuy] { display: grid; gap: 5px; min-width: 0; align-content: start; }
.gc-fld > span[b-150bpdynuy] { font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.gc-fld small[b-150bpdynuy] { color: var(--ink-3); font-size: 12px; }
.gc-check[b-150bpdynuy] { display: inline-flex; gap: 8px; align-items: center; cursor: pointer; }
.gc-check input[b-150bpdynuy] { width: 16px; height: 16px; accent-color: var(--brand); }

.gc-search[b-150bpdynuy] { position: relative; flex: 0 1 300px; min-width: 180px; }
.gc-search .gc-ico[b-150bpdynuy] { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--ink-3); pointer-events: none; }
.gc-search .gc-ctl[b-150bpdynuy] { padding-left: 34px; }

.gc-toolbar[b-150bpdynuy] { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--rule); }
.gc-count[b-150bpdynuy] { color: var(--ink-2); font-size: 13px; white-space: nowrap; }

.gc-fchips[b-150bpdynuy] { display: flex; gap: 6px; flex-wrap: wrap; }
.gc-fchip[b-150bpdynuy] {
    height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--rule-2); background: var(--surface);
    color: var(--ink-2); font-weight: 500; font-size: 13px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
}
.gc-fchip:hover[b-150bpdynuy] { background: var(--gc-hover); }
.gc-fchip[aria-pressed="true"][b-150bpdynuy] { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.gc-fchip .n[b-150bpdynuy] { font-size: 11.5px; opacity: .8; }

.gc-grid-wrap[b-150bpdynuy] { overflow-x: auto; }
table.gc-grid[b-150bpdynuy] { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; font-variant-numeric: tabular-nums; }
.gc-grid th[b-150bpdynuy] {
    position: sticky; top: 0; z-index: 1; height: 36px; padding: 0 8px; text-align: left; white-space: nowrap;
    background: var(--surface-2); color: var(--ink-2); font-weight: 600; border-bottom: 1px solid var(--rule);
}
.gc-grid td[b-150bpdynuy] { height: 42px; padding: 6px 8px; border-bottom: 1px solid var(--rule); vertical-align: middle; }
.gc-grid th:first-child[b-150bpdynuy], .gc-grid td:first-child[b-150bpdynuy] { padding-left: 16px; }
.gc-grid th:last-child[b-150bpdynuy], .gc-grid td:last-child[b-150bpdynuy] { padding-right: 16px; }
.gc-grid tbody tr:last-child td[b-150bpdynuy] { border-bottom: 0; }
.gc-grid tbody tr:hover td[b-150bpdynuy] { background: var(--gc-hover); }
.gc-grid .gc-num[b-150bpdynuy], .gc-grid th.gc-num[b-150bpdynuy] { text-align: right; }
.gc-sub[b-150bpdynuy] { display: block; color: var(--ink-2); font-size: 12px; }
.gc-grid td:nth-child(2)[b-150bpdynuy], .gc-grid td:nth-child(2) .gc-sub[b-150bpdynuy] { white-space: nowrap; }
.gc-clickable[b-150bpdynuy] { cursor: pointer; }
.gc-rowlink[b-150bpdynuy] { border: 0; background: none; padding: 0; color: var(--ink); font-weight: 600; cursor: pointer; text-align: left; font: inherit; }
.gc-rowlink:hover[b-150bpdynuy] { color: var(--gc-accent-text); text-decoration: underline; }
.gc-pager[b-150bpdynuy] { display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding: 8px 16px; border-top: 1px solid var(--rule); color: var(--ink-2); font-size: 13px; }
.gc-empty[b-150bpdynuy] { padding: 40px 16px; text-align: center; color: var(--ink-2); }
.gc-empty b[b-150bpdynuy] { display: block; color: var(--ink); font-size: 15px; margin-bottom: 4px; }

.gc-pill[b-150bpdynuy] {
    display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: 999px;
    font-size: 12px; font-weight: 600; white-space: nowrap; background: var(--surface-3); color: var(--ink-2);
}
.gc-pill[b-150bpdynuy]::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.gc-pill.good[b-150bpdynuy] { background: var(--good-tint); color: var(--good); }
.gc-pill.warn[b-150bpdynuy] { background: var(--gc-warn-tint); color: var(--gc-warn); }
.gc-pill.bad[b-150bpdynuy] { background: var(--bad-tint); color: var(--bad); }
.gc-pill.info[b-150bpdynuy] { background: var(--gc-info-tint); color: var(--gc-info); }
.gc-pill.brand[b-150bpdynuy] { background: var(--brand-tint); color: var(--gc-accent-text); }
.gc-tag[b-150bpdynuy] { display: inline-block; font-size: 11.5px; font-weight: 600; padding: 1px 7px; border-radius: 4px; background: var(--surface-3); color: var(--ink-2); }

.gc-notice[b-150bpdynuy] { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--gc-r); background: var(--gc-info-tint); }
.gc-kv[b-150bpdynuy] { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 8px 14px; font-size: 13px; margin: 0; }
.gc-kv dt[b-150bpdynuy] { color: var(--ink-2); }
.gc-kv dd[b-150bpdynuy] { margin: 0; }
.gc-subhead[b-150bpdynuy] { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); margin: 18px 0 8px; }
.gc-mini[b-150bpdynuy] { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.gc-mini th[b-150bpdynuy] { text-align: left; font-weight: 600; color: var(--ink-2); padding: 6px 0; border-bottom: 1px solid var(--rule); }
.gc-mini td[b-150bpdynuy] { padding: 7px 0; border-bottom: 1px solid var(--rule); }
.gc-mini tr:last-child td[b-150bpdynuy] { border-bottom: 0; }
.gc-mini td + td[b-150bpdynuy], .gc-mini th + th[b-150bpdynuy] { padding-left: 12px; }

/* ── Tabs ─────────────────────────────────────────────────────────────────────────────────────────────────────── */

.gc-tabs[b-150bpdynuy] { display: flex; gap: 4px; border-bottom: 1px solid var(--rule); margin: 0 0 16px; }
.gc-tabs button[b-150bpdynuy] {
    height: 40px; padding: 0 14px; border: 0; background: none; cursor: pointer; font: inherit; font-weight: 600; color: var(--ink-2);
    border-bottom: 2px solid transparent; margin-bottom: -1px; display: inline-flex; align-items: center; gap: 8px;
}
.gc-tabs button:hover[b-150bpdynuy] { color: var(--ink); }
.gc-tabs button[aria-selected="true"][b-150bpdynuy] { color: var(--ink); border-bottom-color: var(--brand); }
.gc-tabs .n[b-150bpdynuy] { font-size: 11.5px; padding: 1px 7px; border-radius: 999px; background: var(--surface-3); color: var(--ink-2); }

/* How it works: three plain lines for someone who does this now and then. */
.gc-howto[b-150bpdynuy] {
    margin-bottom: 14px; padding: 12px 16px; border-radius: var(--gc-r); background: var(--gc-info-tint); display: grid; gap: 8px;
    border-left: 4px solid var(--gc-info);
}
.gc-howto-head[b-150bpdynuy] { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.gc-howto-head h2[b-150bpdynuy] { font-size: 15px; font-weight: 600; margin: 0; color: var(--gc-info); }
.gc-howto-head .gc-muted[b-150bpdynuy] { font-size: 13px; }
.gc-howto-steps[b-150bpdynuy] {
    margin: 0; padding-left: 0; list-style: none; counter-reset: gc-howto;
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 28px; font-size: 13.5px;
}
.gc-howto-steps li[b-150bpdynuy] { position: relative; padding-left: 32px; counter-increment: gc-howto; }
.gc-howto-steps li[b-150bpdynuy]::before {
    content: counter(gc-howto); position: absolute; left: 0; top: 0; width: 22px; height: 22px; border-radius: 50%;
    display: grid; place-items: center; font-size: 12px; font-weight: 700; background: var(--brand); color: var(--brand-ink);
}
.gc-tips-off[b-150bpdynuy] { margin: -6px 0 8px; }

/* A plain instruction at the top of each step's card. */
.gc-guide[b-150bpdynuy] {
    display: flex; gap: 10px; align-items: flex-start; margin: 12px 18px; padding: 10px 14px; border-radius: 8px;
    background: var(--gc-info-tint); border-left: 3px solid var(--gc-info); font-size: 13.5px;
}
.gc-guide > .gc-ico[b-150bpdynuy] { color: var(--gc-info); margin-top: 2px; }
.gc-guide-in[b-150bpdynuy] { margin: 0 0 14px; }
.gc-why[b-150bpdynuy] { color: var(--gc-warn); font-weight: 600; }
.gc-op-hint[b-150bpdynuy] { margin: 0; padding: 2px 14px 0; font-size: 13px; color: var(--gc-info); }
.gc-legend[b-150bpdynuy] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: 12px 0 0; font-size: 13px; color: var(--ink-2); }
.gc-legend b[b-150bpdynuy] { color: var(--ink); }
.gc-legend span[b-150bpdynuy] { display: inline-flex; align-items: center; gap: 6px; }

/* ── Step bar: stays in view while the page scrolls ───────────────────────────────────────────────────────────── */

.gc-steps[b-150bpdynuy] {
    position: sticky; top: 0; z-index: 5; list-style: none; margin: 0 0 10px; padding: 4px 0;
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px;
    background: var(--canvas); border-bottom: 1px solid var(--rule);
}
.gc-step button[b-150bpdynuy] {
    width: 100%; display: flex; align-items: center; gap: 10px; padding: 6px 12px; border-radius: var(--gc-r);
    border: 1px solid var(--rule); background: var(--surface); cursor: pointer; text-align: left; min-width: 0; font: inherit; color: var(--ink);
}
.gc-step button:hover:not(:disabled)[b-150bpdynuy] { border-color: var(--rule-2); }
.gc-step button:disabled[b-150bpdynuy] { cursor: not-allowed; opacity: .6; }
.gc-step-n[b-150bpdynuy] {
    flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-weight: 700;
    font-size: 12px; background: var(--surface-3); color: var(--ink-2);
}
.gc-step-text[b-150bpdynuy] { display: grid; min-width: 0; line-height: 1.25; }
.gc-step-text b[b-150bpdynuy] { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gc-step-text small[b-150bpdynuy] { font-size: 12px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gc-step.on button[b-150bpdynuy] { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.gc-step.on .gc-step-n[b-150bpdynuy] { background: var(--brand-ink); color: var(--brand); }
.gc-step.on .gc-step-text small[b-150bpdynuy] { color: var(--brand-ink); opacity: .85; }
.gc-step.done button[b-150bpdynuy] { background: var(--good-tint); border-color: transparent; }
.gc-step.done .gc-step-n[b-150bpdynuy] { background: var(--good); color: var(--good-tint); }
.gc-step.done .gc-step-text small[b-150bpdynuy] { color: var(--good); font-weight: 600; }

.gc-card[b-150bpdynuy] { margin-bottom: 16px; border-top: 3px solid var(--brand); }
.gc-card .gc-card-title[b-150bpdynuy] { color: var(--gc-accent-text); }

/* ── Step 1: ways in, filter chips and the filter editor ──────────────────────────────────────────────────────── */

.gc-modes[b-150bpdynuy] { display: flex; gap: 6px; padding: 12px 18px; flex-wrap: wrap; border-bottom: 1px solid var(--rule); }
.gc-mode[b-150bpdynuy] {
    height: 34px; padding: 0 12px; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font: inherit;
    border-radius: var(--gc-r-ctl); border: 1px solid var(--rule-2); background: var(--surface); font-weight: 500; color: var(--ink-2);
}
.gc-mode:hover[b-150bpdynuy] { background: var(--gc-hover); }
.gc-mode[aria-pressed="true"][b-150bpdynuy] { border-color: var(--brand); background: var(--brand-tint); color: var(--gc-accent-text); font-weight: 600; }
.gc-mode-n[b-150bpdynuy] { font-size: 11.5px; padding: 0 7px; border-radius: 999px; background: var(--surface-3); color: var(--ink-2); font-weight: 600; }
.gc-mode[aria-pressed="true"] .gc-mode-n[b-150bpdynuy] { background: var(--brand); color: var(--brand-ink); }

.gc-chip[b-150bpdynuy] {
    display: inline-flex; align-items: stretch; height: 30px; border-radius: 999px; border: 1px solid var(--brand-line);
    background: var(--brand-tint); color: var(--ink); font-size: 13px; overflow: hidden; max-width: 100%;
}
.gc-chip.on[b-150bpdynuy] { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand) inset; }
.gc-chip button[b-150bpdynuy] { border: 0; background: none; cursor: pointer; color: inherit; font: inherit; }
.gc-chip-main[b-150bpdynuy] { padding: 0 6px 0 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gc-chip-main b[b-150bpdynuy] { font-weight: 600; color: var(--gc-accent-text); }
.gc-chip-x[b-150bpdynuy] { padding: 0 9px 0 4px; color: var(--ink-2) !important; display: grid; place-items: center; }
.gc-chip-x:hover[b-150bpdynuy] { color: var(--bad) !important; }

.gc-anchor[b-150bpdynuy] { position: relative; }
.gc-scrim[b-150bpdynuy] { position: fixed; inset: 0; z-index: 20; }
.gc-menu[b-150bpdynuy] {
    position: absolute; top: calc(100% + 4px); left: 0; z-index: 21; width: 220px; max-height: 340px; overflow: auto;
    padding: 6px; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--gc-r); box-shadow: var(--gc-shadow-pop);
}
.gc-menu-item[b-150bpdynuy] {
    display: block; width: 100%; text-align: left; padding: 8px 10px; border: 0; border-radius: 6px; background: none; cursor: pointer; font: inherit; color: var(--ink);
}
.gc-menu-item:hover[b-150bpdynuy], .gc-menu-item:focus-visible[b-150bpdynuy] { background: var(--surface-3); }

.gc-editor[b-150bpdynuy] { margin: 0; padding: 14px 18px; background: var(--surface-2); border-bottom: 1px solid var(--rule); display: grid; gap: 12px; }
.gc-editor-head[b-150bpdynuy] { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.gc-editor-head .gc-muted[b-150bpdynuy] { font-size: 13px; }
.gc-editor-foot[b-150bpdynuy] { display: flex; gap: 8px; }
.gc-optsearch[b-150bpdynuy] { flex-basis: auto; max-width: 320px; }
.gc-picks[b-150bpdynuy] { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 4px 16px; max-height: 260px; overflow: auto; }
.gc-pick[b-150bpdynuy] { padding: 5px 0; font-size: 13.5px; }
.gc-pick span:first-of-type[b-150bpdynuy] { flex: 1; min-width: 0; }
.gc-range[b-150bpdynuy] { display: flex; gap: 14px; flex-wrap: wrap; }
.gc-range .gc-fld[b-150bpdynuy] { width: 180px; }

.gc-unit[b-150bpdynuy] { display: flex; align-items: center; position: relative; }
.gc-unit-mark[b-150bpdynuy] { position: absolute; color: var(--ink-3); font-size: 13px; pointer-events: none; }
.gc-unit-mark:first-child[b-150bpdynuy] { left: 10px; }
.gc-unit-mark:last-child[b-150bpdynuy] { right: 10px; }
.gc-unit .gc-unit-mark:first-child ~ input[b-150bpdynuy] { padding-left: 22px; }
.gc-unit input:has(+ .gc-unit-mark)[b-150bpdynuy] { padding-right: 26px; }
.gc-unit input[b-150bpdynuy] { text-align: right; -moz-appearance: textfield; appearance: textfield; }
.gc-unit input[b-150bpdynuy]::-webkit-inner-spin-button, .gc-unit input[b-150bpdynuy]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

.gc-paste[b-150bpdynuy] { display: grid; gap: 12px; max-width: 720px; }
.gc-paste-actions[b-150bpdynuy] { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.gc-paste-result[b-150bpdynuy] { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; margin: 0; }

/* Importing a file is a label wearing the text button's look, with the file input inside it: a native file
   control cannot be styled, and wrapping it keeps the keyboard and the screen reader on the real input. Hidden
   with opacity and a zero size rather than display:none, which would take it out of the tab order. */
.gc-csv[b-150bpdynuy] { position: relative; overflow: hidden; cursor: pointer; }
.gc[b-150bpdynuy]  .gc-csv-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }

.gc-saved[b-150bpdynuy] { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.gc-saved-card[b-150bpdynuy] { display: flex; align-items: flex-start; border: 1px solid var(--rule); border-radius: var(--gc-r); background: var(--surface); }
.gc-saved-card:hover[b-150bpdynuy] { border-color: var(--brand-line); }
.gc-saved-main[b-150bpdynuy] {
    flex: 1; display: flex; gap: 12px; align-items: flex-start; text-align: left; padding: 12px 14px; cursor: pointer;
    border: 0; background: none; font: inherit; color: var(--ink); min-width: 0;
}
.gc-saved-main > .gc-ico[b-150bpdynuy] { color: var(--gc-accent-text); margin-top: 2px; }
.gc-saved-main > span:nth-of-type(1)[b-150bpdynuy] { flex: 1; display: grid; gap: 2px; min-width: 0; }
.gc-saved-main small[b-150bpdynuy] { color: var(--ink-2); font-size: 12.5px; overflow-wrap: anywhere; }
.gc-saved-main .gc-num[b-150bpdynuy] { font-size: 12.5px; white-space: nowrap; }
.gc-saved-card .gc-iconbtn[b-150bpdynuy] { margin: 6px 6px 0 0; }
.gc-hint[b-150bpdynuy] { margin: 12px 0 0; color: var(--ink-2); font-size: 13px; }

.gc-resulthead[b-150bpdynuy] { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 16px; border-bottom: 1px solid var(--rule); font-size: 13.5px; }
.gc-resulthead > span[role="status"][b-150bpdynuy] { display: inline-flex; align-items: center; gap: 6px; }
.gc-add:not(:disabled)[b-150bpdynuy] { box-shadow: 0 0 0 3px var(--gc-accent-tint-2); }
.gc-list-hint[b-150bpdynuy] { font-size: 13px; }
.gc-tick[b-150bpdynuy] { width: 36px; }
.gc-tick input[b-150bpdynuy] { width: 16px; height: 16px; accent-color: var(--brand); }
tr.gc-out td[b-150bpdynuy], tr.gc-out td .gc-sub[b-150bpdynuy] { color: var(--ink-3); }
tr.gc-in td[b-150bpdynuy] { background: var(--brand-tint); }
.gc-thin[b-150bpdynuy] { color: var(--gc-warn); font-weight: 600; }

/* The finder on the left, the chosen list on the right: what is found is not what is chosen until it is added. */
.gc-s1[b-150bpdynuy] { display: grid; grid-template-columns: minmax(0, 1fr) 300px; border-top: 1px solid var(--rule); }
.gc-finder[b-150bpdynuy] { min-width: 0; }

.gc-start[b-150bpdynuy] { display: grid; justify-items: center; gap: 6px; text-align: center; padding: 40px 16px 44px; color: var(--ink-2); }
.gc-start > .gc-ico[b-150bpdynuy] { color: var(--ink-3); }
.gc-start b[b-150bpdynuy] { color: var(--ink); font-size: 15px; }
.gc-start p[b-150bpdynuy] { max-width: 58ch; margin: 0 0 8px; }

.gc-basket[b-150bpdynuy] {
    border-left: 1px solid var(--brand-line); background: var(--brand-tint); padding: 14px 16px; display: flex; flex-direction: column;
    gap: 10px; border-bottom-right-radius: var(--gc-r);
}
.gc-basket-head[b-150bpdynuy] { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.gc-basket-head h3[b-150bpdynuy] { font-size: 14px; font-weight: 600; margin: 0; color: var(--gc-accent-text); }
.gc-basket-n[b-150bpdynuy] { font-size: 24px; font-weight: 700; letter-spacing: -.02em; color: var(--gc-accent-text); }
.gc-basket-empty[b-150bpdynuy] { color: var(--ink-2); font-size: 13px; margin: 0; }
.gc-basket-list[b-150bpdynuy] { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.gc-basket-list li[b-150bpdynuy] {
    display: flex; align-items: center; gap: 8px; padding: 8px 6px 8px 12px; border-radius: var(--gc-r-ctl);
    background: var(--surface); border: 1px solid var(--brand-line); border-left: 3px solid var(--brand);
}
.gc-basket-list li.gc-basket-out[b-150bpdynuy] { border-left-color: var(--ink-3); border-color: var(--rule); }
.gc-basket-what[b-150bpdynuy] { flex: 1; min-width: 0; display: grid; }
.gc-basket-what b[b-150bpdynuy] { font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.gc-basket-what small[b-150bpdynuy] { font-size: 12px; color: var(--ink-2); }
.gc-basket-note[b-150bpdynuy] { font-size: 12px; color: var(--ink-2); margin: 0; }
.gc-basket-foot[b-150bpdynuy] { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 8px; }
.gc-basket-save[b-150bpdynuy] { display: grid; gap: 8px; padding: 10px; border: 1px solid var(--rule); border-radius: var(--gc-r-ctl); background: var(--surface); }
.gc-basket-save .gc-basket-foot[b-150bpdynuy] { justify-content: flex-start; }

@media (max-width: 1099px) {
    .gc-s1[b-150bpdynuy] { grid-template-columns: minmax(0, 1fr); }
    .gc-basket[b-150bpdynuy] { order: -1; border-left: 0; border-bottom: 1px solid var(--brand-line); border-radius: 0; }
}

/* ── Step 2: change cards ─────────────────────────────────────────────────────────────────────────────────────── */

.gc-empty-rules[b-150bpdynuy] { display: grid; justify-items: center; gap: 6px; padding: 28px 16px; }
.gc-empty-rules > .gc-ico[b-150bpdynuy] { color: var(--gc-accent-text); }
.gc-empty-rules p[b-150bpdynuy] { max-width: 56ch; margin: 0; }
.gc-empty-actions[b-150bpdynuy] { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; justify-content: center; }

.gc-rules[b-150bpdynuy] { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.gc-rule[b-150bpdynuy] { border: 1px solid var(--rule); border-left: 3px solid var(--brand); border-radius: var(--gc-r); background: var(--surface); }
.gc-rule.unfinished[b-150bpdynuy] { border-left-color: var(--gc-warn); }
.gc-rule-head[b-150bpdynuy] {
    display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 14px; background: var(--brand-tint);
    border-radius: 0 var(--gc-r) 0 0;
}
.gc-rule.unfinished .gc-rule-head[b-150bpdynuy] { background: var(--gc-warn-tint); }
.gc-rule-head h3[b-150bpdynuy] { font-size: 15px; font-weight: 600; margin: 0; }
.gc-rule-head .gc-tag[b-150bpdynuy] { background: var(--surface); color: var(--gc-accent-text); }
.gc-n[b-150bpdynuy] {
    width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700;
    background: var(--brand); color: var(--brand-ink);
}
.gc-rule.unfinished .gc-n[b-150bpdynuy] { background: var(--gc-warn); color: var(--surface); }
.gc-rule-body[b-150bpdynuy] { display: flex; flex-wrap: wrap; gap: 12px 14px; align-items: flex-start; padding: 12px 14px 4px; }
.gc-op[b-150bpdynuy] { width: 250px; }
.gc-amt[b-150bpdynuy] { width: 130px; }
.gc-choice[b-150bpdynuy] { width: 260px; }
.gc-round[b-150bpdynuy] { width: 220px; }
.gc-scope[b-150bpdynuy] { width: 220px; }
.gc-guard[b-150bpdynuy] { display: grid; gap: 2px; font-size: 13.5px; flex-basis: 100%; }
.gc-guard small[b-150bpdynuy] { color: var(--ink-3); font-size: 12px; }
.gc-rule-foot[b-150bpdynuy] { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 0; padding: 6px 14px 12px; font-size: 13px; }
.gc-rule-foot b[b-150bpdynuy] { color: var(--good); }
.gc-warn[b-150bpdynuy] { color: var(--gc-warn); font-weight: 500; }
.gc-was[b-150bpdynuy] { color: var(--ink-3); }
.gc-rules-foot[b-150bpdynuy] { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }

.gc-fieldsearch[b-150bpdynuy] { max-width: none; margin-bottom: 4px; }
.gc-fields[b-150bpdynuy] { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.gc-field[b-150bpdynuy] {
    display: grid; gap: 2px; text-align: left; padding: 10px 12px; cursor: pointer; min-height: 62px; align-content: start;
    border: 1px solid var(--rule); border-radius: var(--gc-r); background: var(--surface); font: inherit; color: var(--ink);
}
.gc-field:hover:not(:disabled)[b-150bpdynuy] { border-color: var(--brand-line); background: var(--brand-tint); }
.gc-field:disabled[b-150bpdynuy] { cursor: default; background: var(--surface-2); color: var(--ink-3); opacity: 1; }
.gc-field b[b-150bpdynuy] { font-weight: 600; display: flex; gap: 6px; align-items: center; }
.gc-field small[b-150bpdynuy] { color: var(--ink-2); font-size: 12.5px; line-height: 1.35; }
.gc-field:disabled small[b-150bpdynuy] { color: var(--ink-3); }

/* ── Step 3: review ───────────────────────────────────────────────────────────────────────────────────────────── */

.gc-tiles[b-150bpdynuy] { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.gc-tile[b-150bpdynuy] { display: grid; gap: 2px; padding: 12px 14px; border-radius: var(--gc-r); background: var(--surface-2); border: 1px solid var(--rule); }
.gc-tile-label[b-150bpdynuy] { display: flex; gap: 6px; align-items: center; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.gc-tile-value[b-150bpdynuy] { font-size: 24px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.gc-tile-note[b-150bpdynuy] { font-size: 12.5px; color: var(--ink-2); }
.gc-tile.good[b-150bpdynuy] { background: var(--good-tint); border-color: transparent; }
.gc-tile.warn[b-150bpdynuy] { background: var(--gc-warn-tint); border-color: transparent; }
.gc-tile.bad[b-150bpdynuy] { background: var(--bad-tint); border-color: transparent; }
.gc-tile.good .gc-tile-label[b-150bpdynuy], .gc-tile.good .gc-tile-value[b-150bpdynuy] { color: var(--good); }
.gc-tile.warn .gc-tile-label[b-150bpdynuy], .gc-tile.warn .gc-tile-value[b-150bpdynuy] { color: var(--gc-warn); }
.gc-tile.bad .gc-tile-label[b-150bpdynuy], .gc-tile.bad .gc-tile-value[b-150bpdynuy] { color: var(--bad); }

.gc-diff td[b-150bpdynuy] { vertical-align: top; padding-top: 9px; padding-bottom: 9px; }
.gc-diff th[b-150bpdynuy] { min-width: 140px; }
.gc-diff th.gc-tick[b-150bpdynuy] { min-width: 0; }
.gc-cell[b-150bpdynuy] { display: inline-flex; gap: 6px; align-items: center; white-space: nowrap; }
.gc-cell > .gc-ico[b-150bpdynuy] { color: var(--ink-3); }
.gc-cell b[b-150bpdynuy] { color: var(--good); }
.gc-skip[b-150bpdynuy] { color: var(--bad); font-weight: 600; white-space: nowrap; }
.gc-reason[b-150bpdynuy] { white-space: normal !important; max-width: 280px; }
.gc-result[b-150bpdynuy] { min-width: 140px; }
tr.gc-r-good td:first-child[b-150bpdynuy] { box-shadow: inset 4px 0 0 var(--good); }
tr.gc-r-warn td:first-child[b-150bpdynuy] { box-shadow: inset 4px 0 0 var(--gc-warn); }
tr.gc-r-warn td[b-150bpdynuy] { background: var(--gc-warn-tint); }
tr.gc-r-bad td:first-child[b-150bpdynuy] { box-shadow: inset 4px 0 0 var(--bad); }
tr.gc-r-bad td[b-150bpdynuy] { background: var(--bad-tint); }

.gc-apply[b-150bpdynuy] {
    display: flex; flex-wrap: wrap; gap: 20px 32px; border-top: 1px solid var(--rule); background: var(--surface-2);
    border-bottom-left-radius: var(--gc-r); border-bottom-right-radius: var(--gc-r);
}
.gc-when[b-150bpdynuy] { border: 0; margin: 0; padding: 0; display: grid; gap: 8px; min-width: 260px; max-width: 420px; }
.gc-when legend[b-150bpdynuy] { font-size: 12.5px; font-weight: 600; color: var(--gc-accent-text); padding: 0; margin-bottom: 6px; }
.gc-when .gc-check[b-150bpdynuy] { align-items: flex-start; flex-wrap: wrap; }
.gc-when .gc-check small[b-150bpdynuy] { flex-basis: 100%; padding-left: 24px; color: var(--ink-2); font-size: 12.5px; margin-top: -4px; }
.gc-runat[b-150bpdynuy] { padding-left: 24px; max-width: 280px; }
.gc-reasonbox[b-150bpdynuy] { flex: 1 1 360px; }
.gc-reasonbox > span[b-150bpdynuy] { color: var(--gc-accent-text); }

/* ── The summary bar ──────────────────────────────────────────────────────────────────────────────────────────── */

.gc-bar[b-150bpdynuy] {
    position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 12px 16px; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--gc-r);
    box-shadow: 0 -6px 16px -12px rgba(16, 24, 40, .3);
}
.gc-bar-sum[b-150bpdynuy] { display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: center; font-size: 13.5px; }
.gc-bar .btn-primary[b-150bpdynuy] { min-width: 180px; }

.gc-confirm[b-150bpdynuy] { margin: 0 0 12px; padding-left: 20px; display: grid; gap: 6px; }

/* ── History ──────────────────────────────────────────────────────────────────────────────────────────────────── */

.gc-done[b-150bpdynuy] { align-items: center; margin-bottom: 14px; background: var(--good-tint); }
.gc-done > .gc-ico[b-150bpdynuy] { color: var(--good); }
.gc-wrap[b-150bpdynuy] { white-space: normal !important; max-width: 520px; }
.gc-undo[b-150bpdynuy] { margin-top: 16px; background: var(--gc-warn-tint); }
.gc-undo > .gc-ico[b-150bpdynuy] { color: var(--gc-warn); }

/* ── Narrow windows ───────────────────────────────────────────────────────────────────────────────────────────── */

@media (max-width: 959px) {
    .gc-howto-steps[b-150bpdynuy] { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 719px) {
    .gc-steps[b-150bpdynuy] { display: flex; gap: 4px; padding: 6px 0; }
    .gc-step button[b-150bpdynuy] { padding: 6px 8px; gap: 6px; }
    .gc-step-text small[b-150bpdynuy] { display: none; }
    .gc-step:not(.on) .gc-step-text[b-150bpdynuy] { display: none; }
    .gc-step.on[b-150bpdynuy] { flex: 1; min-width: 0; }
    .gc-op[b-150bpdynuy], .gc-amt[b-150bpdynuy], .gc-choice[b-150bpdynuy], .gc-round[b-150bpdynuy], .gc-scope[b-150bpdynuy] { width: 100%; }
    .gc-range .gc-fld[b-150bpdynuy] { width: 100%; }
    .gc-bar .gc-spacer[b-150bpdynuy] { display: none; }
    .gc-bar-sum[b-150bpdynuy] { flex-basis: 100%; }
    .gc-bar .btn[b-150bpdynuy] { flex: 1; }
    .gc-bar .btn-primary[b-150bpdynuy] { min-width: 0; }
}

@media (forced-colors: active) {
    .gc-step.on button[b-150bpdynuy], .gc-chip[b-150bpdynuy], .gc-mode[aria-pressed="true"][b-150bpdynuy], .gc-rule[b-150bpdynuy] { border: 1px solid CanvasText; }
}
/* _content/AERetail.WebOffice/Components/Views/HourChart.razor.rz.scp.css */
.hc[b-9vv8gqkcsz] { margin: 0; }
.hc svg[b-9vv8gqkcsz] { width: 100%; height: auto; display: block; }
.hc-bar[b-9vv8gqkcsz] { fill: var(--ink-3); opacity: .55; }
.hc-bar.now[b-9vv8gqkcsz] { fill: var(--brand); opacity: 1; }
.hc-grid[b-9vv8gqkcsz] { stroke: var(--rule); stroke-width: 1; }
.hc-axis[b-9vv8gqkcsz] { fill: var(--ink-3); font-size: 10.5px; font-family: inherit; }
.hc-table[b-9vv8gqkcsz] { margin-top: 6px; font-size: 12.5px; }
.hc-table summary[b-9vv8gqkcsz] { cursor: pointer; color: var(--h-ink, var(--ink-2)); font-weight: 600; width: max-content; }
.hc-table table[b-9vv8gqkcsz] { width: 100%; border-collapse: collapse; margin-top: 6px; font-variant-numeric: tabular-nums; }
.hc-table th[b-9vv8gqkcsz], .hc-table td[b-9vv8gqkcsz] { text-align: left; padding: 4px 0; border-bottom: 1px solid var(--rule); }
.hc-table .num[b-9vv8gqkcsz] { text-align: right; }
@media (forced-colors: active) { .hc-bar[b-9vv8gqkcsz], .hc-bar.now[b-9vv8gqkcsz] { fill: CanvasText; opacity: 1; } }
/* _content/AERetail.WebOffice/Components/Views/ItemGroupsHostView.razor.rz.scp.css */
/* Items > Item Groups in the kiosk look (OfficeArea.KioskLook), without reaching into the screen.

   ItemGroupsView is the till's screen too (AERetail.ItemBrowser.Ui), and it is written to take
   its colours and its height from whoever hosts it: every --ig-* colour falls back to a page
   variable, and its root is height: 100%. So the office's look is decided here, in two parts,
   and the till is untouched:

   - a height. In the area pane the screen had none, so its grids grew to their full length and
     the page scrolled - most of all on Add New and Edit, where the catalogue and the group's
     items are two long lists side by side. Given the window's height, each grid scrolls inside
     itself, as it does at a till.
   - the page variables the screen reads, pointed at the kiosk's theme tokens (theme.css, linked
     by App.razor), so it follows the kiosk's light and dark themes like the other sections. */

.igx[b-3imyh5l11o] {
    height: calc(100vh - 170px);
    min-height: 480px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--glass-line);
    border-radius: 12px;
    font-family: var(--font);
    color: var(--c-text);
    /* The same four-point mesh as the Menu Designer and the other kiosk-look lists. */
    background:
        radial-gradient(62% 58% at 6% 4%, var(--mesh-a), transparent 68%),
        radial-gradient(58% 62% at 95% 14%, var(--mesh-b), transparent 68%),
        radial-gradient(66% 60% at 14% 94%, var(--mesh-c), transparent 70%),
        radial-gradient(60% 56% at 88% 90%, var(--mesh-d), transparent 70%),
        var(--c-s0);

    /* What ItemGroupsView reads (see the variables at the top of ItemGroupsView.razor.css). */
    --ink: var(--c-text);
    --ink-soft: var(--c-text-dim);
    --line: var(--glass-line-hi);
    --surface: var(--c-s2);
    --ground: transparent;
    --h-head: color-mix(in srgb, var(--c-accent) 14%, var(--c-s2));
    --danger: var(--c-stop);
    --go: var(--c-go);
    /* The screen's keys draw white text on the accent, so the accent is the theme's dark amber
       rather than its saffron fill, which white text cannot be read on. */
    --h-accent: var(--c-accent-text);
}

/* In the dark theme the amber the theme uses as text is its bright saffron; the keys need one
   dark enough to carry white text and still light enough to read on the dark ground. */
:root[data-theme="dark"] .igx[b-3imyh5l11o] { --h-accent: #A86A0B; }

/* Whose prices and packs these are: one quiet line, the only text over the screen. */
.igx-store[b-3imyh5l11o] {
    flex: none;
    margin: 0;
    padding: 10px 16px 0;
    font-size: .82rem;
    font-weight: 600;
    color: var(--c-text-faint);
}

/* The screen fills what is left of the box, and its own grids do the scrolling. */
.ig-host[b-3imyh5l11o] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    padding: 4px 6px 6px;
}
.ig-host[b-3imyh5l11o]  .ig {
    flex: 1 1 auto;
    min-width: 0;
    height: auto;
    min-height: 0;
    /* Only on a window too short for the bars and five rows of each grid: then the screen
       scrolls inside the box rather than being cut off. Otherwise the grids scroll alone. */
    overflow-y: auto;
    font-family: var(--font);
}
/* _content/AERetail.WebOffice/Components/Views/ItemHierarchyView.razor.rz.scp.css */
/* The item hierarchy as a folding tree, in the list frame's own tokens. */

.ih-tree[b-fb7xsibdt6] {
    margin: 0 16px;
    padding: 8px;
    background: var(--c-s2);
    border: 1px solid var(--glass-line-hi);
    border-radius: 10px;
}

.ih-node > summary[b-fb7xsibdt6],
.ih-leaf[b-fb7xsibdt6] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    border-radius: 6px;
    font-size: 13px;
    color: var(--c-text);
}
.ih-node > summary[b-fb7xsibdt6] { cursor: pointer; list-style: none; }
.ih-node > summary[b-fb7xsibdt6]::-webkit-details-marker { display: none; }
.ih-node > summary[b-fb7xsibdt6]::before {
    content: "";
    flex: none;
    width: 7px;
    height: 7px;
    border-right: 2px solid var(--c-text-faint);
    border-bottom: 2px solid var(--c-text-faint);
    transform: rotate(-45deg);
    transition: transform .12s ease;
}
.ih-node[open] > summary[b-fb7xsibdt6]::before { transform: rotate(45deg); }
.ih-node > summary:hover[b-fb7xsibdt6] { background: var(--c-accent-wash); }
.ih-node > summary:focus-visible[b-fb7xsibdt6] { outline: 2px solid var(--c-accent); outline-offset: -2px; }

.ih-l2[b-fb7xsibdt6] { margin-left: 20px; }
.ih-l3[b-fb7xsibdt6] { margin-left: 20px; }
.ih-leaf[b-fb7xsibdt6] { margin-left: 40px; }
.ih-l1[b-fb7xsibdt6] { border-bottom: 1px solid var(--glass-line-hi); }
.ih-l1:last-child[b-fb7xsibdt6] { border-bottom: 0; }

.ih-level[b-fb7xsibdt6] {
    flex: none;
    width: 86px;
    font-size: 10px;
    font-weight: 650;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--c-text-faint);
}

.ih-n[b-fb7xsibdt6] {
    margin-left: auto;
    font-size: 12px;
    color: var(--c-text-dim);
    font-variant-numeric: tabular-nums;
}

.ih-check[b-fb7xsibdt6] { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--c-text-dim); cursor: pointer; }

.ih-foot[b-fb7xsibdt6] { margin: 10px 16px 0; font-size: 12px; }
/* _content/AERetail.WebOffice/Components/Views/ItemManagerHostView.razor.rz.scp.css */
/* The back office's half of the Item Manager and Item Entry: what the desk tells the shared
   component about its own theme.

   The component paints itself (DESIGN.md, "The Item Page on the Till"), and it carries one theme
   of its own on purpose - a fixed light palette that cannot follow the office into dark mode and
   leave near-white ink on a white grid. What it does take from the host is a small set of --h-*
   tokens, declared here on the wrapper and inherited by everything the component draws, Item
   Entry included: that screen is opened from inside the Item Manager, and a custom property
   crosses a component boundary where a scoped rule cannot.

   Only the tokens. Nothing here reaches into the component's own classes: a rule written against
   .im-grid from the host would be scoped to this file and never match, and if it did it would be
   a second opinion about a screen that already has one. */

.im-host[b-nh09p1iq4q] {
    /* ALTERNATING ROWS THE EYE CAN ACTUALLY FIND (owner, 24 October 2026: "give nice alternate
       colors to the grid rows").

       The component has striped even rows since it was written - "the eye loses its place
       tracking a price across a wide row otherwise" - but its default wash is a terracotta at
       8.5%, which comes out about #FAF2F0 on white: real, and on most monitors invisible. No host
       had ever set the token, so nobody had ever seen the stripe it was describing.

       This is that stripe at a strength a person reads at a glance, in the warm sand the office's
       own theme is built on (CLAUDE.md section 12: charcoal bar and rail, amber accent) rather
       than the cool blue a data grid usually reaches for. It stays a wash and not a colour: the
       grid's ink is #1f2937 and the chosen row is a navy tint, and both have to keep their
       contrast against it. The till sets its own in a light navy - see .im-till in the
       component - because warm sand would be the one warm thing on a navy and white screen. */
    --h-stripe: #F7F1E4;

    /* The grid's head, opaque against rows scrolling under it. Left to the component this is a
       slate; on the office's warm desk it sits a shade warmer, so the head belongs to the page it
       is on. Hover is the same colour a step lighter, as the component's own pair is. */
    --h-head: #4A4A44;
    --h-head-hover: #585850;
}
/* _content/AERetail.WebOffice/Components/Views/KioskItemsView.razor.rz.scp.css */
/* Kiosk > Kiosk Items: what is particular to this screen. The list's box, grid and pager are
   KxList's and the entry dialog's fields, switches, buttons and tables are KxDialog's, both on the
   kiosk's theme tokens (theme.css). This adds the dish pictures, and lays out the entry's top - the
   picture beside the fields that say what the dish is - after AdvEntDeli's Item Entry. */

/* ---- the list ------------------------------------------------------------------------------- */

.kx-thumbcol[b-xct2glgxjk] { width: 56px; }

.kx-thumb[b-xct2glgxjk] {
    width: 40px; height: 40px;
    border-radius: 9px;
    object-fit: cover;
    display: block;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1), 0 1px 2px rgba(0, 0, 0, .18);
}

/* A dish without a picture shows its initial, so the column never reads as broken images. */
.kx-thumb-none[b-xct2glgxjk] {
    display: grid; place-items: center;
    background: var(--c-accent-wash);
    color: var(--c-accent-text);
    font-weight: 800; font-size: .95rem;
}

.kx-sub[b-xct2glgxjk] { font-size: .8rem; margin-top: 2px; }

/* ---- the entry: picture beside the fields --------------------------------------------------- */

.kx-entry-top[b-xct2glgxjk] {
    display: grid;
    grid-template-columns: 168px minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

.kx-pic[b-xct2glgxjk] { display: flex; flex-direction: column; gap: 8px; align-items: stretch; }

.kx-picbox[b-xct2glgxjk] {
    width: 168px; height: 128px;
    border: 1px dashed var(--c-line-strong);
    border-radius: var(--r-md);
    background: var(--well-fill);
    display: grid; place-items: center;
    overflow: hidden;
    color: var(--c-text-faint); font-size: .82rem;
}
.kx-picbox img[b-xct2glgxjk] { width: 100%; height: 100%; object-fit: cover; }

/* The file input covers its button, so the whole button opens the picker. */
.kx-upload[b-xct2glgxjk] { position: relative; overflow: hidden; justify-content: center; }
.kx-upload[b-xct2glgxjk]  input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.kx-remove[b-xct2glgxjk] { justify-content: center; }

.kx-pending[b-xct2glgxjk] {
    align-self: flex-start;
    font-size: .72rem; font-weight: 600;
    color: var(--c-accent-text);
    background: var(--c-accent-wash);
    border-radius: var(--r-pill);
    padding: 4px 11px;
}

/* Two fields to a row, the names across the whole width. */
.kx-fields[b-xct2glgxjk] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.kx-fields .kx-wide[b-xct2glgxjk] { grid-column: 1 / -1; }

/* A caption over a control outside the form grid (Description, Prep time). */
.formgrid-free[b-xct2glgxjk],
.kx-prep[b-xct2glgxjk] { display: flex; flex-direction: column; gap: 7px; }
.kx-cap[b-xct2glgxjk] {
    font-size: .74rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: var(--track-label); color: var(--c-text-faint);
}

/* The switches of one part, side by side, wrapping on a narrow dialog. */
.kx-switches[b-xct2glgxjk] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 10px;
    align-items: end;
}

/* A switch inside a table cell: the toggle alone, without its box. */
.kx-inline[b-xct2glgxjk] { min-height: 0 !important; padding: 0 !important; border: none !important; background: none !important; }

.kx-addrow[b-xct2glgxjk] { display: flex; gap: 10px; align-items: center; }
.kx-addrow select[b-xct2glgxjk] { flex: 1 1 auto; }

@media (max-width: 720px) {
    .kx-entry-top[b-xct2glgxjk] { grid-template-columns: 1fr; }
    .kx-fields[b-xct2glgxjk] { grid-template-columns: 1fr !important; }
}
/* _content/AERetail.WebOffice/Components/Views/KioskMenuHostView.razor.rz.scp.css */
/* The Menu Designer was written to be the whole window on a till: its root is
   position: fixed; inset: 0, and it draws its own top bar with a brand mark and a Close.
   Here it sits inside an area pane, under the office's own header and beside its rail, and
   left as it was it painted over both - the two headers and the two left columns showed
   through each other.

   So the host pins it to itself instead. The designer's root and its colour ground are made
   absolute within this box, which is sized to what is left of the window below the page head,
   and its top bar is not drawn: the office already has the header, the breadcrumb is the tab
   strip, and there is nothing to close because this is a section, not a workspace. */
.km-host[b-wl99vfvth8] {
    position: relative;
    height: calc(100vh - 250px);
    min-height: 560px;
    border-radius: 12px;
    overflow: hidden;
}

.km-host[b-wl99vfvth8]  .md,
.km-host[b-wl99vfvth8]  .md::before,
.km-host[b-wl99vfvth8]  .md-guard {
    position: absolute;
}

.km-host[b-wl99vfvth8]  .md-topbar {
    display: none;
}
/* _content/AERetail.WebOffice/Components/Views/KioskModifierGroupsView.razor.rz.scp.css */
/* Kiosk > Modifier Groups, drawn the way the Menu Designer is drawn (KioskMenu.Ui
   MenuDesignerView.razor.css) - the same columns, rows, button tiles and dialogs, on the same
   theme tokens (theme.css, linked by App.razor). Copied rather than shared because that sheet is
   scoped to the designer; the class names are kept the same so the two can be compared line for
   line. Sized like the designer's host (KioskMenuHostView.razor.css): the window below the tabs. */

.md[b-p5dnav9oae] {
    position: relative;
    height: calc(100vh - 250px);
    min-height: 560px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 12px;
    font-family: var(--font);
    color: var(--c-text);
    background: var(--c-s0);
    isolation: isolate;
}

.md[b-p5dnav9oae]::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(62% 58% at 6% 4%, var(--mesh-a), transparent 68%),
        radial-gradient(58% 62% at 95% 14%, var(--mesh-b), transparent 68%),
        radial-gradient(66% 60% at 14% 94%, var(--mesh-c), transparent 70%),
        radial-gradient(60% 56% at 88% 90%, var(--mesh-d), transparent 70%);
}

/* What just happened, across the top. */
.md-note[b-p5dnav9oae] {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    margin: 16px 16px 0;
    padding: 8px 8px 8px 16px;
    border-radius: var(--r-sm);
    font-size: .9rem; font-weight: 600;
}
.md-note.good[b-p5dnav9oae] { background: color-mix(in srgb, var(--c-go, #1f9d55) 14%, var(--c-s2)); color: var(--c-text); border: 1px solid color-mix(in srgb, var(--c-go, #1f9d55) 40%, transparent); }
.md-note.bad[b-p5dnav9oae] { background: color-mix(in srgb, var(--c-stop) 14%, var(--c-s2)); color: var(--c-stop-text); border: 1px solid color-mix(in srgb, var(--c-stop) 40%, transparent); }

/* ---- columns ------------------------------------------------------------------------------- */

.md-cols[b-p5dnav9oae] { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1.4fr 1fr; gap: 16px; padding: 16px; }

.md-col[b-p5dnav9oae] {
    min-height: 0;
    display: flex; flex-direction: column;
    background: var(--glass-fill-pane);
    border: 1px solid var(--glass-line);
    border-radius: var(--r-lg);
    box-shadow: var(--glass-edge);
    overflow: hidden;
}

.md-colhead[b-p5dnav9oae] {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--glass-line);
    font-weight: 800; font-size: 1rem; color: var(--c-text);
}
.md-colhead > div[b-p5dnav9oae] { display: flex; align-items: center; gap: 9px; min-width: 0; }

.md-step[b-p5dnav9oae] {
    width: 24px; height: 24px; flex: 0 0 auto;
    border-radius: 50%;
    background: var(--c-accent); color: var(--c-accent-ink);
    font-size: .78rem; display: grid; place-items: center; font-weight: 800;
}

.md-colsub[b-p5dnav9oae] { color: var(--c-text-faint); font-weight: 600; font-size: .88rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.md-add[b-p5dnav9oae] {
    flex: 0 0 auto; white-space: nowrap;
    min-height: 44px; padding: 0 15px;
    border: 1px solid color-mix(in srgb, var(--c-accent) 34%, transparent);
    background: var(--c-accent-wash);
    color: var(--c-accent-text);
    font-family: var(--font); font-weight: 700; font-size: .86rem;
    border-radius: var(--r-sm);
    cursor: pointer;
}
.md-add:hover:not(:disabled)[b-p5dnav9oae] { background: color-mix(in srgb, var(--c-accent) 24%, transparent); }
.md-add:disabled[b-p5dnav9oae] { opacity: .45; cursor: default; }

.md-scroll[b-p5dnav9oae] { flex: 1; overflow-y: auto; padding: 10px; }

.md-loading[b-p5dnav9oae], .md-empty[b-p5dnav9oae] { padding: 26px 16px; text-align: center; color: var(--c-text-faint); font-size: .9rem; }
.md-empty[b-p5dnav9oae] { font-style: italic; }
.md-muted[b-p5dnav9oae] { color: var(--c-text-faint); font-size: .8rem; }

.md-spin[b-p5dnav9oae] {
    display: inline-block; width: 14px; height: 14px;
    border: 2px solid var(--c-line-strong); border-top-color: var(--c-accent);
    border-radius: 50%; animation: md-spin-b-p5dnav9oae .7s linear infinite; vertical-align: -2px;
}
@keyframes md-spin-b-p5dnav9oae { to { transform: rotate(360deg); } }

.md-code[b-p5dnav9oae] { font-size: .72rem; font-weight: 700; color: var(--c-text-dim); background: var(--well-fill); padding: 2px 8px; border-radius: 5px; letter-spacing: .3px; }

.md-chip[b-p5dnav9oae] {
    font-size: .72rem; font-weight: 700;
    color: #1E4C9E; background: color-mix(in srgb, #2B62C9 14%, transparent);
    padding: 2px 9px; border-radius: var(--r-pill);
    white-space: nowrap;
}
.md-chip.addon[b-p5dnav9oae] { color: #0F6B4F; background: color-mix(in srgb, #1F9D74 16%, transparent); }
.md-chip.own[b-p5dnav9oae] { color: #8a5a12; background: color-mix(in srgb, #d9a441 24%, transparent); }

/* ---- group rows ---------------------------------------------------------------------------- */

.md-grp[b-p5dnav9oae] {
    display: flex; align-items: center; gap: 10px;
    min-height: 52px; padding: 8px 10px;
    border-radius: var(--r-sm);
    cursor: pointer;
    transition: background-color .1s ease;
}
.md-grp:hover[b-p5dnav9oae] { background: var(--glass-fill-hi); }
.md-grp.sel[b-p5dnav9oae] { background: var(--c-accent-wash); box-shadow: inset 0 0 0 1px var(--c-accent); }
.md-grp.off[b-p5dnav9oae] { opacity: .72; }

.md-grp-body[b-p5dnav9oae] { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.md-grp-meta[b-p5dnav9oae] { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

.md-grp-off[b-p5dnav9oae] {
    flex: none;
    font-size: .68rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
    color: #8a5a12; background: color-mix(in srgb, #d9a441 26%, transparent);
    padding: 3px 8px; border-radius: var(--r-pill);
    white-space: nowrap;
}

.md-grp-dot[b-p5dnav9oae] { width: 14px; height: 14px; border-radius: 4px; flex: none; box-shadow: inset 0 -2px 3px rgba(0, 0, 0, .2); }
.md-grp-thumb[b-p5dnav9oae] { width: 32px; height: 32px; border-radius: 7px; object-fit: cover; flex: none; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .2); }
.md-grp-nm[b-p5dnav9oae] { min-width: 0; font-weight: 650; font-size: .92rem; color: var(--c-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.md-grp-ct[b-p5dnav9oae] {
    font-size: .72rem; font-weight: 800;
    color: #5B3FB0; background: color-mix(in srgb, #7C5CD6 15%, transparent);
    min-width: 24px; text-align: center; padding: 3px 7px; border-radius: var(--r-pill);
}

.md-grp-actions[b-p5dnav9oae] { display: flex; gap: 4px; opacity: .45; transition: opacity .12s ease; }
.md-grp:hover .md-grp-actions[b-p5dnav9oae], .md-grp.sel .md-grp-actions[b-p5dnav9oae] { opacity: 1; }

.md-icon[b-p5dnav9oae] {
    width: 40px; height: 40px; flex: 0 0 auto;
    border-radius: var(--r-sm);
    border: 1px solid var(--glass-line-hi);
    background: var(--c-s2);
    color: var(--c-text-dim);
    cursor: pointer;
    font-size: .9rem;
    display: grid; place-items: center;
    transition: background-color .12s ease, color .12s ease;
}
.md-icon:hover:not(:disabled)[b-p5dnav9oae] { background: var(--c-s4); color: var(--c-text); }
.md-icon.danger:hover:not(:disabled)[b-p5dnav9oae] {
    background: color-mix(in srgb, var(--c-stop) 12%, var(--c-s2));
    color: var(--c-stop-text);
    border-color: color-mix(in srgb, var(--c-stop) 40%, transparent);
}
.md-icon:disabled[b-p5dnav9oae] { opacity: .35; cursor: default; }

/* ---- modifier tiles ------------------------------------------------------------------------ */

.md-itemgrid[b-p5dnav9oae] { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }

.md-item[b-p5dnav9oae] {
    border: 1px solid var(--glass-line);
    border-radius: var(--r-md);
    padding: 10px;
    background: var(--c-s2);
    display: flex; flex-direction: column; gap: 10px;
}
.md-item.off[b-p5dnav9oae] { opacity: .78; background: var(--well-fill); border-style: dashed; }

.md-item-btn[b-p5dnav9oae] {
    --c: var(--c-accent);
    position: relative;
    border-radius: var(--r-sm);
    padding: 12px 10px; min-height: 76px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    text-align: center; color: #fff; overflow: hidden;
    background: linear-gradient(160deg, color-mix(in srgb, var(--c) 88%, #fff 12%), color-mix(in srgb, var(--c) 82%, #000 18%));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 2px 6px rgba(20, 30, 50, .18);
}
.md-item-btn[b-p5dnav9oae]::before { content: ""; position: absolute; inset: 0 0 55% 0; background: linear-gradient(rgba(255, 255, 255, .22), transparent); }
.md-item-btn.photo[b-p5dnav9oae] { background-size: cover; background-position: center; background-color: #2A3340; }
.md-item-btn.photo[b-p5dnav9oae]::before { inset: 0; background: linear-gradient(rgba(0, 0, 0, .05) 25%, rgba(0, 0, 0, .62)); }

.md-item-nm[b-p5dnav9oae] { position: relative; font-weight: 800; font-size: .9rem; line-height: 1.1; text-shadow: 0 1px 3px rgba(0, 0, 0, .45); }
.md-item-pr[b-p5dnav9oae] { position: relative; font-weight: 800; font-size: 1.05rem; text-shadow: 0 1px 4px rgba(0, 0, 0, .5); }
.md-item-tag[b-p5dnav9oae] {
    position: relative;
    margin-top: 2px;
    font-size: .62rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
    color: #0b3d2c; background: #9fe3c6;
    padding: 2px 8px; border-radius: var(--r-pill);
    text-shadow: none;
}

.md-item-info[b-p5dnav9oae] { display: flex; flex-direction: column; gap: 2px; }
.md-item-real[b-p5dnav9oae] { font-weight: 650; font-size: .86rem; color: var(--c-text); }
.md-item-actions[b-p5dnav9oae] { display: flex; gap: 6px; justify-content: flex-end; }

/* ---- dialogs ------------------------------------------------------------------------------- */

.md-ov[b-p5dnav9oae] {
    position: fixed; inset: 0; z-index: 100;
    background: var(--scrim);
    -webkit-backdrop-filter: var(--scrim-blur);
    backdrop-filter: var(--scrim-blur);
    display: grid; place-items: center; padding: 20px;
}

.md-dlg[b-p5dnav9oae] {
    width: min(480px, 96vw); max-height: 92vh;
    overflow: hidden; display: flex; flex-direction: column;
    background: var(--modal-fill);
    border: 1px solid var(--glass-line-hi);
    border-radius: var(--r-lg);
    -webkit-backdrop-filter: var(--modal-blur);
    backdrop-filter: var(--modal-blur);
    box-shadow: var(--shadow-modal), var(--glass-edge);
    color: var(--c-text);
}
.md-dlg.wide[b-p5dnav9oae] { width: min(640px, 96vw); }

.md-dlg-head[b-p5dnav9oae] {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 16px 18px;
    font-weight: 800; font-size: 1.05rem;
    border-bottom: 1px solid var(--glass-line);
}

.md-x[b-p5dnav9oae] {
    border: 1px solid var(--glass-line-hi);
    background: var(--glass-fill-hi);
    color: var(--c-text-dim);
    width: 44px; height: 44px; flex: 0 0 auto;
    border-radius: var(--r-sm);
    cursor: pointer;
    display: grid; place-items: center;
}
.md-x.sm[b-p5dnav9oae] { width: 32px; height: 32px; }
.md-x:hover[b-p5dnav9oae] { background: var(--glass-fill-hover); color: var(--c-text); }

.md-dlg-body[b-p5dnav9oae] { padding: 16px 18px; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; }
.md-dlg-body p[b-p5dnav9oae] { margin: 0; line-height: 1.5; }

.md-dlg-foot[b-p5dnav9oae] {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 14px 18px;
    border-top: 1px solid var(--glass-line);
}
.md-dlg-foot .md-btn:only-child[b-p5dnav9oae] { margin-left: auto; }

.md-frow[b-p5dnav9oae] { display: flex; flex-direction: column; gap: 7px; }
.md-frow > label[b-p5dnav9oae] { font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: var(--track-label); color: var(--c-text-faint); }
.md-fsplit[b-p5dnav9oae] { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.md-in[b-p5dnav9oae] {
    min-height: 48px;
    border-radius: var(--r-sm);
    border: 1px solid var(--glass-line-hi);
    background: var(--c-s2);
    color: var(--c-text);
    padding: 0 14px;
    font-family: var(--font); font-size: .95rem;
    width: 100%;
}
.md-in:focus[b-p5dnav9oae] { outline: none; border-color: var(--c-accent); box-shadow: 0 0 0 3px var(--c-accent-wash); }

.md-pair[b-p5dnav9oae] { display: flex; gap: 10px; align-items: center; }

.md-color[b-p5dnav9oae] {
    width: 60px; height: 48px; flex: 0 0 auto;
    border: 1px solid var(--glass-line-hi);
    border-radius: var(--r-sm);
    background: var(--c-s2);
    cursor: pointer;
    padding: 4px;
}

.md-ferr[b-p5dnav9oae] {
    position: sticky; top: -16px; z-index: 3;
    margin: -16px -18px 0;
    background: color-mix(in srgb, var(--c-stop) 14%, var(--c-s2));
    border-bottom: 1px solid color-mix(in srgb, var(--c-stop) 40%, transparent);
    color: var(--c-stop-text);
    padding: 12px 18px; font-size: .86rem; font-weight: 600;
}

.md-fhint[b-p5dnav9oae] { font-size: .8rem; color: var(--c-text-faint); line-height: 1.45; }

.md-sw[b-p5dnav9oae] {
    display: inline-flex; align-items: center; gap: 10px;
    min-height: 44px;
    cursor: pointer; user-select: none;
    font-size: .9rem; color: var(--c-text);
}
.md-sw input[b-p5dnav9oae] { display: none; }
.md-swt[b-p5dnav9oae] {
    position: relative; width: 46px; height: 26px;
    border-radius: var(--r-pill);
    background: var(--c-line-strong); flex: none;
    transition: background-color .18s ease;
}
.md-swt[b-p5dnav9oae]::after {
    content: ""; position: absolute; top: 2px; left: 2px;
    width: 22px; height: 22px; border-radius: 50%;
    background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
    transition: transform .18s ease;
}
.md-sw input:checked + .md-swt[b-p5dnav9oae] { background: var(--c-accent); }
.md-sw input:checked + .md-swt[b-p5dnav9oae]::after { transform: translateX(20px); }
.md-sw.sm .md-swt[b-p5dnav9oae] { width: 38px; height: 22px; }
.md-sw.sm .md-swt[b-p5dnav9oae]::after { width: 18px; height: 18px; }
.md-sw.sm input:checked + .md-swt[b-p5dnav9oae]::after { transform: translateX(16px); }

.md-btn[b-p5dnav9oae] {
    display: inline-flex; align-items: center; gap: 8px;
    min-height: 48px; padding: 0 20px;
    border-radius: var(--r-sm);
    font-family: var(--font); font-weight: 700; font-size: .92rem;
    cursor: pointer; border: 1px solid transparent;
    transition: background-color .15s ease;
}
.md-btn.ghost[b-p5dnav9oae] { background: var(--c-s2); border-color: var(--c-line-strong); color: var(--c-text); }
.md-btn.ghost:hover:not(:disabled)[b-p5dnav9oae] { background: var(--c-s4); }
.md-btn.primary[b-p5dnav9oae] { background: var(--c-text); border-color: var(--c-text); color: var(--c-s2); box-shadow: 0 4px 14px -6px rgba(23, 23, 26, .55); }
.md-btn.primary:hover:not(:disabled)[b-p5dnav9oae] { background: var(--c-text-dim); border-color: var(--c-text-dim); }
.md-btn.danger[b-p5dnav9oae] { background: var(--c-stop); border-color: var(--c-stop); color: #fff; }
.md-btn:disabled[b-p5dnav9oae] { opacity: .5; cursor: default; }

.md-mini[b-p5dnav9oae] {
    min-height: 40px; padding: 0 14px;
    border-radius: var(--r-sm);
    font-family: var(--font); font-size: .82rem; font-weight: 700;
    cursor: pointer;
    border: 1px solid var(--c-line-strong);
    background: var(--c-s2);
    color: var(--c-text);
    display: inline-flex; align-items: center; gap: 6px;
}
.md-mini.del[b-p5dnav9oae] { border-color: color-mix(in srgb, var(--c-stop) 40%, transparent); color: var(--c-stop-text); }
.md-mini.del:hover[b-p5dnav9oae] { background: color-mix(in srgb, var(--c-stop) 12%, var(--c-s2)); }

/* ---- picture picker ------------------------------------------------------------------------ */

.md-imgrow[b-p5dnav9oae] { display: flex; align-items: center; gap: 14px; }
.md-imgbox[b-p5dnav9oae] {
    width: 112px; height: 82px; flex: none;
    border: 1px dashed var(--c-line-strong);
    border-radius: var(--r-sm);
    background: var(--well-fill);
    display: grid; place-items: center; overflow: hidden;
}
.md-imgbox img[b-p5dnav9oae] { width: 100%; height: 100%; object-fit: cover; }
.md-imgph[b-p5dnav9oae] { color: var(--c-text-faint); font-size: .8rem; }
.md-imgacts[b-p5dnav9oae] { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }

.md-upload[b-p5dnav9oae] {
    position: relative;
    display: inline-flex; align-items: center; gap: 8px;
    min-height: 44px; padding: 0 16px;
    border-radius: var(--r-sm);
    background: var(--c-accent-wash);
    color: var(--c-accent-text);
    border: 1px solid color-mix(in srgb, var(--c-accent) 34%, transparent);
    font-family: var(--font); font-size: .84rem; font-weight: 700;
    cursor: pointer; overflow: hidden;
}
.md-upload:hover[b-p5dnav9oae] { background: color-mix(in srgb, var(--c-accent) 24%, transparent); }
.md-upload[b-p5dnav9oae]  input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }

.md-imgnote[b-p5dnav9oae] { font-size: .8rem; color: var(--c-text-faint); }
.md-imgpending[b-p5dnav9oae] {
    align-self: flex-start;
    font-size: .72rem; color: var(--c-warn);
    background: var(--c-accent-wash);
    border-radius: var(--r-pill); padding: 4px 11px; font-weight: 600;
}

/* ---- a dish's own prices ------------------------------------------------------------------- */

.md-chip.price[b-p5dnav9oae] { color: #6B2FA3; background: color-mix(in srgb, #8E44D6 15%, transparent); }

.md-pricetable[b-p5dnav9oae] { display: flex; flex-direction: column; border: 1px solid var(--glass-line); border-radius: var(--r-sm); overflow: hidden; }
.md-pt-head[b-p5dnav9oae], .md-pt-row[b-p5dnav9oae] {
    display: grid; grid-template-columns: 1fr 72px 110px auto; gap: 10px; align-items: center;
    padding: 6px 10px;
}
.md-pt-head[b-p5dnav9oae] {
    background: var(--well-fill);
    font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: var(--track-label); color: var(--c-text-faint);
}
.md-pt-row + .md-pt-row[b-p5dnav9oae] { border-top: 1px solid var(--glass-line); }
.md-pt-row.own[b-p5dnav9oae] { background: color-mix(in srgb, #8E44D6 7%, transparent); }
.md-pt-nm[b-p5dnav9oae] { font-weight: 650; font-size: .9rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.md-pt-usual[b-p5dnav9oae] { font-size: .86rem; color: var(--c-text-faint); text-align: right; font-variant-numeric: tabular-nums; }
.md-pt-in[b-p5dnav9oae] { min-height: 40px; padding: 0 10px; text-align: right; font-variant-numeric: tabular-nums; }
.md-pt-row .md-mini[b-p5dnav9oae] { min-height: 36px; padding: 0 10px; }

/* What one modifier costs on the dishes that set their own price. */
.md-prices[b-p5dnav9oae] { display: flex; flex-wrap: wrap; gap: 4px 6px; }
.md-price[b-p5dnav9oae] { font-size: .86rem; color: var(--c-text-dim); background: var(--well-fill); padding: 5px 12px; border-radius: var(--r-pill); white-space: nowrap; }
.md-price b[b-p5dnav9oae] { color: var(--c-text); font-weight: 700; }

@media (max-width: 1100px) {
    .md[b-p5dnav9oae] { height: auto; }
    .md-cols[b-p5dnav9oae] { grid-template-columns: 1fr; }
    .md-col[b-p5dnav9oae] { min-height: 320px; }
}

@media (prefers-reduced-motion: reduce) { .md-spin[b-p5dnav9oae] { animation-duration: 2.5s; } }
/* _content/AERetail.WebOffice/Components/Views/KioskOpenModifiersView.razor.rz.scp.css */
/* Kiosk > Open Modifiers - the same sheet as Modifier Groups (KioskModifierGroupsView.razor.css),
   which is the Menu Designer's, plus the few pieces this tab has of its own at the end.

   Kiosk > Modifier Groups, drawn the way the Menu Designer is drawn (KioskMenu.Ui
   MenuDesignerView.razor.css) - the same columns, rows, button tiles and dialogs, on the same
   theme tokens (theme.css, linked by App.razor). Copied rather than shared because that sheet is
   scoped to the designer; the class names are kept the same so the two can be compared line for
   line. Sized like the designer's host (KioskMenuHostView.razor.css): the window below the tabs. */

.md[b-6wc4pgi7vc] {
    position: relative;
    height: calc(100vh - 250px);
    min-height: 560px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 12px;
    font-family: var(--font);
    color: var(--c-text);
    background: var(--c-s0);
    isolation: isolate;
}

.md[b-6wc4pgi7vc]::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(62% 58% at 6% 4%, var(--mesh-a), transparent 68%),
        radial-gradient(58% 62% at 95% 14%, var(--mesh-b), transparent 68%),
        radial-gradient(66% 60% at 14% 94%, var(--mesh-c), transparent 70%),
        radial-gradient(60% 56% at 88% 90%, var(--mesh-d), transparent 70%);
}

/* What just happened, across the top. */
.md-note[b-6wc4pgi7vc] {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    margin: 16px 16px 0;
    padding: 8px 8px 8px 16px;
    border-radius: var(--r-sm);
    font-size: .9rem; font-weight: 600;
}
.md-note.good[b-6wc4pgi7vc] { background: color-mix(in srgb, var(--c-go, #1f9d55) 14%, var(--c-s2)); color: var(--c-text); border: 1px solid color-mix(in srgb, var(--c-go, #1f9d55) 40%, transparent); }
.md-note.bad[b-6wc4pgi7vc] { background: color-mix(in srgb, var(--c-stop) 14%, var(--c-s2)); color: var(--c-stop-text); border: 1px solid color-mix(in srgb, var(--c-stop) 40%, transparent); }

/* ---- columns ------------------------------------------------------------------------------- */

.md-cols[b-6wc4pgi7vc] { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1.4fr 1fr; gap: 16px; padding: 16px; }

.md-col[b-6wc4pgi7vc] {
    min-height: 0;
    display: flex; flex-direction: column;
    background: var(--glass-fill-pane);
    border: 1px solid var(--glass-line);
    border-radius: var(--r-lg);
    box-shadow: var(--glass-edge);
    overflow: hidden;
}

.md-colhead[b-6wc4pgi7vc] {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--glass-line);
    font-weight: 800; font-size: 1rem; color: var(--c-text);
}
.md-colhead > div[b-6wc4pgi7vc] { display: flex; align-items: center; gap: 9px; min-width: 0; }

.md-step[b-6wc4pgi7vc] {
    width: 24px; height: 24px; flex: 0 0 auto;
    border-radius: 50%;
    background: var(--c-accent); color: var(--c-accent-ink);
    font-size: .78rem; display: grid; place-items: center; font-weight: 800;
}

.md-colsub[b-6wc4pgi7vc] { color: var(--c-text-faint); font-weight: 600; font-size: .88rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.md-add[b-6wc4pgi7vc] {
    flex: 0 0 auto; white-space: nowrap;
    min-height: 44px; padding: 0 15px;
    border: 1px solid color-mix(in srgb, var(--c-accent) 34%, transparent);
    background: var(--c-accent-wash);
    color: var(--c-accent-text);
    font-family: var(--font); font-weight: 700; font-size: .86rem;
    border-radius: var(--r-sm);
    cursor: pointer;
}
.md-add:hover:not(:disabled)[b-6wc4pgi7vc] { background: color-mix(in srgb, var(--c-accent) 24%, transparent); }
.md-add:disabled[b-6wc4pgi7vc] { opacity: .45; cursor: default; }

.md-scroll[b-6wc4pgi7vc] { flex: 1; overflow-y: auto; padding: 10px; }

.md-loading[b-6wc4pgi7vc], .md-empty[b-6wc4pgi7vc] { padding: 26px 16px; text-align: center; color: var(--c-text-faint); font-size: .9rem; }
.md-empty[b-6wc4pgi7vc] { font-style: italic; }
.md-muted[b-6wc4pgi7vc] { color: var(--c-text-faint); font-size: .8rem; }

.md-spin[b-6wc4pgi7vc] {
    display: inline-block; width: 14px; height: 14px;
    border: 2px solid var(--c-line-strong); border-top-color: var(--c-accent);
    border-radius: 50%; animation: md-spin-b-6wc4pgi7vc .7s linear infinite; vertical-align: -2px;
}
@keyframes md-spin-b-6wc4pgi7vc { to { transform: rotate(360deg); } }

.md-code[b-6wc4pgi7vc] { font-size: .72rem; font-weight: 700; color: var(--c-text-dim); background: var(--well-fill); padding: 2px 8px; border-radius: 5px; letter-spacing: .3px; }

.md-chip[b-6wc4pgi7vc] {
    font-size: .72rem; font-weight: 700;
    color: #1E4C9E; background: color-mix(in srgb, #2B62C9 14%, transparent);
    padding: 2px 9px; border-radius: var(--r-pill);
    white-space: nowrap;
}
.md-chip.addon[b-6wc4pgi7vc] { color: #0F6B4F; background: color-mix(in srgb, #1F9D74 16%, transparent); }
.md-chip.own[b-6wc4pgi7vc] { color: #8a5a12; background: color-mix(in srgb, #d9a441 24%, transparent); }

/* ---- group rows ---------------------------------------------------------------------------- */

.md-grp[b-6wc4pgi7vc] {
    display: flex; align-items: center; gap: 10px;
    min-height: 52px; padding: 8px 10px;
    border-radius: var(--r-sm);
    cursor: pointer;
    transition: background-color .1s ease;
}
.md-grp:hover[b-6wc4pgi7vc] { background: var(--glass-fill-hi); }
.md-grp.sel[b-6wc4pgi7vc] { background: var(--c-accent-wash); box-shadow: inset 0 0 0 1px var(--c-accent); }
.md-grp.off[b-6wc4pgi7vc] { opacity: .72; }

.md-grp-body[b-6wc4pgi7vc] { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.md-grp-meta[b-6wc4pgi7vc] { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

.md-grp-off[b-6wc4pgi7vc] {
    flex: none;
    font-size: .68rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
    color: #8a5a12; background: color-mix(in srgb, #d9a441 26%, transparent);
    padding: 3px 8px; border-radius: var(--r-pill);
    white-space: nowrap;
}

.md-grp-dot[b-6wc4pgi7vc] { width: 14px; height: 14px; border-radius: 4px; flex: none; box-shadow: inset 0 -2px 3px rgba(0, 0, 0, .2); }
.md-grp-thumb[b-6wc4pgi7vc] { width: 32px; height: 32px; border-radius: 7px; object-fit: cover; flex: none; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .2); }
.md-grp-nm[b-6wc4pgi7vc] { min-width: 0; font-weight: 650; font-size: .92rem; color: var(--c-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.md-grp-ct[b-6wc4pgi7vc] {
    font-size: .72rem; font-weight: 800;
    color: #5B3FB0; background: color-mix(in srgb, #7C5CD6 15%, transparent);
    min-width: 24px; text-align: center; padding: 3px 7px; border-radius: var(--r-pill);
}

.md-grp-actions[b-6wc4pgi7vc] { display: flex; gap: 4px; opacity: .45; transition: opacity .12s ease; }
.md-grp:hover .md-grp-actions[b-6wc4pgi7vc], .md-grp.sel .md-grp-actions[b-6wc4pgi7vc] { opacity: 1; }

.md-icon[b-6wc4pgi7vc] {
    width: 40px; height: 40px; flex: 0 0 auto;
    border-radius: var(--r-sm);
    border: 1px solid var(--glass-line-hi);
    background: var(--c-s2);
    color: var(--c-text-dim);
    cursor: pointer;
    font-size: .9rem;
    display: grid; place-items: center;
    transition: background-color .12s ease, color .12s ease;
}
.md-icon:hover:not(:disabled)[b-6wc4pgi7vc] { background: var(--c-s4); color: var(--c-text); }
.md-icon.danger:hover:not(:disabled)[b-6wc4pgi7vc] {
    background: color-mix(in srgb, var(--c-stop) 12%, var(--c-s2));
    color: var(--c-stop-text);
    border-color: color-mix(in srgb, var(--c-stop) 40%, transparent);
}
.md-icon:disabled[b-6wc4pgi7vc] { opacity: .35; cursor: default; }

/* ---- modifier tiles ------------------------------------------------------------------------ */

.md-itemgrid[b-6wc4pgi7vc] { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }

.md-item[b-6wc4pgi7vc] {
    border: 1px solid var(--glass-line);
    border-radius: var(--r-md);
    padding: 10px;
    background: var(--c-s2);
    display: flex; flex-direction: column; gap: 10px;
}
.md-item.off[b-6wc4pgi7vc] { opacity: .78; background: var(--well-fill); border-style: dashed; }

.md-item-btn[b-6wc4pgi7vc] {
    --c: var(--c-accent);
    position: relative;
    border-radius: var(--r-sm);
    padding: 12px 10px; min-height: 76px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    text-align: center; color: #fff; overflow: hidden;
    background: linear-gradient(160deg, color-mix(in srgb, var(--c) 88%, #fff 12%), color-mix(in srgb, var(--c) 82%, #000 18%));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 2px 6px rgba(20, 30, 50, .18);
}
.md-item-btn[b-6wc4pgi7vc]::before { content: ""; position: absolute; inset: 0 0 55% 0; background: linear-gradient(rgba(255, 255, 255, .22), transparent); }
.md-item-btn.photo[b-6wc4pgi7vc] { background-size: cover; background-position: center; background-color: #2A3340; }
.md-item-btn.photo[b-6wc4pgi7vc]::before { inset: 0; background: linear-gradient(rgba(0, 0, 0, .05) 25%, rgba(0, 0, 0, .62)); }

.md-item-nm[b-6wc4pgi7vc] { position: relative; font-weight: 800; font-size: .9rem; line-height: 1.1; text-shadow: 0 1px 3px rgba(0, 0, 0, .45); }
.md-item-pr[b-6wc4pgi7vc] { position: relative; font-weight: 800; font-size: 1.05rem; text-shadow: 0 1px 4px rgba(0, 0, 0, .5); }
.md-item-tag[b-6wc4pgi7vc] {
    position: relative;
    margin-top: 2px;
    font-size: .62rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
    color: #0b3d2c; background: #9fe3c6;
    padding: 2px 8px; border-radius: var(--r-pill);
    text-shadow: none;
}

.md-item-info[b-6wc4pgi7vc] { display: flex; flex-direction: column; gap: 2px; }
.md-item-real[b-6wc4pgi7vc] { font-weight: 650; font-size: .86rem; color: var(--c-text); }
.md-item-actions[b-6wc4pgi7vc] { display: flex; gap: 6px; justify-content: flex-end; }

/* ---- dialogs ------------------------------------------------------------------------------- */

.md-ov[b-6wc4pgi7vc] {
    position: fixed; inset: 0; z-index: 100;
    background: var(--scrim);
    -webkit-backdrop-filter: var(--scrim-blur);
    backdrop-filter: var(--scrim-blur);
    display: grid; place-items: center; padding: 20px;
}

.md-dlg[b-6wc4pgi7vc] {
    width: min(480px, 96vw); max-height: 92vh;
    overflow: hidden; display: flex; flex-direction: column;
    background: var(--modal-fill);
    border: 1px solid var(--glass-line-hi);
    border-radius: var(--r-lg);
    -webkit-backdrop-filter: var(--modal-blur);
    backdrop-filter: var(--modal-blur);
    box-shadow: var(--shadow-modal), var(--glass-edge);
    color: var(--c-text);
}
.md-dlg.wide[b-6wc4pgi7vc] { width: min(640px, 96vw); }

.md-dlg-head[b-6wc4pgi7vc] {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 16px 18px;
    font-weight: 800; font-size: 1.05rem;
    border-bottom: 1px solid var(--glass-line);
}

.md-x[b-6wc4pgi7vc] {
    border: 1px solid var(--glass-line-hi);
    background: var(--glass-fill-hi);
    color: var(--c-text-dim);
    width: 44px; height: 44px; flex: 0 0 auto;
    border-radius: var(--r-sm);
    cursor: pointer;
    display: grid; place-items: center;
}
.md-x.sm[b-6wc4pgi7vc] { width: 32px; height: 32px; }
.md-x:hover[b-6wc4pgi7vc] { background: var(--glass-fill-hover); color: var(--c-text); }

.md-dlg-body[b-6wc4pgi7vc] { padding: 16px 18px; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; }
.md-dlg-body p[b-6wc4pgi7vc] { margin: 0; line-height: 1.5; }

.md-dlg-foot[b-6wc4pgi7vc] {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 14px 18px;
    border-top: 1px solid var(--glass-line);
}
.md-dlg-foot .md-btn:only-child[b-6wc4pgi7vc] { margin-left: auto; }

.md-frow[b-6wc4pgi7vc] { display: flex; flex-direction: column; gap: 7px; }
.md-frow > label[b-6wc4pgi7vc] { font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: var(--track-label); color: var(--c-text-faint); }
.md-fsplit[b-6wc4pgi7vc] { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.md-in[b-6wc4pgi7vc] {
    min-height: 48px;
    border-radius: var(--r-sm);
    border: 1px solid var(--glass-line-hi);
    background: var(--c-s2);
    color: var(--c-text);
    padding: 0 14px;
    font-family: var(--font); font-size: .95rem;
    width: 100%;
}
.md-in:focus[b-6wc4pgi7vc] { outline: none; border-color: var(--c-accent); box-shadow: 0 0 0 3px var(--c-accent-wash); }

.md-pair[b-6wc4pgi7vc] { display: flex; gap: 10px; align-items: center; }

.md-color[b-6wc4pgi7vc] {
    width: 60px; height: 48px; flex: 0 0 auto;
    border: 1px solid var(--glass-line-hi);
    border-radius: var(--r-sm);
    background: var(--c-s2);
    cursor: pointer;
    padding: 4px;
}

.md-ferr[b-6wc4pgi7vc] {
    position: sticky; top: -16px; z-index: 3;
    margin: -16px -18px 0;
    background: color-mix(in srgb, var(--c-stop) 14%, var(--c-s2));
    border-bottom: 1px solid color-mix(in srgb, var(--c-stop) 40%, transparent);
    color: var(--c-stop-text);
    padding: 12px 18px; font-size: .86rem; font-weight: 600;
}

.md-fhint[b-6wc4pgi7vc] { font-size: .8rem; color: var(--c-text-faint); line-height: 1.45; }

.md-sw[b-6wc4pgi7vc] {
    display: inline-flex; align-items: center; gap: 10px;
    min-height: 44px;
    cursor: pointer; user-select: none;
    font-size: .9rem; color: var(--c-text);
}
.md-sw input[b-6wc4pgi7vc] { display: none; }
.md-swt[b-6wc4pgi7vc] {
    position: relative; width: 46px; height: 26px;
    border-radius: var(--r-pill);
    background: var(--c-line-strong); flex: none;
    transition: background-color .18s ease;
}
.md-swt[b-6wc4pgi7vc]::after {
    content: ""; position: absolute; top: 2px; left: 2px;
    width: 22px; height: 22px; border-radius: 50%;
    background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
    transition: transform .18s ease;
}
.md-sw input:checked + .md-swt[b-6wc4pgi7vc] { background: var(--c-accent); }
.md-sw input:checked + .md-swt[b-6wc4pgi7vc]::after { transform: translateX(20px); }
.md-sw.sm .md-swt[b-6wc4pgi7vc] { width: 38px; height: 22px; }
.md-sw.sm .md-swt[b-6wc4pgi7vc]::after { width: 18px; height: 18px; }
.md-sw.sm input:checked + .md-swt[b-6wc4pgi7vc]::after { transform: translateX(16px); }

.md-btn[b-6wc4pgi7vc] {
    display: inline-flex; align-items: center; gap: 8px;
    min-height: 48px; padding: 0 20px;
    border-radius: var(--r-sm);
    font-family: var(--font); font-weight: 700; font-size: .92rem;
    cursor: pointer; border: 1px solid transparent;
    transition: background-color .15s ease;
}
.md-btn.ghost[b-6wc4pgi7vc] { background: var(--c-s2); border-color: var(--c-line-strong); color: var(--c-text); }
.md-btn.ghost:hover:not(:disabled)[b-6wc4pgi7vc] { background: var(--c-s4); }
.md-btn.primary[b-6wc4pgi7vc] { background: var(--c-text); border-color: var(--c-text); color: var(--c-s2); box-shadow: 0 4px 14px -6px rgba(23, 23, 26, .55); }
.md-btn.primary:hover:not(:disabled)[b-6wc4pgi7vc] { background: var(--c-text-dim); border-color: var(--c-text-dim); }
.md-btn.danger[b-6wc4pgi7vc] { background: var(--c-stop); border-color: var(--c-stop); color: #fff; }
.md-btn:disabled[b-6wc4pgi7vc] { opacity: .5; cursor: default; }

.md-mini[b-6wc4pgi7vc] {
    min-height: 40px; padding: 0 14px;
    border-radius: var(--r-sm);
    font-family: var(--font); font-size: .82rem; font-weight: 700;
    cursor: pointer;
    border: 1px solid var(--c-line-strong);
    background: var(--c-s2);
    color: var(--c-text);
    display: inline-flex; align-items: center; gap: 6px;
}
.md-mini.del[b-6wc4pgi7vc] { border-color: color-mix(in srgb, var(--c-stop) 40%, transparent); color: var(--c-stop-text); }
.md-mini.del:hover[b-6wc4pgi7vc] { background: color-mix(in srgb, var(--c-stop) 12%, var(--c-s2)); }

/* ---- picture picker ------------------------------------------------------------------------ */

.md-imgrow[b-6wc4pgi7vc] { display: flex; align-items: center; gap: 14px; }
.md-imgbox[b-6wc4pgi7vc] {
    width: 112px; height: 82px; flex: none;
    border: 1px dashed var(--c-line-strong);
    border-radius: var(--r-sm);
    background: var(--well-fill);
    display: grid; place-items: center; overflow: hidden;
}
.md-imgbox img[b-6wc4pgi7vc] { width: 100%; height: 100%; object-fit: cover; }
.md-imgph[b-6wc4pgi7vc] { color: var(--c-text-faint); font-size: .8rem; }
.md-imgacts[b-6wc4pgi7vc] { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }

.md-upload[b-6wc4pgi7vc] {
    position: relative;
    display: inline-flex; align-items: center; gap: 8px;
    min-height: 44px; padding: 0 16px;
    border-radius: var(--r-sm);
    background: var(--c-accent-wash);
    color: var(--c-accent-text);
    border: 1px solid color-mix(in srgb, var(--c-accent) 34%, transparent);
    font-family: var(--font); font-size: .84rem; font-weight: 700;
    cursor: pointer; overflow: hidden;
}
.md-upload:hover[b-6wc4pgi7vc] { background: color-mix(in srgb, var(--c-accent) 24%, transparent); }
.md-upload[b-6wc4pgi7vc]  input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }

.md-imgnote[b-6wc4pgi7vc] { font-size: .8rem; color: var(--c-text-faint); }
.md-imgpending[b-6wc4pgi7vc] {
    align-self: flex-start;
    font-size: .72rem; color: var(--c-warn);
    background: var(--c-accent-wash);
    border-radius: var(--r-pill); padding: 4px 11px; font-weight: 600;
}

/* ---- this tab's own ------------------------------------------------------------------------ */

.md-cols.two[b-6wc4pgi7vc] { grid-template-columns: minmax(300px, 1fr) 1.7fr; }

.md-legend[b-6wc4pgi7vc] { padding: 4px 6px 10px; font-size: .8rem; color: var(--c-text-faint); line-height: 1.45; }

/* A prefix's percentage, where a group row has its picture. */
.md-pct[b-6wc4pgi7vc] {
    flex: none;
    min-width: 52px; height: 32px; padding: 0 8px;
    display: grid; place-items: center;
    border-radius: 8px;
    background: var(--c-accent-wash);
    color: var(--c-accent-text);
    font-weight: 800; font-size: .82rem;
    border: 1px solid color-mix(in srgb, var(--c-accent) 30%, transparent);
}

/* What one open modifier costs under each prefix. */
.md-prices[b-6wc4pgi7vc] { display: flex; flex-wrap: wrap; gap: 4px 6px; margin-top: 4px; }
.md-price[b-6wc4pgi7vc] {
    font-size: .72rem; color: var(--c-text-dim);
    background: var(--well-fill);
    padding: 2px 8px; border-radius: var(--r-pill);
    white-space: nowrap;
}
.md-price b[b-6wc4pgi7vc] { color: var(--c-text); font-weight: 700; }
.md-prices.big .md-price[b-6wc4pgi7vc] { font-size: .86rem; padding: 5px 12px; }

.md-quick[b-6wc4pgi7vc] { display: flex; gap: 8px; flex-wrap: wrap; }
.md-mini.on[b-6wc4pgi7vc] { background: var(--c-accent-wash); border-color: var(--c-accent); color: var(--c-accent-text); }
.md-in.short[b-6wc4pgi7vc] { width: 140px; }

@media (max-width: 1100px) {
    .md[b-6wc4pgi7vc] { height: auto; }
    .md-cols[b-6wc4pgi7vc] { grid-template-columns: 1fr; }
    .md-col[b-6wc4pgi7vc] { min-height: 320px; }
}

@media (prefers-reduced-motion: reduce) { .md-spin[b-6wc4pgi7vc] { animation-duration: 2.5s; } }
/* _content/AERetail.WebOffice/Components/Views/KitchenSetupView.razor.rz.scp.css */
/* Kitchen screens (KitchenSetupView), in the office's own theme: aeretail.css and office-light tokens
   only. The layout is the demo's: a store bar, stations beside the screen behaviour, then the stages
   with the order a dish moves through drawn above them. */

/* Row and alignment said outright: a card in the area pane is otherwise laid out as a centred column. */
.kit-bar[b-nkeoax5uvb] { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 12px; flex-wrap: wrap; padding: 12px 16px; margin-bottom: 16px; }
.kit-store[b-nkeoax5uvb] { display: flex; align-items: center; gap: 10px; font-weight: 600; color: var(--ink-2); }
.kit-store select[b-nkeoax5uvb] { min-width: 240px; height: 36px; padding: 0 10px; border: 1px solid var(--rule-2); border-radius: var(--r-ctl); background: var(--surface); color: var(--ink); font: inherit; }
.kit-rev[b-nkeoax5uvb] { color: var(--ink-3); font-size: 13px; }
.kit-bar .spacer[b-nkeoax5uvb] { flex: 1; }

.kit-start[b-nkeoax5uvb] { display: flex; flex-direction: row; justify-content: flex-start; align-items: center; gap: 16px; flex-wrap: wrap; padding: 14px 18px; margin-bottom: 16px; border-color: var(--h-line); background: var(--h-tint-2); }
.kit-start > div[b-nkeoax5uvb] { flex: 1 1 360px; }
.kit-start p[b-nkeoax5uvb] { margin: 4px 0 0; color: var(--ink-2); font-size: 13px; }

.kit-grid[b-nkeoax5uvb] { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; align-items: start; }
.kit-grid > *[b-nkeoax5uvb] { min-width: 0; }
.kit-stages[b-nkeoax5uvb] { margin-top: 16px; }
.card-head h2[b-nkeoax5uvb] { font-size: 1rem; margin: 0; }
.kit-sub[b-nkeoax5uvb] { color: var(--ink-3); font-size: 12.5px; }

.kit-table[b-nkeoax5uvb] { width: 100%; border-collapse: collapse; font-size: 13px; }
.kit-table th[b-nkeoax5uvb] { text-align: left; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); font-weight: 700; padding: 8px 8px; border-bottom: 1px solid var(--rule); white-space: nowrap; }
.kit-table td[b-nkeoax5uvb] { padding: 6px 8px; border-bottom: 1px solid var(--rule); vertical-align: middle; }
.kit-table tr.off td[b-nkeoax5uvb] { opacity: .6; }
.kit-in[b-nkeoax5uvb] { width: 100%; min-width: 0; height: 32px; padding: 0 8px; border: 1px solid var(--rule-2); border-radius: var(--r-ctl); background: var(--surface); color: var(--ink); font: inherit; font-size: 13px; }
.kit-in:focus[b-nkeoax5uvb] { outline: 2px solid var(--h-accent); outline-offset: 1px; }
.kit-code[b-nkeoax5uvb] { width: 120px; text-transform: uppercase; }
.kit-order[b-nkeoax5uvb] { white-space: nowrap; width: 1%; }
.kit-mv[b-nkeoax5uvb] { width: 26px; height: 26px; border: 1px solid var(--rule); border-radius: 6px; background: var(--surface); color: var(--ink-2); font-size: 10px; cursor: pointer; }
.kit-mv:disabled[b-nkeoax5uvb] { opacity: .35; cursor: default; }
.kit-mv:hover:not(:disabled)[b-nkeoax5uvb] { border-color: var(--h-accent); color: var(--h-ink); }
.kit-tag[b-nkeoax5uvb] { display: inline-block; margin-top: 3px; font-size: 11px; color: var(--ink-3); }
.kit-colour[b-nkeoax5uvb] { white-space: nowrap; }
.kit-colour input[type=color][b-nkeoax5uvb] { width: 40px; height: 28px; padding: 0; border: 1px solid var(--rule-2); border-radius: 6px; background: none; vertical-align: middle; cursor: pointer; }
.kit-colour .mono[b-nkeoax5uvb] { margin-left: 6px; color: var(--ink-3); font-size: 12px; }
.kit-muted[b-nkeoax5uvb] { color: var(--ink-3); font-size: 12px; }
.kit-add[b-nkeoax5uvb] { margin-top: 12px; }
.kit-note[b-nkeoax5uvb] { margin: 12px 0 0; color: var(--ink-3); font-size: 12.5px; }

/* The order a dish moves through, as the screen will show it. */
.kit-flow[b-nkeoax5uvb] { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0 0 14px; padding: 0; }
.kit-flow li[b-nkeoax5uvb] { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border: 1px solid var(--rule); border-radius: 999px; background: var(--surface-2); font-weight: 600; font-size: 13px; }
.kit-flow li + li[b-nkeoax5uvb]::before { content: "→"; margin-right: 4px; color: var(--ink-3); font-weight: 400; }
.kit-sw[b-nkeoax5uvb] { width: 12px; height: 12px; border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); }

.kit-copy[b-nkeoax5uvb] { display: grid; gap: 8px; }

@media (max-width: 1279px) { .kit-grid[b-nkeoax5uvb] { grid-template-columns: minmax(0, 1fr); } }
/* _content/AERetail.WebOffice/Components/Views/KxDialog.razor.rz.scp.css */
/* An entry dialog in a kiosk-look area, drawn as the Menu Designer draws its menu and group
   editors (KioskMenu.Ui MenuDesignerView.razor.css), on the same theme tokens (theme.css, linked
   by App.razor). Copied rather than shared because that sheet is scoped to the designer, as
   KioskModifierGroupsView.razor.css does; the class names are kept the same so the three can be
   compared line for line.

   The form inside is the screen's own markup in the office's classes, which is why most of what
   follows is ::deep. Two idioms are covered: the catalogue's (RefEditView - a .fld box holding a
   label and its control) and the hand-written views' (a label wrapping its caption and an
   input.fld, inside .formgrid). Both become the designer's fields, checkboxes its switches, and
   a form's own footer the dialog's footer. */

.md-ov[b-0mo1d7mtgj] {
    position: fixed; inset: 0; z-index: 100;
    background: var(--scrim);
    -webkit-backdrop-filter: var(--scrim-blur);
    backdrop-filter: var(--scrim-blur);
    display: grid; place-items: center; padding: 20px;
}

/* Wide as the designer's wider editors: two fields to a row where a table has many. */
.md-dlg[b-0mo1d7mtgj] {
    position: relative;
    width: min(640px, 96vw); max-height: 92vh;
    overflow: hidden; display: flex; flex-direction: column;
    background: var(--modal-fill);
    border: 1px solid var(--glass-line-hi);
    border-radius: var(--r-lg);
    -webkit-backdrop-filter: var(--modal-blur);
    backdrop-filter: var(--modal-blur);
    box-shadow: var(--shadow-modal), var(--glass-edge);
    color: var(--c-text);
    font-family: var(--font);

    /* The office's palette pointed at the kiosk's tokens, as in KxList.razor.css, so anything in
       the form drawn in the office's classes comes out in the kiosk's colours. */
    --h-tint: color-mix(in srgb, var(--c-accent) 7%, var(--c-s2));
    --h-tint-2: color-mix(in srgb, var(--c-accent) 14%, var(--c-s2));
    --h-accent: var(--c-accent);
    --h-line: color-mix(in srgb, var(--c-accent) 34%, transparent);
    --h-ink: var(--c-accent-text);
    --surface: var(--c-s2);
    --surface-2: var(--c-s0);
    --surface-3: var(--c-s4);
    --canvas: var(--c-s0);
    --ink: var(--c-text);
    --ink-2: var(--c-text-dim);
    --ink-3: var(--c-text-faint);
    --rule: var(--glass-line);
    --rule-2: var(--c-line-strong);
    --good: var(--c-go-text);
    --good-tint: color-mix(in srgb, var(--c-go) 14%, var(--c-s2));
    --bad: var(--c-stop-text);
    --bad-tint: color-mix(in srgb, var(--c-stop) 12%, var(--c-s2));
}

/* A document with lines: its table wants the width more than the form does. */
.md-dlg.wide[b-0mo1d7mtgj] { width: min(1040px, 96vw); }

.md-dlg-head[b-0mo1d7mtgj] {
    flex: none;
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 16px 18px;
    font-weight: 800; font-size: 1.05rem;
    border-bottom: 1px solid var(--glass-line);
}
.md-dlg-head > span[b-0mo1d7mtgj] { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.md-x[b-0mo1d7mtgj] {
    border: 1px solid var(--glass-line-hi);
    background: var(--glass-fill-hi);
    color: var(--c-text-dim);
    width: 44px; height: 44px; flex: 0 0 auto;
    border-radius: var(--r-sm);
    cursor: pointer;
    display: grid; place-items: center;
}
.md-x:hover[b-0mo1d7mtgj] { background: var(--glass-fill-hover); color: var(--c-text); }

/* ---- the body: the only part that scrolls -------------------------------------------------- */

.kx-dlg-body[b-0mo1d7mtgj],
.md-dlg[b-0mo1d7mtgj]  .formwrap {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 16px 18px;
}
.kx-dlg-body[b-0mo1d7mtgj] { display: flex; flex-direction: column; gap: 14px; }

.md-dlg[b-0mo1d7mtgj]  .loading,
.md-dlg[b-0mo1d7mtgj]  .emptystate { color: var(--c-text-faint); }

.md-dlg[b-0mo1d7mtgj]  .alert {
    flex: none;
    margin: 0;
    border-radius: var(--r-sm);
    padding: 10px 14px;
    font-size: .86rem; font-weight: 600;
}

/* The message a save leaves, first in the body and sticky, as the designer's form error: a
   rejected save must not leave its reason scrolled out of sight. A screen puts that message
   first in the body for this; a note further down the form stays where it is. */
.md-dlg[b-0mo1d7mtgj]  .alert:first-child {
    position: sticky; top: -16px; z-index: 3;
    margin: -16px -18px 0;
    border-radius: 0;
    border-width: 0 0 1px;
    padding: 12px 18px;
}
.md-dlg[b-0mo1d7mtgj]  .formwrap .alert:first-child { margin-bottom: 16px; }
.md-dlg[b-0mo1d7mtgj]  .alert-bad {
    background: color-mix(in srgb, var(--c-stop) 14%, var(--c-s2));
    border-color: color-mix(in srgb, var(--c-stop) 40%, transparent);
    color: var(--c-stop-text);
}
.md-dlg[b-0mo1d7mtgj]  .alert-good {
    background: color-mix(in srgb, var(--c-go) 14%, var(--c-s2));
    border-color: color-mix(in srgb, var(--c-go) 40%, transparent);
    color: var(--c-go-text);
}
.md-dlg[b-0mo1d7mtgj]  .alert.alert-info {
    position: static; margin: 0; border-radius: var(--r-sm); border-width: 1px; padding: 10px 14px;
    background: var(--c-accent-wash);
    border-color: color-mix(in srgb, var(--c-accent) 34%, transparent);
    color: var(--c-text);
}

/* Explanations and read-backs inside a form, as the designer's hints. */
.md-dlg[b-0mo1d7mtgj]  p { margin: 0; line-height: 1.5; }
.md-dlg[b-0mo1d7mtgj]  .kx-dlg-body p,
.md-dlg[b-0mo1d7mtgj]  .muted { color: var(--c-text-dim); font-size: .86rem; }
.md-dlg[b-0mo1d7mtgj]  .lead-line {
    margin: 0; padding: 12px 14px;
    border-radius: var(--r-sm);
    background: var(--c-accent-wash);
    color: var(--c-text);
    font-size: .9rem;
}
.md-dlg[b-0mo1d7mtgj]  .problems {
    margin: 0; padding: 10px 14px 10px 30px;
    border-radius: var(--r-sm);
    border: 1px solid color-mix(in srgb, var(--c-stop) 40%, transparent);
    background: color-mix(in srgb, var(--c-stop) 10%, var(--c-s2));
    color: var(--c-stop-text);
    font-size: .86rem;
}

/* A heading over a part of the form, as the designer's grouped fields (.md-fgroup-ttl). */
.md-dlg[b-0mo1d7mtgj]  h3.sub,
.md-dlg[b-0mo1d7mtgj]  .auditbox h3 {
    margin: 6px 0 0;
    font-size: .72rem; font-weight: 800; text-transform: uppercase;
    letter-spacing: var(--track-label); color: var(--c-accent-text);
}

/* ---- fields --------------------------------------------------------------------------------- */

.md-dlg[b-0mo1d7mtgj]  .formgrid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px 16px; }
.md-dlg[b-0mo1d7mtgj]  .formgrid.boxed,
.md-dlg[b-0mo1d7mtgj]  .auditbox {
    margin: 0;
    padding: 14px;
    border: 1px solid var(--glass-line);
    border-radius: var(--r-md);
    background: var(--well-fill);
}
.md-dlg[b-0mo1d7mtgj]  .auditbox { margin-top: 16px; }
.md-dlg[b-0mo1d7mtgj]  .auditbox h3 { margin: 0 0 10px; }
.md-dlg[b-0mo1d7mtgj]  .auditgrid div { font-size: .86rem; color: var(--c-text); }
.md-dlg[b-0mo1d7mtgj]  .auditgrid span { color: var(--c-text-faint); }

.md-dlg[b-0mo1d7mtgj]  .fld { gap: 7px; }

/* The caption, in either idiom. */
.md-dlg[b-0mo1d7mtgj]  .fld > label:not(.switch),
.md-dlg[b-0mo1d7mtgj]  .formgrid > label:not(.switch) {
    gap: 7px 3px;
    font-size: .74rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: var(--track-label); color: var(--c-text-faint);
}
.md-dlg[b-0mo1d7mtgj]  .req { color: var(--c-stop); }

/* The control, in either idiom. Solid rather than glass, as the designer's: a translucent field
   inside a translucent dialog has no stable contrast. */
.md-dlg[b-0mo1d7mtgj]  .fld :is(input[type=text], input[type=number], input[type=date], input[type=time], select, textarea),
.md-dlg[b-0mo1d7mtgj]  :is(input, select, textarea).fld {
    min-height: 46px;
    border-radius: var(--r-sm);
    border: 1px solid var(--glass-line-hi);
    background: var(--c-s2);
    color: var(--c-text);
    padding: 0 14px;
    font-family: var(--font); font-size: .95rem; font-weight: 400;
    letter-spacing: normal; text-transform: none;
    width: 100%;
}
.md-dlg[b-0mo1d7mtgj]  :is(textarea.fld, .fld textarea) { min-height: 96px; padding: 12px 14px; }
.md-dlg[b-0mo1d7mtgj]  :is(input, select, textarea).fld:focus,
.md-dlg[b-0mo1d7mtgj]  .fld :is(input, select, textarea):focus { outline: none; border-color: var(--c-accent); box-shadow: 0 0 0 3px var(--c-accent-wash); }
.md-dlg[b-0mo1d7mtgj]  :is(input, select, textarea).fld:disabled,
.md-dlg[b-0mo1d7mtgj]  .fld :is(input, select, textarea):disabled { background: var(--well-fill); color: var(--c-text-faint); }

.md-dlg[b-0mo1d7mtgj]  .fld.bad :is(input, select, textarea) {
    border-color: var(--c-stop);
    background: color-mix(in srgb, var(--c-stop) 8%, var(--c-s2));
}
.md-dlg[b-0mo1d7mtgj]  .fld .hint { font-size: .8rem; color: var(--c-text-faint); line-height: 1.45; }
.md-dlg[b-0mo1d7mtgj]  .fld .err { font-size: .8rem; color: var(--c-stop-text); font-weight: 600; }

/* A checkbox drawn as the designer's switch (.md-sw): the track and its knob are the box itself,
   so neither idiom needs markup of its own for it. */
.md-dlg[b-0mo1d7mtgj]  .switch {
    display: flex; align-items: center; gap: 12px;
    min-height: 52px;
    padding: 10px 14px;
    border: 1px solid var(--glass-line);
    border-radius: var(--r-sm);
    background: var(--well-fill);
    font-size: .9rem; font-weight: 600; color: var(--c-text);
    letter-spacing: normal; text-transform: none;
    cursor: pointer; user-select: none;
}
.md-dlg[b-0mo1d7mtgj]  .switch:hover { border-color: var(--glass-line-hi); }
.md-dlg[b-0mo1d7mtgj]  .switch input[type=checkbox] {
    -webkit-appearance: none;
    appearance: none;
    position: relative;
    width: 46px; height: 26px;
    margin: 0;
    flex: none;
    border: none;
    border-radius: var(--r-pill);
    background: var(--c-line-strong);
    cursor: pointer;
    transition: background-color .18s ease;
}
.md-dlg[b-0mo1d7mtgj]  .switch input[type=checkbox]::after {
    content: ""; position: absolute; top: 2px; left: 2px;
    width: 22px; height: 22px; border-radius: 50%;
    background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
    transition: transform .18s ease;
}
.md-dlg[b-0mo1d7mtgj]  .switch input[type=checkbox]:checked { background: var(--c-accent); }
.md-dlg[b-0mo1d7mtgj]  .switch input[type=checkbox]:checked::after { transform: translateX(20px); }
.md-dlg[b-0mo1d7mtgj]  .switch input[type=checkbox]:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--c-accent-wash); }
.md-dlg[b-0mo1d7mtgj]  .switch input[type=checkbox]:disabled { opacity: .5; cursor: default; }
.md-dlg[b-0mo1d7mtgj]  .switch .lbl { font-size: .9rem; font-weight: 600; color: var(--c-text); }
.md-dlg[b-0mo1d7mtgj]  .switch .hint { font-size: .78rem; font-weight: 400; color: var(--c-text-faint); }

/* A choice of a few, side by side. */
.md-dlg[b-0mo1d7mtgj]  .seg { border-color: var(--c-line-strong); border-radius: var(--r-sm); }
.md-dlg[b-0mo1d7mtgj]  .seg button { min-height: 40px; background: var(--c-s2); color: var(--c-text-dim); font-family: var(--font); font-weight: 700; }
.md-dlg[b-0mo1d7mtgj]  .seg button + button { border-left-color: var(--c-line-strong); }
.md-dlg[b-0mo1d7mtgj]  .seg button.on { background: var(--c-accent-wash); color: var(--c-accent-text); }

/* ---- a document's lines --------------------------------------------------------------------- */

.md-dlg[b-0mo1d7mtgj]  .tablewrap {
    flex: none;
    overflow-x: auto;
    margin: 0;
    background: var(--c-s2);
    border: 1px solid var(--glass-line-hi);
    border-radius: var(--r-md);
}
.md-dlg[b-0mo1d7mtgj]  .tablewrap table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.md-dlg[b-0mo1d7mtgj]  .tablewrap th {
    padding: 10px 12px;
    text-align: left; white-space: nowrap;
    background: color-mix(in srgb, var(--c-accent) 14%, var(--c-s2));
    color: var(--c-accent-text);
    font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: var(--track-label);
    border-bottom: 1px solid color-mix(in srgb, var(--c-accent) 34%, transparent);
}
.md-dlg[b-0mo1d7mtgj]  .tablewrap td {
    padding: 8px 12px;
    border-bottom: 1px solid var(--glass-line);
    color: var(--c-text);
    vertical-align: middle;
}
.md-dlg[b-0mo1d7mtgj]  .tablewrap tbody tr:last-child td { border-bottom: none; }
.md-dlg[b-0mo1d7mtgj]  .tablewrap :is(th, td).num { text-align: right; }

/* A field inside a line: compact, so a countable sheet does not have to be scrolled sideways. */
.md-dlg[b-0mo1d7mtgj]  .tablewrap :is(input, select).fld {
    min-height: 36px;
    padding: 0 8px;
    font-size: .86rem;
}
.md-dlg[b-0mo1d7mtgj]  .tablewrap input.fld.num,
.md-dlg[b-0mo1d7mtgj]  .tablewrap .fld.tight { width: 7em; text-align: right; }

/* A button inside the form - Add line, Remove - as the designer's small buttons (.md-mini). */
.md-dlg[b-0mo1d7mtgj]  .kx-dlg-body .btn,
.md-dlg[b-0mo1d7mtgj]  .formwrap .btn {
    display: inline-flex; align-items: center; gap: 6px;
    min-height: 38px; padding: 0 14px;
    border-radius: var(--r-sm);
    border: 1px solid var(--c-line-strong);
    background: var(--c-s2);
    color: var(--c-text);
    font-family: var(--font); font-size: .82rem; font-weight: 700;
    cursor: pointer;
}
.md-dlg[b-0mo1d7mtgj]  .kx-dlg-body .btn:hover:not(:disabled),
.md-dlg[b-0mo1d7mtgj]  .formwrap .btn:hover:not(:disabled) { background: var(--c-s4); }
.md-dlg[b-0mo1d7mtgj]  .kx-dlg-body .btn-danger {
    border-color: color-mix(in srgb, var(--c-stop) 40%, transparent);
    color: var(--c-stop-text);
}
.md-dlg[b-0mo1d7mtgj]  .kx-dlg-body .btn:disabled { opacity: .5; cursor: default; }
.md-dlg[b-0mo1d7mtgj]  .kx-dlg-body > .btn { align-self: flex-start; }

/* ---- the footer: the dialog's own, or the catalogue form's drawn as one --------------------- */

.md-dlg-foot[b-0mo1d7mtgj],
.md-dlg[b-0mo1d7mtgj]  .formfoot {
    flex: none;
    display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
    padding: 14px 18px;
    background: transparent;
    border-top: 1px solid var(--glass-line);
}
.md-dlg[b-0mo1d7mtgj]  .formfoot .spacer { flex: 1; }
.md-dlg-foot[b-0mo1d7mtgj]  div { display: flex; flex-wrap: wrap; gap: 10px; margin-left: auto; }

.md-dlg-foot[b-0mo1d7mtgj]  .muted,
.md-dlg[b-0mo1d7mtgj]  .formfoot > .muted {
    font-size: .8rem !important; font-weight: 600;
    color: var(--c-text-faint);
    max-width: 56ch;
}

.md-dlg-foot[b-0mo1d7mtgj]  .btn,
.md-dlg[b-0mo1d7mtgj]  .formfoot .btn {
    display: inline-flex; align-items: center; gap: 8px;
    min-height: 48px; padding: 0 20px;
    border-radius: var(--r-sm);
    font-family: var(--font); font-weight: 700; font-size: .92rem;
    cursor: pointer;
    transition: background-color .15s ease;
}
.md-dlg-foot[b-0mo1d7mtgj]  .btn-quiet,
.md-dlg[b-0mo1d7mtgj]  .formfoot .btn-quiet { background: var(--c-s2); border: 1px solid var(--c-line-strong); color: var(--c-text); }
.md-dlg-foot[b-0mo1d7mtgj]  .btn-quiet:hover:not(:disabled),
.md-dlg[b-0mo1d7mtgj]  .formfoot .btn-quiet:hover:not(:disabled) { background: var(--c-s4); }

/* Ink rather than saffron, matching the designer's Save. */
.md-dlg-foot[b-0mo1d7mtgj]  .btn-primary,
.md-dlg[b-0mo1d7mtgj]  .formfoot .btn-primary {
    background: var(--c-text);
    border: 1px solid var(--c-text);
    color: var(--c-s2);
    box-shadow: 0 4px 14px -6px rgba(23, 23, 26, .55);
}
.md-dlg-foot[b-0mo1d7mtgj]  .btn-primary:hover:not(:disabled),
.md-dlg[b-0mo1d7mtgj]  .formfoot .btn-primary:hover:not(:disabled) { background: var(--c-text-dim); border-color: var(--c-text-dim); }
.md-dlg-foot[b-0mo1d7mtgj]  .btn-danger,
.md-dlg[b-0mo1d7mtgj]  .formfoot .btn-danger { background: var(--c-stop); border: 1px solid var(--c-stop); color: #fff; }
.md-dlg-foot[b-0mo1d7mtgj]  .btn:disabled,
.md-dlg[b-0mo1d7mtgj]  .formfoot .btn:disabled { opacity: .5; cursor: default; }

/* ---- a question over the form ("Discard your changes?") ------------------------------------ */

/* Laid over this dialog rather than over the window. The dialog's backdrop-filter makes it the
   box a fixed element is placed in, so the office's fixed scrim would be cut to the dialog in any
   case; said here on purpose, it covers the form it is asking about and nothing else. */
.md-dlg[b-0mo1d7mtgj]  .scrim {
    position: absolute;
    z-index: 10;
    padding: 16px;
    background: var(--scrim);
    -webkit-backdrop-filter: var(--scrim-blur);
    backdrop-filter: var(--scrim-blur);
}
.md-dlg[b-0mo1d7mtgj]  .scrim .dlg {
    width: min(460px, 100%);
    overflow: hidden;
    background: var(--modal-fill);
    border: 1px solid var(--glass-line-hi);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-modal), var(--glass-edge);
    color: var(--c-text);
}
.md-dlg[b-0mo1d7mtgj]  .scrim .dlg-bar { padding: 16px 18px; background: transparent; border-bottom: 1px solid var(--glass-line); }
.md-dlg[b-0mo1d7mtgj]  .scrim .dlg-title { font-weight: 800; font-size: 1.05rem; color: var(--c-text); }
.md-dlg[b-0mo1d7mtgj]  .scrim .dlg-body p { color: var(--c-text-dim) !important; }
.md-dlg[b-0mo1d7mtgj]  .scrim .dlg-foot { gap: 10px; padding: 14px 18px; background: transparent; border-top: 1px solid var(--glass-line); }
.md-dlg[b-0mo1d7mtgj]  .scrim .dlg-foot .btn {
    min-height: 44px; padding: 0 18px;
    border-radius: var(--r-sm);
    font-weight: 700;
}
.md-dlg[b-0mo1d7mtgj]  .scrim .dlg-foot .btn-quiet { background: var(--c-s2); border: 1px solid var(--c-line-strong); color: var(--c-text); }
.md-dlg[b-0mo1d7mtgj]  .scrim .dlg-foot .btn-danger { background: var(--c-stop); border: 1px solid var(--c-stop); color: #fff; }
/* _content/AERetail.WebOffice/Components/Views/KxList.razor.rz.scp.css */
/* A list in a kiosk-look area (OfficeArea.KioskLook): the catalogue's RefListView, or a
   hand-written view's toolbar, table and KxPager, drawn in the Menu Designer's palette on the
   kiosk's theme tokens (theme.css, linked by App.razor) - the accent wash for the column
   headings, glass for the footer - and nothing of the office's own hues, so the list and its
   entry dialog (KxDialog) read as one theme.

   The box is the window below the tab strip (top bar 58, page padding 22 + 22, tab strip and
   its margin about 60), so the page itself never scrolls: the toolbar and the footer stay put
   and only the rows move. The markup is the screen's own, which is why everything below is
   ::deep - RefListView is shared with every other section and keeps one copy of its logic. */

.kx-list[b-dp284bubs8] {
    position: relative;
    height: calc(100vh - 170px);
    min-height: 420px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--glass-line);
    border-radius: 12px;
    font-family: var(--font);
    color: var(--c-text);
    /* The same four-point mesh as the Menu Designer, so the two sections read as one
       application. The box's own background rather than a ::before under it: that needs a
       stacking context here, and the delete question below is a fixed dialog that would then
       be stacked inside this box, under the office's top bar. */
    background:
        radial-gradient(62% 58% at 6% 4%, var(--mesh-a), transparent 68%),
        radial-gradient(58% 62% at 95% 14%, var(--mesh-b), transparent 68%),
        radial-gradient(66% 60% at 14% 94%, var(--mesh-c), transparent 70%),
        radial-gradient(60% 56% at 88% 90%, var(--mesh-d), transparent 70%),
        var(--c-s0);

    /* The office's own palette (aeretail.css: the section hue, surfaces, ink, rules, good and
       bad), pointed at the kiosk's tokens for everything inside the box. A screen drawn in the
       office's classes - a settings pane, a card, a group of figures - then comes out in the
       kiosk's colours without a rule of its own here, and follows its light and dark themes. */
    --h-tint: color-mix(in srgb, var(--c-accent) 7%, var(--c-s2));
    --h-tint-2: color-mix(in srgb, var(--c-accent) 14%, var(--c-s2));
    --h-accent: var(--c-accent);
    --h-line: color-mix(in srgb, var(--c-accent) 34%, transparent);
    --h-ink: var(--c-accent-text);
    --surface: var(--c-s2);
    --surface-2: var(--c-s0);
    --surface-3: var(--c-s4);
    --canvas: var(--c-s0);
    --ink: var(--c-text);
    --ink-2: var(--c-text-dim);
    --ink-3: var(--c-text-faint);
    --rule: var(--glass-line);
    --rule-2: var(--c-line-strong);
    --good: var(--c-go-text);
    --good-tint: color-mix(in srgb, var(--c-go) 14%, var(--c-s2));
    --bad: var(--c-stop-text);
    --bad-tint: color-mix(in srgb, var(--c-stop) 12%, var(--c-s2));

    /* The row's two buttons: edit in blue, delete in red. */
    --kx-edit: #2563EB;
}

:root[data-theme="dark"] .kx-list[b-dp284bubs8] { --kx-edit: #60A5FA; }

/* ---- a panel: a screen that is not one list -------------------------------------------------
   Settings, a dashboard of figures, a page of cards. The same box and palette, but the box itself
   scrolls rather than one table in it, and each table keeps its own height. */

.kx-list.kx-panel[b-dp284bubs8] { display: block; overflow-y: auto; padding-bottom: 16px; }
.kx-panel[b-dp284bubs8]  .tablewrap { flex: none; max-height: none; overflow: auto; margin: 0 16px 14px; }
.kx-panel[b-dp284bubs8]  .toolbar { position: sticky; top: 0; z-index: 4; background: color-mix(in srgb, var(--c-s0) 88%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.kx-panel[b-dp284bubs8]  :is(.card, .group) {
    margin: 0 16px 16px;
    background: var(--c-s2);
    border: 1px solid var(--glass-line-hi);
    border-radius: var(--r-md);
    box-shadow: 0 10px 30px -18px rgba(15, 23, 42, .45);
    overflow: hidden;
}
.kx-panel[b-dp284bubs8]  :is(.card-head, .group-head) {
    background: color-mix(in srgb, var(--c-accent) 14%, var(--c-s2));
    border-bottom: 1px solid color-mix(in srgb, var(--c-accent) 34%, transparent);
    color: var(--c-accent-text);
    font-weight: 800;
}
.kx-panel[b-dp284bubs8]  :is(.card-head, .group-head) h2 { color: var(--c-accent-text); font-weight: 800; }
.kx-panel[b-dp284bubs8]  :is(.card, .group) .tablewrap { margin: 0; border: none; border-radius: 0; box-shadow: none; }
.kx-panel[b-dp284bubs8]  .lede { margin: 0 16px 12px; color: var(--c-text-dim); }

/* A screen laid out by a wrapper of its own (Currency Buttons, Settings, Card Processing, the
   authorised-product list) gets the same inset from the box's edge as everything else here. */
.kx-panel[b-dp284bubs8]  :is(.cb-wrap, .setwrap, .cpwrap, .aplwrap) { margin: 16px; }
.kx-panel[b-dp284bubs8]  .loading,
.kx-panel[b-dp284bubs8]  .emptystate { margin: 0 16px; }

/* Fields on a panel, as the designer's (KxDialog draws the same in a dialog). */
.kx-panel[b-dp284bubs8]  .formgrid > label:not(.switch),
.kx-panel[b-dp284bubs8]  .fld > label:not(.switch) {
    font-size: .74rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: var(--track-label); color: var(--c-text-faint);
}
.kx-panel[b-dp284bubs8]  :is(input, select, textarea).fld,
.kx-panel[b-dp284bubs8]  .fld :is(input[type=text], input[type=number], input[type=date], select, textarea) {
    min-height: 42px;
    border-radius: var(--r-sm);
    border: 1px solid var(--glass-line-hi);
    background: var(--c-s2);
    color: var(--c-text);
    font-family: var(--font);
}
.kx-panel[b-dp284bubs8]  :is(input, select, textarea).fld:focus,
.kx-panel[b-dp284bubs8]  .fld :is(input, select, textarea):focus { outline: none; border-color: var(--c-accent); box-shadow: 0 0 0 3px var(--c-accent-wash); }
.kx-panel[b-dp284bubs8]  :is(.card-body, .group) .btn-primary,
.kx-panel[b-dp284bubs8]  .formfoot .btn-primary {
    background: var(--c-text); border-color: var(--c-text); color: var(--c-s2);
}
.kx-panel[b-dp284bubs8]  :is(.card-body, .group, .formfoot) .btn-quiet {
    background: var(--c-s2); border: 1px solid var(--c-line-strong); color: var(--c-text);
}
.kx-panel[b-dp284bubs8]  .formfoot { background: var(--glass-fill-hi); border-top: 1px solid var(--glass-line); }

/* ---- what just happened ------------------------------------------------------------------- */

.kx-list[b-dp284bubs8]  .alert {
    flex: none;
    margin: 14px 16px 0 !important;
    border-radius: var(--r-sm);
    font-weight: 600;
}

/* ---- toolbar ------------------------------------------------------------------------------ */

.kx-list[b-dp284bubs8]  .toolbar {
    flex: none;
    align-items: flex-end;
    gap: 12px;
    padding: 14px 16px;
    background: transparent;
    border-bottom: none;
}

.kx-list[b-dp284bubs8]  .toolbar .btn {
    display: inline-flex; align-items: center; gap: 8px;
    min-height: 42px; padding: 0 18px;
    border-radius: var(--r-sm);
    font-family: var(--font); font-weight: 700; font-size: .9rem;
    cursor: pointer;
    transition: background-color .15s ease;
}

/* Ink rather than saffron, as on the Menu Designer: saffron is the till's "act here" colour. */
.kx-list[b-dp284bubs8]  .toolbar .btn-primary {
    background: var(--c-text);
    border: 1px solid var(--c-text);
    color: var(--c-s2);
    box-shadow: 0 4px 14px -6px rgba(23, 23, 26, .55);
}
.kx-list[b-dp284bubs8]  .toolbar .btn-primary:hover:not(:disabled) { background: var(--c-text-dim); border-color: var(--c-text-dim); }

.kx-list[b-dp284bubs8]  .toolbar .btn-quiet {
    background: var(--c-s2);
    border: 1px solid var(--c-line-strong);
    color: var(--c-text);
}
.kx-list[b-dp284bubs8]  .toolbar .btn-quiet:hover:not(:disabled) { background: var(--c-s4); }
.kx-list[b-dp284bubs8]  .toolbar .btn:disabled { opacity: .5; cursor: default; }

.kx-list[b-dp284bubs8]  .filter { gap: 5px; }
.kx-list[b-dp284bubs8]  .filter label {
    font-size: .7rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: var(--track-label); color: var(--c-text-faint);
}
.kx-list[b-dp284bubs8]  .filter select {
    min-height: 42px; min-width: 170px;
    padding: 0 12px;
    border-radius: var(--r-sm);
    border: 1px solid var(--glass-line-hi);
    background: var(--c-s2);
    color: var(--c-text);
    font-family: var(--font); font-size: .9rem;
}
.kx-list[b-dp284bubs8]  .filter select:focus { outline: none; border-color: var(--c-accent); box-shadow: 0 0 0 3px var(--c-accent-wash); }

/* A hand-written view's toolbar: a caption wrapping its control, or a control on its own. */
.kx-list[b-dp284bubs8]  .toolbar > label {
    font-size: .7rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: var(--track-label); color: var(--c-text-faint);
}
.kx-list[b-dp284bubs8]  .toolbar :is(input, select).fld {
    min-height: 42px;
    padding: 0 12px;
    border-radius: var(--r-sm);
    border: 1px solid var(--glass-line-hi);
    background: var(--c-s2);
    color: var(--c-text);
    font-family: var(--font); font-size: .9rem;
}
.kx-list[b-dp284bubs8]  .toolbar :is(input, select).fld:focus { outline: none; border-color: var(--c-accent); box-shadow: 0 0 0 3px var(--c-accent-wash); }
.kx-list[b-dp284bubs8]  .toolbar > .muted { color: var(--c-text-dim); font-weight: 600; font-size: .86rem; }
.kx-list[b-dp284bubs8]  .toolbar .seg { border-color: var(--c-line-strong); border-radius: var(--r-sm); }
.kx-list[b-dp284bubs8]  .toolbar .seg button { min-height: 40px; background: var(--c-s2); color: var(--c-text-dim); font-family: var(--font); font-weight: 700; }
.kx-list[b-dp284bubs8]  .toolbar .seg button + button { border-left-color: var(--c-line-strong); }
.kx-list[b-dp284bubs8]  .toolbar .seg button.on { background: var(--c-accent-wash); color: var(--c-accent-text); }

.kx-list[b-dp284bubs8]  .countchip {
    align-self: center;
    font-family: var(--font); font-size: .82rem; font-weight: 700;
    color: var(--c-accent-text);
    background: var(--c-accent-wash);
    border: 1px solid color-mix(in srgb, var(--c-accent) 34%, transparent);
    border-radius: var(--r-pill);
    padding: 6px 13px;
}

/* A row of counts over the table (Promotions: running, approved, drafts, paused), as small glass
   tiles. The office draws .stats for its dark header band, which this box is not. */
.kx-list[b-dp284bubs8]  .stats {
    flex: none;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px;
    padding: 0 16px 12px;
}
.kx-list[b-dp284bubs8]  .stat {
    padding: 10px 14px;
    border: 1px solid var(--glass-line);
    border-radius: var(--r-md);
    background: var(--glass-fill-hi);
    color: var(--c-text-dim);
    font-size: .8rem; font-weight: 600;
}
.kx-list[b-dp284bubs8]  .stat .num {
    text-align: left;
    font-size: 1.5rem; font-weight: 800; line-height: 1.15;
    color: var(--c-text);
}

/* ---- the grid ------------------------------------------------------------------------------
   The one part that scrolls. It shrinks to fit the box when the table is long and keeps its own
   height when it is short, so an empty-state message sits under the column headings rather than
   at the bottom of the window. */

.kx-list[b-dp284bubs8]  .tablewrap {
    flex: 0 1 auto;
    min-height: 0;
    overflow: auto;
    margin: 0 16px;
    background: var(--c-s2);
    border: 1px solid var(--glass-line-hi);
    border-radius: var(--r-md);
    box-shadow: 0 10px 30px -18px rgba(15, 23, 42, .45);
}

.kx-list[b-dp284bubs8]  table { width: 100%; font-size: .9rem; border-collapse: separate; border-spacing: 0; }

/* The catalogue's grid pins its headings already; a hand-written view's plain table does not. */
.kx-list[b-dp284bubs8]  table thead th {
    position: sticky; top: 0; z-index: 2;
    text-align: left;
    white-space: nowrap;
}
.kx-list[b-dp284bubs8]  table :is(th, td).num { text-align: right; }

/* The theme's accent wash, as on the Menu Designer's add buttons and selected rows. Mixed onto the
   card's own white rather than laid over it, so it stays opaque: the header has to hold its own
   against the rows scrolling beneath it. */
.kx-list[b-dp284bubs8]  table thead tr:first-child th {
    height: 42px;
    padding: 0 16px;
    background: color-mix(in srgb, var(--c-accent) 14%, var(--c-s2));
    color: var(--c-accent-text);
    font-size: .72rem; font-weight: 800; letter-spacing: var(--track-label);
    border-bottom: 1px solid color-mix(in srgb, var(--c-accent) 34%, transparent);
}
.kx-list[b-dp284bubs8]  table thead tr:first-child th:hover:not(.plain) { background: color-mix(in srgb, var(--c-accent) 24%, var(--c-s2)); }
.kx-list[b-dp284bubs8]  table th .arrow { color: var(--c-accent-text); }

.kx-list[b-dp284bubs8]  table tr.searchrow th {
    top: 42px;
    padding: 8px 10px;
    background: var(--c-s2);
    border-bottom: 1px solid var(--glass-line-hi);
}
.kx-list[b-dp284bubs8]  table tr.searchrow input {
    min-height: 34px;
    padding: 0 10px;
    border-radius: 8px;
    border: 1px solid var(--glass-line-hi);
    background: var(--well-fill);
    color: var(--c-text);
    font-family: var(--font); font-size: .84rem;
}
.kx-list[b-dp284bubs8]  table tr.searchrow input:focus {
    outline: none;
    background: var(--c-s2);
    border-color: var(--c-accent);
    box-shadow: 0 0 0 3px var(--c-accent-wash);
}

.kx-list[b-dp284bubs8]  table td {
    padding: 11px 16px;
    border-bottom: 1px solid var(--glass-line);
    color: var(--c-text);
}
.kx-list[b-dp284bubs8]  table tbody tr:nth-child(even) td { background: var(--well-fill); }
.kx-list[b-dp284bubs8]  table tbody tr:hover td { background: var(--c-accent-wash); }
.kx-list[b-dp284bubs8]  table tbody tr:last-child td { border-bottom: none; }
/* Not the row's actions: they still work on an inactive row, and dimmed they looked switched off (AR-68). */
.kx-list[b-dp284bubs8]  table tbody tr.inactive td:not(.actions) { opacity: .6; }

/* A heading row inside the table - Add-ons draws one per stage - as the designer's group titles. */
.kx-list[b-dp284bubs8]  table tbody tr.group-row th,
.kx-list[b-dp284bubs8]  table tbody tr:hover.group-row th {
    padding: 9px 16px;
    text-align: left;
    background: var(--well-fill-strong);
    color: var(--c-accent-text);
    font-size: .74rem; font-weight: 800; text-transform: uppercase; letter-spacing: var(--track-label);
    border-bottom: 1px solid var(--glass-line-hi);
}

/* A negative stock balance (app.css, row-bad) stays findable by eye through the stripes. */
.kx-list[b-dp284bubs8]  table tbody tr.row-bad td { background: color-mix(in srgb, var(--c-stop) 10%, var(--c-s2)); }
.kx-list[b-dp284bubs8]  table tbody tr.row-bad td.num { color: var(--c-stop-text); font-weight: 700; }

/* A row's Open / Edit button in a hand-written view, as the designer's small buttons. */
.kx-list[b-dp284bubs8]  table td .btn {
    min-height: 34px; padding: 0 14px;
    border-radius: 8px;
    border: 1px solid var(--c-line-strong);
    background: var(--c-s2);
    color: var(--c-text);
    font-family: var(--font); font-size: .82rem; font-weight: 700;
}
.kx-list[b-dp284bubs8]  table td .btn:hover:not(:disabled) { background: var(--c-s4); }
.kx-list[b-dp284bubs8]  table td .btn-primary { background: var(--c-text); border-color: var(--c-text); color: var(--c-s2); }

.kx-list[b-dp284bubs8]  table td .mono {
    font-size: .76rem; font-weight: 700;
    color: var(--c-text-dim);
    background: var(--well-fill);
    padding: 3px 9px;
    border-radius: 6px;
    letter-spacing: .3px;
}
.kx-list[b-dp284bubs8]  table mark { background: var(--c-accent-wash); color: inherit; border-radius: 3px; padding: 0 1px; box-shadow: inset 0 -2px 0 var(--c-accent); }

.kx-list[b-dp284bubs8]  .pill {
    font-size: .74rem; font-weight: 700; letter-spacing: .02em; text-transform: none;
    padding: 3px 11px;
    border-radius: var(--r-pill);
    border: none;
}
.kx-list[b-dp284bubs8]  .pill-good { color: var(--c-go-text); background: color-mix(in srgb, var(--c-go) 16%, transparent); }
.kx-list[b-dp284bubs8]  .pill-quiet { color: var(--c-text-faint); background: var(--well-fill-strong); }

/* The row's own buttons: edit in blue and delete in red, always at full strength, so which is
   which is read from across the screen rather than from the tooltip. */
.kx-list[b-dp284bubs8]  .iconbtn {
    width: 34px; height: 34px;
    border-radius: 8px;
    border: 1px solid transparent;
    color: var(--c-text-dim);
    transition: background-color .12s ease, border-color .12s ease;
}
.kx-list[b-dp284bubs8]  .iconbtn.edit { color: var(--kx-edit); }
.kx-list[b-dp284bubs8]  .iconbtn.danger { color: var(--c-stop); }
.kx-list[b-dp284bubs8]  .iconbtn:hover:not(:disabled) { background: var(--c-s4); color: var(--c-text); border-color: var(--c-line-strong); }
.kx-list[b-dp284bubs8]  .iconbtn.edit:hover:not(:disabled) {
    background: color-mix(in srgb, var(--kx-edit) 12%, var(--c-s2));
    color: var(--kx-edit);
    border-color: color-mix(in srgb, var(--kx-edit) 40%, transparent);
}
.kx-list[b-dp284bubs8]  .iconbtn.danger:hover:not(:disabled) {
    background: color-mix(in srgb, var(--c-stop) 12%, var(--c-s2));
    color: var(--c-stop);
    border-color: color-mix(in srgb, var(--c-stop) 40%, transparent);
}
.kx-list[b-dp284bubs8]  .iconbtn:disabled { opacity: .3; cursor: default; }

.kx-list[b-dp284bubs8]  .loading,
.kx-list[b-dp284bubs8]  .emptystate { flex: none; color: var(--c-text-faint); }
.kx-list[b-dp284bubs8]  .emptystate b { color: var(--c-text); }
.kx-list[b-dp284bubs8]  .emptystate .btn {
    min-height: 40px; padding: 0 16px;
    border-radius: var(--r-sm);
    border: 1px solid var(--c-line-strong);
    background: var(--c-s2);
    color: var(--c-text);
    font-weight: 700;
}

/* ---- footer: the count and the pages, on the theme's glass as the Menu Designer's bars ------ */

.kx-list[b-dp284bubs8]  .gridfoot {
    flex: none;
    margin-top: auto;
    min-height: 56px;
    padding: 8px 16px;
    background: var(--glass-fill-hi);
    border-top: 1px solid var(--glass-line);
    color: var(--c-text-dim);
    font-size: .84rem; font-weight: 700;
}

.kx-list[b-dp284bubs8]  .pager { gap: 6px; }
.kx-list[b-dp284bubs8]  .pager button {
    min-width: 40px; min-height: 38px; padding: 0 13px;
    border: 1px solid var(--c-line-strong);
    border-radius: var(--r-sm);
    background: var(--c-s2);
    color: var(--c-text);
    font-family: var(--font); font-size: .82rem; font-weight: 700;
}
.kx-list[b-dp284bubs8]  .pager button:hover:not(:disabled) { background: var(--c-s4); }
.kx-list[b-dp284bubs8]  .pager button:disabled { opacity: .4; cursor: default; }
.kx-list[b-dp284bubs8]  .pager > span {
    padding: 6px 13px !important;
    border-radius: var(--r-pill);
    background: var(--c-accent-wash);
    color: var(--c-accent-text);
    font-weight: 700;
    white-space: nowrap;
}

/* ---- the delete question, on the kiosk's dialog shell -------------------------------------- */

.kx-list[b-dp284bubs8]  .scrim {
    z-index: 100;
    background: var(--scrim);
    -webkit-backdrop-filter: var(--scrim-blur);
    backdrop-filter: var(--scrim-blur);
}
.kx-list[b-dp284bubs8]  .scrim .dlg {
    width: min(460px, 96vw);
    overflow: hidden;
    background: var(--modal-fill);
    border: 1px solid var(--glass-line-hi);
    border-radius: var(--r-lg);
    -webkit-backdrop-filter: var(--modal-blur);
    backdrop-filter: var(--modal-blur);
    box-shadow: var(--shadow-modal), var(--glass-edge);
    color: var(--c-text);
}
.kx-list[b-dp284bubs8]  .scrim .dlg-bar { padding: 16px 18px; background: transparent; border-bottom: 1px solid var(--glass-line); }
.kx-list[b-dp284bubs8]  .scrim .dlg-title { font-weight: 800; font-size: 1.05rem; color: var(--c-text); }
.kx-list[b-dp284bubs8]  .scrim .dlg-body p { color: var(--c-text-dim) !important; line-height: 1.5; }
.kx-list[b-dp284bubs8]  .scrim .dlg-body p strong { color: var(--c-text); }
.kx-list[b-dp284bubs8]  .scrim .dlg-foot { gap: 10px; padding: 14px 18px; background: transparent; border-top: 1px solid var(--glass-line); }
.kx-list[b-dp284bubs8]  .scrim .dlg-foot .btn {
    min-height: 44px; padding: 0 18px;
    border-radius: var(--r-sm);
    font-weight: 700;
}
.kx-list[b-dp284bubs8]  .scrim .dlg-foot .btn-quiet { background: var(--c-s2); border: 1px solid var(--c-line-strong); color: var(--c-text); }
.kx-list[b-dp284bubs8]  .scrim .dlg-foot .btn-danger { background: var(--c-stop); border: 1px solid var(--c-stop); color: #fff; }

@media (max-width: 900px) {
    .kx-list[b-dp284bubs8] { height: auto; min-height: 0; }
    .kx-list[b-dp284bubs8]  .tablewrap { max-height: 70vh; }
}

/* ---- the catalogue's lists (RefListView's table.grid), made easier to read ----------------------
   Owner, 22 October 2026 ("improve the list page design"). Only the catalogue's grid: a
   hand-written view's table keeps the rules above. A "No" is the quiet case and reads as plain
   faint text, so the "Yes" cells stand out down a column; the column searches' placeholder is a
   hint, not a value; the code column's chip sits at its own width. */
.kx-list[b-dp284bubs8]  table.grid td .pill-quiet {
    background: transparent;
    color: var(--c-text-faint);
    font-weight: 600;
    padding-left: 0;
    padding-right: 0;
}
.kx-list[b-dp284bubs8]  table.grid tr.searchrow input::placeholder { color: var(--c-text-faint); font-weight: 500; }
.kx-list[b-dp284bubs8]  table.grid td .mono { display: inline-block; }
.kx-list[b-dp284bubs8]  table.grid td { padding-top: 9px; padding-bottom: 9px; }
.kx-list[b-dp284bubs8]  table.grid td.actions .iconbtn { opacity: .7; }
.kx-list[b-dp284bubs8]  table.grid tbody tr:hover td.actions .iconbtn,
.kx-list[b-dp284bubs8]  table.grid td.actions .iconbtn:focus-visible { opacity: 1; }

/* A select's text sat at the top of its box (owner, 22 October 2026): aeretail.css's .fld - meant
   for a label wrapping its control - makes a select.fld a column, and Chromium lays the select's own
   text out by it. A row, at a set height, centres the text as in the inputs beside it. */
.kx-list[b-dp284bubs8]  .toolbar select.fld,
.kx-list[b-dp284bubs8]  .filter select,
.kx-panel[b-dp284bubs8]  select.fld,
.kx-panel[b-dp284bubs8]  .fld select {
    height: 42px;
    padding-top: 0;
    padding-bottom: 0;
    line-height: normal;
    flex-direction: row;
    align-items: center;
}
/* _content/AERetail.WebOffice/Components/Views/LanesView.razor.rz.scp.css */
/* Lanes and devices, in the list frame's own tokens: each device a small chip in its lane's row. */

.ln-devices[b-8ihqxelhe6] { display: flex; flex-wrap: wrap; gap: 4px; }

.ln-device[b-8ihqxelhe6] {
    display: inline-flex;
    flex-direction: column;
    padding: 3px 8px;
    border: 1px solid var(--glass-line-hi);
    border-radius: 6px;
    background: var(--c-accent-wash);
    font-size: 12px;
    line-height: 1.3;
}
.ln-device strong[b-8ihqxelhe6] { font-weight: 600; color: var(--c-text); }
.ln-device .muted[b-8ihqxelhe6] { font-size: 11px; }
.ln-device.off[b-8ihqxelhe6] { opacity: .55; }

.ln-check[b-8ihqxelhe6] { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--c-text-dim); cursor: pointer; }
/* _content/AERetail.WebOffice/Components/Views/PromotionsView.razor.rz.scp.css */
/* Promotions, drawn as the demo draws it (demo\AERetail.WebOffice.Demo, Pages\Promotions.razor.css) in the office's
   own theme: its surfaces, ink and amber accent (app.css, office-light), as Global Changes is. The page brings its own
   panels, fields, grid, chips and pills under po- names, so nothing here reaches another screen. */

.po[b-1igf449hge] {
    /* What the office's tokens do not have. The accent is a light amber, so text in it uses the dark amber the
       office uses for words on its accent, which reads on white. */
    --po-accent-text: #8A5A02;
    --po-accent-tint-2: rgba(245, 165, 36, .26);
    --po-warn: #B54708;  --po-warn-tint: #FEF3E6;
    --po-info: #175CD3;  --po-info-tint: #EEF4FF;
    --po-hover: var(--surface-2);
    --po-shadow-pop: 0 4px 8px rgba(16, 24, 40, .06), 0 16px 36px -12px rgba(16, 24, 40, .22);
    --po-r: 10px;
    --po-r-ctl: 7px;
    font-size: 14px;
    color: var(--ink);
}

/* ── shared pieces ─────────────────────────────────────────────────────────────────────────────────────────── */
.po-panel[b-1igf449hge] { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--po-r); min-width: 0; }
.po-spacer[b-1igf449hge] { flex: 1; }
.po-muted[b-1igf449hge] { color: var(--ink-2); }
.po-faint[b-1igf449hge] { color: var(--ink-3); }
.po-small[b-1igf449hge] { font-size: 12px; margin: 2px 0 0; }
.po-num[b-1igf449hge] { font-variant-numeric: tabular-nums; text-align: right; }
.po-mono[b-1igf449hge] { font-family: "JetBrains Mono", ui-monospace, Consolas, monospace; font-size: 12.5px; }
.po-vh[b-1igf449hge] {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.po-ico[b-1igf449hge] { flex: none; display: inline-block; vertical-align: -2px; }
.po-loading[b-1igf449hge] { display: flex; align-items: center; gap: 10px; padding: 24px 18px; color: var(--ink-2); }
.po-flash[b-1igf449hge] {
    display: flex; align-items: center; gap: 8px; margin-bottom: 12px; padding: 8px 8px 8px 14px; border-radius: var(--po-r-ctl);
    background: var(--good-tint); color: var(--good); font-weight: 500;
}
.po-flash > span[b-1igf449hge], .po-flash[b-1igf449hge] { justify-content: space-between; }
.po-flash-bad[b-1igf449hge] { background: var(--bad-tint); color: var(--bad); }

.po .btn[b-1igf449hge] { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.po-btn-sm[b-1igf449hge] { height: 30px; padding: 0 10px; font-size: 13px; }
.po-btn-text[b-1igf449hge] { border-color: transparent !important; background: transparent !important; color: var(--po-accent-text); box-shadow: none !important; }
.po-btn-text:hover:not(:disabled)[b-1igf449hge] { background: var(--brand-tint) !important; }
.po-btn-danger[b-1igf449hge] { border-color: transparent !important; background: transparent !important; color: var(--bad); box-shadow: none !important; }
.po-btn-danger:hover:not(:disabled)[b-1igf449hge] { background: var(--bad-tint) !important; }
.po button:disabled[b-1igf449hge] { opacity: .45; cursor: not-allowed; }

.po-iconbtn[b-1igf449hge] {
    width: 32px; height: 32px; display: inline-grid; place-items: center; border: 0; border-radius: 8px;
    background: transparent; color: inherit; cursor: pointer; flex: none;
}
.po-iconbtn:hover:not(:disabled)[b-1igf449hge] { background: var(--surface-3); }

.po-ctl[b-1igf449hge] {
    height: 36px; padding: 0 10px; border: 1px solid var(--rule-2); border-radius: var(--po-r-ctl);
    background: var(--surface); color: var(--ink); font: inherit; min-width: 0; width: 100%;
}
.po-ctl:hover[b-1igf449hge] { border-color: var(--ink-3); }
.po-ctl:focus[b-1igf449hge] { border-color: var(--brand); box-shadow: 0 0 0 3px var(--po-accent-tint-2); outline: none; }
.po-ctl:disabled[b-1igf449hge] { background: var(--surface-2); color: var(--ink-2); }
select.po-ctl[b-1igf449hge] { padding-right: 28px; }

.po-fld[b-1igf449hge] { display: grid; gap: 5px; min-width: 0; align-content: start; }
.po-fld > span[b-1igf449hge] { font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.po-fld small[b-1igf449hge] { color: var(--ink-3); font-size: 12px; }
.po-check[b-1igf449hge] { display: inline-flex; gap: 8px; align-items: center; cursor: pointer; }
.po-check input[b-1igf449hge] { width: 16px; height: 16px; accent-color: var(--brand); }
.po-formgrid[b-1igf449hge] { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px 16px; }

.po-search[b-1igf449hge] { position: relative; flex: 0 1 300px; min-width: 180px; }
.po-search .po-ico[b-1igf449hge] { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--ink-3); pointer-events: none; }
.po-search .po-ctl[b-1igf449hge] { padding-left: 34px; }

.po-fchips[b-1igf449hge] { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.po-fchip[b-1igf449hge] {
    height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--rule-2); background: var(--surface);
    color: var(--ink-2); font-weight: 500; font-size: 13px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
}
.po-fchip:hover:not(:disabled)[b-1igf449hge] { background: var(--po-hover); }
.po-fchip[aria-pressed="true"][b-1igf449hge] { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.po-fchip .n[b-1igf449hge] { font-size: 11.5px; opacity: .8; }

.po-pill[b-1igf449hge] {
    display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: 999px;
    font-size: 12px; font-weight: 600; white-space: nowrap; background: var(--surface-3); color: var(--ink-2);
}
.po-pill[b-1igf449hge]::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.po-pill.good[b-1igf449hge] { background: var(--good-tint); color: var(--good); }
.po-pill.warn[b-1igf449hge] { background: var(--po-warn-tint); color: var(--po-warn); }
.po-pill.info[b-1igf449hge] { background: var(--po-info-tint); color: var(--po-info); }
.po-pill.brand[b-1igf449hge] { background: var(--brand-tint); color: var(--po-accent-text); }

/* ── the list ──────────────────────────────────────────────────────────────────────────────────────────────── */
.po-listhead[b-1igf449hge] { display: flex; align-items: flex-end; gap: 16px; margin-bottom: 14px; }
.po-listhead > div[b-1igf449hge] { flex: 1; }
.po-listhead h2[b-1igf449hge], .po-head h2[b-1igf449hge] { font-size: 1.35rem; font-weight: 600; margin: 0 0 2px; }
.po-listhead p[b-1igf449hge], .po-head p[b-1igf449hge] { margin: 0; font-size: 13.5px; }

.po-toolbar[b-1igf449hge] { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--rule); }
.po-count[b-1igf449hge] { color: var(--ink-2); font-size: 13px; white-space: nowrap; }

.po-grid-wrap[b-1igf449hge] { overflow-x: auto; }
table.po-grid[b-1igf449hge] { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; font-variant-numeric: tabular-nums; }
.po-grid th[b-1igf449hge] {
    height: 36px; padding: 0 8px; text-align: left; white-space: nowrap;
    background: var(--surface-2); color: var(--ink-2); font-weight: 600; border-bottom: 1px solid var(--rule);
}
.po-grid td[b-1igf449hge] { height: 46px; padding: 6px 8px; border-bottom: 1px solid var(--rule); vertical-align: middle; }
.po-grid th:first-child[b-1igf449hge], .po-grid td:first-child[b-1igf449hge] { padding-left: 16px; }
.po-grid th:last-child[b-1igf449hge], .po-grid td:last-child[b-1igf449hge] { padding-right: 16px; }
.po-grid tbody tr:last-child td[b-1igf449hge] { border-bottom: 0; }
.po-grid tbody tr:hover td[b-1igf449hge] { background: var(--po-hover); }
.po-grid th.po-num[b-1igf449hge] { text-align: right; }
.po-clickable[b-1igf449hge] { cursor: pointer; }
.po-rowlink[b-1igf449hge] { border: 0; background: none; padding: 0; color: var(--ink); font-weight: 600; cursor: pointer; text-align: left; font: inherit; }
.po-rowlink:hover[b-1igf449hge] { color: var(--po-accent-text); text-decoration: underline; }
.po-sub[b-1igf449hge] { display: block; color: var(--ink-2); font-size: 12px; margin-top: 2px; }
.po-warn[b-1igf449hge] { color: var(--po-warn) !important; }
.po-on[b-1igf449hge] { max-width: 260px; }
.po-kindtag[b-1igf449hge] {
    display: inline-block; margin-right: 6px; padding: 0 6px; border-radius: 4px; font-size: 11px; font-weight: 600;
    background: var(--brand-tint); color: var(--po-accent-text);
}
.po-pager[b-1igf449hge] { display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding: 8px 16px; border-top: 1px solid var(--rule); color: var(--ink-2); font-size: 13px; }
.po-empty[b-1igf449hge] { padding: 40px 16px; text-align: center; color: var(--ink-2); }
.po-empty b[b-1igf449hge] { display: block; color: var(--ink); font-size: 15px; margin-bottom: 4px; }

/* ── the editor ────────────────────────────────────────────────────────────────────────────────────────────── */
.po-top[b-1igf449hge] { margin: -4px 0 4px -8px; }
.po-head[b-1igf449hge] { margin-bottom: 16px; }
.po-title[b-1igf449hge] { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 2px; }
.po-title h2[b-1igf449hge] { margin: 0; }

.po-split[b-1igf449hge] { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; align-items: start; }
.po-main[b-1igf449hge] { display: grid; gap: 14px; min-width: 0; }
.po-side[b-1igf449hge] { position: sticky; top: 16px; }

.po-card[b-1igf449hge] { padding: 16px 18px 18px; }
.po-card h3[b-1igf449hge] { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; margin: 0 0 14px; }
.po-step[b-1igf449hge] {
    width: 24px; height: 24px; border-radius: 50%; display: inline-grid; place-items: center; flex: none;
    background: var(--brand); color: var(--brand-ink); font-size: 12.5px; font-weight: 700;
}

.po-lock[b-1igf449hge] {
    display: flex; gap: 10px; align-items: flex-start; padding: 10px 14px; border-radius: var(--po-r);
    background: var(--po-info-tint); font-size: 13.5px;
}
.po-lock .po-ico[b-1igf449hge] { color: var(--po-info); margin-top: 2px; }
.po-linklike[b-1igf449hge] { border: 0; background: none; padding: 0; color: var(--po-info); font: inherit; text-decoration: underline; cursor: pointer; }

/* 1. the kinds: a tile each, the example under the name so the choice is made by recognising it. */
.po-kinds[b-1igf449hge] { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.po-kind[b-1igf449hge] {
    display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 10px; row-gap: 2px;
    align-items: start; align-content: start; text-align: left; padding: 12px; min-height: 64px; cursor: pointer; font: inherit;
    color: var(--ink); border: 1px solid var(--rule-2); border-radius: var(--po-r); background: var(--surface);
}
.po-kind:hover:not(:disabled)[b-1igf449hge] { background: var(--po-hover); }
.po-kind b[b-1igf449hge] { font-size: 13.5px; font-weight: 600; }
.po-kind > span:last-child[b-1igf449hge] { grid-column: 2; font-size: 12px; color: var(--ink-2); }
.po-kind-ic[b-1igf449hge] {
    grid-row: 1 / span 2; width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center;
    background: var(--surface-3); color: var(--ink-2);
}
.po-kind[aria-pressed="true"][b-1igf449hge] { border: 2px solid var(--brand); padding: 11px; background: var(--brand-tint); }
.po-kind[aria-pressed="true"] .po-kind-ic[b-1igf449hge] { background: var(--brand); color: var(--brand-ink); }
.po .po-kind:disabled[b-1igf449hge] { cursor: default; opacity: .5; }
.po .po-kind[aria-pressed="true"]:disabled[b-1igf449hge] { opacity: 1; }
.po-kind:focus-visible[b-1igf449hge] { outline: 2px solid var(--brand); outline-offset: 2px; }

/* 2. the deal, as a sentence with its figures in boxes. */
.po-name[b-1igf449hge] { max-width: 520px; margin-bottom: 14px; }
.po-sentence[b-1igf449hge] {
    border: 0; margin: 0; padding: 14px 16px; border-radius: var(--po-r); background: var(--surface-2);
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 15px; min-width: 0;
}
.po-n[b-1igf449hge] { width: 84px; text-align: right; font-size: 15px; font-weight: 600; }
.po-w[b-1igf449hge] { width: auto; min-width: 120px; }
.po-gift[b-1igf449hge] { flex: 1 1 320px; }
.po-tiers[b-1igf449hge] { display: grid; gap: 8px; width: 100%; }
.po-tier[b-1igf449hge] { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.po-tiers > .btn[b-1igf449hge] { justify-self: start; }

/* 3. the items: chips for what is chosen, one search for anything. */
.po-plain[b-1igf449hge] { border: 0; margin: 0; padding: 0; min-width: 0; }
.po-picker[b-1igf449hge] { display: grid; gap: 10px; }
.po-chips[b-1igf449hge] { display: flex; flex-wrap: wrap; gap: 6px; min-height: 32px; align-items: center; }
.po-chip[b-1igf449hge] {
    display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 4px 0 10px; border-radius: 999px;
    background: var(--brand-tint); color: var(--ink); font-size: 13px;
}
.po-chip button[b-1igf449hge] {
    width: 22px; height: 22px; border: 0; border-radius: 50%; background: none; color: var(--ink-2); cursor: pointer;
    display: grid; place-items: center;
}
.po-chip button:hover[b-1igf449hge] { background: var(--po-accent-tint-2); color: var(--ink); }
.po-chip-out[b-1igf449hge] { background: var(--bad-tint); text-decoration: line-through; text-decoration-color: var(--bad); }
.po-chip-out .po-chip-kind[b-1igf449hge] { color: var(--bad); }
.po-chip-kind[b-1igf449hge] { font-size: 11px; font-weight: 600; color: var(--ink-2); text-transform: uppercase; letter-spacing: .03em; }

.po-find[b-1igf449hge] { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; }
.po-finder[b-1igf449hge] { flex: 1 1 320px; display: grid; gap: 8px; min-width: 0; }
.po-search-wide[b-1igf449hge] { flex: none; max-width: none; }
.po-seg[b-1igf449hge] { display: inline-flex; border: 1px solid var(--rule-2); border-radius: var(--po-r-ctl); overflow: hidden; flex: none; }
.po-seg button[b-1igf449hge] { height: 34px; padding: 0 12px; border: 0; background: var(--surface); color: var(--ink-2); font: inherit; font-size: 13px; cursor: pointer; }
.po-seg button + button[b-1igf449hge] { border-left: 1px solid var(--rule-2); }
.po-seg button[aria-pressed="true"][b-1igf449hge] { background: var(--brand); color: var(--brand-ink); font-weight: 600; }

.po-found[b-1igf449hge] {
    display: grid; border: 1px solid var(--rule); border-radius: var(--po-r); background: var(--surface);
    box-shadow: var(--po-shadow-pop); max-width: 600px; overflow: hidden;
}
.po-found > .po-muted[b-1igf449hge] { padding: 10px 12px; }
.po-found button[b-1igf449hge] {
    display: flex; align-items: center; gap: 8px; padding: 9px 12px; border: 0; border-bottom: 1px solid var(--rule);
    background: none; text-align: left; font: inherit; font-size: 13.5px; color: var(--ink); cursor: pointer;
}
.po-found button:last-child[b-1igf449hge] { border-bottom: 0; }
.po-found button:hover[b-1igf449hge], .po-found button:focus-visible[b-1igf449hge] { background: var(--po-hover); outline: none; }
.po-found .po-muted[b-1igf449hge] { margin-left: auto; font-size: 12.5px; }

/* 4. when and where */
.po-when[b-1igf449hge] { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: end; margin-bottom: 14px; }
.po-when .po-fld[b-1igf449hge] { width: 180px; }
.po-noend[b-1igf449hge] { height: 36px; }
.po-lbl[b-1igf449hge] { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink-2); margin: 0 0 6px; padding: 0; }
.po-gap[b-1igf449hge] { margin-top: 14px; }
.po-sep[b-1igf449hge] { width: 1px; height: 22px; background: var(--rule-2); margin: 0 4px; }
.po-day[b-1igf449hge] { min-width: 46px; justify-content: center; }
.po-radios[b-1igf449hge] { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; font-size: 13.5px; }
.po-radios label[b-1igf449hge] { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.po-radios input[b-1igf449hge] { accent-color: var(--brand); width: 16px; height: 16px; }
.po-radios .po-lbl[b-1igf449hge] { margin: 0; }
.po-time[b-1igf449hge] { width: 130px; }
.po-places[b-1igf449hge] { display: grid; gap: 6px; margin-top: 12px; padding: 12px; border-radius: var(--po-r); background: var(--surface-2); }
.po-places .po-lbl[b-1igf449hge] { margin: 4px 0 0; }
.po-hint[b-1igf449hge] { margin: 8px 0 0; font-size: 12.5px; color: var(--ink-3); }

/* More options, folded. */
.po-more summary[b-1igf449hge] {
    display: flex; align-items: center; gap: 8px; padding: 14px 18px; cursor: pointer; font-weight: 600; font-size: 14px;
    list-style: none;
}
.po-more summary[b-1igf449hge]::-webkit-details-marker { display: none; }
.po-more summary[b-1igf449hge]::after { content: "▸"; margin-left: auto; color: var(--ink-3); }
.po-more[open] summary[b-1igf449hge]::after { content: "▾"; }
.po-more summary .po-muted[b-1igf449hge] { font-weight: 400; font-size: 13px; }
.po-more-body[b-1igf449hge] { display: grid; gap: 16px; padding: 0 18px 18px; }
.po-checks[b-1igf449hge] { display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 13.5px; }

/* ── the summary ───────────────────────────────────────────────────────────────────────────────────────────── */
.po-sum[b-1igf449hge] { padding: 16px 18px; display: grid; gap: 14px; }
.po-sum h3[b-1igf449hge] { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); margin: 0; }
.po-say[b-1igf449hge] { margin: 0; font-size: 15.5px; line-height: 1.45; font-weight: 500; }

.po-ex[b-1igf449hge] { border: 1px dashed var(--rule-2); border-radius: var(--po-r); padding: 10px 12px; background: var(--surface-2); }
.po-ex-cap[b-1igf449hge] { font-size: 12px; color: var(--ink-3); margin-bottom: 4px; }
.po-ex-t[b-1igf449hge] { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.po-ex-t td[b-1igf449hge] { padding: 3px 0; }
.po-ex-t .po-num[b-1igf449hge] { font-family: "JetBrains Mono", ui-monospace, Consolas, monospace; font-size: 12.5px; }
.po-save td[b-1igf449hge] { color: var(--good); }
.po-pay td[b-1igf449hge] { border-top: 1px solid var(--rule-2); padding-top: 6px; font-weight: 700; }

.po-todo[b-1igf449hge] { padding: 10px 12px; border-radius: var(--po-r); background: var(--po-warn-tint); font-size: 13px; }
.po-todo b[b-1igf449hge] { color: var(--po-warn); }
.po-todo ul[b-1igf449hge] { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 2px; }
.po-ready[b-1igf449hge] { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--good); font-weight: 600; font-size: 13.5px; }

.po-acts[b-1igf449hge] { display: grid; gap: 8px; }
.po-acts > .btn[b-1igf449hge] { width: 100%; }
.po-acts-row[b-1igf449hge] { display: flex; align-items: center; gap: 4px; margin: 0 -8px; }

@media (max-width: 1200px) {
    .po-kinds[b-1igf449hge] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
    .po-split[b-1igf449hge] { grid-template-columns: minmax(0, 1fr); }
    .po-side[b-1igf449hge] { position: static; }
}
@media (max-width: 560px) {
    .po-kinds[b-1igf449hge] { grid-template-columns: minmax(0, 1fr); }
    .po-when .po-fld[b-1igf449hge] { width: 100%; }
}
/* _content/AERetail.WebOffice/Components/Views/ReportsView.razor.rz.scp.css */
/* The Reports page: the list and the filters. The report itself is drawn on paper by
   ReportViewer.razor.css. Drawn in the tokens KxList hands its panel (surface, ink, rule, good,
   bad and the accent), as Sales Summary is, so the page follows the office's light and dark
   themes and writes no colour of its own.

   ONE SCROLL PER PANE (owner, 28 October 2026: "not responsive, too much margin everywhere").
   KxList sizes its box for a screen with a tab strip and, as a panel, scrolls the box itself; this
   page has no tab strip and two panes that each scroll, so the box is sized to the window here and
   does not scroll, and the list and the report each scroll on their own. Below 860px the panes
   stack and the page scrolls as a page. */

/* The window below the top bar and the page's own padding (58 + 22 + 22). */
.rp-page[b-u7g04pfde2]  .kx-list.kx-panel {
    height: calc(100vh - 102px);
    min-height: 420px;
    overflow: hidden;
    padding-bottom: 0;
}

.rp-shell[b-u7g04pfde2] {
    display: grid;
    grid-template-columns: 248px minmax(0, 1fr);
    height: 100%;
}

/* Thin scrollbars: two panes side by side with the system's wide ones read as three columns. */
.rp-nav[b-u7g04pfde2], .rp-main[b-u7g04pfde2] { overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--rule-2) transparent; }

/* ---- the list of reports ---------------------------------------------------------------- */
.rp-nav[b-u7g04pfde2] {
    min-height: 0;
    padding: 10px 8px 12px 10px;
    border-right: 1px solid var(--rule);
}

.rp-find[b-u7g04pfde2] { display: block; margin-bottom: 8px; }
/* Specific enough to beat KxList's panel fields (42px), which suit a form, not a filter bar. */
.rp-nav .rp-find input.fld[b-u7g04pfde2] { width: 100%; height: 36px; min-height: 36px; }

/* The groups, an accordion: one open at a time (owner, 27 October 2026), each heading a button
   that says how many reports it holds and whether it is open, with a turning chevron as well as
   aria-expanded, so open is not said by the chevron alone. */
.rp-acc + .rp-acc[b-u7g04pfde2] { margin-top: 2px; }
.rp-acc h2[b-u7g04pfde2] { margin: 0; font: inherit; }

.rp-acc-head[b-u7g04pfde2] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 34px;
    padding: 6px 8px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: none;
    font: inherit;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .08em;
    line-height: 1.25;
    text-transform: uppercase;
    color: var(--ink-2);
    text-align: left;
    cursor: pointer;
}
.rp-acc-head:hover[b-u7g04pfde2] { background: var(--surface-3); color: var(--ink); }
.rp-acc-head:focus-visible[b-u7g04pfde2] { outline: 2px solid var(--h-accent); outline-offset: 1px; }
.rp-acc.is-open .rp-acc-head[b-u7g04pfde2] { background: var(--surface-2); border-color: var(--rule); color: var(--ink); }

.rp-acc-chev[b-u7g04pfde2] { flex: none; width: 10px; font-size: 14px; line-height: 1; transition: transform .15s ease; }
.rp-acc.is-open .rp-acc-chev[b-u7g04pfde2] { transform: rotate(90deg); }
.rp-acc-name[b-u7g04pfde2] { flex: 1 1 auto; min-width: 0; }
.rp-acc-count[b-u7g04pfde2] {
    flex: none;
    min-width: 20px;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--surface-3);
    font-size: 10.5px;
    letter-spacing: 0;
    text-align: center;
    color: var(--ink-3);
}

.rp-acc ul[b-u7g04pfde2] { list-style: none; margin: 2px 0 6px; padding: 0 0 0 8px; }

.rp-nav-item[b-u7g04pfde2] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 30px;
    padding: 4px 8px;
    border: 0;
    border-left: 3px solid transparent;
    border-radius: 6px;
    background: none;
    font: inherit;
    font-size: 13px;
    line-height: 1.3;
    color: var(--ink);
    text-align: left;
    cursor: pointer;
}
.rp-nav-item:hover[b-u7g04pfde2] { background: var(--surface-3); }
.rp-nav-item:focus-visible[b-u7g04pfde2] { outline: 2px solid var(--h-accent); outline-offset: 1px; }

/* The open report: the accent wash, an accent edge and bold words, so it is not said by colour alone. */
.rp-nav-item.is-current[b-u7g04pfde2] { background: var(--h-tint-2); border-left-color: var(--h-accent); font-weight: 700; }
.rp-nav-item.is-later .rp-nav-name[b-u7g04pfde2] { color: var(--ink-3); }
.rp-nav-name[b-u7g04pfde2] { flex: 1 1 auto; min-width: 0; }

.rp-tag[b-u7g04pfde2] {
    flex: none;
    padding: 1px 6px;
    border: 1px solid var(--rule-2);
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--ink-3);
}
.rp-none[b-u7g04pfde2] { margin: 8px; font-size: 13px; color: var(--ink-3); }

/* ---- the report ------------------------------------------------------------------------- */
.rp-main[b-u7g04pfde2] { min-width: 0; min-height: 0; padding: 0 20px 16px; }

.rp-head[b-u7g04pfde2] { padding: 14px 0 10px; }
.rp-head h2[b-u7g04pfde2] { margin: 1px 0 2px; font-size: 20px; line-height: 1.2; }
.rp-head .lede[b-u7g04pfde2] { margin: 0; font-size: 13.5px; overflow-wrap: anywhere; }

/* ---- the filters: a card holding the report's filters only, View Report on its last line ---- */
.rp-filters[b-u7g04pfde2] {
    max-width: 1080px;
    padding: 14px 16px;
    border: 1px solid var(--rule);
    border-radius: 12px;
    background: var(--surface);
}

.rp-filter-grid[b-u7g04pfde2] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 10px 12px;
}
.rp-filter-grid label[b-u7g04pfde2] { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.rp-filter-grid label > span[b-u7g04pfde2] { font-size: 11.5px; font-weight: 700; color: var(--ink-2); }
.rp-filters .rp-filter-grid :is(input, select).fld[b-u7g04pfde2] { width: 100%; height: 36px; min-height: 36px; padding-top: 0; padding-bottom: 0; font-size: 13.5px; }

/* A filter that is not a choice: a store comparison covers every store open to the person. */
.rp-fixed[b-u7g04pfde2] { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.rp-fixed > span[b-u7g04pfde2] { font-size: 11.5px; font-weight: 700; color: var(--ink-2); }
.rp-fixed strong[b-u7g04pfde2] { display: flex; align-items: center; min-height: 36px; font-weight: 600; color: var(--ink); }

.rp-filter-keys[b-u7g04pfde2] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
}
.rp-filter-keys .rp-hint[b-u7g04pfde2] { flex: 1 1 auto; margin: 0; }
.rp-filter-keys .btn[b-u7g04pfde2] { height: 38px; white-space: nowrap; }
.rp-view[b-u7g04pfde2] { min-width: 140px; }

.rp-state[b-u7g04pfde2] { margin: 24px 0; }
.rp-hint[b-u7g04pfde2] { font-size: 12.5px; color: var(--ink-3); }

.rp-notice[b-u7g04pfde2] {
    max-width: 1080px;
    margin: 10px 0 0;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 13px;
    background: var(--surface-3);
    color: var(--ink);
}

.sr[b-u7g04pfde2] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- smaller windows ---------------------------------------------------------------------- */
@media (max-width: 1100px) {
    .rp-shell[b-u7g04pfde2] { grid-template-columns: 220px minmax(0, 1fr); }
    .rp-main[b-u7g04pfde2] { padding: 0 14px 14px; }
}

/* Stacked: the list above the report, the page scrolling as a page, the list a short box of its own. */
@media (max-width: 860px) {
    .rp-page[b-u7g04pfde2]  .kx-list.kx-panel { height: auto; min-height: 0; overflow: visible; }
    .rp-shell[b-u7g04pfde2] { grid-template-columns: minmax(0, 1fr); height: auto; }
    .rp-nav[b-u7g04pfde2] { max-height: 40vh; border-right: 0; border-bottom: 1px solid var(--rule); }
    .rp-main[b-u7g04pfde2] { overflow: visible; }
}

@media (max-width: 560px) {
    .rp-main[b-u7g04pfde2] { padding: 0 10px 12px; }
    .rp-filters[b-u7g04pfde2] { padding: 12px; }
    .rp-filter-grid[b-u7g04pfde2] { grid-template-columns: 1fr; }
    .rp-filter-keys[b-u7g04pfde2] { flex-wrap: wrap; }
    .rp-filter-keys .rp-hint[b-u7g04pfde2] { flex-basis: 100%; }
    .rp-filter-keys .btn[b-u7g04pfde2] { flex: 1 1 0; }
}
/* _content/AERetail.WebOffice/Components/Views/ReportViewer.razor.rz.scp.css */
/* The report viewer: a window of the office's theme (the scrim, its toolbar) round sheets of A4
   paper. The paper is paper - white, black type, brand navy for its accents - in the light theme
   and the dark, because it is what comes out of the printer.

   THE PAPER'S HEIGHTS ARE ReportPaging's. A row is 6.2 mm, the first page's header seven of those
   and a line, a row of headline figures three, a section's title two; a page holds 40 lines
   portrait and 26 landscape. Change one here and the figure there changes with it, or the pages
   overflow. */

.rv-ov[b-bkuwribhkg] {
    position: fixed; inset: 0; z-index: 120;
    display: flex;
    background: var(--scrim, rgba(15, 23, 42, .55));
    -webkit-backdrop-filter: var(--scrim-blur, none);
    backdrop-filter: var(--scrim-blur, none);
    padding: 16px;

    /* Outside KxList, as an entry dialog is: the office's palette pointed at the kiosk's tokens,
       as KxDialog.razor.css does, so the toolbar follows the light and dark themes. */
    --h-tint: color-mix(in srgb, var(--c-accent) 7%, var(--c-s2));
    --h-tint-2: color-mix(in srgb, var(--c-accent) 14%, var(--c-s2));
    --h-accent: var(--c-accent);
    --surface: var(--c-s2);
    --surface-2: var(--c-s0);
    --surface-3: var(--c-s4);
    --ink: var(--c-text);
    --ink-2: var(--c-text-dim);
    --ink-3: var(--c-text-faint);
    --rule: var(--glass-line);
    --rule-2: var(--c-line-strong);
    font-family: var(--font);
}

.rv-shell[b-bkuwribhkg] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex; flex-direction: column;
    overflow: hidden;
    border-radius: 14px;
    background: var(--surface-2, #eef1f6);
    border: 1px solid var(--rule, #d6dce6);
    box-shadow: 0 24px 60px -12px rgba(15, 23, 42, .45);
}

/* ---- the toolbar --------------------------------------------------------------------------- */
.rv-bar[b-bkuwribhkg] {
    flex: none;
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;
    padding: 10px 14px;
    background: var(--surface, #fff);
    border-bottom: 1px solid var(--rule, #d6dce6);
    color: var(--ink, #0b1f44);
}
.rv-bar-words[b-bkuwribhkg] { flex: 1 1 220px; min-width: 0; }
.rv-bar h2[b-bkuwribhkg] { margin: 0; font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rv-bar-sub[b-bkuwribhkg] { font-size: 12px; color: var(--ink-3, #5b6476); }

.rv-tools[b-bkuwribhkg] { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

.rv-seg[b-bkuwribhkg] {
    display: inline-flex; align-items: center;
    border: 1px solid var(--rule-2, #cfd6e2);
    border-radius: 8px;
    overflow: hidden;
}
.rv-seg button[b-bkuwribhkg] {
    min-width: 34px; height: 34px;
    padding: 0 10px;
    border: 0;
    background: var(--surface, #fff);
    font: inherit; font-size: 13px;
    color: var(--ink, #0b1f44);
    cursor: pointer;
}
.rv-seg button + button[b-bkuwribhkg], .rv-seg .rv-zoom + button[b-bkuwribhkg] { border-left: 1px solid var(--rule-2, #cfd6e2); }
.rv-seg button:hover:not(:disabled)[b-bkuwribhkg] { background: var(--surface-3, #f3f6fc); }
.rv-seg button:disabled[b-bkuwribhkg] { opacity: .45; cursor: default; }
.rv-seg button.is-on[b-bkuwribhkg] { background: var(--h-tint-2, #e3eaf7); font-weight: 700; }
.rv-seg button:focus-visible[b-bkuwribhkg] { outline: 2px solid var(--h-accent, #3d7be0); outline-offset: -2px; }
.rv-zoom[b-bkuwribhkg] {
    padding: 0 10px;
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    border-left: 1px solid var(--rule-2, #cfd6e2);
}

.rv-x[b-bkuwribhkg] {
    width: 36px; height: 36px;
    border: 1px solid var(--rule-2, #cfd6e2);
    border-radius: 8px;
    background: var(--surface, #fff);
    color: var(--ink-2, #2a3346);
    cursor: pointer;
}
.rv-x:hover[b-bkuwribhkg] { background: var(--surface-3, #f3f6fc); }
.rv-x:focus-visible[b-bkuwribhkg] { outline: 2px solid var(--h-accent, #3d7be0); outline-offset: 2px; }

.rv-notice[b-bkuwribhkg] {
    flex: none;
    margin: 0;
    padding: 8px 14px;
    font-size: 13px;
    background: var(--h-tint, #f3f6fc);
    border-bottom: 1px solid var(--rule, #d6dce6);
    color: var(--ink, #0b1f44);
}

/* ---- the desk the pages lie on ------------------------------------------------------------- */
.rv-desk[b-bkuwribhkg] { flex: 1 1 auto; overflow: auto; padding: 24px 16px 40px; }
.rv-papers[b-bkuwribhkg] { display: flex; flex-direction: column; align-items: center; gap: 22px; }

/* ---- a sheet of paper ---------------------------------------------------------------------- */
.rp-paper[b-bkuwribhkg] {
    --p-navy: #022C78;
    --p-navy-2: #0D47A1;
    --p-ink: #111827;
    --p-ink-2: #374151;
    --p-ink-3: #6B7280;
    --p-rule: #D9DEE7;
    --p-zebra: #F4F6FA;
    --p-tint: #EAF0FA;
    --p-total: #DCE6F7;
    --p-bad: #B42318;

    box-sizing: border-box;
    flex: none;
    width: 210mm; height: 297mm;
    padding: 12mm 12mm 10mm;
    display: flex; flex-direction: column;
    overflow: hidden;
    background: #fff;
    color: var(--p-ink);
    font-family: "Segoe UI", Arial, sans-serif;
    font-size: 8.5pt;
    box-shadow: 0 2px 4px rgba(15, 23, 42, .12), 0 12px 28px -8px rgba(15, 23, 42, .3);
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}
.rp-paper.is-landscape[b-bkuwribhkg] { width: 297mm; height: 210mm; }

/* The first page's header: the store on the left under the mark, the report on the right, a navy
   rule under both. Every report has this one; nothing in it is a report's own. */
.rp-p-head[b-bkuwribhkg] {
    flex: none;
    display: flex; justify-content: space-between; align-items: flex-start; gap: 8mm;
    height: 24mm;
    box-sizing: border-box;
    padding-bottom: 3mm;
    border-bottom: 0.8mm solid var(--p-navy);
}
.rp-p-brand[b-bkuwribhkg] { display: flex; gap: 3mm; min-width: 0; }
.rp-p-mark[b-bkuwribhkg] {
    flex: none;
    display: grid; place-items: center;
    width: 12mm; height: 12mm;
    border-radius: 2.5mm;
    background: linear-gradient(135deg, var(--p-navy), var(--p-navy-2));
    color: #fff;
}
.rp-p-store[b-bkuwribhkg] { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; color: var(--p-ink-2); }
.rp-p-store strong[b-bkuwribhkg] { font-size: 11pt; color: var(--p-ink); }
.rp-p-store span[b-bkuwribhkg] { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.rp-p-title[b-bkuwribhkg] { text-align: right; min-width: 0; }
.rp-p-group[b-bkuwribhkg] { display: block; font-size: 7pt; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--p-ink-3); }
.rp-p-title h3[b-bkuwribhkg] { margin: .6mm 0 .8mm; font-size: 15pt; line-height: 1.15; color: var(--p-navy); }
.rp-p-period[b-bkuwribhkg] { font-size: 9pt; font-weight: 600; color: var(--p-ink-2); }

/* The filters, every one with what was chosen: two rows of 6.2 mm at most. */
.rp-p-filters[b-bkuwribhkg] {
    flex: none;
    display: flex; flex-wrap: wrap; gap: 1.2mm 5mm;
    max-height: 12.4mm;
    overflow: hidden;
    margin: 2.5mm 0 0;
    padding: 1.6mm 3mm;
    box-sizing: border-box;
    border-radius: 1.5mm;
    background: var(--p-zebra);
}
.rp-p-filters div[b-bkuwribhkg] { display: flex; gap: 1.5mm; white-space: nowrap; }
.rp-p-filters dt[b-bkuwribhkg] { font-weight: 700; color: var(--p-ink-3); }
.rp-p-filters dt[b-bkuwribhkg]::after { content: ":"; }
.rp-p-filters dd[b-bkuwribhkg] { margin: 0; color: var(--p-ink); }

.rp-p-sample[b-bkuwribhkg] {
    flex: none;
    height: 6.2mm; box-sizing: border-box;
    margin: 1.5mm 0 0;
    padding: 1mm 3mm;
    border: 0.3mm dashed var(--p-navy-2);
    border-radius: 1.5mm;
    color: var(--p-ink-2);
}

/* The summary: the headline figures, highlighted, the first the strongest. */
.rp-p-tiles[b-bkuwribhkg] { flex: none; display: grid; gap: 2.5mm; margin-top: 3mm; }
.rp-p-tile[b-bkuwribhkg] {
    display: flex; flex-direction: column; justify-content: center;
    height: 15.6mm; box-sizing: border-box;
    padding: 1.5mm 3mm;
    border-radius: 2mm;
    background: var(--p-tint);
    border-left: 1mm solid var(--p-navy-2);
    min-width: 0;
}
.rp-p-tile:first-child[b-bkuwribhkg] { background: var(--p-navy); border-left-color: var(--p-navy); }
.rp-p-tile:first-child .rp-p-tile-label[b-bkuwribhkg], .rp-p-tile:first-child .rp-p-tile-value[b-bkuwribhkg] { color: #fff; }
.rp-p-tile-label[b-bkuwribhkg] { font-size: 6.5pt; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--p-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp-p-tile-value[b-bkuwribhkg] { font-family: "JetBrains Mono", Consolas, monospace; font-size: 12pt; font-weight: 700; color: var(--p-navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp-p-tile-value.is-words[b-bkuwribhkg] { font-family: inherit; font-size: 10pt; }

/* The later pages' running head: one line, the store and the report. */
.rp-p-runhead[b-bkuwribhkg] {
    flex: none;
    display: flex; justify-content: space-between; gap: 6mm;
    padding-bottom: 2mm;
    margin-bottom: 2mm;
    border-bottom: 0.5mm solid var(--p-navy);
    color: var(--p-ink-2);
    white-space: nowrap;
}
.rp-p-runhead strong[b-bkuwribhkg] { color: var(--p-ink); }

/* ---- the tables ---------------------------------------------------------------------------- */
.rp-p-body[b-bkuwribhkg] { flex: 1 1 auto; min-height: 0; overflow: hidden; padding-top: 3mm; }
.rp-p-section + .rp-p-section[b-bkuwribhkg] { margin-top: 6.2mm; }

.rp-p-section h4[b-bkuwribhkg] {
    height: 12.4mm; box-sizing: border-box;
    display: flex; align-items: flex-end;
    margin: 0;
    padding-bottom: 2mm;
    font-size: 10.5pt;
    color: var(--p-navy);
}
.rp-p-section h4.is-cont[b-bkuwribhkg] { color: var(--p-ink-2); font-weight: 600; }

.rp-p-table[b-bkuwribhkg] { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.rp-p-table th[b-bkuwribhkg], .rp-p-table td[b-bkuwribhkg] {
    height: 6.2mm; box-sizing: border-box;
    padding: 0 2mm;
    text-align: left; vertical-align: middle;
    white-space: nowrap;
    line-height: 1.15;
}
.rp-p-table .num[b-bkuwribhkg] { text-align: right; }
.rp-p-table .wide[b-bkuwribhkg] { width: 100%; }

.rp-p-table thead th[b-bkuwribhkg] {
    font-size: 7pt; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: #fff;
    background: var(--p-navy);
}

/* Alternate rows a light wash, so a long line of figures is read across without a ruler. */
.rp-p-table tbody tr:nth-child(even) td[b-bkuwribhkg] { background: var(--p-zebra); }
.rp-p-table tbody td[b-bkuwribhkg] { border-bottom: 0.2mm solid var(--p-rule); }
.rp-p-table .neg[b-bkuwribhkg] { color: var(--p-bad); }

.rp-p-grouphead th[b-bkuwribhkg] {
    font-size: 8pt; font-weight: 800; letter-spacing: .03em;
    color: var(--p-navy);
    background: #fff;
    border-bottom: 0.4mm solid var(--p-navy-2);
}
.rp-p-subtotal td[b-bkuwribhkg] { font-weight: 700; background: var(--p-tint) !important; border-top: 0.3mm solid var(--p-navy-2); }

/* The totals: the strongest row on the page, a heavy navy rule over a tinted band. */
.rp-p-table tfoot td[b-bkuwribhkg] {
    font-weight: 800;
    font-size: 9pt;
    color: var(--p-navy);
    background: var(--p-total);
    border-top: 0.6mm solid var(--p-navy);
}

.rp-p-empty td[b-bkuwribhkg] { color: var(--p-ink-3); font-style: italic; }

.rp-p-notes[b-bkuwribhkg] { margin: 4mm 0 0; padding-left: 4mm; color: var(--p-ink-3); font-size: 7.5pt; line-height: 1.6; }

/* ---- the footer, the same on every page ---------------------------------------------------- */
.rp-p-foot[b-bkuwribhkg] {
    flex: none;
    display: flex; justify-content: space-between; gap: 6mm;
    padding-top: 2mm;
    border-top: 0.2mm solid var(--p-rule);
    font-size: 7pt;
    color: var(--p-ink-3);
}

/* ---- what only the screen has -------------------------------------------------------------- */
.rp-sort[b-bkuwribhkg] {
    padding: 0; border: 0; background: none;
    font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit;
    cursor: pointer;
}
.rp-sort:hover[b-bkuwribhkg] { text-decoration: underline; }
.rp-sort:focus-visible[b-bkuwribhkg] { outline: 2px solid #8FB4FF; outline-offset: 1px; border-radius: 2px; }

/* A row that opens its receipt or shift: underlined words, so not by colour alone. */
.rp-open[b-bkuwribhkg] {
    padding: 0; border: 0; background: none;
    font: inherit; color: var(--p-navy-2);
    text-decoration: underline; text-underline-offset: 2px;
    cursor: pointer;
}
.rp-open:focus-visible[b-bkuwribhkg] { outline: 2px solid var(--p-navy-2); outline-offset: 1px; border-radius: 2px; }

.sr[b-bkuwribhkg] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (max-width: 700px) {
    .rv-ov[b-bkuwribhkg] { padding: 0; }
    .rv-shell[b-bkuwribhkg] { border-radius: 0; }
}

/* ---- paper --------------------------------------------------------------------------------- */
/* The sheets alone are printed (officeShell.printReport sets the page size and hides the rest),
   each on its own sheet, at their own size whatever the zoom on the screen. */
@media print {
    .rv-ov[b-bkuwribhkg] { position: static; display: block; padding: 0; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
    .rv-shell[b-bkuwribhkg] { display: block; overflow: visible; border: 0; border-radius: 0; background: none; box-shadow: none; }
    .rv-bar[b-bkuwribhkg], .rv-notice[b-bkuwribhkg] { display: none; }
    .rv-desk[b-bkuwribhkg] { zoom: 1 !important; overflow: visible; padding: 0; }
    .rv-papers[b-bkuwribhkg] { display: block; }
    .rp-paper[b-bkuwribhkg] { box-shadow: none; break-after: page; page-break-after: always; }
    .rp-paper:last-child[b-bkuwribhkg] { break-after: auto; page-break-after: auto; }
    .rp-sort-mark[b-bkuwribhkg] { display: none; }
    .rp-sort[b-bkuwribhkg] { cursor: default; text-decoration: none; }
    .rp-open[b-bkuwribhkg] { color: inherit; text-decoration: none; }
}
/* _content/AERetail.WebOffice/Components/Views/SalesSummaryView.razor.rz.scp.css */
/* Sales Summary. Everything is drawn in the tokens KxList hands its panel (surface, ink, rule,
   good, bad and the accent), so the report follows the office's light and dark themes and writes
   no colour of its own.

   THE PAGE SCROLLS, NOT THE BOX (owner, 28 October 2026: "not designed properly and responsive").
   KxList sizes its box to the window as though nothing stood above it, but this page has its
   heading above, so the box ran off the bottom and the window and the box both scrolled. Here the
   box is as tall as what it holds, and the page scrolls as a page; one column of spacing (.ss-body
   and its gap) instead of a margin on every block. */

.ss-page[b-uuyo8n8mb1]  .kx-list.kx-panel { height: auto; min-height: 0; overflow: visible; padding-bottom: 0; }

.ss-body[b-uuyo8n8mb1] { display: flex; flex-direction: column; gap: 14px; padding: 16px; min-width: 0; }

/* ---- the filters: labelled fields that wrap, as on the Reports page ------------------------ */
.ss-filters[b-uuyo8n8mb1] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 10px 12px;
    padding: 14px 16px;
    border: 1px solid var(--rule);
    border-radius: 12px;
    background: var(--surface);
}
.ss-filters label[b-uuyo8n8mb1] { display: flex; flex-direction: column; gap: 4px; min-width: 0; margin: 0; }
.ss-filters label > span[b-uuyo8n8mb1] { font-size: 11.5px; font-weight: 700; color: var(--ink-2); }
/* Specific enough to beat KxList's panel fields (42px), which suit a form, not a filter bar. */
.ss-body .ss-filters :is(input, select).fld[b-uuyo8n8mb1] { width: 100%; height: 36px; min-height: 36px; padding-top: 0; padding-bottom: 0; font-size: 13.5px; }

.ss-scope[b-uuyo8n8mb1] { margin: 0; font-size: 13px; color: var(--ink-2); }
.ss-empty[b-uuyo8n8mb1] { margin: 0; padding: 4px 16px 14px; font-size: 13px; color: var(--ink-3); }

/* Nothing sold: a card the size of what it says. */
.ss-none[b-uuyo8n8mb1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 22px 16px;
    border: 1px dashed var(--rule-2);
    border-radius: 12px;
    background: var(--surface);
    text-align: center;
    font-size: 13px;
    color: var(--ink-2);
}
.ss-none strong[b-uuyo8n8mb1] { font-size: 15px; color: var(--ink); }

/* ---- the headline ---------------------------------------------------------------------- */
.ss-kpis[b-uuyo8n8mb1] { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin: 0; }

.ss-kpi[b-uuyo8n8mb1] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 14px;
    border: 1px solid var(--rule);
    border-radius: 12px;
    background: var(--surface);
    min-width: 0;
}

.ss-kpi-main[b-uuyo8n8mb1] { border-color: var(--h-accent); background: var(--h-tint); }

.ss-kpi-label[b-uuyo8n8mb1] { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.ss-kpi-value[b-uuyo8n8mb1] { font-family: "JetBrains Mono", monospace; font-size: 26px; font-weight: 600; color: var(--ink); }
.ss-kpi-main .ss-kpi-value[b-uuyo8n8mb1] { font-size: 30px; color: var(--h-ink); }
.ss-kpi-note[b-uuyo8n8mb1] { font-size: 12px; color: var(--ink-2); }

/* Up and down are said in words and an arrow; the colour only agrees with them. */
.ss-delta[b-uuyo8n8mb1] { margin-top: 2px; font-size: 12px; font-weight: 700; color: var(--ink-2); }
.ss-up[b-uuyo8n8mb1] { color: var(--good); }
.ss-down[b-uuyo8n8mb1] { color: var(--bad); }

/* ---- panels ---------------------------------------------------------------------------- */
/* .group as well, to outweigh KxList's margin on every group: the body's gap spaces them. */
.ss-body .ss-group.group[b-uuyo8n8mb1] { margin: 0; min-width: 0; }
.ss-pair[b-uuyo8n8mb1] { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 14px; margin: 0; align-items: start; }

.ss-warn[b-uuyo8n8mb1] {
    margin: 10px 14px 12px;
    padding: 8px 10px;
    border-radius: 8px;
    background: var(--bad-tint);
    color: var(--bad);
    font-size: 13px;
    font-weight: 700;
}

/* ---- tables ---------------------------------------------------------------------------- */
.ss-table[b-uuyo8n8mb1] { width: 100%; border-collapse: collapse; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.ss-table th[b-uuyo8n8mb1], .ss-table td[b-uuyo8n8mb1] { padding: 7px 14px; text-align: left; vertical-align: middle; }

.ss-table thead th[b-uuyo8n8mb1] {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-3);
    border-bottom: 1px solid var(--rule);
}

.ss-table tbody tr + tr td[b-uuyo8n8mb1], .ss-table tbody tr + tr th[b-uuyo8n8mb1] { border-top: 1px solid var(--rule); }

/* No stripes: KxList stripes the figure cells of every other row but not the row's own heading,
   which read as half-shaded rows, and the share bars under each tender put the stripes out of
   step. Every row here has its rule above it already. */
.ss-body .ss-table tbody tr:nth-child(n) :is(td, th)[b-uuyo8n8mb1] { background: transparent; }
.ss-body .ss-table tbody tr:not(.meter-row):hover :is(td, th)[b-uuyo8n8mb1] { background: var(--c-accent-wash); }
.ss-table .num[b-uuyo8n8mb1] { text-align: right; white-space: nowrap; }
.ss-table .rank[b-uuyo8n8mb1] { width: 28px; color: var(--ink-3); }
.ss-table .bar[b-uuyo8n8mb1] { width: 26%; }
.ss-table tfoot th[b-uuyo8n8mb1], .ss-table tfoot td[b-uuyo8n8mb1] { border-top: 2px solid var(--rule-2); font-weight: 700; }

/* A statement: the label on the left, the figure on the right. */
.ss-sheet th[b-uuyo8n8mb1] { font-weight: 600; }
.ss-sheet small[b-uuyo8n8mb1] { font-weight: 400; color: var(--ink-3); }
.ss-table .sub th[b-uuyo8n8mb1], .ss-table .sub td[b-uuyo8n8mb1] { padding-left: 28px; color: var(--ink-2); font-size: 13px; }
.ss-table .sub th[b-uuyo8n8mb1] { font-weight: 400; }
.ss-table .sum th[b-uuyo8n8mb1], .ss-table .sum td[b-uuyo8n8mb1] { font-weight: 800; border-top: 2px solid var(--rule-2); }

/* A share, as a bar under a figure that already says it in words. */
.ss-meter[b-uuyo8n8mb1] { display: block; height: 7px; border-radius: 4px; background: var(--surface-3); overflow: hidden; }
.ss-meter > span[b-uuyo8n8mb1] { display: block; height: 100%; border-radius: 4px; background: var(--h-accent); }
.ss-table .meter-row td[b-uuyo8n8mb1] { padding-top: 0; padding-bottom: 8px; border-top: 0; }

/* ---- the bars -------------------------------------------------------------------------- */
.ss-bars[b-uuyo8n8mb1] { list-style: none; margin: 0; padding: 10px 14px 12px; height: 170px; display: flex; align-items: stretch; gap: 5px; }
.ss-bar[b-uuyo8n8mb1] { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.ss-bar-amt[b-uuyo8n8mb1] { font-size: 10.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ss-bar-col[b-uuyo8n8mb1] { flex: 1 1 auto; width: 100%; max-width: 46px; display: flex; align-items: flex-end; }
.ss-bar-fill[b-uuyo8n8mb1] { display: block; width: 100%; border-radius: 4px 4px 0 0; background: color-mix(in srgb, var(--h-accent) 45%, var(--surface)); }
.ss-bar-lbl[b-uuyo8n8mb1] { font-size: 10.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* The busiest bar is solid and bold as well, so it does not rest on colour alone. */
.ss-bar-peak .ss-bar-fill[b-uuyo8n8mb1] { background: var(--h-accent); }
.ss-bar-peak .ss-bar-amt[b-uuyo8n8mb1], .ss-bar-peak .ss-bar-lbl[b-uuyo8n8mb1] { font-weight: 800; color: var(--ink); }

.sr[b-uuyo8n8mb1] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- smaller windows ------------------------------------------------------------------- */
@media (max-width: 700px) {
    .ss-body[b-uuyo8n8mb1] { padding: 12px; gap: 12px; }
    .ss-bars[b-uuyo8n8mb1] { height: 140px; gap: 3px; padding: 8px 10px 10px; }
    .ss-bar-amt[b-uuyo8n8mb1] { display: none; }      /* each bar still says its figure in its tooltip */
    .ss-table th[b-uuyo8n8mb1], .ss-table td[b-uuyo8n8mb1] { padding: 6px 10px; }
}

@media (max-width: 460px) {
    .ss-body[b-uuyo8n8mb1] { padding: 10px; }
    .ss-filters[b-uuyo8n8mb1] { grid-template-columns: 1fr; padding: 12px; }
    .ss-kpi-value[b-uuyo8n8mb1] { font-size: 22px; }
    .ss-kpi-main .ss-kpi-value[b-uuyo8n8mb1] { font-size: 24px; }
}
/* _content/AERetail.WebOffice/Components/Views/ScaleLayoutFields.razor.rz.scp.css */
/* The Scale Label Layouts editor (DESIGN.md, "Scale Label Layouts"). The office's own form classes
   (formgrid, fld, switch, alert) do the fields; this is the frame round each part, the sample label
   and the test reading. Colours are the theme's: each run of digits has its own edge AND its name
   underneath, so the sample reads without colour. */

.sl-box[b-memc4kmpnl] {
    margin-top: 18px;
    border: 1px solid var(--rule);
    border-radius: 10px;
    background: var(--surface-2);
    padding: 14px 16px;
}

.sl-box h3[b-memc4kmpnl] {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin: 0 0 12px;
}

.sl-rest[b-memc4kmpnl] { margin-top: 18px; }

.sl-presets[b-memc4kmpnl] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    font-size: 12.5px;
}

.sl-presets .btn[b-memc4kmpnl] { padding: 5px 10px; font-size: 12.5px; }

.sl-problems[b-memc4kmpnl] {
    margin: 14px 0 0;
    padding: 10px 14px 10px 30px;
    border: 1px solid var(--bad);
    border-radius: var(--r-ctl);
    background: var(--bad-tint);
    color: var(--bad);
    font-size: 12.5px;
    font-weight: 600;
}

/* ---- the sample label ---- */

.sl-sample[b-memc4kmpnl] { margin: 16px 0 0; }

.sl-sample figcaption[b-memc4kmpnl] {
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-2);
    margin-bottom: 8px;
}

.sl-runs[b-memc4kmpnl] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.sl-run[b-memc4kmpnl] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 0;
}

.sl-digits[b-memc4kmpnl] {
    font-family: "JetBrains Mono", Consolas, monospace;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: .12em;
    padding: 6px 10px;
    border-radius: var(--r-ctl);
    border: 2px solid var(--rule-2);
    background: var(--surface);
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

.sl-cap[b-memc4kmpnl] { font-size: 11px; color: var(--ink-3); white-space: nowrap; }

.sl-prefix .sl-digits[b-memc4kmpnl] { border-color: var(--ink-3); }
.sl-item .sl-digits[b-memc4kmpnl] { border-color: var(--brand); background: var(--h-tint); }
.sl-weight .sl-digits[b-memc4kmpnl], .sl-price .sl-digits[b-memc4kmpnl], .sl-quantity .sl-digits[b-memc4kmpnl] { border-color: var(--good); background: var(--good-tint); }
.sl-pcheck .sl-digits[b-memc4kmpnl], .sl-check .sl-digits[b-memc4kmpnl] { border-style: dashed; border-color: var(--ink-3); }

.sl-whole[b-memc4kmpnl] { margin: 10px 0 0; font-size: 13px; overflow-wrap: anywhere; }

/* ---- Test a barcode ---- */

.sl-reading[b-memc4kmpnl] {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 22px;
    padding: 10px 12px;
    border-radius: var(--r-ctl);
    border: 1px solid var(--rule);
    background: var(--surface);
    font-size: 13px;
}

.sl-reading.ok[b-memc4kmpnl] { border-color: var(--good); }
.sl-reading.no[b-memc4kmpnl] { border-color: var(--bad); background: var(--bad-tint); }
.sl-note[b-memc4kmpnl] { flex-basis: 100%; margin: 0; color: var(--ink-2); }

@media (forced-colors: active) {
    .sl-digits[b-memc4kmpnl] { border-color: CanvasText; }
}
/* _content/AERetail.WebOffice/Components/Views/StoresView.razor.rz.scp.css */
/* The store's side sheet (the demo's pattern), in the office-light tokens: a list row opens it,
   the list stays where it was underneath. */

.st-scrim[b-fnbd9dvit0] {
    position: fixed;
    inset: 0;
    background: rgba(23, 23, 26, .28);
    z-index: 60;
}

.st-sheet[b-fnbd9dvit0] {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(520px, 100vw);
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border-left: 1px solid var(--rule);
    box-shadow: var(--shadow-3);
    z-index: 61;
    outline: none;
}

.st-head[b-fnbd9dvit0] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 20px 14px;
    border-bottom: 1px solid var(--rule);
}
.st-head h2[b-fnbd9dvit0] { margin: 0; font-size: 18px; font-weight: 650; color: var(--ink); }
.st-head p[b-fnbd9dvit0] { margin: 4px 0 0; font-size: 12px; color: var(--ink-3); }

.st-x[b-fnbd9dvit0] {
    border: 0;
    background: transparent;
    font-size: 22px;
    line-height: 1;
    color: var(--ink-3);
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 6px;
}
.st-x:hover[b-fnbd9dvit0] { background: var(--surface-3); color: var(--ink); }
.st-x:focus-visible[b-fnbd9dvit0] { outline: 2px solid var(--brand); outline-offset: 1px; }

.st-body[b-fnbd9dvit0] {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.st-pills[b-fnbd9dvit0] { display: flex; flex-wrap: wrap; gap: 6px; }

.st-kv[b-fnbd9dvit0] {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 8px 12px;
    margin: 0;
    font-size: 13px;
}
.st-kv dt[b-fnbd9dvit0] { color: var(--ink-3); }
.st-kv dd[b-fnbd9dvit0] { margin: 0; color: var(--ink); }

.st-sub[b-fnbd9dvit0] {
    margin: 6px 0 0;
    font-size: 11px;
    font-weight: 650;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-3);
}

.st-lanes[b-fnbd9dvit0] { width: 100%; border-collapse: collapse; font-size: 13px; }
.st-lanes th[b-fnbd9dvit0] {
    text-align: left;
    font-weight: 600;
    font-size: 12px;
    color: var(--ink-3);
    padding: 6px 8px;
    border-bottom: 1px solid var(--rule);
}
.st-lanes td[b-fnbd9dvit0] { padding: 8px; border-bottom: 1px solid var(--rule); vertical-align: top; }
.st-lanes .muted[b-fnbd9dvit0] { font-size: 12px; color: var(--ink-3); }

.st-foot[b-fnbd9dvit0] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border-top: 1px solid var(--rule);
    background: var(--surface-2);
}
.st-foot .spacer[b-fnbd9dvit0] { flex: 1; }
/* _content/AERetail.WebOffice/Components/Views/UsersView.razor.rz.scp.css */
/* The demo's user list in the list frame's own tokens: initials, the name with the email under it. */

.us-who[b-wnhzto6seq] { display: flex; align-items: center; gap: 10px; }

.us-avatar[b-wnhzto6seq] {
    flex: none;
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--c-accent) 18%, var(--c-s2));
    color: var(--c-text);
    font-size: 12px;
    font-weight: 650;
    letter-spacing: .02em;
}

.us-check[b-wnhzto6seq] { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--c-text-dim); cursor: pointer; }

/* The stores a user works in: a checklist, the default marked beside the ticked ones. */
.us-stores[b-wnhzto6seq] { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 4px 16px; }
.us-store[b-wnhzto6seq] { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 4px 0; }
.us-default[b-wnhzto6seq] { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--ink-3, #7A7A85); }

/* Reset password, in the user's dialog: the button, the confirm, then the temporary password shown once. */
.us-reset[b-wnhzto6seq] { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; }
.us-reset .alert[b-wnhzto6seq] { width: 100%; margin: 0; }
.us-temp[b-wnhzto6seq] { font-size: 15px; letter-spacing: .06em; user-select: all; }
/* _content/AERetail.WebOffice/Components/Views/ZonesView.razor.rz.scp.css */
/* Zones as the demo drew them: the tree on the left, the chosen zone on the right, in the
   list frame's own tokens, so they sit in its box like its tables. The stores and settings tables take the list frame's own table look. */

.zn-split[b-tjebc1tfcp] {
    display: grid;
    grid-template-columns: minmax(240px, 320px) 1fr;
    gap: 16px;
    align-items: start;
    min-height: 0;
    margin: 0 16px;
}

/* The panel frame gives a table side margins; inside the zone's panel it has the panel's own. */
.zn-detail .tablewrap[b-tjebc1tfcp] { margin: 0; }

.zn-tree[b-tjebc1tfcp] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px;
    background: var(--c-s2);
    border: 1px solid var(--glass-line-hi);
    border-radius: 10px;
    position: sticky;
    top: 64px;
    max-height: calc(100vh - 260px);
    overflow-y: auto;
}

.zn-node[b-tjebc1tfcp] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding-top: 7px;
    padding-bottom: 7px;
    padding-right: 10px;
    border: 0;
    border-left: 3px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: var(--c-text);
    text-align: left;
    font: inherit;
    cursor: pointer;
}
.zn-node:hover[b-tjebc1tfcp] { background: var(--c-accent-wash); }
.zn-node.on[b-tjebc1tfcp] { background: color-mix(in srgb, var(--c-accent) 16%, var(--c-s2)); border-left-color: var(--c-accent); }
.zn-node:focus-visible[b-tjebc1tfcp] { outline: 2px solid var(--c-accent); outline-offset: -2px; }

.zn-name[b-tjebc1tfcp] { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.zn-name strong[b-tjebc1tfcp] { font-weight: 600; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zn-name .mono[b-tjebc1tfcp] { font-size: 11px; color: var(--c-text-faint); }

.zn-count[b-tjebc1tfcp] {
    min-width: 24px;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--well-fill-strong);
    color: var(--c-text-dim);
    font-size: 12px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.zn-detail[b-tjebc1tfcp] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px 18px;
    background: var(--c-s2);
    border: 1px solid var(--glass-line-hi);
    border-radius: 10px;
}

.zn-head[b-tjebc1tfcp] { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.zn-head h2[b-tjebc1tfcp] { margin: 0; font-size: 18px; font-weight: 650; color: var(--c-text); }
.zn-head p[b-tjebc1tfcp] { margin: 4px 0 0; font-size: 12px; color: var(--c-text-faint); }
.zn-actions[b-tjebc1tfcp] { display: flex; gap: 8px; }

.zn-facts[b-tjebc1tfcp] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 8px;
    margin: 0;
}
.zn-facts > div[b-tjebc1tfcp] {
    padding: 8px 10px;
    border: 1px solid var(--glass-line-hi);
    border-radius: 8px;
    background: var(--c-accent-wash);
}
.zn-facts dt[b-tjebc1tfcp] { font-size: 11px; color: var(--c-text-faint); }
.zn-facts dd[b-tjebc1tfcp] { margin: 2px 0 0; font-size: 16px; font-weight: 600; color: var(--c-text); font-variant-numeric: tabular-nums; }

.zn-sub[b-tjebc1tfcp] {
    margin: 6px 0 0;
    font-size: 11px;
    font-weight: 650;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--c-text-faint);
}

@media (max-width: 900px) {
    .zn-split[b-tjebc1tfcp] { grid-template-columns: 1fr; }
    .zn-tree[b-tjebc1tfcp] { max-height: 260px; }
}