/* /Components/Layout/MainLayout.razor.rz.scp.css */
/*
    The topbar has to hold the application name, the restaurant selector and the account on a
    phone as well. The selector is the only one of the three that is doing work there, so the
    other two give way to it rather than pushing it off the edge.
*/

@media (max-width: 600px) {
    .topbar strong[b-17gtbvhgz9] {
        /* Enough to stay recognisable; the full name is in the tab title. */
        max-width: 96px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .topbar .user-name[b-17gtbvhgz9] {
        display: none;
    }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-jsswx4t36u],
.components-reconnect-repeated-attempt-visible[b-jsswx4t36u],
.components-reconnect-failed-visible[b-jsswx4t36u],
.components-pause-visible[b-jsswx4t36u],
.components-resume-failed-visible[b-jsswx4t36u],
.components-rejoining-animation[b-jsswx4t36u] {
    display: none;
}

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


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

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

}

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

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

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

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

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

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

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

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

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

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

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

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

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

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

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

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Layout/StorePicker.razor.rz.scp.css */
/*
    The combobox that replaced the topbar's select. Everything here is the parts a native select
    did not have — the list, the rows, the footer. Heights, colours and radii come from the design
    system's tokens so the box still reads as the same control it was.
*/

.store-search[b-qtxd2kq684] {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.store-search-input[b-qtxd2kq684] {
    height: var(--btn-h);
    width: 200px;
    border: 1px solid var(--cd-border-md);
    border-radius: var(--radius-md);
    padding: 0 32px 0 12px;
    font-size: 12px;
    font-family: inherit;
    color: var(--cd-text);
    background: var(--cd-white);
    outline: none;
    transition: border-color var(--cd-transition);
}

.store-search-input:focus[b-qtxd2kq684] {
    border-color: var(--cd-blue);
}

.store-search-input[b-qtxd2kq684]::placeholder {
    color: var(--cd-muted);
}

.store-search-list[b-qtxd2kq684] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 40;
    min-width: 100%;
    /* Wider than the closed box, because a restaurant name is longer than the field that shows
       it, and clipping the name is the one thing a picker must not do. */
    width: max-content;
    max-width: 340px;
    /* Ten rows or so, then it scrolls. Tall enough to choose from, short enough to leave the
       page behind it visible. */
    max-height: 320px;
    overflow-y: auto;
    background: var(--cd-white);
    border: 1px solid var(--cd-border);
    border-radius: var(--radius-md);
    box-shadow: 0 6px 20px rgb(0 0 0 / 12%);
    padding: 4px;
}

.store-search-option[b-qtxd2kq684] {
    padding: 6px 10px;
    border-radius: calc(var(--radius-md) - 2px);
    font-size: 12px;
    color: var(--cd-text);
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.store-search-option.is-current[b-qtxd2kq684] {
    font-weight: 600;
}

/* One highlight, driven by the component rather than by :hover, so the mouse and the arrow keys
   cannot each light up a different row. */
.store-search-option.is-highlighted[b-qtxd2kq684] {
    background: var(--cd-blue-lt);
    color: var(--cd-blue-dk);
}

.store-search-empty[b-qtxd2kq684],
.store-search-more[b-qtxd2kq684] {
    padding: 6px 10px;
    font-size: 11px;
    color: var(--cd-muted);
}

.store-search-more[b-qtxd2kq684] {
    border-top: 1px solid var(--cd-border);
    margin-top: 4px;
}
/* /Components/Pages/Admin.razor.rz.scp.css */
/* One card per tool, each a link. Wide enough that the sentence underneath is a sentence rather
   than a truncated label — the old context menu gave you eight words and no clue what they did. */
.admin-tools[b-af8ntf1fr8] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 12px;
}

.admin-tool[b-af8ntf1fr8] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px;
    background: var(--cd-white);
    border: 1px solid var(--cd-border);
    border-radius: var(--radius-lg);
    text-decoration: none;
    color: inherit;
    transition: border-color var(--cd-transition), box-shadow var(--cd-transition);
}

.admin-tool:hover[b-af8ntf1fr8] {
    border-color: var(--cd-blue);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .07);
}

.admin-tool strong[b-af8ntf1fr8] {
    font-size: 14px;
}
/* /Components/Pages/Coupons.razor.rz.scp.css */
/* Search on the left, the two buttons on the right, wrapping to two rows on a phone. */
.toolbar[b-cuo59f2bh1] {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}

.toolbar[b-cuo59f2bh1]  .search {
    flex: 1 1 240px;
    min-width: 0;
    margin-bottom: 0;
}

.toolbar-actions[b-cuo59f2bh1] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.settings-grid[b-cuo59f2bh1] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0 20px;
}

.settings-switches[b-cuo59f2bh1] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 2px 20px;
}

.settings-switch[b-cuo59f2bh1] {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 6px 0;
    font-size: 13px;
    cursor: pointer;
}

.settings-actions[b-cuo59f2bh1] {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--cd-border);
    display: flex;
    gap: 8px;
}

/* The week as seven small toggles rather than seven checkbox rows: a coupon's days are read as a
   pattern, and a column of "Monday? Tuesday?" hides the pattern in the words. */
.availability[b-cuo59f2bh1] {
    margin-top: 8px;
    padding-top: 14px;
    border-top: 1px solid var(--cd-border);
}

.days[b-cuo59f2bh1] {
    display: flex;
    gap: 6px;
    margin: 8px 0 12px;
    flex-wrap: wrap;
}

.day[b-cuo59f2bh1] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border: 1px solid var(--cd-border);
    border-radius: var(--radius-pill);
    font-size: 12px;
    cursor: pointer;
    user-select: none;
}

.day.on[b-cuo59f2bh1] {
    background: var(--cd-blue-lt);
    border-color: var(--cd-blue);
}

/* The days column in the table, which is the one that would otherwise wrap mid-week. */
.when[b-cuo59f2bh1] {
    white-space: nowrap;
    font-size: 12px;
}

.paging[b-cuo59f2bh1] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
}
/* /Components/Pages/CouponUsage.razor.rz.scp.css */
.back[b-qpw5k2lfz5] {
    display: inline-block;
    margin-bottom: 8px;
    font-size: 12px;
    color: var(--cd-text-soft);
    text-decoration: none;
}

.back:hover[b-qpw5k2lfz5] {
    color: var(--cd-blue);
}

/* The revenue is the whole order, not the discount, and that is worth saying next to the table
   rather than leaving someone to work it out from a number that looks too high. */
.footnote[b-qpw5k2lfz5] {
    margin-top: 10px;
}

.paging[b-qpw5k2lfz5] {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}
/* /Components/Pages/DeliveryAreas.razor.rz.scp.css */
/*
    Three tables of settings. Text left, amounts right, and the row for a range that is switched
    off reads as switched off rather than needing its badge to be found.
*/

[b-p41g9mb6sq] .data-table th,
[b-p41g9mb6sq] .data-table td {
    text-align: left;
    vertical-align: top;
    white-space: nowrap;
}

/* The amounts and the counts. */
[b-p41g9mb6sq] .data-table.zips th:nth-child(n+3):nth-child(-n+6),
[b-p41g9mb6sq] .data-table.zips td:nth-child(n+3):nth-child(-n+6),
[b-p41g9mb6sq] .data-table.polygons th:nth-child(n+2):nth-child(-n+4),
[b-p41g9mb6sq] .data-table.polygons td:nth-child(n+2):nth-child(-n+4),
[b-p41g9mb6sq] .data-table.requested th:nth-child(2),
[b-p41g9mb6sq] .data-table.requested td:nth-child(2) {
    text-align: right;
}

[b-p41g9mb6sq] .data-table td.actions {
    text-align: right;
    /* The three buttons stay on one line; the table scrolls if the window is too narrow. */
    white-space: nowrap;
}

[b-p41g9mb6sq] .data-table td.actions .btn + .btn {
    margin-left: 4px;
}

/* Switched off, and looking it. */
[b-p41g9mb6sq] .data-table tbody tr.inactive td:not(.actions) {
    opacity: .55;
}

[b-p41g9mb6sq] .data-table tbody tr.detail,
[b-p41g9mb6sq] .data-table tbody tr.detail:hover {
    background: var(--cd-surface);
    white-space: normal;
}

/*
    The form that adds or changes a range. Wraps rather than shrinks: six number fields squeezed
    onto one line are six fields nobody can hit.
*/
[b-p41g9mb6sq] .zip-form {
    max-width: 760px;
    padding: 4px 0 8px;
}

[b-p41g9mb6sq] .zip-fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px 12px;
    margin: 10px 0;
}

[b-p41g9mb6sq] .badge + .badge {
    margin-left: 4px;
}
/* /Components/Pages/OrderDetails.razor.rz.scp.css */
/*
    The payload, shown as it is stored. It is read rather than skimmed, so it gets a monospaced
    face and its own scroll box instead of pushing the page wide.
*/

[b-ivkk5r1sef] .payload {
    font-family: Consolas, "SF Mono", Menlo, Monaco, "Liberation Mono", monospace;
    font-size: 12px;
    line-height: 1.5;
    background: var(--cd-bg);
    border: 1px solid var(--cd-border);
    border-radius: var(--radius-md);
    padding: 12px;
    margin: 0;
    max-height: 60vh;
    overflow: auto;
    /* Long JSON string values would otherwise scroll the whole page sideways. */
    white-space: pre-wrap;
    word-break: break-word;
}

[b-ivkk5r1sef] .data-table th,
[b-ivkk5r1sef] .data-table td {
    text-align: left;
    vertical-align: top;
}
/* /Components/Pages/Orders.razor.rz.scp.css */
/*
    The design system right-aligns every cell of .data-table — a sensible default for the report
    tables it was written against, where every column is a number. This table is mostly names and
    addresses, and ragged-right text is hard to scan, so the text columns go back to the left and
    only the amount stays right.

    Local rather than a change to the stylesheet: the blanket rule is deliberate for reports, and
    flipping it globally would move every existing table.
*/

[b-59ozhovo3z] .data-table th,
[b-59ozhovo3z] .data-table td {
    text-align: left;
}

/* Received, requested, amount — the columns that line up better as figures. */
[b-59ozhovo3z] .data-table th:nth-child(9),
[b-59ozhovo3z] .data-table td:nth-child(9) {
    text-align: right;
}

[b-59ozhovo3z] .data-table td {
    vertical-align: top;
}
/* /Components/Pages/PaymentSettings.razor.rz.scp.css */
.settings-grid[b-0gz6bctig6] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 0 20px;
}

.block-intro[b-0gz6bctig6] {
    margin-bottom: 14px;
}

.settings-switches[b-0gz6bctig6] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 2px 20px;
    margin: 8px 0 4px;
}

.settings-switch[b-0gz6bctig6] {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 6px 0;
    font-size: 13px;
    cursor: pointer;
}

.settings-actions[b-0gz6bctig6] {
    display: flex;
    gap: 8px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--cd-border);
}

/* The form for one row, set into the card below the table it belongs to. */
.edit-form[b-0gz6bctig6] {
    margin-top: 16px;
    padding: 16px;
    background: var(--cd-blue-lt);
    border-radius: var(--radius-lg);
}

/* One block per secret. Set apart from the plain fields above, because these behave differently:
   they show a state rather than a value, and only sprout an input when asked. */
.secrets[b-0gz6bctig6] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 12px 20px;
    margin-top: 8px;
    padding-top: 14px;
    border-top: 1px solid var(--cd-border);
}

.secret-head[b-0gz6bctig6] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: var(--btn-h);
}

.secret-head .field-label[b-0gz6bctig6] {
    margin: 0;
}

.secret .field-hint[b-0gz6bctig6] {
    margin-top: 4px;
    display: block;
}

.paypal-status[b-0gz6bctig6] {
    margin-top: 14px;
}

/* The first and last few characters of a stored secret. Monospaced, because that is the only way
   the ends of two random strings can be compared at a glance. */
.secret-preview[b-0gz6bctig6] {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 12px;
    padding: 2px 6px;
    background: var(--cd-blue-lt);
    border-radius: var(--radius-sm);
    white-space: nowrap;
}

/* What the providers said, kept beside the fields rather than in a toast: an answer worth acting
   on should not disappear after four seconds. */
.checks[b-0gz6bctig6] {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--cd-border);
}

.check[b-0gz6bctig6] {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 5px 0;
    font-size: 13px;
}

/* The providers CashDesk no longer connects restaurants to. Folded away unless this one has such
   a connection, so setting up a new branch does not offer them as a choice. */
.legacy[b-0gz6bctig6] {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--cd-border);
}

.legacy > summary[b-0gz6bctig6] {
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    list-style-position: outside;
}

.legacy > summary .field-hint[b-0gz6bctig6] {
    display: block;
    font-weight: 400;
    margin-top: 2px;
}

.legacy > .settings-grid[b-0gz6bctig6] {
    margin-top: 12px;
}
/* /Components/Pages/Reviews.razor.rz.scp.css */
/*
    A dense table, because the job is scanning down it for the reviews that went wrong. Everything
    here serves that: text stays left, scores stay narrow, and the ones worth looking at are
    marked without having to be read.
*/

[b-kjw716owte] .data-table th,
[b-kjw716owte] .data-table td {
    text-align: left;
    vertical-align: top;
}

/* The three score columns read better as figures. */
[b-kjw716owte] .data-table.reviews th:nth-child(n+4):nth-child(-n+6),
[b-kjw716owte] .data-table.reviews td:nth-child(n+4):nth-child(-n+6) {
    text-align: center;
    width: 72px;
}

/*
    Date and customer keep to one line. In three quarters of the width they were wrapping into
    "10-08-" / "2026", which costs a row of height on every line of a list built for scanning.
*/
[b-kjw716owte] .data-table.reviews td:nth-child(2),
[b-kjw716owte] .data-table.reviews td:nth-child(3),
[b-kjw716owte] .data-table.reviews th:nth-child(2),
[b-kjw716owte] .data-table.reviews th:nth-child(3) {
    white-space: nowrap;
}

/*
    The review itself. Clamped rather than truncated with an ellipsis on one line: two lines is
    usually the whole review, and the full text is one click away in the row below.
*/
[b-kjw716owte] .review-cell {
    max-width: 380px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/*
    A low score marks the whole row. Colour alone would not do — the score badges are already
    coloured — so it is the left edge, which reads as a mark against the row rather than as
    another rating.
*/
[b-kjw716owte] .data-table tbody tr.attention td:first-child {
    box-shadow: inset 3px 0 0 var(--cd-danger-tx);
}

[b-kjw716owte] .data-table tbody tr.attention {
    background: var(--cd-danger-bg);
}

[b-kjw716owte] .data-table tbody tr.attention:hover {
    background: var(--cd-danger-bg);
}

[b-kjw716owte] .data-table tbody tr.detail,
[b-kjw716owte] .data-table tbody tr.detail:hover {
    background: var(--cd-surface);
}

[b-kjw716owte] .review-text {
    margin: 0;
    line-height: 1.6;
    max-width: 720px;
    /* Whatever the customer typed, including their line breaks. */
    white-space: pre-wrap;
}

[b-kjw716owte] .filter-chip .badge {
    margin-left: 6px;
}

/* The three standing averages, above the list. */
[b-kjw716owte] .averages {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

[b-kjw716owte] .averages .stat-card {
    /* Three across on a desktop, wrapping to one on a phone rather than shrinking to unreadable. */
    flex: 1 1 160px;
}

/*
    The list beside the weekly scores, three to one — the proportion the WebForms page used
    (col-lg-9 and col-lg-3).
*/
.reviews-layout[b-kjw716owte] {
    display: grid;
    grid-template-columns: 3fr 1fr;
    gap: 16px;
    align-items: start;

    /*
        The filter chips sit above the list and not above the weekly scores, because they filter
        one and not the other. That leaves the two panels starting at different heights unless the
        sidebar is dropped by exactly the row the chips take up — so both sides read from these,
        rather than from a number in one place and a matching number in another.

        The height is what .filter-chip is in the design system, and it is border-box, so the row
        is exactly that tall.
    */
    --chips-height: 26px;
    --chips-gap: 12px;
}

[b-kjw716owte] .filter-chips {
    margin-bottom: var(--chips-gap);
}

.reviews-side[b-kjw716owte] {
    margin-top: calc(var(--chips-height) + var(--chips-gap));
}

/*
    Below this the split stops working: the sidebar gets too narrow for four columns and the list
    needs every pixel it has. The weekly scores are context rather than the task, so they give way
    — the averages above stay, and they are the figure someone on a phone is after.
*/
@media (max-width: 1000px) {
    .reviews-layout[b-kjw716owte] {
        grid-template-columns: 1fr;
    }

    .reviews-side[b-kjw716owte] {
        display: none;
    }
}

/* Tighter than the page's own tables, because it lives in a quarter of the width. */
[b-kjw716owte] .data-table.weeks th,
[b-kjw716owte] .data-table.weeks td {
    padding: 7px 6px;
    font-size: 12px;
    white-space: nowrap;
}

[b-kjw716owte] .data-table.weeks th:not(:first-child),
[b-kjw716owte] .data-table.weeks td:not(:first-child) {
    text-align: right;
}

/* The review count, riding along with the week rather than taking a column of its own. */
[b-kjw716owte] .data-table.weeks td:first-child .field-hint {
    margin-left: 5px;
    font-size: 11px;
}

/* The order the review was left about, under the answer being written. */
[b-kjw716owte] .order-panel {
    border-top: 1px solid var(--cd-border);
    padding-top: 12px;
    max-width: 720px;
}

[b-kjw716owte] .order-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    font-size: 12.5px;
    color: var(--cd-muted);
    margin-bottom: 8px;
}

[b-kjw716owte] .order-lines {
    margin: 0;
    padding-left: 18px;
    line-height: 1.7;
}
/* /Components/Pages/StoreMaintenance.razor.rz.scp.css */
/* Two pickers with an arrow between them. Wraps to a column on a narrow screen, where the
   arrow would point the wrong way, so it is dropped rather than rotated. */
.pair[b-lskggl3xjy] {
    display: flex;
    align-items: flex-end;
    gap: 12px;
}

.pair[b-lskggl3xjy]  .form-field {
    flex: 1 1 0;
    min-width: 0;
}

.pair-arrow[b-lskggl3xjy] {
    color: var(--cd-text-soft);
    padding-bottom: 9px;
}

.pair-warning[b-lskggl3xjy] {
    color: var(--cd-amber-icon);
}

@media (max-width: 640px) {
    .pair[b-lskggl3xjy] {
        flex-direction: column;
        align-items: stretch;
    }

    .pair-arrow[b-lskggl3xjy] {
        display: none;
    }
}

/* What goes across. Two columns on a wide screen so eleven groups stay one glance rather than
   one scroll, and the descriptions still have room to be sentences. */
.choices[b-lskggl3xjy] {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--cd-border);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 4px 20px;
}

.choices-header[b-lskggl3xjy] {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}

.choice[b-lskggl3xjy] {
    display: flex;
    gap: 9px;
    align-items: flex-start;
    padding: 6px 0;
    cursor: pointer;
}

.choice input[b-lskggl3xjy] {
    margin-top: 2px;
    flex-shrink: 0;
}

.choice > span[b-lskggl3xjy] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.choice strong[b-lskggl3xjy] {
    font-size: 13px;
    font-weight: 600;
}

.transfer-note[b-lskggl3xjy] {
    margin-top: 12px;
}

.transfer-actions[b-lskggl3xjy] {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    align-items: center;
    flex-wrap: wrap;
}

/* The three figures someone weighs a wipe against, before the table of seventy rows. */
.wipe-summary[b-lskggl3xjy] {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    margin: 12px 0;
}

.wipe-summary strong[b-lskggl3xjy] {
    display: block;
    font-size: 18px;
    line-height: 1.3;
}

/* Deliberately set apart from the reading above it: the input and the red button are the point
   of no return, and should not read as one more row of the table. */
.wipe-confirm[b-lskggl3xjy] {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--cd-border);
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}

.wipe-confirm[b-lskggl3xjy]  .form-field {
    flex: 1 1 260px;
    min-width: 0;
    margin-bottom: 0;
}

/*
    The id under the name. Monospaced and quiet: it is not what identifies the restaurant to a
    reader, but it is the only thing that identifies it to whatever they do about it next.
*/
.bulk-id[b-lskggl3xjy] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11px;
    color: var(--cd-muted);
}

/* The ids this run passed over, kept together so the whole block can be taken in one go. */
.bulk-skipped[b-lskggl3xjy] {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.bulk-skipped textarea[b-lskggl3xjy] {
    resize: vertical;
    background: var(--cd-surface);
}

/* The run written out for a mail. Monospaced so the dashes line up while it is still on screen. */
.bulk-summary[b-lskggl3xjy] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11.5px;
    line-height: 1.5;
    resize: vertical;
    background: var(--cd-surface);
}

/* The button and how far it has got, on one line. */
.bulk-actions[b-lskggl3xjy] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
/* /Components/Pages/WebsiteSettings.razor.rz.scp.css */
/* Two or three columns depending on the width, so a block of eight fields is one glance rather
   than a column you have to scroll. The fields keep their own minimum, so nothing is squeezed
   narrower than the value it holds. */
.settings-grid[b-xchi62i9mz] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 0 20px;
}

.block-intro[b-xchi62i9mz] {
    margin-bottom: 14px;
}

/* The yes/no settings, apart from the fields above them: they read as a list of statements about
   the shop rather than as more boxes to fill in. */
.settings-switches[b-xchi62i9mz] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 2px 20px;
    margin: 8px 0 4px;
    padding-top: 12px;
    border-top: 1px solid var(--cd-border);
}

.settings-switch[b-xchi62i9mz] {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 6px 0;
    font-size: 13px;
    cursor: pointer;
}

.settings-switch input[b-xchi62i9mz] {
    flex-shrink: 0;
}

.settings-actions[b-xchi62i9mz] {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--cd-border);
}

/* The colour next to the box that sets it, because #dddddd means nothing until you see it. */
.colour-field[b-xchi62i9mz] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.colour-field[b-xchi62i9mz]  .field-input {
    flex: 1 1 auto;
    min-width: 0;
}

.colour-swatch[b-xchi62i9mz] {
    width: var(--btn-h);
    height: var(--btn-h);
    flex-shrink: 0;
    border: 1px solid var(--cd-border);
    border-radius: var(--radius-sm);
}