/* The web app's own pieces (KAN-350), over Synthsphere.Web.Shared's layout, in the theme's tokens. Laid out as the
   desktop app (KAN-366, Windows' guidance the desktop follows): a page's margin 24 (12 on a narrow window), page titles
   28 semibold, in-page cards and controls with 4 px corners, 8 between controls, 12 between fields. */
:root {
    --app-page-margin: 24px;
    --app-card-radius: var(--borderRadiusMedium);
    --app-header-height: 48px;
    --app-nav-width: 260px;
    --app-nav-compact-width: 48px;
}

.app-full-width {
    width: 100%;
}

.app-starting {
    display: grid;
    place-items: center;
    min-height: 100vh;
}

.app-starting img {
    animation: app-pulse 1.4s ease-in-out infinite;
}

@keyframes app-pulse {
    50% {
        opacity: 0.4;
    }
}

#blazor-error-ui {
    display: none;
    position: fixed;
    inset: auto 0 0 0;
    z-index: 1000;
    padding: 12px 16px;
    background: #fde7e9;
    color: #242424;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
}

#blazor-error-ui span {
    display: block;
}

/* Signed out: the sign-in or registration card, centred. */
.app-card-page {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 32px 16px 48px;
}

.app-card {
    box-sizing: border-box;
    width: 100%;
    max-width: 440px;
    padding: 24px;
    border-radius: var(--app-card-radius);
    background: var(--colorNeutralBackground1);
    border: 1px solid var(--colorNeutralStroke2);
    box-shadow: var(--shadow4);
}

.app-card.wide {
    max-width: 720px;
}

/* The card's heading as the desktop's sign-in window's: Title (28, semibold). */
.app-card h1 {
    margin: 0 0 4px;
    font-size: var(--fontSizeHero700);
    line-height: var(--lineHeightHero700);
    font-weight: var(--fontWeightSemibold);
}

.app-card h2 {
    margin: 24px 0 8px;
    font-size: var(--fontSizeBase400);
    font-weight: var(--fontWeightSemibold);
}

.app-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.app-form-row {
    display: grid;
    align-items: start;
    gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
}

.app-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* A field's label above its box, as the desktop's FieldLabel: Body, regular weight. */
.app-field label {
    font-weight: var(--fontWeightRegular);
}

.app-field input,
.app-field select {
    box-sizing: border-box;
    width: 100%;
    min-height: 32px;
    padding: 0 10px;
    border: 1px solid var(--colorNeutralStroke1);
    border-bottom-color: var(--colorNeutralStrokeAccessible);
    border-radius: var(--borderRadiusMedium);
    background: var(--colorNeutralBackground1);
    color: var(--colorNeutralForeground1);
    font: inherit;
}

.app-field input:focus,
.app-field select:focus {
    border-bottom: 2px solid var(--colorCompoundBrandStroke);
    outline: none;
}

/* What a field or a setting is for (KAN-374): instructions, so Body (14) in secondary ink, not a 12 px caption. */
.app-hint {
    color: var(--colorNeutralForeground2);
    font-size: var(--fontSizeBase300);
    line-height: var(--lineHeightBase300);
}

.app-check {
    display: flex;
    align-items: center;
    gap: 8px;
}

.app-below-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: var(--colorNeutralForeground2);
}

/* Remember me, and Forgot your password? at the other end of the same line (KAN-372). */
.app-sign-in-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 12px;
}

.app-tools {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    align-items: center;
}

/* KAN-374: the sign-in page's theme buttons as icons, 40 square (their names are their tooltips and labels). */
.app-theme-picker.compact {
    display: flex;
    gap: 4px;
}

.app-theme-picker.compact fluent-button {
    min-width: 40px;
}

.app-demo-link {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
}

/* Signed in (KAN-366): the header as the desktop's title bar (48 high), the menu at the side as its navigation pane, the page. */
.app-header .ss-header-inner {
    min-height: var(--app-header-height);
    flex-wrap: nowrap;
    gap: 8px;
}

.app-header-space {
    flex: 1 1 auto;
}

.app-header .ss-brand,
.app-header-button,
.app-header fluent-button {
    flex: none;
}

/* KAN-374: a phone's header fits its width: SynthPOS's round logo without its name, the language as its globe only, the
   buttons 40 wide; the business's name takes what is left, cut short with an ellipsis. */
@media (max-width: 480px) {
    .app-header .ss-brand-name,
    .app-header .app-language-code {
        display: none;
    }

    .app-header .app-header-button {
        min-width: 40px;
    }

    /* The theme is in Settings: its header button makes room for the bell. */
    .app-header .app-theme-button {
        display: none;
    }
}

/* KAN-374: how many are unread, on the header's bell and beside Notifications in the menu. */
.app-badge {
    display: inline-grid;
    place-items: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    box-sizing: border-box;
    border-radius: var(--borderRadiusCircular);
    background: var(--colorPaletteRedBackground3, #c50f1f);
    color: #ffffff;
    font-size: var(--fontSizeBase200);
    line-height: 1;
    font-weight: var(--fontWeightSemibold);
    font-variant-numeric: tabular-nums;
}

.app-bell {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--borderRadiusMedium);
    color: var(--colorNeutralForeground1);
    text-decoration: none;
}

.app-bell:hover {
    background: var(--colorNeutralBackground1Hover);
}

.app-bell:focus-visible {
    outline: 2px solid var(--colorStrokeFocus2);
    outline-offset: -2px;
}

.app-bell .app-badge {
    position: absolute;
    top: -2px;
    right: 2px;
}

.app-nav-item .app-badge {
    margin-inline-start: auto;
}

.app-nav-compact .app-nav-item {
    position: relative;
}

.app-nav-compact .app-nav-item .app-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    min-width: 8px;
    width: 8px;
    height: 8px;
    padding: 0;
    font-size: 0;
}

.app-unread-dot {
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--colorBrandBackground);
}

.app-message-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    color: inherit;
    text-decoration: none;
}

.app-message-link:hover .app-cut {
    text-decoration: underline;
}

/* The header's buttons, as the title bar's: 46 × 32, flat. */
.app-header-button {
    min-width: 46px;
    height: 32px;
}

.app-language-code {
    font-size: var(--fontSizeBase200);
    font-weight: var(--fontWeightSemibold);
    letter-spacing: 0.02em;
}

fluent-menu-item .app-language-code {
    display: inline-block;
    min-width: 2em;
}

/* The account picture: the user's initials in an accent circle (24; 64 in the account menu). */
.app-avatar {
    display: inline-grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--colorBrandBackground);
    color: var(--colorNeutralForegroundOnBrand);
    font-size: var(--fontSizeBase200);
    font-weight: var(--fontWeightSemibold);
    line-height: 1;
}

.app-avatar-large {
    width: 64px;
    height: 64px;
    font-size: var(--fontSizeHero700);
}

.app-account {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: min(320px, calc(100vw - 32px));
    padding: 4px 0;
}

.app-account-who {
    display: flex;
    align-items: center;
    gap: 16px;
}

.app-account-names {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.app-account-name {
    font-size: var(--fontSizeBase400);
    line-height: var(--lineHeightBase400);
    font-weight: var(--fontWeightSemibold);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-account-email {
    color: var(--colorNeutralForeground2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-account-action {
    justify-content: flex-start;
}

/* KAN-375: a new API key, shown once: in a box of its own, in a monospaced font, to read or select whole. */
.app-secret {
    margin: 12px 0;
    padding: 12px;
    border: 1px solid var(--colorNeutralStroke1);
    border-radius: var(--borderRadiusMedium);
    background: var(--colorNeutralBackground3);
    overflow-wrap: anywhere;
}

.app-secret code {
    font-family: Consolas, "Cascadia Mono", monospace;
    font-size: var(--fontSizeBase400);
    user-select: all;
}

/* A row for something no longer in use (a revoked API key): its text in the secondary ink. */
.app-row-muted td {
    color: var(--colorNeutralForeground3);
}

/* KAN-374: Your account's top, as the account menu shows the user: their initials, name, role and business, email. */
.app-account-card {
    display: flex;
    align-items: center;
    gap: 16px;
    max-width: var(--ss-reading-width);
    margin: 8px 0 8px;
    padding: 16px;
    border: 1px solid var(--colorNeutralStroke2);
    border-radius: var(--borderRadiusLarge);
    background: var(--colorNeutralBackground1);
}

.app-account-card-names {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    color: var(--colorNeutralForeground2);
}

.app-account-card-name {
    color: var(--colorNeutralForeground1);
    font-size: var(--fontSizeBase500);
    line-height: var(--lineHeightBase500);
    font-weight: var(--fontWeightSemibold);
}

.app-account-card-email {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* A section kept to a reading width, its forms' buttons under their fields (not at the far end of a wide row). */
.app-narrow {
    max-width: 560px;
}

.app-narrow .app-record-form .app-form-actions {
    justify-content: flex-start;
}

/* Fluent's base styles keep the body from scrolling (height 100dvh, overflow hidden): as the desktop's main window, the
   frame stays put and the page scrolls inside it, the menu on its own. The frame is a column the height of the window:
   the update bar and the header take their room, the shell the rest. */
.app-root {
    display: flex;
    flex-direction: column;
    height: 100dvh;
}

.app-root > .ss-header,
.app-root > fluent-message-bar {
    flex: none;
}

/* The page's column is minmax(0, 1fr), not 1fr (whose least width is its content's): a wide table scrolls inside its
   own box instead of making the whole page wider than the window (KAN-374, WCAG 1.4.10). */
.app-shell {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    flex: 1 1 auto;
    min-height: 0;
}

.app-shell > .app-nav,
.app-shell > .app-content {
    overflow-y: auto;
}

/* A page opened over a main page (KAN-366, ModalHost), as the desktop's form and details windows: a dialog 760 wide
   (wider for one with a list, a board or the point of sale), 8 px corners as a window's, 24 inside, its title bar with
   Close, its page scrolling inside it; the main page dimmed under it. */
.app-modal {
    box-sizing: border-box;
    width: min(760px, calc(100vw - 48px));
    max-width: calc(100vw - 48px);
    max-height: calc(100dvh - 48px);
    padding: 0;
    border: 1px solid var(--colorNeutralStroke2);
    border-radius: var(--borderRadiusXLarge);
    background: var(--colorNeutralBackground1);
    color: var(--colorNeutralForeground1);
    box-shadow: var(--shadow64);
    display: flex;
    flex-direction: column;
}

.app-modal:not([open]) {
    display: none;
}

.app-modal:has(.app-table-wrap, .app-board, .app-pos, .app-floor, .app-kitchen, .app-detail-grid) {
    width: min(1100px, calc(100vw - 48px));
}

.app-modal::backdrop {
    background: rgba(0, 0, 0, 0.3);
}

/* KAN-374: Close in the dialog's top corner, on the title's line (the title bar a window has), not on a row of its own. */
.app-modal {
    position: relative;
}

.app-modal-bar {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 3;
}

.app-modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 20px 24px 24px;
}

.app-modal-body > .app-page-header:first-child h1,
.app-modal-body > h1:first-child {
    padding-inline-end: 40px;
}

/* The page's title in a dialog, as the desktop's FormTitle: Subtitle (20, semibold); its sections' as Body strong. Also
   for a dialog a page opens over itself (AppDialog, KAN-370), which sits in the page's content. */
.app-modal-body h1,
.app-content .app-modal-body h1 {
    margin: 0 0 8px;
    font-size: var(--fontSizeBase500);
    line-height: var(--lineHeightBase500);
    font-weight: var(--fontWeightSemibold);
}

.app-modal-body h2,
.app-content .app-modal-body h2 {
    margin: 16px 0 8px;
    font-size: var(--fontSizeBase400);
    line-height: var(--lineHeightBase400);
    font-weight: var(--fontWeightSemibold);
}

.app-modal-body .app-record-form,
.app-modal-body .app-card.app-detail {
    max-width: none;
}

@media (max-width: 640px) {
    .app-modal {
        width: calc(100vw - 16px);
        max-width: calc(100vw - 16px);
        max-height: calc(100dvh - 16px);
    }

    .app-modal-body {
        padding: 0 12px 12px;
    }
}

/* Signed out: the page scrolls as a whole. */
.app-card-page {
    height: 100dvh;
    overflow-y: auto;
}

/* The menu (the desktop's navigation pane): open, 260 wide with its pages' names; compact, 48 wide with their icons;
   hidden in a small window (opened there, it takes the window's width above the page). */
.app-nav {
    box-sizing: border-box;
    width: var(--app-nav-width);
    border-inline-end: 1px solid var(--colorNeutralStroke2);
    background: var(--colorNeutralBackground1);
    padding: 4px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.app-nav-compact {
    width: var(--app-nav-compact-width);
}

.app-nav-hidden {
    display: none;
}

.app-nav-top {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.app-nav-toggle {
    align-self: flex-start;
}

.app-nav-search {
    box-sizing: border-box;
    width: 100%;
    min-height: 32px;
    padding: 0 10px;
    border: 1px solid var(--colorNeutralStroke1);
    border-bottom-color: var(--colorNeutralStrokeAccessible);
    border-radius: var(--borderRadiusMedium);
    background: var(--colorNeutralBackground1);
    color: var(--colorNeutralForeground1);
    font: inherit;
}

.app-nav-search:focus {
    border-bottom: 2px solid var(--colorCompoundBrandStroke);
    outline: none;
}

.app-nav-items {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.app-nav-footer {
    margin-top: auto;
    padding-top: 8px;
    border-top: 1px solid var(--colorNeutralStroke2);
}

/* An item, as WinUI's: 36 high, its icon then its name, a subtle fill under the pointer, and a 3 px accent bar beside
   the page open. */
.app-nav-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    box-sizing: border-box;
    width: 100%;
    min-height: 36px;
    padding: 0 10px;
    border: none;
    border-radius: var(--borderRadiusMedium);
    background: none;
    color: var(--colorNeutralForeground1);
    font: inherit;
    text-align: start;
    text-decoration: none;
    cursor: pointer;
}

.app-nav-item:hover {
    background: var(--colorSubtleBackgroundHover);
    color: var(--colorNeutralForeground1);
}

.app-nav-item:focus-visible {
    outline: 2px solid var(--colorStrokeFocus2);
    outline-offset: -2px;
}

.app-nav-item.current {
    background: var(--colorSubtleBackgroundSelected);
}

.app-nav-item.current::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 50%;
    width: 3px;
    height: 16px;
    margin-top: -8px;
    border-radius: 1.5px;
    background: var(--colorBrandStroke1);
}

.app-nav-item svg {
    flex: none;
}

.app-nav-text {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-nav-chevron {
    transition: transform 0.15s;
}

.app-nav-area.expanded > .app-nav-item .app-nav-chevron {
    transform: rotate(180deg);
}

/* An area's pages, indented under it. */
.app-nav-pages {
    margin-top: 2px;
}

.app-nav-pages .app-nav-item {
    padding-inline-start: 42px;
}

.app-nav-none {
    padding: 8px 12px;
    color: var(--colorNeutralForeground2);
}

/* Compact: the icons alone, each named in its tooltip. */
.app-nav-compact .app-nav-text,
.app-nav-compact .app-nav-chevron,
.app-nav-compact .app-nav-pages {
    display: none;
}

.app-nav-compact .app-nav-item {
    justify-content: center;
    padding: 0;
}

.app-content {
    min-width: 0;
    padding: var(--app-page-margin) var(--app-page-margin) 48px;
}

/* A page's title, as the desktop's PageTitle: Title (28, semibold), with what the page is for under it. */
.app-content h1 {
    margin: 0 0 8px;
    font-size: var(--fontSizeHero700);
    line-height: var(--lineHeightHero700);
    font-weight: var(--fontWeightSemibold);
}

/* A section's heading, as the desktop's SectionHeader: Body Strong (14, semibold), 24 above. */
.app-content .app-section h2 {
    margin: 24px 0 8px;
    font-size: var(--fontSizeBase300);
    line-height: var(--lineHeightBase300);
    font-weight: var(--fontWeightSemibold);
}

/* Nothing to show (KAN-374): a panel under the toolbar saying so, why or what the list is for, and the next step (Add
   the first one, or Clear search when a search found nothing). */
.app-content .ss-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin-top: 8px;
    padding: 40px 16px;
    border: 1px dashed var(--colorNeutralStroke1);
    border-radius: var(--borderRadiusLarge);
    background: var(--colorNeutralBackground1);
    color: var(--colorNeutralForeground2);
    text-align: center;
}

.app-content .ss-empty h2 {
    margin: 0;
    color: var(--colorNeutralForeground1);
    font-size: var(--fontSizeBase400);
    line-height: var(--lineHeightBase400);
    font-weight: var(--fontWeightSemibold);
}

.app-content .ss-empty p {
    margin: 4px 0 0;
    max-width: 60ch;
}

.app-content .ss-empty .app-form-actions {
    justify-content: center;
    margin-top: 12px;
}

.app-details {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 8px 24px;
    margin: 16px 0;
}

.app-details dt {
    color: var(--colorNeutralForeground2);
}

.app-details dd {
    margin: 0;
}

/* A small window (640 and narrower, the desktop's minimal pane): the menu hidden behind the header's menu button and,
   opened, the window's width above the page; the page's margin 12. */
@media (max-width: 640px) {
    :root {
        --app-page-margin: 12px;
    }

    .app-shell {
        grid-template-columns: minmax(0, 1fr);
    }

    .app-nav-overlay {
        width: 100%;
        border-inline-end: none;
        border-bottom: 1px solid var(--colorNeutralStroke2);
    }

    .app-header fluent-button {
        min-width: 0;
        flex: none;
    }
}

@media (min-width: 641px) {
    .app-menu-button {
        display: none;
    }
}

/* KAN-352: the pages' shared pieces. */
.app-page-header {
    margin-bottom: 8px;
}

.app-page-description {
    margin: 0 0 12px;
    max-width: var(--ss-reading-width);
    color: var(--colorNeutralForeground2);
}

/* KAN-374: the fields' boxes line up at the bottom, whether or not a label sits above them (a search has none, a filter
   has one); the actions (PageHeader's Actions: Add, Import, Settings) one group at the end, wrapping as a whole. */
.app-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: flex-end;
    margin-bottom: 8px;
}

.app-toolbar-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 8px;
    margin-inline-start: auto;
}

/* The Filters button is a phone's only, and only for a toolbar with filters. */
.app-filters-button {
    display: none;
}

@media (max-width: 640px) {
    .app-toolbar > * {
        order: 1;
    }

    .app-toolbar > .app-search {
        order: -2;
        flex: 1 1 100%;
    }

    .app-toolbar:has(> :is(.app-filter, .app-choice:not([role="radiogroup"]), fluent-checkbox, fluent-field:not(.app-search), fluent-datepicker, fluent-date-picker)) > .app-filters-button {
        display: inline-flex;
        order: -1;
    }

    .app-toolbar > :is(.app-filter, .app-choice:not([role="radiogroup"]), fluent-checkbox, fluent-field:not(.app-search), fluent-datepicker, fluent-date-picker) {
        order: 0;
        flex: 1 1 100%;
    }

    .app-page-header:not(.app-filters-open) .app-toolbar > :is(.app-filter, .app-choice:not([role="radiogroup"]), fluent-checkbox, fluent-field:not(.app-search), fluent-datepicker, fluent-date-picker) {
        display: none;
    }

    .app-toolbar-actions {
        margin-inline-start: 0;
    }

    .app-toolbar fluent-button,
    .app-pager fluent-button,
    .app-record-form fluent-button {
        min-height: 40px;
    }
}

.app-loading-bar {
    width: 100%;
    margin-bottom: 8px;
}

.app-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.app-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--colorNeutralStroke2);
    border-radius: var(--borderRadiusMedium);
    background: var(--colorNeutralBackground1);
}

.app-table {
    width: 100%;
    border-collapse: collapse;
}

.app-table th,
.app-table td {
    padding: 8px 12px;
    text-align: start;
    border-bottom: 1px solid var(--colorNeutralStroke2);
    vertical-align: middle;
}

.app-table th {
    font-weight: var(--fontWeightSemibold);
    color: var(--colorNeutralForeground2);
}

.app-table tbody tr:hover {
    background: var(--colorNeutralBackground1Hover);
}

.app-table .app-number {
    text-align: end;
    font-variant-numeric: tabular-nums;
}

.app-unread td {
    font-weight: var(--fontWeightSemibold);
}

.app-cut {
    max-width: 48ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-wrap {
    white-space: pre-wrap;
}

.app-row-actions {
    width: 1%;
    white-space: nowrap;
}

/* KAN-374: a list on a phone, each row a card: its first column as the card's title, the other columns under it each
   with its heading (data-label, from app.js), its More actions in the corner; a tap on the card opens the record. Not
   the tables inside a form or the point of sale, which stay tables. */
@media (max-width: 640px) {
    .app-table-wrap:not(form .app-table-wrap, .app-pos .app-table-wrap) {
        overflow: visible;
        border: none;
        background: none;
    }

    :is(.app-table-wrap:not(form .app-table-wrap, .app-pos .app-table-wrap)) > .app-table :is(tbody, tr, td) {
        display: block;
    }

    :is(.app-table-wrap:not(form .app-table-wrap, .app-pos .app-table-wrap)) > .app-table > thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
    }

    :is(.app-table-wrap:not(form .app-table-wrap, .app-pos .app-table-wrap)) > .app-table > tbody > tr {
        position: relative;
        margin-bottom: 8px;
        padding: 12px 52px 12px 16px;
        border: 1px solid var(--colorNeutralStroke2);
        border-radius: var(--borderRadiusLarge);
        background: var(--colorNeutralBackground1);
        box-shadow: var(--shadow2);
        cursor: pointer;
    }

    :is(.app-table-wrap:not(form .app-table-wrap, .app-pos .app-table-wrap)) > .app-table > tbody > tr > td {
        display: flex;
        justify-content: space-between;
        gap: 12px;
        padding: 2px 0;
        border: none;
        text-align: end;
    }

    :is(.app-table-wrap:not(form .app-table-wrap, .app-pos .app-table-wrap)) > .app-table > tbody > tr > td::before {
        content: attr(data-label);
        flex: none;
        max-width: 50%;
        color: var(--colorNeutralForeground2);
        text-align: start;
    }

    :is(.app-table-wrap:not(form .app-table-wrap, .app-pos .app-table-wrap)) > .app-table > tbody > tr > td:first-child {
        display: block;
        margin-bottom: 4px;
        text-align: start;
        font-size: var(--fontSizeBase400);
        line-height: var(--lineHeightBase400);
        font-weight: var(--fontWeightSemibold);
    }

    :is(.app-table-wrap:not(form .app-table-wrap, .app-pos .app-table-wrap)) > .app-table > tbody > tr > :is(td:first-child, td.app-row-actions)::before {
        content: none;
    }

    :is(.app-table-wrap:not(form .app-table-wrap, .app-pos .app-table-wrap)) > .app-table > tbody > tr > td:empty {
        display: none;
    }

    /* A long text cut short on one line in a table wraps in a card instead. */
    :is(.app-table-wrap:not(form .app-table-wrap, .app-pos .app-table-wrap)) > .app-table .app-cut {
        max-width: 100%;
        white-space: normal;
    }

    :is(.app-table-wrap:not(form .app-table-wrap, .app-pos .app-table-wrap)) > .app-table > tbody > tr > td.app-row-actions {
        position: absolute;
        top: 6px;
        right: 4px;
        width: auto;
        padding: 0;
    }
}

.app-pager {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    color: var(--colorNeutralForeground2);
}

.app-pager-buttons {
    display: flex;
    align-items: center;
    gap: 4px;
}

.app-card.app-detail {
    max-width: var(--ss-reading-width);
    margin-bottom: 16px;
}

.app-stats {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
    margin: 16px 0;
}

.app-stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px;
    border-radius: var(--app-card-radius);
    background: var(--colorNeutralBackground1);
    border: 1px solid var(--colorNeutralStroke2);
}

.app-stat-label {
    color: var(--colorNeutralForeground2);
}

/* A figure as the desktop's dashboard cards show it: Title (28, semibold). */
.app-stat-value {
    font-size: var(--fontSizeHero700);
    line-height: var(--lineHeightHero700);
    font-weight: var(--fontWeightSemibold);
    font-variant-numeric: tabular-nums;
}

.app-stat-detail {
    color: var(--colorNeutralForeground3);
    font-size: var(--fontSizeBase200);
}

/* KAN-374: a business's figures in one grid: four across on a wide window, three on a laptop's, two below (a phone too),
   so every row is as wide as the others and the figures come before the charts. */
.app-stats-dashboard {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: 16px;
}

@media (max-width: 1199px) {
    .app-stats-dashboard {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 899px) {
    .app-stats-dashboard {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 480px) {
    .app-stats-dashboard .app-stat-value {
        font-size: var(--fontSizeBase500);
        line-height: var(--lineHeightBase500);
    }
}

/* How a figure changed against the period before: green when good for the business, red when not. */
.app-stat-change {
    color: var(--colorNeutralForeground2);
    font-variant-numeric: tabular-nums;
}

.app-stat-good {
    color: var(--colorStatusSuccessForeground1);
}

.app-stat-bad {
    color: var(--colorStatusDangerForeground1);
}

/* The dashboard's charts two to a row, as the desktop's (one across on a narrow window); the sales trend on its own. */
.app-charts {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 16px 0;
}

.app-charts-1 {
    grid-template-columns: minmax(0, 1fr);
}

/* The figures' cards in the desktop's rows: six, four or three across, reflowing on a narrow window. */
.app-stats-6 {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
}

.app-stats-4 {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
}

/* Large amounts (a return's to pay): wider figures, each as wide whatever how many (the empty columns kept). */
.app-stats-money {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
}

.app-stats-3 {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
}

@media (max-width: 900px) {
    .app-charts {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Charts drawn as SVG (KAN-366), in the data-viz palette: one hue for a single series (the desktop's blue), the fixed
   categorical order for a pie's slices, text in the secondary ink, hairline gridlines; the dark steps for the Dark theme. */
:root {
    --viz-1: #2a78d6;
    --viz-2: #eb6834;
    --viz-3: #1baf7a;
    --viz-4: #eda100;
    --viz-5: #e87ba4;
    --viz-6: #008300;
    --viz-7: #6250d6;
    --viz-8: #e34948;
    --viz-grid: #e1e0d9;
}

body[data-theme="dark"] {
    --viz-1: #3987e5;
    --viz-2: #d95926;
    --viz-3: #199e70;
    --viz-4: #c98500;
    --viz-5: #d55181;
    --viz-6: #008300;
    --viz-7: #9085e9;
    --viz-8: #e66767;
    --viz-grid: #2c2c2a;
}

.app-viz {
    display: block;
    width: 100%;
    height: 240px;
}

.app-viz-grid {
    stroke: var(--viz-grid);
    stroke-width: 1;
}

.app-viz-axis {
    stroke: var(--colorNeutralStroke1);
    stroke-width: 1;
}

.app-viz-text {
    fill: var(--colorNeutralForeground2);
    font-size: 12px;
}

.app-viz-line {
    fill: none;
    stroke: var(--viz-1);
    stroke-width: 2;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.app-viz-marker {
    fill: var(--colorNeutralBackground1);
    stroke: var(--viz-1);
    stroke-width: 2;
}

.app-viz-marker:hover {
    fill: var(--viz-1);
}

.app-viz-bar {
    fill: var(--viz-1);
}

.app-viz-bar:hover {
    opacity: 0.85;
}

.app-pie {
    display: flex;
    align-items: center;
    gap: 16px;
}

.app-viz-pie {
    flex: none;
    width: 160px;
    height: 160px;
}

.app-viz-slice {
    stroke: var(--colorNeutralBackground1);
    stroke-width: 2;
}

.app-viz-slice:hover {
    opacity: 0.85;
}

.app-viz-legend {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.app-viz-legend li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
}

.app-viz-swatch {
    width: 10px;
    height: 10px;
    border-radius: 2px;
}

.app-viz-legend-label {
    overflow-wrap: anywhere;
}

.app-viz {
    height: auto;
    max-height: 260px;
}

.app-viz-legend-value {
    color: var(--colorNeutralForeground2);
    font-variant-numeric: tabular-nums;
}

@media (forced-colors: active) {
    .app-viz-line, .app-viz-marker { stroke: CanvasText; }
    .app-viz-bar, .app-viz-slice { fill: Highlight; }
    .app-viz-slice { stroke: Canvas; }
}

.app-chart {
    margin: 0;
    padding: 16px;
    border-radius: var(--app-card-radius);
    background: var(--colorNeutralBackground1);
    border: 1px solid var(--colorNeutralStroke2);
}

.app-chart figcaption {
    margin-bottom: 12px;
    font-weight: var(--fontWeightSemibold);
}

.app-chart ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 6px;
}

.app-chart li {
    display: grid;
    grid-template-columns: minmax(0, 10em) 1fr auto;
    align-items: center;
    gap: 8px;
}

.app-chart-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-chart-track {
    height: 12px;
    border-radius: 6px;
    background: var(--colorNeutralBackground3);
}

.app-chart-bar {
    display: block;
    height: 100%;
    border-radius: 6px;
    background: var(--colorBrandBackground);
}

.app-chart-value {
    font-variant-numeric: tabular-nums;
}

.app-alert-list {
    margin: 4px 0;
    padding-inline-start: 20px;
}

.app-nav-search {
    box-sizing: border-box;
    width: 100%;
    min-height: 32px;
    margin-bottom: 8px;
    padding: 0 10px;
    border: 1px solid var(--colorNeutralStroke1);
    border-bottom-color: var(--colorNeutralStrokeAccessible);
    border-radius: var(--borderRadiusMedium);
    background: var(--colorNeutralBackground1);
    color: var(--colorNeutralForeground1);
    font: inherit;
}

.app-success {
    position: fixed;
    inset-inline: 16px;
    bottom: 16px;
    z-index: 50;
    max-width: 520px;
    margin-inline: auto;
}

@media (forced-colors: active) {
    .app-chart-bar {
        background: Highlight;
    }
}

/* KAN-353: forms, the description editor, images and search. */
.app-record-form {
    max-width: 720px;
}

.app-form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

/* A form's Save and Cancel at its bottom right, 24 below the fields, as the desktop's DialogButtons (KAN-366). KAN-374:
   they stay in sight at the bottom of the dialog or the page while a long form scrolls, on a bar of their own. */
.app-record-form .app-form-actions,
.app-dialog-buttons {
    justify-content: flex-end;
    margin-top: 24px;
}

.app-modal-body .app-dialog-buttons,
.app-content .app-record-form > .app-dialog-buttons {
    position: sticky;
    z-index: 2;
    padding-block: 12px;
    border-top: 1px solid var(--colorNeutralStroke2);
    background: var(--colorNeutralBackground1);
}

.app-modal-body .app-dialog-buttons {
    bottom: -24px;
    margin-inline: -24px;
    margin-bottom: -24px;
    padding: 12px 24px 24px;
}

.app-content .app-record-form > .app-dialog-buttons {
    bottom: -48px;
    padding-bottom: 48px;
    margin-bottom: -48px;
}

/* The business's own fields (and other optional parts of a form) folded under their heading until wanted. */
.app-form-section {
    border-top: 1px solid var(--colorNeutralStroke2);
    padding-top: 8px;
}

.app-form-section > summary {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    cursor: pointer;
    font-weight: var(--fontWeightSemibold);
    list-style: none;
}

.app-form-section > summary::-webkit-details-marker {
    display: none;
}

.app-form-section > summary::after {
    content: "";
    width: 8px;
    height: 8px;
    margin-inline-start: auto;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.15s ease;
}

.app-form-section[open] > summary::after {
    transform: rotate(-135deg);
}

.app-form-section-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-block: 4px 8px;
}

.app-form-section-count {
    color: var(--colorNeutralForeground2);
    font-weight: var(--fontWeightRegular);
}

.app-field-label {
    font-weight: var(--fontWeightSemibold);
}

.app-search {
    min-width: min(100%, 240px);
}

.app-editor {
    border: 1px solid var(--colorNeutralStroke1);
    border-bottom-color: var(--colorNeutralStrokeAccessible);
    border-radius: var(--borderRadiusMedium);
    background: var(--colorNeutralBackground1);
}

.app-editor:focus-within {
    border-bottom: 2px solid var(--colorCompoundBrandStroke);
}

.app-editor-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
    padding: 4px;
    border-bottom: 1px solid var(--colorNeutralStroke2);
}

.app-field .app-editor-style {
    width: auto;
    min-height: 32px;
    margin-inline-end: 4px;
    padding: 0 8px;
    border: 1px solid var(--colorNeutralStroke1);
    border-radius: var(--borderRadiusMedium);
    background: var(--colorNeutralBackground1);
    color: var(--colorNeutralForeground1);
    font: inherit;
}

.app-editor-link {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 8px;
    padding: 8px;
    border-bottom: 1px solid var(--colorNeutralStroke2);
}

.app-editor-text {
    min-height: 120px;
    max-height: 420px;
    overflow-y: auto;
    padding: 8px 12px;
    outline: none;
}

.app-editor-text p,
.app-rich-text p {
    margin: 0 0 8px;
}

.app-rich-text h1,
.app-rich-text h2,
.app-rich-text h3 {
    margin: 8px 0;
}

.app-rich-text {
    max-width: var(--ss-reading-width);
}

.app-image-field {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
}

.app-image {
    width: 96px;
    height: 96px;
    object-fit: contain;
    border: 1px solid var(--colorNeutralStroke2);
    border-radius: var(--borderRadiusMedium);
    background: var(--colorNeutralBackground2);
}

.app-image-none {
    display: grid;
    place-items: center;
    color: var(--colorNeutralForeground3);
}

.app-image-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.app-detail .app-details {
    margin: 0;
}

@media (max-width: 720px) {
    .app-details {
        grid-template-columns: 1fr;
        gap: 2px;
    }

    .app-details dd {
        margin-bottom: 8px;
    }
}

/* A column's sort button fills its heading (KAN-374: a target, not a 20 px word). */
.app-sort {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 32px;
    width: 100%;
    justify-content: flex-start;
    padding: 0;
    border: none;
    background: none;
    color: inherit;
    font: inherit;
    font-weight: inherit;
    cursor: pointer;
}

.app-number .app-sort {
    justify-content: flex-end;
}

.app-sort:focus-visible {
    outline: 2px solid var(--colorStrokeFocus2);
    outline-offset: 2px;
}

.app-taxpayer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    color: var(--colorNeutralForeground2);
}

.app-record-form h2 {
    margin: 16px 0 0;
    font-size: var(--fontSizeBase400);
    font-weight: var(--fontWeightSemibold);
}
.app-choice,
.app-choice > *,
.app-choice fluent-dropdown {
    width: 100%;
    box-sizing: border-box;
}
/* A list's toolbar as the desktop's ToolbarPanel (KAN-366): its search, filters and buttons on one line while they fit
   (on to another when they don't), each aligned to the line's bottom, so a filter under its label lines up with the
   search box and the buttons beside it; Fluent's own margin around a field is left out. */
.app-toolbar {
    align-items: flex-end;
}

.app-toolbar fluent-field {
    margin: 0;
}

.app-toolbar .app-choice {
    width: auto;
    min-width: min(100%, 200px);
}

/* Option buttons (a board or a list, the dashboard's period, tiles or a list): side by side, each as wide as its words. */
.app-choice[role="radiogroup"] {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    width: auto;
    min-width: 0;
}

.app-choice[role="radiogroup"] > * {
    width: auto;
}

.app-filter {
    min-width: min(100%, 180px);
}

/* Option buttons with their label above them, in a toolbar's line as a drop-down under its label (Monthly DGII reports'
   Report, KAN-376): spaced as Fluent's field (its label 2 px over the control, 4 px under it), so the labels and the
   controls beside each other line up. */
.app-labelled-choice {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-bottom: 4px;
}

/* Monthly DGII reports (KAN-376, as the desktop's page): where the month stands, its figures, its rows or what to put
   right, then the file and filing at the foot; a return's lines with the records behind one and what to put right beside
   them on a wide screen. */
.app-dgii-status {
    margin: 8px 0 0;
}

.app-dgii-tabs {
    margin-bottom: 12px;
}

.app-dgii-filing {
    margin-top: 16px;
}

.app-dgii-return {
    display: grid;
    gap: 16px;
    grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 1100px) {
    .app-dgii-return {
        grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    }
}

/* A problem to put right, where it comes from, and the button opening it at the row's end (as the desktop's list). */
.app-issue-list {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.app-issue-list > li {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border: 1px solid var(--colorNeutralStroke2);
    border-radius: var(--app-card-radius);
    background: var(--colorNeutralBackground1);
}

.app-issue-list > li > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1 1 280px;
}

.app-issue-message {
    color: var(--colorStatusWarningForeground1);
}

.app-filter-number {
    min-width: min(100%, 180px);
}

.app-number-box {
    display: flex;
    align-items: center;
    gap: 2px;
    border: 1px solid var(--colorNeutralStroke1);
    border-bottom-color: var(--colorNeutralStrokeAccessible);
    border-radius: var(--borderRadiusMedium);
    background: var(--colorNeutralBackground1);
}

.app-number-box:focus-within {
    border-bottom: 2px solid var(--colorCompoundBrandStroke);
}

.app-field .app-number-input {
    flex: 1 1 auto;
    min-width: 4ch;
    min-height: 30px;
    border: none;
    background: transparent;
    text-align: end;
    outline: none;
}

.app-number-suffix {
    color: var(--colorNeutralForeground2);
}

.app-table tr.app-low td {
    background: var(--colorPaletteYellowBackground1);
}

.app-badge {
    margin-inline-start: 8px;
}

.app-chosen {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--colorPaletteGreenForeground1);
}

.app-picker-results {
    margin: 0;
    padding: 4px;
    list-style: none;
    border: 1px solid var(--colorNeutralStroke2);
    border-radius: var(--borderRadiusMedium);
    background: var(--colorNeutralBackground1);
    max-height: 280px;
    overflow-y: auto;
}

.app-picker-results button {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 8px;
    border: none;
    border-radius: var(--borderRadiusMedium);
    background: none;
    color: inherit;
    font: inherit;
    text-align: start;
    cursor: pointer;
}

.app-picker-results button:hover,
.app-picker-results button[aria-pressed="true"] {
    background: var(--colorNeutralBackground1Hover);
}

.app-picker-results button:focus-visible {
    outline: 2px solid var(--colorStrokeFocus2);
}

.app-checklist {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    padding: 8px 12px;
    border: 1px solid var(--colorNeutralStroke2);
    border-radius: var(--borderRadiusMedium);
    max-height: 280px;
    overflow-y: auto;
}

.app-checklist legend {
    font-weight: var(--fontWeightSemibold);
}

.app-inline-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 16px;
}

.app-inline-form fluent-button {
    margin-top: 26px;
}
.app-section-title {
    margin: 24px 0 8px;
    font-size: var(--fontSizeBase400);
    font-weight: var(--fontWeightSemibold);
}
.app-detail-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
    margin-bottom: 16px;
}

.app-detail h2 {
    margin: 0 0 12px;
    font-size: var(--fontSizeBase400);
    font-weight: var(--fontWeightSemibold);
}

.app-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 12px;
}

.app-gallery-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin: 0;
}

.app-gallery-item .app-image {
    width: 140px;
    height: 140px;
}

.app-plain-list {
    margin: 0 0 8px;
    padding-inline-start: 20px;
}
.app-pack {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: none;
}

.app-pack legend {
    padding: 0 4px;
    font-weight: var(--fontWeightSemibold);
}

.app-pack h3 {
    margin: 8px 0 0;
    font-size: var(--fontSizeBase300);
    font-weight: var(--fontWeightSemibold);
}

.app-tier {
    align-items: end;
}
/* KAN-354: the point of sale: the cart beside the payment, one above the other on a narrow window. */
.app-pos {
    display: grid;
    gap: 16px;
    margin-top: 16px;
    grid-template-columns: minmax(0, 2fr) minmax(min(100%, 320px), 1fr);
    align-items: start;
}

.app-pos-cart,
.app-pos-pay {
    max-width: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* KAN-366: the Sales page as the desktop's: the products at the left, the cart 420 wide at the right (under it on a
   narrow window); the cart's header underlined, each line in two rows, the totals, then Checkout full width and the
   other actions two to a row. */
.app-pos-page {
    grid-template-columns: minmax(0, 1fr) 420px;
}

.app-pos-left,
.app-pos-right {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.app-pos-search {
    margin: 0;
    align-items: flex-end;
}

.app-pos-search > fluent-field,
.app-pos-search > fluent-text-input {
    flex: 1 1 auto;
    margin: 0;
}

/* The buttons level with the search box (a field is 2 px taller than its box), not pushed down as beside a labelled field. */
.app-pos-search > fluent-button {
    margin: 0 0 2px;
}

/* The shortcuts list, as the desktop's window: the keys in a fixed-width column, then what they do. */
.app-pos-shortcuts {
    display: grid;
    grid-template-columns: minmax(170px, auto) minmax(0, 1fr);
    gap: 8px 12px;
    margin: 0 0 8px;
}

.app-pos-shortcuts dd {
    margin: 0;
}

.app-pos-shortcuts kbd {
    font-family: Consolas, "Cascadia Mono", monospace;
    font-weight: var(--fontWeightSemibold);
}

.app-pos-sale-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.app-pos-results {
    max-height: none;
    min-height: 200px;
    flex: 1 1 auto;
}

.app-pos-results-empty {
    border: 1px solid var(--colorNeutralStroke2);
    border-radius: var(--borderRadiusMedium);
    background: var(--colorNeutralBackground1);
}

.app-pos-result-name {
    flex: 1 1 auto;
}

.app-pos-result-price {
    font-variant-numeric: tabular-nums;
}

.app-pos-result-add {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--colorBrandForegroundLink);
}

.app-pos-status {
    margin: 0;
}

.app-pos-cart-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--colorNeutralStroke1);
}

.app-pos-cart-head h2 {
    margin: 0;
    font-size: var(--fontSizeBase400);
    line-height: var(--lineHeightBase400);
    font-weight: var(--fontWeightSemibold);
}

/* KAN-374: the register asked for once; then named in the cart's header, with Change when there are others. */
.app-pos-register-chosen {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 8px;
    margin: 0;
    color: var(--colorNeutralForeground2);
}

.app-pos-register-prompt {
    padding: 16px;
    border: 1px solid var(--colorBrandStroke1);
    border-radius: var(--borderRadiusLarge);
    background: var(--colorNeutralBackground1);
}

.app-pos-register-prompt h3 {
    margin: 0 0 4px;
    font-size: var(--fontSizeBase400);
    font-weight: var(--fontWeightSemibold);
}

.app-pos-register-choices {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

/* The categories as chips above the products (scrolled across when they don't fit), and the tiles or list switch. */
.app-pos-browse {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.app-pos-categories {
    display: flex;
    gap: 6px;
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    padding: 2px;
    scrollbar-width: thin;
}

.app-pos-view {
    display: flex;
    gap: 4px;
    flex: none;
    margin-inline-start: auto;
}

.app-chip {
    flex: none;
    min-height: 36px;
    padding: 0 14px;
    border: 1px solid var(--colorNeutralStroke1);
    border-radius: var(--borderRadiusCircular);
    background: var(--colorNeutralBackground1);
    color: var(--colorNeutralForeground1);
    font: inherit;
    white-space: nowrap;
    cursor: pointer;
}

.app-chip:hover {
    background: var(--colorNeutralBackground1Hover);
}

.app-chip[aria-checked="true"] {
    border-color: var(--colorBrandStroke1);
    background: var(--colorBrandBackground);
    color: var(--colorNeutralForegroundOnBrand);
}

.app-chip:focus-visible {
    outline: 2px solid var(--colorStrokeFocus2);
    outline-offset: 2px;
}

/* The products as tiles to tap: their name (two lines at most) and price, 72 high, as many across as fit. */
.app-pos-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 8px;
    align-content: start;
    padding: 8px;
}

.app-pos-tiles li {
    display: flex;
}

.app-pos-tiles button {
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    gap: 4px;
    min-height: 72px;
    padding: 10px 12px;
    border: 1px solid var(--colorNeutralStroke2);
    background: var(--colorNeutralBackground1);
}

.app-pos-tiles button:hover {
    border-color: var(--colorBrandStroke1);
    background: var(--colorNeutralBackground1Hover);
}

.app-pos-tiles .app-pos-result-name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-weight: var(--fontWeightSemibold);
    line-height: var(--lineHeightBase300);
}

.app-pos-tiles .app-pos-result-add {
    display: none;
}

.app-pos-results:not(.app-pos-tiles) button {
    min-height: 44px;
    align-items: center;
}

/* On a narrow window, the cart's bar at the bottom: items, total, View cart and Checkout always in reach. */
.app-pos-bar {
    display: none;
}

@media (max-width: 960px) {
    .app-pos-bar {
        position: sticky;
        bottom: -48px;
        z-index: 3;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 8px;
        margin: 0 calc(-1 * var(--app-page-margin)) -48px;
        padding: 12px var(--app-page-margin) 60px;
        border-top: 1px solid var(--colorNeutralStroke1);
        background: var(--colorNeutralBackground1);
        box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08);
    }

    .app-pos-bar-total {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        line-height: var(--lineHeightBase300);
    }

    .app-pos-bar-total strong {
        font-size: var(--fontSizeBase500);
        line-height: var(--lineHeightBase500);
    }

    .app-pos-bar fluent-button {
        min-height: 44px;
    }
}

.app-pos-lines {
    list-style: none;
    margin: 0;
    padding: 4px 8px;
    max-height: 40vh;
    min-height: 120px;
    overflow-y: auto;
    border: 1px solid var(--colorNeutralStroke2);
    border-radius: var(--borderRadiusMedium);
    background: var(--colorNeutralBackground1);
}

.app-pos-line {
    padding: 8px 0;
    border-bottom: 1px solid var(--colorNeutralStroke2);
}

.app-pos-line:last-child {
    border-bottom: none;
}

.app-pos-line-top {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-weight: var(--fontWeightSemibold);
}

.app-pos-line-total {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.app-pos-line-details {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 2px;
}

.app-pos-line-controls {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
}

.app-pos-line-quantity {
    padding: 0 8px;
    font-variant-numeric: tabular-nums;
}

.app-number-compact .app-number-input {
    width: 56px;
    min-width: 56px;
    flex: none;
    text-align: center;
}

.app-pos-empty {
    padding: 24px 8px;
    border: 1px solid var(--colorNeutralStroke2);
    border-radius: var(--borderRadiusMedium);
    background: var(--colorNeutralBackground1);
}

.app-pos-details {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.app-pos-totals {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2px 12px;
    margin: 4px 0;
}

.app-pos-totals dd {
    margin: 0;
    text-align: end;
    font-variant-numeric: tabular-nums;
}

.app-pos-totals .app-pos-total {
    font-weight: var(--fontWeightSemibold);
}

.app-pos-customer-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.app-pos-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.app-pos-actions fluent-button {
    width: 100%;
}

@media (max-width: 960px) {
    .app-pos,
    .app-pos-page {
        grid-template-columns: 1fr;
    }
}
/* KAN-355: the service orders board: a column per status, side by side, scrolled across on a narrow window. */
.app-board {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(240px, 1fr);
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 8px;
}

.app-board-column {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.app-board-column h2 {
    margin: 0;
    font-size: var(--fontSizeBase300);
    font-weight: var(--fontWeightSemibold);
}

.app-board-card {
    max-width: none;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.app-board-card.app-overdue {
    border-inline-start: 3px solid var(--colorPaletteRedBorder2);
}

.app-board-moves {
    display: flex;
    justify-content: space-between;
}
/* KAN-355: a list's entry chosen to show its details below, as a link. */
.app-link-button {
    padding: 0;
    border: none;
    background: none;
    color: var(--colorBrandForegroundLink);
    font: inherit;
    text-align: start;
    text-decoration: underline;
    cursor: pointer;
}

.app-link-button:hover {
    color: var(--colorBrandForegroundLinkHover);
}

/* KAN-355: whether a record is in use: a coloured icon and its word. */
.app-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.app-status-on {
    color: var(--colorPaletteGreenForeground1);
}

.app-status-off {
    color: var(--colorNeutralForeground3);
}

/* KAN-356: a row overdue (an invoice, an account, a payment late) stands out; one voided or cancelled is dimmed. */
.app-table tr.app-overdue td {
    color: var(--colorPaletteRedForeground1);
}

.app-table tr.app-dimmed td {
    color: var(--colorNeutralForegroundDisabled);
}

/* What an invoice's lines add up to, under them at the right. */
.app-totals {
    margin-inline-start: auto;
    min-width: 240px;
}

/* KAN-357: a return's total lines stand out; its form sections head their lines. */
.app-table tr.app-total-row td {
    font-weight: var(--fontWeightSemibold);
}

.app-table th[scope="colgroup"] {
    text-align: start;
    background: var(--colorNeutralBackground2);
}

/* KAN-358: the dining room: each area's tables as tiles, free, being served or waiting for the bill; outlined when the
   kitchen has something of the order ready. */
.app-floor {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 8px;
}

/* KAN-370: a form's longer text (an invoice's footer, a reason) as wide as its other fields, as the desktop's boxes. */
.app-form fluent-textarea,
.app-record-form fluent-textarea {
    display: block;
    width: 100%;
}

.app-form fluent-textarea::part(control),
.app-record-form fluent-textarea::part(control) {
    width: 100%;
    box-sizing: border-box;
}

/* KAN-370: the business's logo in the header, as in the desktop's title bar (32 high, up to 200 wide); its Admins
   choose it to change it. */
/* KAN-374: the business in the header, after a divider: its logo (once set) and its name, cut short when narrow. */
.app-business {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 0 1 auto;
}

.app-business-divider {
    flex: none;
    width: 1px;
    height: 20px;
    background: var(--colorNeutralStroke1);
}

.app-business-logo {
    flex: none;
    height: 28px;
    max-width: 120px;
    object-fit: contain;
}

.app-business-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--colorNeutralForeground2);
    font-weight: var(--fontWeightSemibold);
}

/* KAN-370: the trial's banner under the header, as the desktop's under its title bar; its button a little apart. */
.app-trial-banner-action {
    display: inline-block;
    margin-inline-start: 12px;
}

/* KAN-370: the memberships to choose from, as the desktop's Upgrade membership window lays them out: cards wide enough
   to read their description and what they include, side by side while they fit. */
.app-plans {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 360px));
    gap: 12px;
}

/* KAN-374: a plan as the website's plan cards show it: its name and price, what it is, then what it includes with
   checks; the one chosen with the brand's border; the business's current plan marked as such. */
.app-plan {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    max-width: 480px;
    padding: 20px;
    border: 1px solid var(--colorNeutralStroke2);
    border-radius: var(--borderRadiusLarge);
    background: var(--colorNeutralBackground1);
    box-shadow: var(--shadow2);
    color: var(--colorNeutralForeground1);
    font: inherit;
    text-align: start;
    white-space: normal;
}

button.app-plan {
    cursor: pointer;
}

button.app-plan:hover {
    border-color: var(--colorBrandStroke1);
}

button.app-plan:focus-visible {
    outline: 2px solid var(--colorStrokeFocus2);
    outline-offset: 2px;
}

button.app-plan[aria-checked="true"] {
    border: 2px solid var(--colorBrandStroke1);
    padding: 19px;
}

.app-plan h2,
.app-plan-name {
    margin: 0;
    font-size: var(--fontSizeBase500);
    line-height: var(--lineHeightBase500);
    font-weight: var(--fontWeightSemibold);
}

.app-plan p {
    margin: 0;
}

.app-plan-price {
    font-size: var(--fontSizeBase400);
    font-weight: var(--fontWeightSemibold);
}

.app-plan-badge {
    padding: 2px 8px;
    border-radius: var(--borderRadiusCircular);
    background: var(--colorBrandBackground2);
    color: var(--colorBrandForeground2);
    font-weight: var(--fontWeightSemibold);
}

.app-plan-current {
    margin-bottom: 8px;
}

.app-plan-features {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
    display: grid;
    gap: 4px;
}

.app-plan-features li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.app-plan-features svg {
    flex: none;
    margin-top: 2px;
}

.app-floor-table {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-height: 88px;
    padding: 12px;
    border: 1px solid var(--colorNeutralStroke1);
    border-radius: var(--app-card-radius);
    background: var(--colorNeutralBackground1);
    color: var(--colorNeutralForeground1);
    font: inherit;
    text-align: start;
    cursor: pointer;
}

.app-floor-table:hover {
    background: var(--colorNeutralBackground1Hover);
}

.app-floor-table:focus-visible {
    outline: 2px solid var(--colorStrokeFocus2);
    outline-offset: 2px;
}

.app-floor-table strong {
    font-size: var(--fontSizeBase500);
}

.app-floor-table[data-state="Open"] {
    border-inline-start: 4px solid var(--colorBrandStroke1);
}

.app-floor-table[data-state="Bill"] {
    border-inline-start: 4px solid var(--colorPaletteYellowBorder2);
}

.app-floor-table.app-ready {
    box-shadow: 0 0 0 2px var(--colorPaletteGreenBorder2);
}

/* KAN-358: an order's menu: its products as buttons to add. */
.app-menu-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 6px;
    max-height: 420px;
    overflow-y: auto;
}

.app-menu-grid .app-floor-table {
    min-height: 64px;
}

.app-table tr.app-chosen-row td {
    background: var(--colorNeutralBackground1Selected);
}

/* KAN-358: a group of options (modifiers, how a bill is split) chosen with buttons. */
.app-choice-group {
    border: none;
    margin: 0 0 12px;
    padding: 0;
}

.app-choice-group legend {
    padding: 0;
    margin-bottom: 6px;
    font-weight: var(--fontWeightSemibold);
}

.app-choice-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* KAN-358: the kitchen screen: each ticket a card, oldest first, its heading amber when getting late and red when late;
   an item tapped is started (blue), then ready (green). */
.app-kitchen {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
    align-items: start;
}

.app-kitchen-ticket {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--colorNeutralStroke1);
    border-radius: var(--app-card-radius);
    background: var(--colorNeutralBackground1);
    overflow: hidden;
}

.app-kitchen-head {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 12px;
    background: var(--colorNeutralBackground3);
}

.app-kitchen-head h2 {
    margin: 0;
    font-size: var(--fontSizeBase400);
}

.app-kitchen-ticket[data-state="Warn"] .app-kitchen-head {
    background: var(--colorPaletteYellowBackground2);
}

.app-kitchen-ticket[data-state="Late"] .app-kitchen-head {
    background: var(--colorPaletteRedBackground2);
}

.app-kitchen-lines {
    margin: 0;
    padding: 8px;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.app-kitchen-line {
    width: 100%;
    padding: 8px;
    border: 1px solid var(--colorNeutralStroke2);
    border-radius: var(--borderRadiusMedium);
    background: none;
    color: var(--colorNeutralForeground1);
    font: inherit;
    font-size: var(--fontSizeBase400);
    text-align: start;
    cursor: pointer;
}

.app-kitchen-line[data-state="Started"] {
    border-inline-start: 4px solid var(--colorBrandStroke1);
}

.app-kitchen-line[data-state="Ready"] {
    border-inline-start: 4px solid var(--colorPaletteGreenBorder2);
    color: var(--colorNeutralForeground3);
}

.app-kitchen-line:disabled {
    text-decoration: line-through;
    cursor: default;
}

.app-kitchen-actions {
    display: flex;
    gap: 8px;
    padding: 8px 12px 12px;
}

/* KAN-358: what is printed from the browser (a pre-bill, the kitchen's tickets): only it, copied to the page's end as
   it prints, about the width of a receipt. */
#app-print-root {
    display: none;
}

@media print {
    body.app-printing > *:not(#app-print-root) {
        display: none !important;
    }

    body.app-printing #app-print-root {
        display: block;
        width: 80mm;
    }

    #app-print-root .app-no-print {
        display: none;
    }

    #app-print-root .app-print-area {
        border: none;
        box-shadow: none;
        padding: 0;
    }
}

/* KAN-358: kitchen tickets printed from the browser: each station's on a page of its own, its items big. */
.app-print-ticket p {
    margin: 2px 0;
}

.app-print-ticket .app-print-big {
    font-size: var(--fontSizeBase500);
    font-weight: var(--fontWeightSemibold);
}

@media print {
    .app-print-ticket {
        break-after: page;
    }

    .app-print-ticket:last-of-type {
        break-after: auto;
    }
}

/* KAN-360, KAN-366: the Settings page as Windows Settings and the desktop's: a column up to 1000 wide of rows, each a
   setting's icon, name and line with a chevron at its end. */
.app-settings {
    max-width: 1000px;
}

.app-settings-links {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.app-settings-link {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
    box-sizing: border-box;
    border: 1px solid var(--colorNeutralStroke2);
    border-radius: var(--app-card-radius);
    background: var(--colorNeutralBackground1);
    color: var(--colorNeutralForeground1);
    text-decoration: none;
}

.app-settings-link:hover {
    background: var(--colorNeutralBackground1Hover);
    color: var(--colorNeutralForeground1);
}

.app-settings-link:focus-visible {
    outline: 2px solid var(--colorStrokeFocus2);
    outline-offset: 2px;
}

.app-settings-link-text {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.app-settings-link-text strong {
    font-weight: var(--fontWeightRegular);
}

.app-settings-chevron {
    flex: none;
    color: var(--colorNeutralForeground2);
}

/* About, as the desktop's: a card with the app's icon, its name and copyright, Copy at the right, then the version and
   server, then the related links. */
.app-about {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px;
    border: 1px solid var(--colorNeutralStroke2);
    border-radius: var(--app-card-radius);
    background: var(--colorNeutralBackground1);
}

.app-about-head {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.app-about-names {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 2px;
}

.app-about-name {
    font-size: var(--fontSizeBase500);
    line-height: var(--lineHeightBase500);
    font-weight: var(--fontWeightSemibold);
}

.app-about .app-details {
    margin: 0;
}

.app-about-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
}