/* Settings page - page-scoped, --ds-* tokens only */

.settings-page {
    padding: 0;
    max-width: none;
}

.settings-shell {
    display: flex;
    align-items: flex-start;
    gap: var(--ds-space-5);
    min-height: 0;
    width: 100%;
}

/*
 * The rail scrolls inside itself instead of spilling out of its card.
 *
 * `design-system.css` sets `align-items: stretch` on `.settings-page >
 * .settings-shell`, so this rail is sized to the height of the CONTENT PANEL
 * beside it. With 15 nav entries the rail's own content is taller than a short
 * panel -- measured 728px of buttons in a 645px box -- and the default
 * `overflow: visible` neither clipped nor scrolled it. The surplus simply
 * spilled: the last entries rendered below the card's border, and on an
 * 802px-tall window "Data" landed at y=860, off-screen and unclickable. There
 * was no scrollbar because nothing was scrollable, and the settings page does
 * not scroll either, so those entries were unreachable. The 768px POS screens
 * this cafe runs make it worse.
 *
 * The stretch is deliberately left alone -- it is what gives the rail its
 * full-height card next to the panel. Only the overflow behaviour changes.
 * `max-height: 100%` is belt and braces for any layout where the stretch does
 * not apply; it resolves against the shell's definite height, which is exactly
 * the visible area.
 */
.settings-tab-rail {
    flex: 0 0 220px;
    position: sticky;
    top: var(--ds-space-4);
    max-height: 100%;
    overflow-y: auto;
    overscroll-behavior: contain;
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-1);
    padding: var(--ds-space-3);
    background: var(--ds-bg-surface);
    border: 1px solid var(--ds-border-default);
    border-radius: var(--ds-radius-lg);
}

/* A nav entry must never shrink to fit; the rail scrolls instead. Without
   this, flex would compress the buttons and clip their labels. */
.settings-tab-rail > * {
    flex-shrink: 0;
}

.settings-tab-strip {
    display: none;
    gap: var(--ds-space-1);
    overflow-x: auto;
    padding: var(--ds-space-2);
    margin-block-end: var(--ds-space-4);
    background: var(--ds-bg-surface);
    border: 1px solid var(--ds-border-default);
    border-radius: var(--ds-radius-lg);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.settings-tab-btn {
    display: block;
    width: 100%;
    min-height: var(--ds-touch-target);
    padding: var(--ds-space-2) var(--ds-space-3);
    border: 1px solid transparent;
    border-radius: var(--ds-radius-md);
    background: transparent;
    color: var(--ds-text-secondary);
    font-size: var(--ds-text-sm);
    font-weight: var(--ds-fw-medium);
    text-align: start;
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--ds-motion-hover) var(--ds-ease-standard),
                color var(--ds-motion-hover) var(--ds-ease-standard);
}

.settings-tab-strip .settings-tab-btn {
    width: auto;
    flex: 0 0 auto;
}

.settings-tab-btn:hover {
    background: var(--ds-bg-inset);
    color: var(--ds-text-primary);
}

.settings-tab-btn.is-active {
    background: var(--ds-primary-tint);
    color: var(--ds-primary);
    border-color: color-mix(in srgb, var(--ds-primary) 25%, transparent);
}

.settings-main {
    flex: 1;
    min-width: 0;
}

.settings-panel-stack {
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-4);
}

.settings-section {
    margin-block-end: 0;
}

.settings-section-title {
    margin: 0 0 var(--ds-space-1) 0;
}

.settings-section-desc {
    margin: 0 0 var(--ds-space-4) 0;
    font-size: var(--ds-text-sm);
    color: var(--ds-text-secondary);
}

/* A note under one control, not under the whole section. Sits tight to the
   field above it so it reads as that field's footnote. */
.settings-field-hint {
    margin: var(--ds-space-1) 0 0 0;
    font-size: var(--ds-text-xs);
    line-height: 1.4;
    color: var(--ds-text-secondary);
}

.settings-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--ds-space-3);
}

.settings-form-row-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--ds-space-3);
}

@media (max-width: 640px) {
    .settings-form-row,
    .settings-form-row-3 {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) {
    .settings-shell {
        flex-direction: column;
    }

    .settings-tab-rail {
        display: none;
    }

    .settings-tab-strip {
        display: flex;
    }
}

.settings-logo-row {
    display: flex;
    align-items: center;
    gap: var(--ds-space-3);
    flex-wrap: wrap;
}

.settings-logo-preview {
    width: 64px;
    height: 64px;
    object-fit: contain;
    border: 1px solid var(--ds-border-default);
    border-radius: var(--ds-radius-md);
    background: var(--ds-bg-inset);
}

.settings-cat-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ds-space-3);
    flex-wrap: wrap;
    margin-block-end: var(--ds-space-3);
}

.settings-cat-hint {
    font-size: var(--ds-text-sm);
    color: var(--ds-text-secondary);
    margin: 0 0 var(--ds-space-3) 0;
}

.settings-cat-swatch {
    width: 24px;
    height: 24px;
    border-radius: var(--ds-radius-sm);
    border: 1px solid var(--ds-border-default);
}

.settings-data-actions {
    display: flex;
    gap: var(--ds-space-2);
    flex-wrap: wrap;
}

.settings-day-chips {
    display: flex;
    gap: var(--ds-space-2);
    flex-wrap: wrap;
    margin-block-start: var(--ds-space-1);
}

.settings-day-chip {
    display: flex;
    align-items: center;
    gap: var(--ds-space-1);
    cursor: pointer;
    font-size: var(--ds-text-sm);
    color: var(--ds-text-primary);
}

.settings-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--ds-border-default);
    border-radius: var(--ds-radius-lg);
}

/*
 * These labels carry BOTH `settings-toggle-row` and `ds-field`, and `ds-field`
 * sets `flex-direction: column`. Nothing here overrode it, so the row inherited
 * a column direction -- at which point `align-items: center` stopped meaning
 * "line the switch up with its label" and started meaning "centre everything
 * horizontally". Every toggle in Settings rendered as a switch floating in the
 * middle of the card with its label stranded underneath.
 *
 * Stating the direction explicitly is the fix: it wins over `.ds-field`
 * regardless of which stylesheet loads last, so the row cannot silently flip
 * again if the load order changes.
 */
.settings-toggle-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: var(--ds-space-2);
    cursor: pointer;
}

/* A module whose server side is not ready. Shown rather than hidden, so the
   owner can see it is coming and is not left wondering where it went -- but
   not clickable, because the switch cannot open it. */
.settings-toggle-row.is-unavailable {
    cursor: not-allowed;
    opacity: 0.6;
}

.settings-toggle-note {
    font-size: var(--ds-text-xs);
    color: var(--ds-text-tertiary);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm);
    padding: 0 var(--ds-space-2);
    margin-inline-start: var(--ds-space-2);
    white-space: nowrap;
}

/* The switch keeps its size; only the label takes up the slack. */
.settings-toggle-row > .ds-toggle {
    flex: 0 0 auto;
}

.settings-toggle-row .ds-label {
    margin: 0;
    font-weight: var(--ds-fw-regular);
}

.settings-method-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--ds-space-2);
}

.settings-method-item {
    display: flex;
    align-items: center;
    gap: var(--ds-space-2);
    padding: var(--ds-space-2) var(--ds-space-3);
    border: 1px solid var(--ds-border-default);
    border-radius: var(--ds-radius-md);
    background: var(--ds-bg-inset);
    cursor: pointer;
}

.settings-hours-grid {
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-2);
}

.settings-hours-row {
    display: grid;
    grid-template-columns: 80px 1fr 1fr auto;
    gap: var(--ds-space-2);
    align-items: center;
}

@media (max-width: 640px) {
    .settings-hours-row {
        grid-template-columns: 1fr;
    }
}

.settings-kds-row {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: var(--ds-space-2);
    align-items: center;
    padding-block: var(--ds-space-2);
    border-block-start: 1px solid var(--ds-border-default);
}

.settings-kds-row:first-child {
    border-block-start: none;
    padding-block-start: 0;
}

.settings-readonly-note {
    font-size: var(--ds-text-sm);
    color: var(--ds-text-secondary);
    padding: var(--ds-space-3);
    background: var(--ds-bg-inset);
    border-radius: var(--ds-radius-md);
    border: 1px solid var(--ds-border-default);
}

.settings-link-row {
    margin-block-start: var(--ds-space-3);
}

/* ── Receipt preview (Settings → Receipt & Printing) ───────────────────────
 *
 * Two receipts side by side: what is printing today, and what Save would
 * print. Drawn with the real .receipt-* rules from print.css, which is loaded
 * for all media, so this is the receipt rather than a drawing of one.
 *
 * True size, not scaled. The whole question is whether a header line fits on
 * the roll, and a scaled preview answers a different question.
 */
.receipt-preview {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ds-space-4);
    margin-block: var(--ds-space-4);
}

.receipt-preview-col {
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-2);
    min-width: 0;
}

.receipt-preview-label {
    font-size: var(--ds-text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ds-text-secondary);
}

/* The paper. A mid-grey behind it so white-on-white does not read as a void,
   the way a receipt looks against a counter. */
.receipt-preview-paper {
    padding: 10px;
    border-radius: var(--ds-radius-md);
    background: var(--ds-surface-alt);
    border: 1px solid var(--ds-border-default);
    width: max-content;
    max-width: 100%;
    overflow-x: auto;
}

/*
 * #receipt is the element that actually prints, and there is only one of it.
 * The preview borrows its rules by repeating the two that matter -- width and
 * the type -- rather than by cloning the id, which would give the document two
 * elements answering to #receipt and break the print measurement.
 */
.receipt-preview-receipt {
    width: var(--receipt-w, 80mm);
    box-sizing: border-box;
    background: #fff;
    color: #000;
    font-family: 'Courier New', Courier, monospace;
    font-size: 13px;
    font-weight: bold;
    border: 1px solid #000;
    padding: 2.5mm;
    --r-gap: 2.5mm;
    --r-row: 1.25mm;
    --r-rule: 1px solid #000;
    --r-rule-strong: 2px solid #000;
}

/* ══════════════════════════════════════════════════════════════════════════
   Pay Bill layout: pick a shape by looking at it

   This was a <select> holding the words "Split" and "Compact". The choice is
   entirely about the shape of a modal, which is the one thing a dropdown
   cannot show -- so each option carries a wireframe of what it produces,
   drawn in CSS rather than shipped as an image so it cannot go stale
   silently.
   ═════════════════════════════════════════════════════════════════════════ */
.settings-layout-choice {
    border: 0;
    padding: 0;
    margin: 0;
    min-width: 0;   /* a fieldset defaults to min-content; without this it
                       refuses to shrink and pushes the card wider */
}

.settings-layout-choice > .ds-label {
    padding: 0;
    margin-block-end: var(--ds-space-2);
}

.settings-layout-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--ds-space-3);
}

.settings-layout-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: var(--ds-space-3);
    padding: var(--ds-space-3);
    border: 2px solid var(--ds-border-default);
    border-radius: var(--ds-radius-lg);
    background: var(--ds-surface);
    cursor: pointer;
}

/* The whole card is the target, so the radio itself is redundant -- but it
   stays in the DOM and stays focusable, because it is what a keyboard and a
   screen reader use to work the group. */
.settings-layout-card input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.settings-layout-card:hover { border-color: var(--ds-border-strong, var(--ds-border-default)); }

.settings-layout-card:has(input:checked) {
    border-color: var(--ds-primary);
    background: var(--ds-primary-tint, var(--ds-surface));
}

/* Focus lands on the hidden radio, so the ring has to be drawn by the card. */
.settings-layout-card:has(input:focus-visible) {
    outline: 2px solid var(--ds-primary);
    outline-offset: 2px;
}

.settings-layout-card-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.settings-layout-card-name {
    font-size: var(--ds-text-base);
    font-weight: var(--ds-fw-semibold);
    color: var(--ds-text-primary);
}

.settings-layout-card-desc {
    font-size: var(--ds-text-xs);
    line-height: 1.4;
    color: var(--ds-text-secondary);
}

/* ── The wireframe ─────────────────────────────────────────────────────── */
/*
 * The drawing is a SCREEN with a MODAL on it, not just a modal. That is what
 * makes the two options tell themselves apart: the first pass drew only the
 * inside of the modal and the compact one came out looking like the split
 * one's right-hand pane, which is the single thing a person picking between
 * them must not have to squint at. Drawn this way the difference is the
 * silhouette -- wide and halved, or narrow and stacked -- and it reads before
 * the label does.
 */
.settings-layout-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 76px;
    flex-shrink: 0;
    padding: 6px;
    border-radius: 6px;
    border: 1px solid var(--ds-border-default);
    background: var(--ds-bg-inset, var(--ds-surface-alt));
}

.settings-layout-preview-modal {
    display: flex;
    flex-direction: column;
    gap: 4px;
    height: 100%;
    padding: 5px;
    border-radius: 4px;
    border: 1px solid var(--ds-border-default);
    background: var(--ds-surface);
}

.settings-layout-preview.is-split .settings-layout-preview-modal { width: 100%; }

/* Not a stylistic choice: the compact modal really is narrower, 560px against
   980, and that is most of what picking it does to the screen. */
.settings-layout-preview.is-compact .settings-layout-preview-modal { width: 56%; }

.settings-layout-preview-body {
    display: flex;
    gap: 5px;
    flex: 1;
    min-height: 0;
}

.settings-layout-preview-pane {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
    min-width: 0;
}

/* The rule between the panes is the one the modal draws. */
.settings-layout-preview.is-split .settings-layout-preview-pane + .settings-layout-preview-pane {
    border-inline-start: 1px solid var(--ds-border-default);
    padding-inline-start: 5px;
}

/* Only the leaves are inked, so the structural elements above need no reset. */
.settings-layout-preview-title,
.settings-layout-preview-row,
.settings-layout-preview-sum,
.settings-layout-preview-input,
.settings-layout-preview-foot,
.settings-layout-preview-tiles > span {
    background: var(--ds-text-tertiary, #9CA3AF);
    border-radius: 1px;
}

.settings-layout-preview-title { height: 4px; width: 50%; }
.settings-layout-preview-row { height: 3px; }

/* Heavier and darker: it is the total, and it is what makes three grey bars
   read as a bill. */
.settings-layout-preview-sum {
    height: 5px;
    margin-block-start: auto;
    background: var(--ds-text-secondary, #6B7280);
}

.settings-layout-preview-tiles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3px;
}

.settings-layout-preview-tiles > span { height: 7px; }

.settings-layout-preview-input { height: 9px; }

/* The Confirm button, bottom right, where it is in the modal. */
.settings-layout-preview-foot {
    height: 5px;
    width: 38%;
    align-self: flex-end;
    background: var(--ds-primary);
}

/* ================================================================
   APPEARANCE -- accent colour picker
   ================================================================ */

/* auto-fill, not fixed columns: the till is 1520 wide and a phone is not,
   and eight swatches on one cramped row are eight things nobody can hit. */
.settings-theme-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
    gap: var(--ds-space-3);
    margin-block-end: var(--ds-space-5);
}

.settings-theme-swatch {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ds-space-2);
    padding: var(--ds-space-3);
    min-height: var(--ds-touch-target);
    border: 1px solid var(--ds-border-default);
    border-radius: var(--ds-radius-md);
    background: var(--ds-bg-surface);
    color: var(--ds-text-primary);
    font-size: var(--ds-text-sm);
    font-weight: var(--ds-fw-medium);
    cursor: pointer;
    transition: border-color var(--ds-transition-fast), box-shadow var(--ds-transition-fast);
}

.settings-theme-swatch:hover:not(:disabled) {
    border-color: var(--ds-border-strong);
}

.settings-theme-swatch:disabled {
    cursor: default;
    opacity: 0.6;
}

/* The ring is drawn in the swatch's OWN colour, not the current accent.
   Using --ds-primary here would mean the selected swatch changed colour as
   you clicked around, which is the one element that has to hold still. */
.settings-theme-swatch.is-active {
    border-color: var(--sw-accent);
    box-shadow: 0 0 0 2px var(--sw-accent) inset;
}

/* Two bands: the accent, and the sidebar shade derived from it. Half the
   screen is sidebar, so a preview that only showed the button colour would
   be showing the smaller half of the decision. */
.settings-theme-swatch-chip {
    width: 100%;
    height: 34px;
    border-radius: var(--ds-radius-sm);
    background: linear-gradient(120deg, var(--sw-sidebar) 0 42%, var(--sw-accent) 42% 100%);
    box-shadow: inset 0 0 0 1px rgba(30, 27, 57, 0.08);
}

.settings-theme-swatch-label {
    line-height: 1;
}

/* Packed left, not stretched: a 1fr column turned the six-character hex box
   into a 760px input on the till, which reads as somewhere to write a
   sentence. justify-content:start is what stops the grid filling the card. */
.settings-theme-custom {
    grid-template-columns: 150px 190px;
    justify-content: start;
    align-items: end;
    column-gap: var(--ds-space-4);
    margin-block-end: var(--ds-space-5);
}

@media (max-width: 720px) {
    .settings-theme-custom {
        grid-template-columns: 1fr;
    }
}

/* ---- The live preview -------------------------------------------------
   A working miniature of the app: sidebar rail, topbar, category tabs, a
   product grid and an order panel with a Pay button. Every colour in it comes
   from a --ds-* token, so Theme.apply() repaints it along with the real
   interface and there is nothing here to keep in sync by hand.
   ----------------------------------------------------------------------- */
.settings-theme-preview {
    border: 1px solid var(--ds-border-default);
    border-radius: var(--ds-radius-md);
    overflow: hidden;
    margin-block-end: var(--ds-space-5);
}

/* The miniature sits ON a surface rather than filling the card.
   Left to stretch to the card's full 1120px it was 1120x168 -- an aspect
   nothing has ever been -- and the three "product tiles" came out 340px wide,
   which reads as three empty panels rather than a POS grid. Centred at a
   till-ish 16:9 it reads as a small screenshot of the shop. */
.settings-theme-stage {
    display: flex;
    justify-content: center;
    padding: var(--ds-space-4);
    background: var(--ds-bg-inset);
}

.settings-mini {
    display: flex;
    width: min(100%, 480px);
    height: 270px;
    border-radius: var(--ds-radius-sm);
    overflow: hidden;
    border: 1px solid var(--ds-border-default);
    box-shadow: var(--ds-shadow-card);
    background: var(--ds-bg-canvas);
    /* Nothing in here is interactive; it is a picture made of divs. Without
       this, dragging across it selects the fake product names. */
    user-select: none;
}

.settings-mini-rail {
    flex: 0 0 38px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    padding: 8px 0;
    background: var(--ds-sidebar-bg);
}

.settings-mini-logo {
    width: 20px;
    height: 20px;
    object-fit: contain;
    border-radius: 5px;
    margin-block-end: 3px;
    background: rgba(255, 255, 255, 0.16);
}

.settings-mini-logo.is-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: var(--ds-fw-bold);
    color: #FFFFFF;
}

/* A resting nav item is a translucent bar on the sidebar wash; the active one
   is the white pill with an accent glyph, which is the single most
   accent-dependent element in the real chrome. */
.settings-mini-nav {
    width: 16px;
    height: 16px;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.22);
}

/* The active pill: white, with the accent showing through as the glyph. This
   is the one element in the real sidebar that INVERTS the accent -- accent on
   white rather than white on accent -- so it is the first thing to look wrong
   if someone picks a very pale colour. */
.settings-mini-nav.is-active {
    width: 22px;
    background: var(--ds-sidebar-pill, #FFFFFF);
    box-shadow: inset 0 0 0 4px var(--ds-sidebar-fg-active);
}

.settings-mini-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.settings-mini-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ds-space-2);
    padding: 6px 10px;
    background: var(--ds-bg-surface);
    border-block-end: 1px solid var(--ds-border-default);
}

.settings-mini-shop {
    font-size: var(--ds-text-xs);
    font-weight: var(--ds-fw-semibold);
    color: var(--ds-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.settings-mini-avatar {
    flex: none;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--ds-radius-pill);
    background: var(--ds-primary-tint);
    color: var(--ds-primary);
    font-size: 8px;
    font-weight: var(--ds-fw-bold);
}

.settings-mini-work {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 92px;
    gap: 8px;
    padding: 8px;
}

.settings-mini-left {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.settings-mini-tabs {
    display: flex;
    gap: 4px;
}

.settings-mini-tab {
    padding: 3px 7px;
    border-radius: var(--ds-radius-pill);
    background: var(--ds-bg-surface);
    border: 1px solid var(--ds-border-default);
    font-size: 8px;
    font-weight: var(--ds-fw-medium);
    color: var(--ds-text-secondary);
}

/* Tint background with the full accent as text: the one place the 92% tint
   and the accent appear together, and the pair that fails first on a pale
   custom colour. */
.settings-mini-tab.is-active {
    background: var(--ds-primary-tint);
    border-color: var(--ds-primary);
    color: var(--ds-primary);
}

.settings-mini-grid {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 1fr;
    gap: 5px;
}

/* A tile is a picture with a name under it, so the miniature shows the shape
   of a product tile and not just a rounded rectangle. The ::before is the
   photo well; the label sits under it, as it does on the real grid. */
.settings-mini-tile {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 4px;
    border-radius: 6px;
    background: var(--ds-bg-surface);
    border: 1px solid var(--ds-border-default);
    font-size: 7px;
    line-height: 1;
    color: var(--ds-text-secondary);
    overflow: hidden;
}

.settings-mini-tile::before {
    content: '';
    flex: 1;
    border-radius: 3px;
    background: var(--ds-bg-inset);
}

.settings-mini-order {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 7px;
    border-radius: 8px;
    background: var(--ds-bg-surface);
    border: 1px solid var(--ds-border-default);
}

.settings-mini-line,
.settings-mini-total {
    display: flex;
    justify-content: space-between;
    gap: 4px;
    font-size: 7px;
    color: var(--ds-text-secondary);
}

.settings-mini-line em,
.settings-mini-total em { font-style: normal; }

.settings-mini-total {
    margin-block-start: auto;
    padding-block-start: 4px;
    border-block-start: 1px solid var(--ds-border-default);
    font-size: 8px;
    font-weight: var(--ds-fw-bold);
    color: var(--ds-text-primary);
}

/* The real Pay button, including the label colour Theme derived from the
   accent -- which is the whole reason to show a filled button at all. */
.settings-mini-pay {
    margin-block-start: 4px;
    padding: 5px 0;
    border-radius: 6px;
    background: var(--ds-primary);
    color: var(--ds-text-on-accent);
    font-size: 8px;
    font-weight: var(--ds-fw-bold);
    text-align: center;
}

/* ---- Readout: the status chips and the facts ---- */
.settings-theme-readout {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ds-space-3);
    flex-wrap: wrap;
    padding: var(--ds-space-3);
    background: var(--ds-bg-inset);
    border-block-start: 1px solid var(--ds-border-default);
}

.settings-mini-chips {
    display: flex;
    gap: var(--ds-space-2);
    flex-wrap: wrap;
}

/* Deliberately NOT accent-coloured. These are the three table states, shown
   next to the accent so a collision between the brand colour and a status is
   visible while there is still a Cancel button on screen. */
.settings-mini-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px var(--ds-space-2);
    border-radius: var(--ds-radius-pill);
    font-size: var(--ds-text-xs);
    font-weight: var(--ds-fw-semibold);
}

.settings-mini-chip::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: var(--ds-radius-pill);
    background: currentColor;
}

.settings-mini-chip.is-free { background: var(--ds-success-tint); color: var(--ds-success); }
.settings-mini-chip.is-open { background: var(--ds-warning-tint); color: var(--ds-warning); }
.settings-mini-chip.is-bill { background: var(--ds-danger-tint); color: var(--ds-danger); }

/* The colliding chip gets an accent ring, so the comparison is literally
   side by side on one element rather than left as an exercise. */
.settings-mini-chip.is-clashing {
    box-shadow: 0 0 0 2px var(--ds-primary);
}

.settings-theme-facts {
    display: flex;
    align-items: center;
    gap: var(--ds-space-2);
    font-family: var(--ds-font-mono);
    font-size: var(--ds-text-xs);
    color: var(--ds-text-secondary);
    font-variant-numeric: tabular-nums;
}

.settings-theme-clash {
    margin: 0;
    padding: var(--ds-space-3);
    background: var(--ds-warning-tint);
    border-block-start: 1px solid var(--ds-border-default);
    font-size: var(--ds-text-xs);
    line-height: 1.45;
    color: var(--ds-text-primary);
}

/* A corner flag on a preset that sits on a status colour. Small: it is a
   note, not a rejection -- these are all still shippable brand colours. */
.settings-theme-swatch-chip {
    position: relative;
}

.settings-theme-swatch-flag {
    position: absolute;
    inset-block-start: 4px;
    inset-inline-end: 4px;
    width: 8px;
    height: 8px;
    border-radius: var(--ds-radius-pill);
    background: #FFFFFF;
    box-shadow: 0 0 0 2px rgba(30, 27, 57, 0.35);
}

.settings-theme-actions {
    display: flex;
    gap: var(--ds-space-2);
    flex-wrap: wrap;
}