/*
 * The admin app — the ONE stylesheet (docs/ADMIN_APP_PLAN.md §3).
 * An app layout by width, from one markup:
 *   < 720px   phone:   top bar + bottom tab bar
 *   720–1099  tablet:  narrow side rail
 *   ≥ 1100    desktop: full sidebar
 * Tokens on :root, dark mode by the system setting, logical properties for RTL.
 */

:root {
    /* Readable for low vision too (owner, 02/10), measured as WCAG AA: every text
       >= 4.5:1 on what is behind it, the edge of a field / button >= 3:1
       (--a-control), separators and card edges clearly visible (--a-border).
       scripts/admin_app_verify/contrast.js checks every screen. */
    --a-bg: #eef1f6;
    --a-surface: #ffffff;
    --a-surface-2: #e9edf3;
    --a-border: #9aa4b5;
    --a-control: #7f8a9d;
    --a-text: #0f172a;
    --a-muted: #475569;
    --a-accent: #2448d6;
    --a-accent-ink: #ffffff;
    --a-accent-soft: rgba(36, 72, 214, .10);
    --a-good: #065f46;
    --a-good-soft: rgba(6, 95, 70, .11);
    --a-bad: #b91c1c;
    --a-bad-soft: rgba(185, 28, 28, .09);
    --a-warn: #92400e;
    --a-warn-soft: rgba(146, 64, 14, .11);
    --a-info: #1d4ed8;
    --a-info-soft: rgba(29, 78, 216, .10);
    --a-on-color: #ffffff;   /* text on a filled status colour (a danger button, a toast, a count) */
    --a-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 4px 16px rgba(15, 23, 42, .05);
    /* Shape, depth and type of the style (core/themes.js sets them; these = Modern, before any script). */
    --a-radius-lg: 20px;
    --a-radius: 16px;
    --a-radius-md: 12px;
    --a-radius-sm: 10px;
    --a-radius-btn: 12px;
    --a-radius-pill: 999px;
    --a-bw: 1px;
    --a-focus-w: 3px;
    --a-head-weight: 700;
    --a-font-head: var(--a-font);
    --a-deco: var(--a-accent);
    --a-shadow-lg: 0 24px 64px rgba(0, 0, 0, .25);
    --a-nav-w: 0px;
    --a-bottom-h: 64px;
    --a-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    /* privacy-reveal.js places its icon above the bottom bar */
    --tabbar-h: var(--a-bottom-h);
    color-scheme: light dark;

    /* The shared page tokens (css/tokens.css names) mapped to the app's colours, for
       the shared pieces drawn here: the profile window (components.css) and the
       cash register detail (css/cash-view.css). */
    --brand: var(--a-accent); --brand-hover: var(--a-accent); --brand-muted: var(--a-accent-soft);
    --surface: var(--a-surface); --surface-raised: var(--a-surface-2); --border: var(--a-border); --border-light: var(--a-border);
    --text: var(--a-text); --text-secondary: var(--a-muted); --text-muted: var(--a-muted); --text-inverse: var(--a-accent-ink);
    --danger: var(--a-bad); --success: var(--a-good); --font-sans: var(--a-font);
    --radius-sm: 8px; --radius-md: 12px; --shadow-xl: 0 24px 64px rgba(0, 0, 0, .25);
    --warning: var(--a-warn); --info: var(--a-info);
    --rd-surface: var(--a-surface); --rd-border-light: var(--a-border); --rd-text-primary: var(--a-text);
    --rd-text-secondary: var(--a-muted); --rd-danger: var(--a-bad); --rd-warning: var(--a-warn);
    --rd-warning-light: var(--a-warn-soft); --rd-radius-md: 12px;
    /* the rest of the --rd-* names «Fichaje» / «Caja» use (css/kiosk-*.css, cash-view.css):
       staff.html has no tokens.css, so without these their borders and colours were dropped */
    --rd-primary: var(--a-accent); --rd-primary-light: var(--a-accent-soft); --rd-text-inverse: var(--a-accent-ink);
    --rd-bg: var(--a-bg); --rd-surface-raised: var(--a-surface); --rd-border: var(--a-control);
    --rd-success: var(--a-good); --rd-success-light: var(--a-good-soft); --rd-info: var(--a-info); --rd-info-light: var(--a-info-soft);
    --rd-danger-light: var(--a-bad-soft); --rd-shadow-xl: 0 24px 64px rgba(0, 0, 0, .25);
    --rd-radius-lg: 18px; --rd-radius-pill: 999px; --rd-radius-sm: 8px;
    --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
}

@media (prefers-color-scheme: dark) {
    :root {
        --a-bg: #0f1420;
        --a-surface: #171d2b;
        --a-surface-2: #1f2738;
        --a-border: #4a556d;
        --a-control: #66738c;
        --a-text: #e6e9f0;
        --a-muted: #a9b5c7;
        --a-accent: #8aa8ff;
        --a-accent-ink: #0f1420;
        --a-accent-soft: rgba(124, 156, 255, .14);
        --a-good: #34d399;
        --a-good-soft: rgba(52, 211, 153, .13);
        --a-bad: #fca5a5;
        --a-bad-soft: rgba(248, 113, 113, .13);
        --a-warn: #fbbf24;
        --a-warn-soft: rgba(251, 191, 36, .13);
        --a-info: #60a5fa;
        --a-info-soft: rgba(96, 165, 250, .13);
        --a-on-color: #0f1420;
        --a-shadow: 0 1px 2px rgba(0, 0, 0, .3);
    }
}

html[dir="rtl"] { --a-font: 'Segoe UI', Tahoma, 'Noto Sans Arabic', sans-serif; }

*, *::before, *::after { box-sizing: border-box; }
/* The user's text size (Appearance): every text is in rem, so the root size scales them all. */
html[data-text="112"] { font-size: 112.5%; }
html[data-text="125"] { font-size: 125%; }
html[data-text="150"] { font-size: 150%; }
html, body { margin: 0; }
body {
    background: var(--a-bg);
    color: var(--a-text);
    font: .9375rem/1.45 var(--a-font);
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
}
button, input, select, textarea { font: inherit; color: inherit; }
/* Every text box, list and text area wears the field look, also outside a form or a filter bar (owner 07/10: «the combo
   box, the text box and the text line look without style» — the tax desk's calculator drew bare controls in a table).
   Zero specificity (:where): any class rule of a component still decides. */
:where(input:not([type=checkbox], [type=radio], [type=range], [type=file], [type=color], [type=hidden], [type=submit], [type=button], [type=image], [type=reset]), select, textarea) {
    box-sizing: border-box; min-height: 42px; padding: 8px 12px; border-radius: var(--a-radius-sm);
    border: var(--a-bw) solid var(--a-control); background: var(--a-surface);
}
:where(textarea) { resize: vertical; }
:where(input, select, textarea)[aria-invalid="true"] { border-color: var(--a-bad); }
/* A drop-down list (owner 07/10: «the drop-down combo box needs a style»): the app's own arrow, drawn in the text's colour
   (two gradients, no image), on the end side of the box, with room kept for it. Higher than a component's own
   `background` shorthand, so the arrow is never lost; nothing else of a component's rule is touched. */
select:not([multiple]):not([size]) {
    appearance: none; -webkit-appearance: none; padding-inline-end: 34px; cursor: pointer;
    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
    background-size: 5px 5px; background-repeat: no-repeat;
}
html[dir="rtl"] select:not([multiple]):not([size]) { background-position: 13px 50%, 18px 50%; }
select:not([multiple]):not([size]):disabled { cursor: not-allowed; }
/* …and its open list, where the browser lets a page draw it (Chromium 135+, the Windows app's WebView2, Chrome on
   Android): the app's surface, edge, radius and shadow, the chosen line in the accent's soft tint. Elsewhere the
   system's own list stays (it follows light / dark through color-scheme). */
@supports (appearance: base-select) {
    select:not([multiple]):not([size]), ::picker(select) { appearance: base-select; }
    /* one row whatever a component says (a `display: block` put the arrow under the text and let a long choice run out of
       the box, owner 07/10): the chosen text clipped with an ellipsis, the arrow always at the end */
    select:not([multiple]):not([size]) { background-image: none; padding-inline-end: 10px; display: inline-flex; align-items: center;
        white-space: nowrap; overflow: hidden; min-width: 0; }
    /* the arrow pinned to the end on the box's own background: a long choice slips under it, never pushes it out */
    select:not([multiple]):not([size]) { position: relative; padding-inline-end: 34px; }
    select:not([multiple]):not([size])::picker-icon { position: absolute; inset-inline-end: 1px; top: 1px; bottom: 1px; width: 30px;
        display: flex; align-items: center; justify-content: center; background: inherit; border-radius: var(--a-radius-sm);
        color: var(--a-muted); font-size: .7rem; transition: rotate .15s; }
    select:not([multiple]):not([size]):open::picker-icon { rotate: 180deg; }
    ::picker(select) {
        border: var(--a-bw) solid var(--a-control); border-radius: var(--a-radius-sm); background: var(--a-surface); color: var(--a-text);
        box-shadow: var(--a-shadow-lg, var(--a-shadow)); padding: 4px; margin-block: 4px; max-height: min(60vh, 360px);
    }
    ::picker(select) option { padding: 9px 12px; border-radius: calc(var(--a-radius-sm) - 2px); min-height: 40px; gap: 8px; }
    ::picker(select) option:hover, ::picker(select) option:focus-visible { background: var(--a-surface-2); outline: none; }
    ::picker(select) option:checked { background: var(--a-accent-soft); color: var(--a-accent); font-weight: 600; }
    ::picker(select) option::checkmark { color: var(--a-accent); }
}
a { color: var(--a-accent); }
:focus-visible { outline: var(--a-focus-w) solid var(--a-accent); outline-offset: 2px; border-radius: 6px; }
/* A hint inside an empty box: readable, not the browser's faint grey. */
::placeholder { color: var(--a-muted); opacity: 1; }
.a-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.a-ic, svg.lucide { width: 18px; height: 18px; flex: none; stroke-width: 2; }
html[dir="rtl"] .a-flip { transform: scaleX(-1); }
.a-noscript { padding: 24px; text-align: center; }

/* ── Navigation: one markup, three layouts ─────────────────────────── */
.a-nav {
    position: fixed; z-index: 50;
    background: var(--a-surface);
    border-color: var(--a-border);
}
.a-brand { display: none; }
.a-nav-items { display: flex; }
.a-nav-item {
    display: flex; align-items: center; gap: 10px;
    color: var(--a-muted); text-decoration: none;
    border: 0; background: none; cursor: pointer;
    border-radius: var(--a-radius-md); font-weight: 500;
    transition: background .15s, color .15s;
}
.a-nav-item:hover { color: var(--a-text); background: var(--a-surface-2); }
.a-nav-item.is-active { color: var(--a-accent); background: var(--a-accent-soft); }
.a-nav-item svg { width: 22px; height: 22px; }

/* phone: bottom tab bar */
@media (max-width: 719px) {
    .a-nav {
        inset-inline: 0; bottom: 0;
        height: calc(var(--a-bottom-h) + env(safe-area-inset-bottom, 0px));
        padding: 6px 6px env(safe-area-inset-bottom, 0px);
        border-top: var(--a-bw) solid var(--a-border);
    }
    .a-nav-items { height: 100%; justify-content: space-around; }
    .a-nav-item {
        flex: 1; flex-direction: column; justify-content: center; gap: 3px;
        font-size: 0.75rem; padding: 4px 2px; max-width: 96px; background: none !important;
    }
    .a-nav-item.is-active svg { background: var(--a-accent-soft); border-radius: var(--a-radius-pill); padding: 3px 14px; width: 52px; height: 28px; }
    .a-nav-item.is-more { display: none; }
    .a-main { padding-bottom: calc(var(--a-bottom-h) + env(safe-area-inset-bottom, 0px) + 16px); }
}

/* tablet: narrow rail */
@media (min-width: 720px) {
    :root { --a-nav-w: 88px; --tabbar-h: 0px; }
    .a-nav {
        top: 0; bottom: 0; inset-inline-start: 0; width: var(--a-nav-w);
        border-inline-end: var(--a-bw) solid var(--a-border);
        display: flex; flex-direction: column; padding: 14px 10px; gap: 14px; overflow-y: auto;
    }
    .a-brand {
        display: flex; align-items: center; justify-content: center; gap: 10px;
        color: var(--a-text); text-decoration: none; font-weight: 700; min-height: 44px;
    }
    .a-brand img { width: 40px; height: 40px; border-radius: var(--a-radius-md); object-fit: cover; }
    .a-brand > span { display: none; }
    .a-nav-items { flex-direction: column; gap: 4px; }
    .a-nav-item { flex-direction: column; gap: 4px; padding: 10px 4px; font-size: 0.75rem; text-align: center; }
    .a-nav-morebtn { display: none; }
    .a-main { margin-inline-start: var(--a-nav-w); }
    body .bzs-privacy, body .bzs-privacy-toast { inset-inline-start: calc(var(--a-nav-w) + 12px); }
}

/* desktop: full sidebar */
@media (min-width: 1100px) {
    :root { --a-nav-w: 248px; }
    .a-nav { padding: 18px 14px; }
    .a-brand { justify-content: flex-start; padding: 4px 8px 10px; }
    .a-brand > span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1rem; }
    .a-nav-item { flex-direction: row; font-size: 0.9062rem; padding: 10px 12px; text-align: start; }
}

/* ── Top bar and section tabs ──────────────────────────────────────── */
.a-main { min-height: 100vh; }
.a-top {
    position: sticky; top: 0; z-index: 40;
    display: flex; align-items: center; gap: 12px;
    padding: 10px 16px; min-height: 60px;
    background: color-mix(in srgb, var(--a-bg) 86%, transparent);
    backdrop-filter: saturate(1.4) blur(12px);
    -webkit-backdrop-filter: saturate(1.4) blur(12px);
}
.a-top h1 { margin: 0; font-size: 1.375rem; font-weight: var(--a-head-weight); font-family: var(--a-font-head); letter-spacing: -.01em; flex: 1; }
.a-top-actions { display: flex; gap: 8px; }
.a-top-wrap { position: relative; }
.a-top-btn {
    display: inline-flex; align-items: center; gap: 6px; height: 40px; min-width: 40px; padding: 0 10px;
    border-radius: var(--a-radius-pill); border: var(--a-bw) solid var(--a-control); background: var(--a-surface); cursor: pointer;
}
.a-top-code { font-size: 0.8125rem; font-weight: 700; }
.a-avatar { padding: 0; justify-content: center; font-weight: 700; background: var(--a-accent); color: var(--a-accent-ink); border-color: var(--a-accent); }

.a-menu {
    position: absolute; top: calc(100% + 6px); inset-inline-end: 0; z-index: 60;
    min-width: 220px; padding: 6px; border-radius: var(--a-radius-md);
    background: var(--a-surface); border: var(--a-bw) solid var(--a-border); box-shadow: 0 12px 32px rgba(0, 0, 0, .16);   /* raw-ok: a neutral shadow, every style */
    display: flex; flex-direction: column;
}
.a-menu > button, .a-menu > a {
    display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--a-radius-sm);
    border: 0; background: none; text-align: start; color: var(--a-text); text-decoration: none; cursor: pointer;
}
.a-menu > button:hover, .a-menu > a:hover, .a-menu > .is-active { background: var(--a-surface-2); }
.a-menu > .is-active { color: var(--a-accent); font-weight: 600; }
.a-menu-head { display: flex; flex-direction: column; padding: 8px 12px 10px; border-bottom: var(--a-bw) solid var(--a-border); margin-bottom: 4px; }
.a-menu-head span { color: var(--a-muted); font-size: 0.8125rem; overflow-wrap: anywhere; }
.a-menu .a-danger { color: var(--a-bad); }

.a-tabs {
    display: flex; gap: 6px; padding: 2px 16px 10px; overflow-x: auto; scrollbar-width: none;
}
.a-tabs::-webkit-scrollbar { display: none; }
/* the mouse drags a row wider than its space (ui/shell.js dragScroll) */
.a-tabs.is-dragging { cursor: grabbing; user-select: none; }
.a-tabs.is-dragging a { cursor: grabbing; }
.a-tabs a {
    flex: none; padding: 8px 14px; border-radius: var(--a-radius-pill); text-decoration: none; white-space: nowrap;
    color: var(--a-text); background: var(--a-surface); border: var(--a-bw) solid var(--a-control); font-weight: 500; font-size: 0.875rem;
}
.a-tabs a.is-active { color: var(--a-accent-ink); background: var(--a-accent); border-color: var(--a-accent); }
.a-tabs a, .a-seg button { display: inline-flex; align-items: center; gap: 6px; }
.a-tabs a svg, .a-seg button svg { width: 16px; height: 16px; flex: none; }

.a-view { padding: 4px 16px 24px; max-width: 1320px; outline: none; }
@media (min-width: 1100px) { .a-top, .a-tabs { padding-inline: 28px; } .a-view { padding-inline: 28px; } }

/* ── Filter bar and «view by» ──────────────────────────────────────── */
.a-filter {
    display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px;
    padding: 12px; margin-bottom: 14px;
    background: var(--a-surface); border: var(--a-bw) solid var(--a-border); border-radius: var(--a-radius);
}
.a-field { display: flex; flex-direction: column; gap: 4px; min-width: 150px; flex: 0 1 200px; }
.a-field-label { font-size: 0.8438rem; color: var(--a-text); font-weight: 600; }
.a-field select, .a-field input {
    height: 42px; padding: 0 12px; border-radius: var(--a-radius-sm);
    border: var(--a-bw) solid var(--a-control); background: var(--a-surface);
}
/* The dates of the period: on the line of the boxes (not of their labels), as tall as them. */
.a-range { align-self: flex-end; display: inline-flex; align-items: center; height: 42px; box-sizing: border-box; padding: 0 14px;
    border-radius: var(--a-radius-pill); background: var(--a-surface-2); color: var(--a-text); font-size: 0.8125rem; font-weight: 600; white-space: nowrap; }
.a-period { display: flex; align-items: flex-end; gap: 10px; min-width: 0; }
@media (max-width: 719px) {
    /* A phone: the period with its dates fills one row; the other boxes go two a row,
       and a box left alone on the last row takes the whole row. */
    /* the boxes of a row share their top, each one's field at its bottom: a label on two lines (a long one in Spanish,
       owner 07/10) never lifts its box above its neighbour, and the fields still line up */
    .a-filter { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
    .a-field { min-width: 0; justify-content: flex-end; }
    .a-filter > .a-period { grid-column: 1 / -1; }
    .a-period > .a-field { flex: 1 1 0; }
    .a-period > .a-range { flex: none; max-width: 60%; overflow: hidden; text-overflow: ellipsis; }
    .a-filter:has(> .a-period) > :last-child:nth-child(even):not(.a-period),
    .a-filter:not(:has(> .a-period)) > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}

.a-seg {
    display: flex; gap: 4px; padding: 4px; margin-bottom: 14px; overflow-x: auto;
    background: var(--a-surface-2); border: var(--a-bw) solid var(--a-control); border-radius: var(--a-radius-btn); width: fit-content; max-width: 100%;
    scrollbar-width: none;
}
.a-seg::-webkit-scrollbar { display: none; }
.a-notice > .a-btn { flex: none; white-space: nowrap; }
.a-seg button {
    flex: none; padding: 8px 16px; border: 0; border-radius: calc(var(--a-radius-btn) - 3px); background: none; cursor: pointer; font-weight: 600; color: var(--a-text);
}
.a-seg button.is-active { background: var(--a-accent); color: var(--a-accent-ink); box-shadow: var(--a-shadow); }

/* ── Cards, tiles, chips ───────────────────────────────────────────── */
.a-grid { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 960px) {
    .a-grid { grid-template-columns: 1fr 1fr; }
    .a-grid > .a-card:first-child { grid-column: 1 / -1; }
}
.a-card {
    background: var(--a-surface); border: var(--a-bw) solid var(--a-border); border-radius: var(--a-radius);
    padding: 16px; box-shadow: var(--a-shadow); min-width: 0;
}
.a-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.a-card-head h2 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 1rem; flex: 1; font-weight: var(--a-head-weight); font-family: var(--a-font-head); }
.a-card-head h2 svg { color: var(--a-accent); }
.a-link {
    display: inline-flex; align-items: center; gap: 2px; border: 0; background: none; cursor: pointer;
    color: var(--a-accent); font-weight: 600; font-size: 0.875rem; padding: 6px 4px;
}
.a-badge { font-size: 0.8125rem; font-weight: 600; padding: 3px 10px; border-radius: var(--a-radius-pill); background: var(--a-surface-2); color: var(--a-muted); }

.a-tiles { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(135px, 1fr)); margin-bottom: 12px; }
.a-list > .a-tiles { margin-bottom: 14px; }
/* A tile on the page is a white card with a border (the page is grey); inside a card or a window it is the soft grey. */
.a-tile { background: var(--a-surface); border: var(--a-bw) solid var(--a-border); border-radius: var(--a-radius-md); padding: 12px 14px; min-width: 0; }
:is(.a-card, .a-modal) .a-tile { background: var(--a-surface-2); border-color: transparent; }
.a-tile-label { display: flex; align-items: center; gap: 6px; font-size: 0.8125rem; color: var(--a-muted); font-weight: 600; }
.a-tile-label svg { width: 15px; height: 15px; }
.a-tile-value { font-size: 1.1875rem; font-weight: 700; margin-top: 4px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.a-tile-sub { font-size: 0.8125rem; color: var(--a-muted); margin-top: 2px; }
.a-tiles:has(.is-big) { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.a-tile.is-big .a-tile-value { font-size: 1.6875rem; letter-spacing: -.01em; }
.a-tile.is-good .a-tile-value { color: var(--a-good); }
.a-tile.is-bad .a-tile-value { color: var(--a-bad); }

.a-split { display: flex; flex-wrap: wrap; gap: 8px; }
.a-split-item {
    flex: 1 1 120px; display: flex; justify-content: space-between; gap: 8px; align-items: baseline;
    padding: 10px 12px; border-radius: var(--a-radius-md); border: var(--a-bw) dashed var(--a-border); font-size: 0.875rem;
}
.a-split-item span { color: var(--a-muted); }
.a-split-item strong { font-variant-numeric: tabular-nums; }

.a-state { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 10px 12px; border-radius: var(--a-radius-md); font-weight: 600; }
.a-state.is-good { background: var(--a-good-soft); color: var(--a-good); }
.a-state.is-warn { background: var(--a-warn-soft); color: var(--a-warn); }
.a-state.is-info { background: var(--a-info-soft); color: var(--a-info); }
.a-state.is-bad { background: var(--a-bad-soft); color: var(--a-bad); }
/* the subscriber's contract with the platform (ui/platform-contract.js) and the legal identity's warning (settings/legal.js) */
.a-legal-notice:empty { display: none; }
.a-contract-docs p { margin: 0 0 6px; }
.a-contract-links { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; }
.a-contract-links a { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; color: var(--a-accent); }
.a-contract-note, .a-contract-intro { margin: 4px 0 0; }
.a-contract-refuse-box { margin-top: 14px; padding-top: 12px; border-top: var(--a-bw) solid var(--a-border); }
.a-contract-refuse { color: var(--a-bad); }

.a-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.a-chip { padding: 4px 10px; border-radius: var(--a-radius-pill); background: var(--a-surface); border: var(--a-bw) solid var(--a-border); font-size: 0.8125rem; }

.a-pay { display: inline-block; padding: 2px 10px; border-radius: var(--a-radius-pill); font-size: 0.8125rem; font-weight: 600; background: var(--a-surface-2); white-space: nowrap; }
.a-pay.is-cash { background: var(--a-good-soft); color: var(--a-good); }
.a-pay.is-card { background: var(--a-info-soft); color: var(--a-info); }
.a-pay.is-wallet, .a-pay.is-other { background: var(--a-warn-soft); color: var(--a-warn); }
.a-pay.is-points, .a-pay.is-visits { background: var(--a-accent-soft); color: var(--a-accent); }

/* ── The table: a table when wide, cards when narrow ───────────────── */
.a-table-wrap { background: var(--a-surface); border: var(--a-bw) solid var(--a-border); border-radius: var(--a-radius); overflow-x: auto; }
.a-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.a-table th {
    text-align: start; font-size: 0.8125rem; font-weight: 700; color: var(--a-muted); text-transform: none;
    padding: 12px 14px; background: var(--a-surface-2); white-space: nowrap; position: sticky; top: 0;
}
.a-table td { padding: 11px 14px; border-top: var(--a-bw) solid var(--a-border); vertical-align: middle; }
.a-table .a-num { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
.a-table tbody tr.a-clickable { cursor: pointer; }
.a-table tbody tr:hover { background: var(--a-surface-2); }
.a-table tfoot td { font-weight: 700; background: var(--a-accent-soft); border-top: 2px solid var(--a-border); }
.a-actions, .a-actions-h { width: 1%; white-space: nowrap; text-align: end; }
.a-icon-btn {
    display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px;
    border-radius: var(--a-radius-sm); border: 0; background: none; cursor: pointer; color: var(--a-text);
}
.a-icon-btn:hover { background: var(--a-surface-2); color: var(--a-text); }
.a-icon-btn.a-danger:hover { background: var(--a-bad-soft); color: var(--a-bad); }

/* A table as cards: on a phone, and wherever its columns do not fit the space it has (a tablet, a narrow
   column…): ui/fit-tables.js sets .is-cards on its wrap (owner 02/10). Each line of a card is separated by
   a fine rule, so a card of many figures stays readable. */
.a-table-wrap.is-cards { background: none; border: 0; overflow: visible; }
.a-table-wrap.is-cards .a-table thead { display: none; }
.a-table-wrap.is-cards :is(.a-table, .a-table tbody, .a-table tfoot) { display: block; }
.a-table-wrap.is-cards .a-table tr {
    display: grid; grid-template-columns: 1fr auto; column-gap: 12px;
    background: var(--a-surface); border: var(--a-bw) solid var(--a-border); border-radius: var(--a-radius-md);
    padding: 12px 14px; margin-bottom: 12px; box-shadow: var(--a-shadow);
}
.a-table-wrap.is-cards .a-table tbody tr:hover { background: var(--a-surface); }
/* A line: its label on the start side, everything the cell holds stacked on the end side (an amount and its
   cash / card split never run out of the card, owner 02/10). */
.a-table-wrap.is-cards .a-table td {
    grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, max-content) minmax(0, 1fr); align-items: baseline;
    column-gap: 12px; row-gap: 2px; padding: 7px 0; border: 0; border-top: var(--a-bw) solid var(--a-border); text-align: end; overflow-wrap: anywhere;
}
.a-table-wrap.is-cards .a-table td > * { grid-column: 2; justify-self: end; min-width: 0; }
/* the card's first line has its top edge for a rule; a cell without a label (its column has no heading: actions, a
   note) takes the whole line from the start — never an empty label beside a value pushed to the end (owner 11/10) */
.a-table-wrap.is-cards .a-table:not(.a-report-table) tbody tr > td:first-child { border-top: 0; padding-top: 0; }
.a-table-wrap.is-cards .a-table:not(.a-report-table) td:not(.a-actions, .m-title, .m-sub):is(:not([data-label]), [data-label=""]) { display: block; text-align: start; }
.a-table-wrap.is-cards .a-table:not(.a-report-table) td:not(.a-actions, .m-title, .m-sub):is(:not([data-label]), [data-label=""])::before { content: none; }
/* a table of «name: value» lines (a heading per row): the name at the start, the value at the end, one line each */
.a-table-wrap.is-cards .a-table tr:has(> th[scope="row"]) { grid-template-columns: minmax(0, max-content) minmax(0, 1fr); align-items: baseline; padding: 10px 14px; margin-bottom: 8px; }
.a-table-wrap.is-cards .a-table tr > th[scope="row"] { text-align: start; color: var(--a-muted); font-weight: 600; font-size: 0.8125rem; }
.a-table-wrap.is-cards .a-table tr:has(> th[scope="row"]) > td { grid-column: 2; display: block; border-top: 0; padding: 0; text-align: end; }
.a-table-wrap.is-cards .a-table td::before { content: attr(data-label); grid-column: 1; grid-row: 1; align-self: start;
    color: var(--a-muted); font-size: 0.8125rem; text-align: start; font-weight: 600; max-width: 22ch; }
.a-table-wrap.is-cards .a-table td.m-title { grid-column: 1; font-weight: 700; font-size: 0.9688rem; text-align: start; padding: 0 0 6px; border-top: 0; }
.a-table-wrap.is-cards .a-table td.m-sub { grid-column: 1; color: var(--a-muted); font-size: 0.8125rem; text-align: start; padding: 0 0 8px; border-top: 0; }
.a-table-wrap.is-cards .a-table :is(td.m-title, td.m-sub, td.a-actions)::before { content: none; }
.a-table-wrap.is-cards .a-table td.a-actions { grid-column: 2; grid-row: 1 / span 2; align-self: start; width: auto; padding: 0; margin-inline-end: -8px; border-top: 0; }
.a-table-wrap.is-cards .a-table :is(td.m-title, td.m-sub) { display: block; }
.a-table-wrap.is-cards .a-table td.a-actions { display: flex; gap: 2px; }
.a-table-wrap.is-cards .a-table td.m-hide { display: none; }
.a-table-wrap.is-cards .a-table tfoot tr { background: var(--a-accent-soft); border-color: transparent; box-shadow: none; }
.a-table-wrap.is-cards .a-table tfoot td { background: none; }

/* ── Pager, empty, loading ─────────────────────────────────────────── */
.a-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; }
.a-pager-info { color: var(--a-muted); font-size: 0.8125rem; }
.a-pager-pages { display: flex; flex-wrap: wrap; gap: 4px; }
.a-pager button {
    min-width: 38px; height: 38px; padding: 0 10px; border-radius: var(--a-radius-sm); cursor: pointer;
    border: var(--a-bw) solid var(--a-control); background: var(--a-surface); font-weight: 600; font-variant-numeric: tabular-nums;
}
.a-pager button.is-active { background: var(--a-accent); border-color: var(--a-accent); color: var(--a-accent-ink); }
.a-pager-gap { padding: 0 6px; align-self: center; color: var(--a-muted); }

.a-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 32px 16px; color: var(--a-muted); text-align: center; }
.a-empty svg { width: 30px; height: 30px; }
.a-empty p { margin: 0; }
.a-empty.is-error svg { color: var(--a-bad); }
.a-loading { display: flex; justify-content: center; padding: 34px 0; }
.a-spinner { width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--a-border); border-top-color: var(--a-accent); animation: a-spin .8s linear infinite; }
@keyframes a-spin { to { transform: rotate(360deg); } }

/* ── Buttons ───────────────────────────────────────────────────────── */
.a-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 42px; padding: 0 18px; border-radius: var(--a-radius-btn); cursor: pointer; font-weight: 600; text-decoration: none;
    border: var(--a-bw) solid var(--a-control); background: var(--a-surface); color: var(--a-text);
}
.a-btn.a-primary { background: var(--a-accent); border-color: var(--a-accent); color: var(--a-accent-ink); }
.a-btn.a-danger { background: var(--a-bad); border-color: var(--a-bad); color: var(--a-on-color); }

/* ── Layout helpers: stacks, rows, text tones ──────────────────────── */
.a-stack { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
/* `hidden` always wins over a layout class (owner 11/10: «My account» showed the empty «My jobs» heading — a section
   given `hidden` until it has items stayed visible because `.a-stack` set its display) */
:is(.a-stack, .a-row, .a-grid, .a-card, .a-toolbar, .a-tiles, .a-form, .a-state)[hidden] { display: none; }
.a-grid.is-2, .a-grid.is-3 { grid-template-columns: 1fr; }
@media (min-width: 960px) {
    .a-grid.is-2 { grid-template-columns: 1.2fr 1fr; align-items: start; }
    .a-grid.is-3 { grid-template-columns: repeat(3, 1fr); align-items: start; }
    .a-grid.is-2 > .a-card:first-child, .a-grid.is-3 > .a-card:first-child { grid-column: auto; }
}
.a-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: var(--a-bw) solid var(--a-border); }
.a-row:first-child { border-top: 0; padding-top: 0; }
.a-row-actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.a-row .a-btn { height: 36px; padding: 0 12px; font-size: 0.8438rem; }
.a-small { font-size: 0.8125rem; flex-direction: column; align-items: flex-start; gap: 2px; }
.a-muted { color: var(--a-muted); font-size: 0.8125rem; margin: 0; }
.a-warn { color: var(--a-warn); font-weight: 600; }
.a-bad { color: var(--a-bad); }
.a-mono { font-family: ui-monospace, Consolas, monospace; direction: ltr; unicode-bidi: isolate; }
.a-sub { font-size: 0.875rem; margin: 16px 0 6px; }
.a-lines { display: flex; flex-direction: column; gap: 2px; font-size: 0.8125rem; white-space: nowrap; }
.a-totals { font-weight: 600; margin: 12px 0 4px; }
.a-form-actions { display: flex; justify-content: flex-end; margin-top: 14px; }
.a-grow { flex: 1; }
.a-ml { margin-inline-start: 6px; }

/* The shared cash register boxes (css/cash-view.css) look like the app's cards. */
.a-view .cashv-box { background: var(--a-surface); border: var(--a-bw) solid var(--a-border); border-radius: var(--a-radius); padding: 16px; box-shadow: var(--a-shadow); }
.a-view .cashv-stat { background: var(--a-surface-2); border: 0; }
.a-line { margin: 0 0 6px; }
.a-filter.is-inline { padding: 0; border: 0; background: none; margin-bottom: 12px; }

/* Images, swatches, search, barcode */
.a-inline { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.a-thumb { width: 34px; height: 34px; border-radius: 8px; object-fit: cover; background: var(--a-surface-2); flex: none; }
.a-thumb-lg { width: 84px; height: 84px; border-radius: 12px; object-fit: cover; background: var(--a-surface-2); }
.a-swatch { width: 16px; height: 16px; border-radius: 50%; border: var(--a-bw) solid var(--a-border); display: inline-block; }
.a-search { flex: 1 1 220px; min-width: 0; height: 42px; padding: 0 14px; border-radius: var(--a-radius-sm); border: var(--a-bw) solid var(--a-control); background: var(--a-surface); }
/* raw-ok: a barcode stays black on white to scan, whatever the style */
.a-barcode { display: flex; justify-content: center; padding: 12px; background: #fff; border-radius: var(--a-radius-md); }
.a-barcode svg { max-width: 100%; height: auto; }
.a-card.a-flat { box-shadow: none; background: var(--a-surface-2); }
.a-card.a-flat .a-card-head h2 { font-size: 0.9375rem; }
.a-form input[type=color] { padding: 4px; height: 42px; }

.a-num-input { width: 90px; height: 36px; padding: 0 8px; border-radius: var(--a-radius-sm); border: var(--a-bw) solid var(--a-control); background: var(--a-surface); }
.a-select-sm { height: 34px; padding: 0 8px; border-radius: var(--a-radius-sm); border: var(--a-bw) solid var(--a-control); background: var(--a-surface); max-width: 100%; }
.a-gallery { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.a-gallery-item { margin: 0; background: var(--a-surface); border: var(--a-bw) solid var(--a-border); border-radius: var(--a-radius); overflow: hidden; }
.a-gallery-item img, .a-gallery-item video { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--a-surface-2); }
.a-gallery-item figcaption { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; font-size: 0.8438rem; }

/* Reviews */
.a-stars { color: var(--a-warn); letter-spacing: 1px; font-size: 0.9375rem; }
.a-review-text { margin: 8px 0 4px; line-height: 1.6; }
.a-reply { margin-top: 10px; padding: 10px 12px; border-inline-start: 3px solid var(--a-accent); background: var(--a-accent-soft); border-radius: var(--a-radius-md); }
.a-reply p { margin: 4px 0 0; }
.a-reply-head { display: flex; align-items: center; gap: 6px; font-size: 0.7812rem; font-weight: 700; color: var(--a-accent); }
.a-report { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; margin-top: 10px; padding: 10px 12px; border-radius: var(--a-radius-md); background: var(--a-bad-soft); color: var(--a-bad); }
.a-review .a-toolbar { margin: 10px 0 0; }
/* The shared chat (css/chat-widget.css) inside the app */
/* The shared chat (css/chat-widget.css) follows the app's look: its own variables mapped to the tokens.
   html[data-mode] = the app's pages only (core/look.js); the customers' widget on the site keeps its palette. */
html[data-mode] {
    --chat-primary: var(--a-accent); --chat-primary-light: var(--a-accent); --chat-accent: var(--a-good);
    --chat-bg: var(--a-bg); --chat-white: var(--a-surface); --chat-gray-100: var(--a-surface-2);
    --chat-gray-200: var(--a-border); --chat-gray-300: var(--a-border); --chat-gray-400: var(--a-control);
    --chat-gray-500: var(--a-muted); --chat-gray-700: var(--a-text); --chat-radius: var(--a-radius);
}
/* its text on the main colour = the accent's ink (white or dark, measured); its counts = the app's red */
html[data-mode] :is(.chat-fab, .chat-header, .chat-close-btn, .chat-message.visitor, .chat-send-btn, .chat-start-btn,
    .chat-conversation-avatar, .quick-reply-btn:hover, .message.outgoing, .message.sent, .chat-bubble.me, .bubble.mine) { color: var(--a-accent-ink); }
html[data-mode] :is(.chat-fab .chat-badge, .chat-conversation-name .unread-badge) { background: var(--a-bad); color: var(--a-on-color); }
html[data-mode] .chat-search-input { border-color: var(--a-control); background: var(--a-surface); color: var(--a-text); }
.a-view #chatTab .admin-chat-container { height: calc(100vh - 190px); min-height: 460px; border-radius: var(--a-radius); overflow: hidden; border: var(--a-bw) solid var(--a-border); }
/* Customers → Messages (owner 04/10): a clear head — the title with the unread count, the website chat's switch on its own
   row with its state in words — a search that fits its column, a calm empty list. */
.a-view #chatTab .chat-conversations-list { display: flex; flex-direction: column; min-width: 0; background: var(--a-surface); }
.a-view #chatTab .a-chat-head { display: flex; flex-direction: column; align-items: stretch; gap: 12px; padding: 16px; border-bottom: var(--a-bw) solid var(--a-border); }
.a-view #chatTab .a-chat-title { display: flex; align-items: center; gap: 8px; }
.a-view #chatTab .a-chat-title h3 { margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--a-text); }
.a-view #chatTab .a-chat-title .a-ic { width: 20px; height: 20px; color: var(--a-accent); flex: none; }
.a-view #chatTab .a-chat-title .total-unread { margin-inline-start: auto; min-width: 22px; height: 22px; padding: 0 7px; box-sizing: border-box; display: inline-grid; place-items: center;
    border-radius: var(--a-radius-pill); background: var(--a-bad); color: var(--a-on-color); font-size: 0.75rem; font-weight: 700; }
.a-view #chatTab .a-chat-switch { position: relative; display: flex; align-items: center; gap: 12px; padding: 10px 12px; margin: 0;
    border: var(--a-bw) solid var(--a-control); border-radius: var(--a-radius); background: var(--a-surface-2); cursor: pointer; }
.a-view #chatTab .a-chat-switch .chat-toggle-checkbox { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.a-view #chatTab .a-chat-switch-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; color: var(--a-text); }
.a-view #chatTab .a-chat-switch-text strong { font-size: 0.9rem; }
.a-view #chatTab .a-chat-switch-text small { font-size: 0.8rem; color: var(--a-muted); }
.a-view #chatTab .chat-toggle-checkbox:checked ~ .a-chat-switch-text .a-chat-when-off,
.a-view #chatTab .chat-toggle-checkbox:not(:checked) ~ .a-chat-switch-text .a-chat-when-on { display: none; }
/* the switch: a visible edge off, the «good» colour on; its knob moves to the end in either direction */
.a-view #chatTab .chat-toggle-switch { order: 2; margin-inline-start: auto; position: relative; flex: none; width: 46px; height: 26px; box-sizing: border-box;
    border-radius: var(--a-radius-pill); background: var(--a-surface); border: 2px solid var(--a-control); transition: background .15s, border-color .15s; }
.a-view #chatTab .chat-toggle-switch::after { content: ''; position: absolute; top: 3px; inset-inline-start: 3px; width: 16px; height: 16px; border-radius: 50%;
    background: var(--a-control); box-shadow: none; transition: transform .15s; }
.a-view #chatTab .chat-toggle-checkbox:checked + .chat-toggle-switch { background: var(--a-good); border-color: var(--a-good); }
.a-view #chatTab .chat-toggle-checkbox:checked + .chat-toggle-switch::after { background: var(--a-on-color); transform: translateX(20px); }
html[dir="rtl"] .a-view #chatTab .chat-toggle-checkbox:checked + .chat-toggle-switch::after { transform: translateX(-20px); }
.a-view #chatTab .chat-toggle-checkbox:focus-visible + .chat-toggle-switch { outline: var(--a-focus-w) solid var(--a-accent); outline-offset: 2px; }
.a-view #chatTab .a-chat-search { position: relative; margin: 12px 16px; }
.a-view #chatTab .a-chat-search .a-ic { position: absolute; top: 50%; inset-inline-start: 12px; transform: translateY(-50%); width: 18px; height: 18px; color: var(--a-muted); pointer-events: none; }
.a-view #chatTab .a-chat-search .chat-search-input { width: 100%; box-sizing: border-box; margin: 0; height: 42px; padding: 0 12px; padding-inline-start: 38px;
    border-radius: var(--a-radius-btn); font: inherit; font-size: 0.9rem; }
.a-view #chatTab .chat-conversations { padding: 0 8px 8px; }
.a-view #chatTab .no-conversations { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 48px 16px; text-align: center; color: var(--a-muted); }
.a-view #chatTab .no-conversations p { margin: 0; }
.a-view #chatTab .no-conversations-icon { width: 40px; height: 40px; color: var(--a-control); }
@media (max-width: 719px) { .a-view #chatTab .admin-chat-container { height: calc(100vh - 230px); } }

/* Insights: bars, charts, progress, risks, templates, suggestions */
.a-bars { display: flex; flex-direction: column; gap: 8px; }
.a-bar-row { display: grid; grid-template-columns: minmax(56px, auto) 1fr auto; align-items: center; gap: 10px; font-size: 0.8125rem; }
.a-bar-label { font-weight: 600; white-space: nowrap; }
.a-bar { height: 12px; border-radius: 6px; background: var(--a-surface-2); overflow: hidden; }
.a-bar-fill { display: block; height: 100%; border-radius: 6px; background: var(--a-accent); transition: width .4s; }
.a-bar-fill.is-good { background: var(--a-good); } .a-bar-fill.is-bad { background: var(--a-bad); } .a-bar-fill.is-warn { background: var(--a-warn); }
.a-bar-value { color: var(--a-muted); font-variant-numeric: tabular-nums; white-space: nowrap; text-align: end; }
.a-chart { position: relative; height: 260px; }
.a-progress { height: 12px; border-radius: 6px; background: var(--a-surface-2); overflow: hidden; margin: 10px 0 6px; }
.a-progress-fill { display: block; height: 100%; background: var(--a-accent); border-radius: 6px; }
.a-progress-fill.is-good { background: var(--a-good); } .a-progress-fill.is-bad { background: var(--a-bad); }
.a-small-row { border: 0; padding: 0; }
.a-dl dd.is-good { color: var(--a-good); } .a-dl dd.is-bad { color: var(--a-bad); }
.a-risk { display: flex; justify-content: space-between; gap: 12px; padding: 12px; border-radius: var(--a-radius-md); background: var(--a-surface-2); border-inline-start: 4px solid var(--a-warn); }
.a-risk.is-critical { border-inline-start-color: var(--a-bad); }
.a-small { font-size: 0.7812rem; }
.a-scroll-box { max-height: 220px; overflow-y: auto; padding: 4px 12px; border: var(--a-bw) solid var(--a-border); border-radius: var(--a-radius-md); }
.a-row.is-dim { opacity: .72; }
.a-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--a-muted); display: inline-block; }
.a-dot.is-good { background: var(--a-good); }
.a-template-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 6px; max-height: 190px; overflow-y: auto; }
.a-template { text-align: start; padding: 8px 10px; border-radius: var(--a-radius-sm); border: var(--a-bw) solid var(--a-control); background: var(--a-surface); cursor: pointer; font-size: 0.8125rem; }
.a-template:hover { border-color: var(--a-accent); }
.a-textarea { width: 100%; padding: 10px 12px; border-radius: var(--a-radius-sm); border: var(--a-bw) solid var(--a-control); background: var(--a-surface); resize: vertical; }
.a-suggestion { align-items: flex-start; }
.a-sugg-ic { width: 36px; height: 36px; border-radius: var(--a-radius-md); display: inline-flex; align-items: center; justify-content: center; background: var(--a-info-soft); color: var(--a-info); flex: none; }
.a-suggestion.is-success .a-sugg-ic { background: var(--a-good-soft); color: var(--a-good); }
.a-suggestion.is-warning .a-sugg-ic { background: var(--a-warn-soft); color: var(--a-warn); }
.a-suggestion.is-danger .a-sugg-ic { background: var(--a-bad-soft); color: var(--a-bad); }

.a-file-btn { position: relative; overflow: hidden; }
.a-file-btn input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
/* raw-ok: a QR stays black on white to scan */
.a-qr { display: inline-flex; padding: 10px; background: #fff; border-radius: var(--a-radius-md); width: fit-content; }
.a-form input[readonly] { background: var(--a-surface-2); }

.a-checks { display: flex; flex-wrap: wrap; gap: 8px; }
.a-check-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--a-radius-pill); border: var(--a-bw) solid var(--a-control); background: var(--a-surface); cursor: pointer; font-size: 0.8438rem; }
.a-check-pill:has(input:checked), .a-check-pill.is-active { border-color: var(--a-accent); background: var(--a-accent-soft); color: var(--a-accent); font-weight: 600; }
.a-check-pill input { accent-color: var(--a-accent); }
/* a choice of a few options, each a card with its explanation (e.g. closing bookings: online only / all) */
.a-choice-cards { display: flex; flex-direction: column; gap: 10px; }
.a-choice-card { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: var(--a-radius); border: var(--a-bw) solid var(--a-control); background: var(--a-surface); cursor: pointer; }
.a-choice-card:has(input:checked) { border-color: var(--a-accent); background: var(--a-accent-soft); }
.a-choice-card input { accent-color: var(--a-accent); margin-top: 3px; }
.a-choice-card span { display: flex; flex-direction: column; gap: 2px; }
.a-choice-card small { color: var(--a-muted); }
/* a choice the server does not allow here: a dashed edge and its reason (never faded: readable for low vision) */
.a-choice-card:has(input:disabled) { cursor: not-allowed; border-style: dashed; }
.a-choice-card small.a-locked-why { color: var(--a-text); }
.a-inline-add { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.a-inline-add input { flex: 1 1 140px; max-width: 220px; }

/* ── Toolbar, pills, forms ─────────────────────────────────────────── */
.a-toolbar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.a-toolbar .a-btn svg { width: 17px; height: 17px; }
/* A screen's own actions stand in their own panel (owner 05/10: under the tabs and a switch, a row of outlined
   buttons read as one more row of tabs): a raised strip, the other buttons filled softly. Toolbars inside a card,
   a notice or a window keep the plain row. */
.a-view .a-toolbar:not(:is(.a-card, .a-state, .a-review, .a-modal) .a-toolbar) {
    padding: 10px; background: var(--a-surface); border: var(--a-bw) solid var(--a-border); border-radius: var(--a-radius); box-shadow: var(--a-shadow);
}
/* Every button there alike, the main one too (owner 05/10: «the first button looks pressed, and it is not» — a solid
   fill read as the chosen tab above it): none stands out, none looks chosen. */
.a-view .a-toolbar:not(:is(.a-card, .a-state, .a-review, .a-modal) .a-toolbar) > .a-btn:not(.a-danger) {
    background: var(--a-surface-2); border-color: var(--a-control); color: var(--a-text); background-image: none; box-shadow: none;
    padding-inline-start: 6px;
}
/* …and each icon in a small tile of the accent (owner 05/10: «make the button's icon coloured»): tabs never have one,
   so the eye reads «an action» at once, on a phone too. */
.a-view .a-toolbar:not(:is(.a-card, .a-state, .a-review, .a-modal) .a-toolbar) > .a-btn:not(.a-danger) svg {
    width: 30px; height: 30px; padding: 6px; box-sizing: border-box; flex: none;
    color: var(--a-accent); background: var(--a-accent-soft); border-radius: var(--a-radius-sm);
}
/* On a phone the buttons of a screen stand in a tidy grid of two equal columns
   (the last one alone takes the whole line); a search or other field takes a line. */
@media (max-width: 719px) {
    .a-toolbar { display: grid; grid-template-columns: 1fr 1fr; }
    .a-toolbar > .a-btn { width: 100%; min-width: 0; padding: 0 10px; white-space: normal; text-align: center; line-height: 1.15; }
    .a-toolbar > .a-btn:last-child:nth-child(odd) { grid-column: 1 / -1; }
    .a-toolbar > :not(.a-btn) { grid-column: 1 / -1; }
}
.a-pill { display: inline-block; padding: 2px 10px; border-radius: var(--a-radius-pill); font-size: 0.8125rem; font-weight: 600; background: var(--a-surface-2); color: var(--a-muted); white-space: nowrap; }
.a-pill.is-good { background: var(--a-good-soft); color: var(--a-good); }
.a-pill.is-bad { background: var(--a-bad-soft); color: var(--a-bad); }
.a-pill.is-warn { background: var(--a-warn-soft); color: var(--a-warn); }
.a-pill.is-info { background: var(--a-info-soft); color: var(--a-info); }

.a-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.a-form > [hidden] { display: none !important; }
/* A long form in tabs (owner 07/10, ui/form.js `tabs`): the tabs stay in view, each panel is the form's own grid */
.a-form.has-tabs { display: block; }
/* one row that scrolls sideways (drag / wheel / finger: ui/drag-scroll.js), never a crowded block of rows (owner 07/10) */
.a-form-tabs { position: sticky; top: 0; z-index: 2; margin-bottom: 14px; width: auto; }
.a-form-tabs button { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; font-size: 0.875rem; white-space: nowrap; }
.a-form-tabs button svg { width: 16px; height: 16px; }
@media (max-width: 719px) {
    /* a phone: the window's head and its tabs take little room, the fields the rest */
    .a-modal-head { padding: 10px 14px 4px; }
    .a-modal-head h2 { font-size: 1rem; }
    .a-form-tabs { margin-bottom: 10px; }
    .a-form-tabs button { padding: 6px 10px; }
}
.a-form-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.a-form-panel[hidden], .a-form-panel > [hidden], .a-form-tabs > [hidden], [role=tabpanel][hidden] { display: none !important; }
.a-form-field { min-width: 0; flex: none; }
.a-form-field.is-full, .a-form-section, .a-form-custom, .a-check, .a-form-error { grid-column: 1 / -1; }
/* a button under a form box that fills it (the record's quick correction, owner 05/10) */
.a-form-below { align-self: flex-start; margin-top: 2px; min-height: 0; padding: 6px 10px; font-size: .85rem; gap: 6px; }
.a-form-section { margin: 10px 0 0; padding-top: 12px; border-top: var(--a-bw) solid var(--a-border); font-size: 0.8125rem; text-transform: uppercase; letter-spacing: .04em; color: var(--a-muted); }
.a-form-section:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.a-form textarea, .a-form input:not([type=checkbox]), .a-form select {
    width: 100%; min-height: 42px; padding: 8px 12px; border-radius: var(--a-radius-sm);
    border: var(--a-bw) solid var(--a-control); background: var(--a-surface);
}
.a-form textarea { resize: vertical; }
.a-suffix { display: flex; align-items: center; gap: 6px; }
.a-suffix span { color: var(--a-muted); font-weight: 600; }
.a-req { color: var(--a-bad); }
.a-hint { color: var(--a-muted); font-size: 0.8125rem; }
.a-check { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; align-items: center; cursor: pointer; }
/* An item's details editor (owner 11/10, sections/catalog/details.js): brand + switch on top, one language switch, then
   blocks of numbered rows (a pair of fields, or a heading + a text), each with its own move / remove tools */
.a-det { display: grid; gap: 16px; }
.a-det-top { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; }
.a-det-langs { display: grid; gap: 6px; }
.a-det-lang-row { display: flex; flex-wrap: wrap; gap: 6px; }
.a-det-lang { display: inline-flex; align-items: center; gap: 4px; min-width: 44px; justify-content: center; padding: 6px 10px; border-radius: var(--a-radius-pill);
    border: var(--a-bw) solid var(--a-control); background: var(--a-surface); color: var(--a-text); font: inherit; font-weight: 700; font-size: 0.8125rem; cursor: pointer; }
.a-det-lang .a-ic, .a-det-lang svg { width: 14px; height: 14px; color: var(--a-good, var(--a-accent)); }
.a-det-lang.is-active { background: var(--a-accent); border-color: var(--a-accent); color: var(--a-on-color, var(--a-surface)); }
.a-det-lang.is-active svg { color: inherit; }
.a-det-block { display: grid; gap: 8px; padding: 14px; border-radius: var(--a-radius); border: var(--a-bw) solid var(--a-border); background: var(--a-surface); }
.a-det-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.a-det-head h4 { margin: 0; font-size: 1rem; }
.a-det-rows { display: grid; gap: 10px; }
.a-det-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 10px; border-radius: var(--a-radius-sm, var(--a-radius)); background: var(--a-surface-2); }
.a-det-n { display: inline-grid; place-items: center; width: 26px; height: 26px; margin-top: 26px; border-radius: 50%; background: var(--a-accent-soft); color: var(--a-accent); font-weight: 700; font-size: 0.8125rem; }
.a-det-inputs { display: grid; gap: 8px; }
.a-det-row.is-pair .a-det-inputs { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
.a-det-tools { display: flex; gap: 2px; margin-top: 22px; }
.a-det-ideas { display: grid; gap: 6px; }
.a-det-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.a-det-chip { display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; border-radius: var(--a-radius-pill); border: var(--a-bw) dashed var(--a-control);
    background: var(--a-surface); color: var(--a-text); font: inherit; font-size: 0.8125rem; cursor: pointer; }
.a-det-chip svg { width: 14px; height: 14px; color: var(--a-accent); }
.a-det-chip:hover { border-style: solid; border-color: var(--a-accent); }
.a-det-empty { margin: 0; padding: 12px; border-radius: var(--a-radius-sm, var(--a-radius)); border: var(--a-bw) dashed var(--a-control); color: var(--a-muted); text-align: center; }
@media (max-width: 719px) {
    .a-det-top { grid-template-columns: minmax(0, 1fr); }
    .a-det-row { grid-template-columns: minmax(0, 1fr) auto; }
    .a-det-n { display: none; }
    .a-det-row.is-pair .a-det-inputs { grid-template-columns: minmax(0, 1fr); }
    .a-det-tools { flex-direction: column; margin-top: 20px; }
}
.a-check input { width: 20px; height: 20px; accent-color: var(--a-accent); }
.a-check small { grid-column: 2; color: var(--a-muted); font-size: 0.8125rem; }
.a-form-error { margin: 4px 0 0; padding: 10px 12px; border-radius: var(--a-radius-sm); background: var(--a-bad-soft); color: var(--a-bad); font-weight: 600; }
.a-inline-box { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px; border-radius: var(--a-radius-md); background: var(--a-surface-2); }
.a-inline-box span { color: var(--a-muted); flex: 1; }
.a-btn:disabled { opacity: .55; cursor: not-allowed; }
@media (max-width: 719px) { .a-form, .a-form-panel { grid-template-columns: 1fr; } }

/* ── Dialog (a bottom sheet on a phone), details, toasts ───────────── */
.a-overlay {
    position: fixed; inset: 0; z-index: 100; background: rgba(15, 23, 42, .45);   /* raw-ok: the dimmed page behind a window */
    display: flex; align-items: center; justify-content: center; padding: 16px;
    animation: a-fade .15s ease;
}
.a-modal {
    width: 100%; max-width: 520px; max-height: calc(100vh - 32px); display: flex; flex-direction: column;
    background: var(--a-surface); border-radius: var(--a-radius-lg); box-shadow: var(--a-shadow-lg);
}
.a-modal.is-wide { max-width: 860px; }
/* A window in tabs (a long form, the customer's window): one height between its tabs, but a window's size — never the
   whole screen of a computer (owner 07/10: «the edit windows are very wide»). */
.a-modal.is-steady { height: min(88vh, 720px); }
.a-modal.is-steady > .a-modal-body { flex: 1 1 auto; min-height: 0; }
/* A window whose content changes (views, steps, a filtered list): one height, its head never moves (owner 02/10). */
.a-modal.is-tall { height: min(88vh, 980px); }
.a-modal.is-tall > .a-modal-body { flex: 1 1 auto; min-height: 0; }
/* On a tablet or wider, such a window (the kiosk's: a worker's panel, products, returns) takes the whole screen
   but a margin, and its choices are tighter, so a worker sees every service without scrolling (owner 02/10). */
@media (min-width: 720px) {
    .a-modal.is-tall { width: calc(100vw - 32px); max-width: 1440px; height: calc(100vh - 32px); height: calc(100dvh - 32px); }
    .a-modal.is-tall .a-stack > :empty { display: none; }   /* an empty part takes no gap */
    .a-modal.is-tall .a-panel { gap: 10px; }
    .a-modal.is-tall .a-panel p.a-hint { margin: 0 0 6px; }   /* «choose a service»: a small label, not a paragraph */
    .a-modal.is-tall .a-panel .a-seg { margin: 0; }
    .a-modal.is-tall .a-choices { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
    /* a card: its name on the first line; price, duration and badges together on the next (half the height) */
    .a-modal.is-tall .a-choice { flex-direction: row; flex-wrap: wrap; align-items: center; align-content: flex-start;
        column-gap: 10px; row-gap: 4px; padding: 10px 12px; min-height: 0; }
    .a-modal.is-tall .a-choice-name { flex: 1 0 100%; }
    .a-modal.is-tall .a-choice.a-service { flex-direction: column; flex-wrap: nowrap; align-items: stretch; }
    .a-modal.is-tall .a-service .a-choice-name { flex: 0 0 auto; }
    .a-modal.is-tall .a-choice .a-chips { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; }
    .a-modal.is-tall .a-choice .a-chip { font-size: 0.75rem; padding: 1px 8px; }
}
/* A short screen (a 1366×768 laptop): the same cards, tighter, so the whole list still fits. */
@media (min-width: 720px) and (max-height: 820px) {
    .a-modal.is-tall .a-modal-head { padding: 10px 14px 4px; }
    .a-modal.is-tall .a-modal-body { padding-top: 6px; padding-bottom: 8px; }
    .a-modal.is-tall .a-panel { gap: 6px; }
    .a-modal.is-tall .a-choices { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 6px; }
    .a-modal.is-tall .a-choice { padding: 7px 10px; }
    .a-modal.is-tall .a-choice.a-service { row-gap: 3px; }
    .a-modal.is-tall .a-service .a-item-icon { width: 30px; height: 30px; }
    .a-modal.is-tall .a-service .a-item-icon svg { width: 17px; height: 17px; }
    .a-modal.is-tall .a-service .a-choice-price { font-size: 1rem; }
    .a-modal.is-tall .a-service .a-choice-foot { padding-top: 0; }
    .a-modal.is-tall .a-reward { width: 22px; height: 22px; }
    .a-modal.is-tall .a-reward svg { width: 12px; height: 12px; }
}
.a-modal-head { display: flex; align-items: center; gap: 12px; padding: 16px 18px 8px; }
.a-modal-head h2 { margin: 0; font-size: 1.125rem; flex: 1; font-weight: var(--a-head-weight); font-family: var(--a-font-head); }
/* A head with tools beside the title (the kiosk panel): one row; on a phone the tools wrap under the title. */
.a-modal-head.has-extra { flex-wrap: wrap; row-gap: 8px; }
.a-modal-head.has-extra h2 { flex: 0 1 auto; }
/* the name: a pill the height of the tool buttons beside it, in the brand's soft tint (owner 02/10) */
.a-modal-head.has-extra h2 { display: inline-flex; align-items: center; min-height: 44px; padding: 6px 18px; border-radius: var(--a-radius-pill);
    background: var(--a-accent-soft); border: var(--a-bw) solid var(--a-accent); color: var(--a-text); font-size: 1.0625rem; line-height: 1.2; }
.a-modal-head.has-extra > .a-icon-btn { margin-inline-start: auto; }
.a-modal-extra { flex: 1 1 auto; display: flex; justify-content: flex-end; min-width: 0; }
.a-modal-extra .a-toolbar { margin: 0; justify-content: flex-end; }
@media (max-width: 719px) { .a-modal-extra { order: 3; flex-basis: 100%; justify-content: flex-start; } .a-modal-extra .a-toolbar { justify-content: flex-start; } }
.a-modal-body { padding: 8px 18px 16px; overflow-y: auto; overscroll-behavior: contain; }
/* a window open = the page behind it stays still (owner 08/10: «never move what is behind»): the wheel / a finger on the
   veil scrolls nothing, and a window's scroll that reaches its end stops there (overscroll-behavior above) */
html:has(.a-overlay, .a-lightbox) { overflow: hidden; }
/* the privacy icon (js/privacy-reveal.js, z-index 9990) floats over the page, never over a window: on a phone it covered a
   window's save button (12/10). Its own messages stay. */
html:has(.a-overlay, .a-lightbox) .bzs-privacy { visibility: hidden; }
.a-modal-body > p { margin: 0; }
.a-modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 18px 18px; border-top: var(--a-bw) solid var(--a-border); }
@media (max-width: 719px) {
    .a-overlay { align-items: flex-end; padding: 0; }
    .a-modal { max-width: none; border-radius: var(--a-radius-lg) var(--a-radius-lg) 0 0; max-height: 88vh; padding-bottom: env(safe-area-inset-bottom, 0px); animation: a-up .2s ease; }
    .a-modal-foot > .a-btn { flex: 1; }
}
/* No connection to the server (core/connection.js): a quiet notice, the app keeps working with what it has. */
.a-conn { position: fixed; inset-inline: 0; top: 0; z-index: 200; display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 8px 14px; background: var(--a-warn); color: var(--a-on-color); font-weight: 600; font-size: 0.875rem; box-shadow: var(--a-shadow); }
.a-conn svg { width: 16px; height: 16px; flex: none; }
@keyframes a-fade { from { opacity: 0; } }
@keyframes a-up { from { transform: translateY(30px); opacity: .6; } }

.a-dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 0; }
.a-dl dt { color: var(--a-muted); font-size: 0.8438rem; }
.a-dl dd { margin: 0; font-weight: 600; text-align: end; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
/* Details windows: one clear line per item (label | value), a divider between lines. */
.a-modal .a-dl { gap: 0; }
.a-modal .a-dl dt, .a-modal .a-dl dd { display: flex; align-items: center; padding: 11px 0; border-top: var(--a-bw) solid var(--a-border); min-height: 20px; }
.a-modal .a-dl dd { justify-content: flex-end; }
.a-modal .a-dl dt:first-of-type, .a-modal .a-dl dd:first-of-type { border-top: 0; }
.a-modal .a-dl dt { color: var(--a-muted); font-weight: 500; font-size: 0.875rem; padding-inline-end: 16px; }
.a-modal .a-dl dd { font-size: 0.9375rem; }
.a-lines-dl { gap: 0; }
.a-lines-dl dt, .a-lines-dl dd { padding: 9px 0; border-top: var(--a-bw) solid var(--a-border); }
.a-lines-dl dt:first-of-type, .a-lines-dl dd:first-of-type { border-top: 0; }
.a-lines-dl .is-total { font-weight: 800; color: var(--a-text); font-size: 0.9688rem; border-top: 2px solid var(--a-border); }

.a-more-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.a-more-item {
    display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px 8px; border-radius: var(--a-radius);
    background: var(--a-surface-2); color: var(--a-text); text-decoration: none; font-weight: 600;
}
.a-more-item svg { width: 26px; height: 26px; color: var(--a-accent); }
.a-more-item.is-active { background: var(--a-accent-soft); color: var(--a-accent); }

.a-toasts {
    position: fixed; z-index: 120; inset-inline: 0; bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px) + 16px);
    display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; padding: 0 16px;
}
.a-toast {
    max-width: 440px; padding: 12px 16px; border-radius: var(--a-radius-md); font-weight: 600; pointer-events: auto;
    background: var(--a-text); color: var(--a-bg); box-shadow: 0 12px 32px rgba(0, 0, 0, .2); animation: a-up .2s ease;   /* raw-ok: a neutral shadow */
}
.a-toast.is-good { background: var(--a-good); color: var(--a-on-color); }
.a-toast.is-bad { background: var(--a-bad); color: var(--a-on-color); }

/* ── Reports: cards + the app's table on screen (cards on a phone, as Sales) ── */
/* An amount or a signed count reads left to right inside Arabic text, on screen and in the PDF
   (its drawer takes each word's direction from its element: «2−» without this). */
.a-amount { white-space: nowrap; direction: ltr; unicode-bidi: isolate; }
.a-rsub { display: block; font-size: 0.8125rem; color: var(--a-muted); font-weight: 500; }
/* a «label · value» line inside a report cell (owner 03/10: never mixed): the label at the start, the value at the end */
.a-rsub.a-kv { display: flex; justify-content: flex-end; align-items: baseline; gap: 6px; }   /* kept next to its figure, never spread over a wide cell (owner 03/10) */
.a-rsub.a-kv > span { color: var(--a-muted); white-space: nowrap; }
.a-rsub.a-kv > :last-child { color: var(--a-text); font-variant-numeric: tabular-nums; }
/* a figures column: its header aligned as its figures, still free to wrap */
.a-table th.a-num { white-space: normal; }
.a-up { color: var(--a-good); } .a-down { color: var(--a-bad); }
.report-section > .a-card { padding: 0; overflow: hidden; }
.report-section > .a-card > .a-card-head { padding: 14px 16px 0; }
.report-section .a-table-wrap { border: 0; border-radius: 0; }
.a-report-table caption { display: none; }
/* The report's summary (owner 03/10: «every figure once»): boxes, each framed; its first row = its name and its result.
   One above the other on every screen, in money order (owner 03/10: side by side looked tangled on a computer). */
.a-rgroups { display: grid; gap: 14px; padding: 4px 16px 16px; grid-template-columns: minmax(0, 1fr); }   /* one above the other (owner 03/10) */
.a-rgroup { min-width: 0; background: var(--a-surface); border: var(--a-bw) solid var(--a-border); border-radius: var(--a-radius-md); overflow: hidden; }
/* a box of parts: side by side when there is room, one ruled line between them */
.a-rgroup-cols { display: grid; gap: var(--a-bw); background: var(--a-border);
    grid-template-columns: repeat(auto-fit, minmax(max(min(100%, 300px), calc(50% - 1px)), 1fr)); }
.a-rgroup-cols > .a-table-wrap { background: var(--a-surface); }
.a-rgroup .a-table-wrap { border: 0; border-radius: 0; }
.a-rgroup .a-table-wrap.is-cards .a-table.is-lines { border: 0; border-radius: 0; background: none; }
/* the head row: the box's name, and its result large */
.a-rgroup tr.is-head td { background: var(--a-surface-2); border-top: 0; border-bottom: var(--a-bw) solid var(--a-border); padding-block: 12px; }
.a-rgroup-name { display: inline-flex; align-items: center; gap: 8px; font-weight: var(--a-head-weight); font-size: 0.9375rem; color: var(--a-text); }
.a-rgroup-name .a-ic { width: 1.125rem; height: 1.125rem; flex: none; }
.a-rgroup tr.is-head .a-cellv > .a-amount, .a-rgroup tr.is-head td > .a-amount { font-size: 1.5rem; font-weight: 700; line-height: 1.2; }
/* the bar row, right under the head */
.a-rgroup tr.is-full td { border-top: 0; padding: 12px 14px 10px; }
/* the results of a box: bold, a little larger; its small notes readable (owner 05/10: low vision) */
.a-rgroup tr.is-total td { font-size: 1.0625rem; }
.a-rgroup .a-rsub { font-size: 0.875rem; }
/* A box in parts (owner 05/10, the worker's box: «organise it so that this goes with this»): ① what came in, ② the
   shop's account, ③ the worker's account — each a title row (its icon in a small tile, as the screen's buttons) and a
   stripe along its rows on the start side; neutral in the calm setting, the part's colour with the data colours on
   (below), the tile filled in Vivid. */
.a-rgroup tr[data-part] { --pk: var(--a-control); --pk-soft: var(--a-surface-2); --pk-ink: var(--a-text); }
.a-rgroup .a-table-wrap:not(.is-cards) tr[data-part] > td:first-child { box-shadow: inset 4px 0 0 var(--pk); }
html[dir="rtl"] .a-rgroup .a-table-wrap:not(.is-cards) tr[data-part] > td:first-child { box-shadow: inset -4px 0 0 var(--pk); }
.a-rgroup .a-table-wrap.is-cards .a-table.is-lines tr[data-part] { box-shadow: inset 4px 0 0 var(--pk); }
html[dir="rtl"] .a-rgroup .a-table-wrap.is-cards .a-table.is-lines tr[data-part] { box-shadow: inset -4px 0 0 var(--pk); }
.a-rgroup tr.is-part td { padding: 16px 14px 8px; border-top: 2px solid var(--a-border); background: none; }
.a-rgroup tr.is-head + tr.is-part td { border-top: 0; }
.a-rgroup .a-table-wrap.is-cards .a-table.is-lines tr.is-part { border-top: 2px solid var(--a-border); padding-top: 14px; }
.a-rgroup .a-table-wrap.is-cards .a-table.is-lines tr.is-part > td { flex: 1 1 100%; max-width: none; border-top: 0; padding: 0; text-align: start; }
/* a line's label with its note under it stays at the start on a phone (a card's value block reads from the end) */
.a-table-wrap.is-cards .a-table.is-lines td.m-title > .a-cellv { text-align: start; }
.a-part-name { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1rem; color: var(--a-text); }
.a-part-ic { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: var(--a-radius-sm); flex: none;
    background: var(--pk-soft); color: var(--pk-ink); }
.a-part-ic .a-ic { width: 17px; height: 17px; }
/* the tax desk: a return's filing line (state, payment, reference · edit, undo) under its card (docs/GESTOR_PLAN.md) */
.a-filing { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding-top: 12px; margin-top: 10px; border-top: var(--a-bw) solid var(--a-border); }
.a-filing-state { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.a-filing-state .a-rsub { flex-basis: 100%; }
.a-table .a-filing { border-top: 0; padding-top: 0; margin-top: 0; justify-content: flex-start; }
/* a line with its payment methods on a phone (owner 05/10: cash and card stood one above the other with room beside
   them): the value takes more of the line, the methods stay side by side */
.a-rgroup .a-table-wrap.is-cards .a-table.is-lines tr:has(.a-mchips) > td.m-title { flex: 1 1 30%; min-width: 6rem; }
.a-rgroup .a-table-wrap.is-cards .a-table.is-lines tr:has(.a-mchips) > td:not(.m-title) { max-width: 72%; }
/* the shop's IVA under its line: one column per thing (icon, rate, the amount it applies to, the IVA), then the
   effective rate and what stays after IVA (owner 03/10: the numbers were tangled) */
.a-rgroup tr.is-full td:has(> .a-ivag) { padding: 4px 14px 12px; border-top: 0; }
.a-ivag-grid { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; column-gap: 14px; row-gap: 6px; align-items: center;
    padding: 10px 12px; border-radius: var(--a-radius-sm); background: var(--a-surface-2); font-size: 0.875rem; }
.a-ivag-row { display: contents; }
.a-ivag-rate { font-weight: 600; font-variant-numeric: tabular-nums; }
.a-ivag-base { color: var(--a-muted); font-variant-numeric: tabular-nums; }
.a-ivag-grid .a-amount { text-align: end; font-variant-numeric: tabular-nums; }
.a-ivag-foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 24px; margin-top: 8px; }
.a-ivag-foot .a-rsub.a-kv { margin: 0; }
/* a worker's share by payment method (owner 05/10): the services without the owner's part, his rate · agreed IVA, his
   share, the tips → after his IVA, the method's total; a narrow screen scrolls the grid inside its box, never the page */
.a-rgroup tr.is-full td:has(> .a-shg) { padding: 4px 14px 12px; border-top: 0; }
.a-shg-grid { display: grid; grid-template-columns: auto repeat(5, minmax(max-content, 1fr)); column-gap: 14px; row-gap: 6px;
    align-items: center; padding: 10px 12px; border-radius: var(--a-radius-sm); background: var(--a-surface-2); font-size: 0.875rem;
    overflow-x: auto; }
.a-shg-row { display: contents; }
.a-shg-head > span { color: var(--a-muted); font-size: 0.8rem; text-align: end; }
.a-shg-num, .a-shg-rule { font-variant-numeric: tabular-nums; text-align: end; }
.a-shg-rule { font-weight: 600; }
.a-shg-grid .a-amount, .a-shg-c { text-align: end; font-variant-numeric: tabular-nums; }
/* the grid's last row: «= his share» across the columns, the total under «total» (owner 05/10) */
.a-shg-foot > .a-shg-lab { grid-column: 1 / -2; margin-inline-end: -14px; padding-inline-end: 14px; }   /* its rule runs through the column gap: one line */
/* without tips, + the tips, = with tips (owner 05/10): a rule above the first and above the result, the result bold */
.a-shg-foot.is-first > *, .a-shg-foot.is-result > * { padding-top: 8px; border-top: var(--a-bw) solid var(--a-border); }
.a-shg-foot.is-result > * { font-weight: 700; }
.a-shg-foot > * { align-self: stretch; }   /* the rule above a line at one height, whatever the figure's size */
.a-shg-foot.is-result > .a-shg-c { font-size: 1.0625rem; }
.a-shg-note { margin: 8px 0 0; font-size: 0.875rem; color: var(--a-muted); line-height: 1.5; }
/* what of it he already received and what is left: one line each, «name … amount» (owner 05/10) */
.a-shg-sum { display: grid; gap: 8px; margin-top: 12px; font-size: 0.9375rem; }
.a-shg-line { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.a-shg-line > span { min-width: 0; }
.a-shg-line .a-amount { font-variant-numeric: tabular-nums; white-space: nowrap; }
.a-shg-line.is-total { font-weight: 700; font-size: 1rem; border-top: var(--a-bw) solid var(--a-border); padding-top: 8px; }
.a-shg-line.is-note { color: var(--a-muted); font-size: 0.875rem; }
.a-shg-line[data-kind] { padding: 8px 12px; border-radius: var(--a-radius-sm); }
/* the result and the note in their data colour (owner 05/10): a soft strip with the colour's edge in the colourful
   styles, filled as a tile in Vivid; plain in the calm setting */
/* (scoped under .a-shg-sum, more specific than the reports' «every [data-kind] in a table takes its colour», which
   comes later in this file and turned the Vivid strip's text into its own fill: 1.72:1 — the ui kit, 05/10) */
@scope ([data-colors="colorful"]) to ([data-colors]) {
    :scope .a-shg-sum > .a-shg-line[data-kind] { background: var(--k-soft); box-shadow: inset 3px 0 0 var(--k); color: var(--a-text); }
    :scope .a-shg-sum > .a-shg-line[data-kind] > span { color: var(--a-text); }
    :scope .a-shg-sum > .a-shg-line[data-kind] > .a-amount { color: var(--k); font-weight: 700; }
    :scope .a-shg-sum > .a-shg-line.is-total[data-kind] { border-top: 0; }
}
@scope ([data-style="vivid"][data-colors="colorful"]) to ([data-style]) {
    :scope .a-shg-sum > .a-shg-line[data-kind] { background-color: var(--k-fill); background-image: linear-gradient(135deg, var(--k-fill), var(--k-fill-2));
        box-shadow: var(--a-shadow); color: var(--k-on); }
    :scope .a-shg-sum > .a-shg-line[data-kind] > :is(span, .a-amount) { color: var(--k-on); }
}
/* its own width only (owner 05/10, phone: the grid widened the card and cut the start of the lines): on a narrow box
   each method is a small card of «name … value» lines */
.a-shg { container-type: inline-size; width: 100%; min-width: 0; }
@container (max-width: 620px) {
    .a-shg-grid { display: block; overflow: visible; padding: 4px 12px; }
    .a-shg-row { display: block; padding: 8px 0; }
    .a-shg-row.a-shg-head { display: none; }   /* each card names its lines: no titles row */
    .a-shg-row.a-shg-head + .a-shg-row { border-top: 0; padding-top: 0; }   /* over «.a-shg-row + .a-shg-row» below: no empty ruled band at the top (owner 05/10) */
    /* the total row: one line «= his share … amount» under the method cards */
    .a-shg-grid .a-shg-row.a-shg-foot { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; border-top: 0; padding: 3px 0; }
    .a-shg-grid .a-shg-row.a-shg-foot.is-first { border-top: 2px solid var(--a-border); padding-top: 8px; }
    .a-shg-grid .a-shg-row.a-shg-foot.is-result:not(.is-first) { border-top: var(--a-bw) solid var(--a-border); padding-top: 6px; }
    .a-shg-foot > .a-shg-lab, .a-shg-foot > .a-shg-c { border-top: 0; padding-top: 0; margin-inline-end: 0; padding-inline-end: 0; }
    .a-shg-row.a-shg-foot > [data-label]::before { content: none; }   /* over «.a-shg-row > [data-label]::before» below */
    .a-shg-num { white-space: nowrap; }
    .a-shg-row + .a-shg-row { border-top: var(--a-bw) solid var(--a-border); }
    .a-shg-row > * { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; text-align: end; }
    .a-shg-row > [data-label]::before { content: attr(data-label); color: var(--a-muted); text-align: start; }
    .a-shg-m { justify-content: flex-start; font-weight: 600; margin-bottom: 2px; }
    .a-shg-m .a-vh { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; white-space: normal; }
}
/* a line keyed to its part in the bar: the dot, the name, its share */
.a-rkey { display: inline-flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.a-rpct { color: var(--a-muted); font-size: 0.8125rem; font-weight: 400; font-variant-numeric: tabular-nums; }
/* the payment methods under an amount (owner 03/10): the method's icon and the amount; the name is the tooltip */
.a-rsub.a-mchips { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 12px; margin-top: 5px; }
.a-mchip { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; font-size: 0.875rem; color: var(--a-text); }
/* a payment method's own symbol (card, notes, wallet), no circle around it: its shape and, with the data colours on,
   its colour tell it apart (owner 05/10: «a colour that shows the symbol inside»; a filled circle hid it) */
.a-mchip-ic { display: inline-grid; place-items: center; width: 1.125rem; height: 1.125rem; background: none; color: var(--a-text); flex: none; }
.a-mchip-ic .a-ic { width: 1.125rem; height: 1.125rem; stroke-width: 2.25; }
.a-mchip-amount { font-weight: 600; font-variant-numeric: tabular-nums; }
/* text kept for the CSV and a screen reader, not drawn */
.a-vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* a bar of the parts of one whole (how it was paid, where it went), its legend optional; screen only */
.a-rbar-track { display: flex; gap: 2px; height: 10px; border-radius: var(--a-radius-pill); overflow: hidden; background: var(--a-surface-2); }
.a-rbar-seg { min-width: 4px; background: var(--k, var(--a-muted)); }
.a-rbar-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 8px; font-size: 0.8125rem; color: var(--a-muted); }
.a-rbar-key { display: inline-flex; align-items: center; gap: 6px; }
.a-rbar-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--k, var(--a-muted)); flex: none; }
.a-rbar-val { color: var(--a-text); font-weight: 600; font-variant-numeric: tabular-nums; }
.a-rbar-pct { font-variant-numeric: tabular-nums; }
.a-table tr.is-total td { font-weight: 700; background: var(--a-accent-soft); }
.a-table tr.is-muted td { color: var(--a-muted); }
.a-code-input { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .8125rem; line-height: 1.5; white-space: pre-wrap; }
.a-doc-preview { max-height: 60vh; overflow: auto; }   /* a row that is done / not in use (the platform center) */
@media (max-width: 719px) {
    .report-section > .a-card { background: none; border: 0; box-shadow: none; overflow: visible; }
    .report-section > .a-card > .a-card-head { padding: 0; }
    .report-section .a-rgroups { padding: 10px 0 0; }   /* the card has no frame on a phone */
}
.a-table-wrap.is-cards .a-table tr.is-total { background: var(--a-accent-soft); border-color: transparent; box-shadow: none; }
.a-table-wrap.is-cards .a-table tr.is-total td { background: none; }
.a-table-wrap.is-cards .a-cellv { text-align: end; }
/* Item → amount reports as cards: one card of lines, each line ruled (not a card per line). */
.report-section .a-table-wrap.is-cards .a-table.is-lines { background: var(--a-surface); border: var(--a-bw) solid var(--a-border); border-radius: var(--a-radius-md); overflow: hidden; box-shadow: var(--a-shadow); }
.a-table-wrap.is-cards .a-table.is-lines tr { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0;
    border: 0; border-top: var(--a-bw) solid var(--a-border); border-radius: 0; padding: 10px 14px; background: none; box-shadow: none; }
.a-table-wrap.is-cards .a-table.is-lines tr:first-child { border-top: 0; }
.a-table-wrap.is-cards .a-table.is-lines td.m-title { font-weight: 500; font-size: 0.875rem; padding: 0; }
/* a line's label never squeezed to one letter per row by a long value (owner 04/10, the worker's box): the label keeps
   room and grows, the value wraps inside its share of the line */
.a-table-wrap.is-cards .a-table.is-lines td.m-title { flex: 1 1 45%; min-width: 8rem; }
.a-table-wrap.is-cards .a-table.is-lines td:not(.m-title) { flex: 0 1 auto; min-width: 0; max-width: 60%; overflow-wrap: anywhere; }
/* …but a FULL row (a detail grid, a bar, a note: one cell across the line) is the card's whole width (owner 05/10, phone:
   the IVA grid and the share grid were squeezed into the value's 60 % — a few letters per line) */
.a-table-wrap.is-cards .a-table.is-lines tr.is-full > td { flex: 1 1 100%; max-width: none; width: 100%; overflow-wrap: normal; }
.a-report-table.is-lines td.m-title { min-width: 9rem; }
/* …and a value's small labelled line («net after agreed IVA 160.06 €») wraps inside its own cell, never over the label */
.a-table-wrap.is-cards .a-table.is-lines td:not(.m-title) .a-rsub.a-kv { flex-wrap: wrap; column-gap: 6px; }
.a-table-wrap.is-cards .a-table.is-lines td:not(.m-title) .a-rsub.a-kv > span { white-space: normal; text-align: end; }
.a-table-wrap.is-cards .a-table.is-lines td { display: block; padding: 0; border-top: 0; }
.a-table-wrap.is-cards .a-table.is-lines td::before { content: none; }
.a-table-wrap.is-cards .a-table.is-lines tr.is-total { background: var(--a-accent-soft); }

/* The same tables in the print look, while the old generatePDF / CSV read them (reports.js).
   raw-ok-block: the PDF must look the same in every style (the owner's known-good PDF). */
.a-rtable { width: 100%; border-collapse: collapse; font-size: 0.8125rem; color: #111; }
.a-rtable caption { caption-side: top; text-align: start; font-weight: 700; font-size: 0.9375rem; color: #1e3c72; padding: 0 0 8px; }
.a-rtable th, .a-rtable td { border: 1px solid #ddd; padding: 8px; text-align: start; vertical-align: top; font-variant-numeric: tabular-nums; }
.a-rtable th { background: #f8f9fa; font-weight: 700; color: #111; }
.a-rtable tr.is-total td { font-weight: 700; background: #f8fafc; }
.a-rtable .a-rsub { color: #555; font-size: 0.6875rem; }
.a-rtable .a-up { color: #2e7d32; } .a-rtable .a-down { color: #c62828; } .a-rtable .a-muted { color: #777; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ── The admin's notifications on the account button (ui/alerts.js, 01/10) ── */
/* A counter sits in line with its text (a kiosk tab, a heading of the queue screen / the machine); only the account
   button's floats on its corner (14/10: every counter was absolute, so a tab's landed in the page's corner and widened
   the page) */
.a-avatar { position: relative; }
.a-avatar > .a-count-badge { position: absolute; top: -5px; inset-inline-end: -5px; margin: 0; }
.a-count-badge {
    display: inline-block; margin-inline-start: 6px; vertical-align: middle; min-width: 19px; height: 19px; padding: 0 5px;
    border-radius: 999px; background: var(--a-bad); color: var(--a-on-color); font-size: 0.75rem; font-weight: 700; line-height: 19px;
    text-align: center; box-shadow: 0 0 0 2px var(--a-bg); pointer-events: none;
}
.a-count-badge[hidden] { display: none; }
.a-menu.is-account { width: min(390px, calc(100vw - 32px)); max-height: min(80vh, 680px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.a-alerts { border-bottom: var(--a-bw) solid var(--a-border); margin-bottom: 4px; padding-bottom: 6px; }
.a-alerts-head {
    position: sticky; top: -6px; z-index: 1; background: var(--a-surface);
    display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 6px 6px 12px;
}
.a-alerts-head strong { display: inline-flex; align-items: center; gap: 8px; font-size: 0.9375rem; }
.a-alerts-all {
    display: inline-flex; align-items: center; gap: 6px; padding: 6px 8px; border: 0; border-radius: var(--a-radius-sm);
    background: none; color: var(--a-accent); font-size: 0.8125rem; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.a-alerts-all:hover { background: var(--a-accent-soft); }
.a-alerts-all[hidden] { display: none; }
.a-alerts-list { display: flex; flex-direction: column; gap: 2px; }
.a-alert {
    display: flex; align-items: flex-start; gap: 12px; padding: 10px 12px; border-radius: var(--a-radius-md);
    color: var(--a-text); text-decoration: none;
}
.a-alert:hover { background: var(--a-surface-2); }
.a-alert.is-unread { background: var(--a-accent-soft); }
.a-alert-ic { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--a-surface-2); color: var(--a-accent); }
.a-alert.is-bad .a-alert-ic { background: var(--a-bad-soft); color: var(--a-bad); }
.a-alert.is-good .a-alert-ic { background: var(--a-good-soft); color: var(--a-good); }
.a-alert-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.a-alert-body strong { font-size: 0.875rem; }
.a-alert-sub { color: var(--a-muted); font-size: 0.8125rem; overflow-wrap: anywhere; }
.a-alert time { color: var(--a-muted); font-size: 0.8125rem; }
.a-alert.is-unread time { color: var(--a-accent); font-weight: 600; }
.a-alert-dot { flex: none; width: 9px; height: 9px; margin-top: 7px; border-radius: 50%; background: var(--a-accent); }
.a-alerts-empty { display: flex; align-items: center; gap: 8px; margin: 0; padding: 14px 12px; color: var(--a-muted); }
@media (max-width: 719px) {
    /* A sheet under the top bar, the full width of the phone. */
    .a-menu.is-account { position: fixed; top: 62px; inset-inline: 8px; width: auto; max-height: calc(100dvh - 62px - 92px); }
}
/* The item a notification opened (?open=, core/router.js showTarget). */
.is-target { outline: 2px solid var(--a-accent); outline-offset: -2px; animation: a-target 1.2s ease 2; }
@keyframes a-target { 50% { background: var(--a-accent-soft); } }
@media (prefers-reduced-motion: reduce) { .is-target { animation: none; } }

/* Barcode: the camera window (ui/barcode.js) and a button next to a form box. */
.a-scanner { width: 100%; max-width: 420px; min-height: 220px; margin: 0 auto; border-radius: var(--a-radius-md); overflow: hidden; background: #000; }   /* raw-ok: the camera's frame */
.a-scanner video { width: 100% !important; height: auto !important; display: block; }
.a-suffix > input { flex: 1 1 auto; min-width: 0; }
.a-suffix > .a-icon-btn { flex: 0 0 auto; height: 42px; width: 42px; }

/* The staff app's lock card (frontend/staff/lock.js): one card in the middle of the screen. */
.a-center { min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 20px; box-sizing: border-box; }
.a-lock { width: 100%; max-width: 440px; }
.a-lock p { margin: 0 0 12px; line-height: 1.5; }
.a-lock .a-lock-out { margin-top: 10px; }
/* a note across a report box's line (the owner's surcharge under the IVA): information, not a step of the sum */
.a-box-note { font-size: 0.875rem; color: var(--a-muted); display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px; }
.a-box-note .a-amount { font-weight: 700; }
/* a box's full-width rows lose their top rule (made for the bars under a line); a note is its own line: ruled
   (owner 04/10: on a large screen it ran into the IVA line above) */
.a-rgroup tr.is-full td:has(> .a-box-note) { border-top: var(--a-bw) solid var(--a-border); padding: 10px 14px; }
/* The kiosk's «record a service» (owner 04/10: clear for the worker, payment methods large and coloured, the screen
   without scrolling): the service in one line, two columns on a wide screen (typed / added · paid, total, save). */
.a-rec-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 10px 14px; margin-bottom: 12px;
    border: var(--a-bw) solid var(--a-border); border-radius: var(--a-radius-md); background: var(--a-surface-2); }
.a-rec-summary .a-item-icon { width: 30px; height: 30px; }
.a-rec-summary .a-rec-svc { font-size: 1.125rem; }
.a-rec-summary .a-rec-time { color: var(--a-muted); display: inline-flex; align-items: center; gap: 4px; }
.a-rec-summary .a-rec-price { margin-inline-start: auto; font-size: 1.25rem; font-weight: 700; }
.a-rec-grid { display: grid; gap: 14px 22px; align-items: start; }
.a-rec-main, .a-rec-side { display: grid; gap: 12px; min-width: 0; }
@media (min-width: 820px) { .a-rec-grid { grid-template-columns: minmax(0, 1.35fr) minmax(280px, 1fr); } }
.a-pay-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.a-pay-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 86px; padding: 10px 6px;
    border: 2px solid var(--a-control); border-radius: var(--a-radius-md); background: var(--a-surface); color: var(--a-text);
    font: inherit; font-size: 1.0625rem; font-weight: 600; cursor: pointer; }
.a-pay-tile svg { width: 36px; height: 36px; color: var(--k); }
.a-pay-tile:hover { border-color: var(--k); }
.a-pay-tile.is-on { border-color: var(--k); background: var(--k-fill, var(--k)); color: var(--k-on); box-shadow: 0 0 0 3px var(--k-soft); }
.a-pay-tile.is-on svg { color: var(--k-on); }

.a-wide { width: 100%; justify-content: center; }

/* The staff app's kiosk mode (frontend/staff/kiosk/): the workers and the PIN keypad. */
.a-workers { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.a-worker { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 12px; border-radius: var(--a-radius);
    border: var(--a-bw) solid var(--a-control); background: var(--a-surface); box-shadow: var(--a-shadow); color: var(--a-text);
    cursor: pointer; font: inherit; text-align: center; min-height: 168px; }
.a-worker:hover, .a-worker:focus-visible { border-color: var(--a-accent); }
/* Not on duty: a dashed edge on the grey of the page, still readable (the text is never faded). */
.a-worker.is-off { background: var(--a-surface-2); border-style: dashed; box-shadow: none; }
.a-worker.is-off .a-worker-photo { filter: grayscale(1); }
.a-worker-photo { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; display: inline-flex; align-items: center; justify-content: center;
    background: var(--a-accent-soft); color: var(--a-accent); font-weight: 700; font-size: 1.5rem; }
.a-worker-name { font-weight: 700; font-size: 1rem; }
.a-worker-sub { color: var(--a-muted); font-size: 0.8125rem; }
/* Home's «each worker's share» (owner 09/10): one box per worker, five lines top to bottom, the two results bold. */
.a-wshares { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.a-wshare { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: var(--a-radius);
    border: var(--a-bw) solid var(--a-border); background: var(--a-surface); }
.a-wshare-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding-bottom: 6px;
    border-bottom: var(--a-bw) solid var(--a-border); }
.a-wshare-line { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 0.9375rem; }
.a-wshare-line > span { color: var(--a-muted); }
.a-wshare-line > strong { font-weight: 600; white-space: nowrap; }
.a-wshare-sign { display: inline-block; width: 1.1em; font-weight: 700; color: var(--a-text); }
.a-wshare-line.is-result { padding-top: 6px; border-top: var(--a-bw) dashed var(--a-border); }
.a-wshare-line.is-result + .a-wshare-line.is-result { border-top: 0; padding-top: 0; }
.a-wshare-line.is-result > span, .a-wshare-line.is-result > strong { color: var(--a-text); font-weight: 700; }
.a-wshare-line.is-main > strong { font-size: 1.125rem; }
/* The kiosk's first screen (owner 09/10, staff/kiosk/today.js: «very comfortable for the worker»): the workers small on
   the start side, what is waiting now beside them — one line each, its kind, its own big button. A narrow screen: the
   workers as one row that scrolls sideways, the list under it. */
.a-khome { display: grid; grid-template-columns: minmax(230px, 290px) minmax(0, 1fr); gap: 20px; align-items: start; }
.a-khome-staff { display: flex; flex-direction: column; gap: 10px; position: sticky; top: 12px; min-width: 0; }
.a-khome-today { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.a-khome-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.a-khome-bar h2 { margin: 0; display: flex; align-items: center; gap: 8px; }
.a-khome-list { display: flex; flex-direction: column; gap: 10px; }
.a-workers.is-compact { grid-template-columns: 1fr; gap: 8px; }
.a-workers.is-compact .a-worker { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 12px; row-gap: 4px;
    min-height: 0; padding: 10px 12px; text-align: start; }
.a-workers.is-compact .a-worker-photo { width: 44px; height: 44px; font-size: 1.125rem; }
.a-workers.is-compact .a-worker-name { min-width: 0; overflow-wrap: anywhere; line-height: 1.25; }
/* the state on its own line under the photo and the name, the card's whole width: a long state («لم يسجّل الحضور») fits
   on one line and the card stays short; a longer translation wraps inside the card, never past it (13/10) */
.a-workers.is-compact .a-worker .a-pill { grid-column: 1 / -1; justify-self: start; max-width: 100%; white-space: normal; overflow-wrap: anywhere; text-align: start; line-height: 1.3; }
.a-workers.is-compact .a-worker-sub { display: none; }
.a-krow { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: var(--a-radius);
    border: var(--a-bw) solid var(--a-border); border-inline-start: 4px solid var(--kl, var(--a-accent));
    background: var(--a-surface); box-shadow: var(--a-shadow); }
.a-krow[data-line="queue"] { --kl: var(--a-info); --kl-soft: var(--a-info-soft); }
.a-krow[data-line="booking"] { --kl: var(--a-accent); --kl-soft: var(--a-accent-soft); }
.a-krow[data-line="order"] { --kl: var(--a-good); --kl-soft: var(--a-good-soft); }
.a-krow[data-line="job"] { --kl: var(--a-warn); --kl-soft: var(--a-warn-soft); }
/* the admin's Home (owner 09/10): the same line, coloured by its urgency; its count large before its words */
.a-krow[data-level="bad"] { --kl: var(--a-bad); --kl-soft: var(--a-bad-soft); }
.a-krow[data-level="warn"] { --kl: var(--a-warn); --kl-soft: var(--a-warn-soft); }
.a-krow[data-level="info"] { --kl: var(--a-info); --kl-soft: var(--a-info-soft); }
.a-krow[data-level="good"] { --kl: var(--a-good); --kl-soft: var(--a-good-soft); }
.a-krow-count { font-size: 1.125rem; line-height: 1; }
.a-all-clear { display: flex; align-items: center; gap: 8px; margin: 4px 0; color: var(--a-text); }
.a-all-clear svg { color: var(--a-good); flex: none; }
/* a compact line (the admin's Home, owner 09/10: «small, as the kiosk — not big cards»): smaller everything, and the
   button stays beside the text on a phone */
.a-khome-list.is-compact { gap: 6px; }
.a-krow.is-compact { gap: 10px; padding: 8px 10px; box-shadow: none; border-inline-start-width: 3px; }
.a-krow.is-compact .a-krow-icon { width: 32px; height: 32px; }
.a-krow.is-compact .a-krow-icon svg { width: 16px; height: 16px; }
.a-krow.is-compact .a-krow-title { font-size: 0.9375rem; column-gap: 8px; }
.a-krow.is-compact .a-krow-sub { font-size: 0.8125rem; }
.a-krow.is-compact .a-krow-acts .a-btn { min-height: 36px; padding: 4px 12px; font-size: 0.875rem; }
@media (max-width: 560px) {
    .a-krow.is-compact { flex-wrap: nowrap; }
    .a-krow.is-compact .a-krow-acts { width: auto; max-width: 40%; }
    .a-krow.is-compact .a-krow-acts .a-btn { flex: none; }
}
/* Home's small pieces: the quick actions and the day as chips, «first steps» as one thin line */
/* Home: one column, an even gap between its cards (the period filter, finance, each worker's share, what is waiting) */
.a-home { display: flex; flex-direction: column; gap: 16px; }
.a-home > * { margin: 0; }
/* the day's status inside «what is waiting now»: equal parts, one row on a computer, two columns on a phone */
.a-home-chips { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; }
@media (max-width: 560px) { .a-home-chips { grid-template-columns: 1fr 1fr; } }
.a-home-chip { display: flex; align-items: center; justify-content: center; text-align: center; gap: 6px; min-height: 40px; padding: 6px 12px; border-radius: var(--a-radius);
    border: var(--a-bw) solid var(--a-control); background: var(--a-surface); color: var(--a-text); font: inherit; font-size: 0.875rem; cursor: pointer; }
.a-home-chip:hover, .a-home-chip:focus-visible { border-color: var(--a-accent); }
.a-home-chip svg { width: 16px; height: 16px; flex: none; }
.a-home-chip.is-warn { border-color: var(--a-warn); }
.a-home-mini { min-height: 32px; padding: 2px 12px; font-size: 0.8125rem; flex: none; }
.a-krow-icon { flex: none; width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    background: var(--kl-soft, var(--a-accent-soft)); color: var(--a-text); }
.a-krow-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.a-krow-title { display: flex; flex-wrap: wrap; align-items: center; column-gap: 10px; row-gap: 2px; font-weight: 700; font-size: 1.0625rem; }
.a-krow-kind { display: inline-block; font-weight: 600; font-size: 0.75rem; color: var(--a-text); padding: 2px 8px;
    border-radius: 999px; background: var(--a-surface-2); vertical-align: middle; }
.a-krow[data-line] .a-krow-title bdi { white-space: nowrap; }   /* the kiosk's short parts (a time, a name) never break */
.a-krow-title bdi { min-width: 0; overflow-wrap: anywhere; }
.a-krow-sub { display: flex; flex-wrap: wrap; align-items: center; column-gap: 14px; row-gap: 4px; color: var(--a-muted); font-size: 0.875rem; }
.a-krow-who { display: inline-flex; align-items: center; gap: 4px; }
.a-krow-who svg { width: 14px; height: 14px; flex: none; }
.a-krow-part { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
.a-krow-acts { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; flex: none; max-width: 55%; }
.a-krow-acts .a-btn { min-height: 48px; }
@media (max-width: 900px) {
    .a-khome { grid-template-columns: minmax(0, 1fr); }
    .a-khome-staff { position: static; }
    .a-workers.is-compact { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: minmax(170px, 210px); overflow-x: auto; padding-bottom: 4px; }
}
@media (max-width: 560px) {
    .a-krow { flex-wrap: wrap; }
    .a-krow-acts { max-width: none; width: 100%; }
    .a-krow-acts .a-btn { flex: 1; }
}
.a-pin { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.a-pin-dots { display: flex; gap: 12px; min-height: 22px; align-items: center; }
.a-pin-dots span { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--a-control); }
.a-pin-dots span.is-on { background: var(--a-accent); border-color: var(--a-accent); }
.a-pin-dots .a-more { width: auto; height: auto; border: 0; color: var(--a-muted); font-size: 0.8125rem; }
.a-pin-note { min-height: 20px; margin: 0; color: var(--a-bad); font-weight: 600; text-align: center; }
.a-pin-keys { display: grid; grid-template-columns: repeat(3, 72px); gap: 10px; direction: ltr; }
.a-pin-keys.is-disabled { opacity: .45; pointer-events: none; }
.a-pin-key { height: 64px; border-radius: var(--a-radius-btn); border: var(--a-bw) solid var(--a-control); background: var(--a-surface); color: var(--a-text);
    font: inherit; font-size: 1.5rem; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.a-pin-key.is-soft { color: var(--a-text); }
.a-pin-key.is-ok { background: var(--a-accent); border-color: var(--a-accent); color: var(--a-accent-ink); }
/* A tablet (the kiosk): the pad grows with the screen, keys large enough for a quick thumb (owner 02/10). */
@media (min-width: 720px) {
    .a-modal:has(.a-pin) { max-width: min(560px, calc(100vw - 32px)); }
    .a-pin { gap: 16px; padding: 8px 0 12px; }
    .a-pin-dots { gap: 16px; min-height: 28px; }
    .a-pin-dots span { width: 22px; height: 22px; }
    .a-pin-keys { grid-template-columns: repeat(3, clamp(80px, 12vw, 120px)); gap: 14px; }
    .a-pin-key { height: clamp(68px, 8vh, 96px); font-size: 1.75rem; }
}
.a-choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.a-choice { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 14px; border-radius: var(--a-radius);
    border: var(--a-bw) solid var(--a-control); background: var(--a-surface); box-shadow: var(--a-shadow); color: var(--a-text);
    cursor: pointer; font: inherit; text-align: start; min-height: 96px; }
.a-choice:hover, .a-choice:focus-visible { border-color: var(--a-accent); }
.a-choice-name { font-weight: 700; font-size: 0.9688rem; }
.a-choice-price { color: var(--a-accent); font-weight: 700; font-variant-numeric: tabular-nums; }
.a-choice .a-chips { margin-top: 0; }
/* A service card (the kiosk): rewards as icons in the corner, the name, the price and duration at its foot. */
/* its icon beside its name (no extra height), the foot across the card's width */
.a-choice.a-service { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto 1fr;
    column-gap: 10px; row-gap: 6px; align-items: start; }
.a-service > .a-item-icon { grid-column: 1; grid-row: 1; }
.a-service .a-choice-name { grid-column: 2; grid-row: 1; align-self: center; }
.a-service .a-choice-foot { grid-column: 1 / -1; grid-row: 2; align-self: end; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding-top: 4px; min-width: 0; }
.a-service .a-choice-price { white-space: normal; overflow-wrap: break-word; }
.a-service .a-choice-price { font-size: 1.125rem; }
.a-choice-time { display: inline-flex; align-items: center; gap: 4px; color: var(--a-muted); font-size: 0.8125rem; white-space: nowrap; }
.a-choice-time svg { width: 14px; height: 14px; }
.a-rewards { display: flex; gap: 4px; flex-basis: 100%; }   /* always their own line: every card the same layout */
.a-reward { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
    background: var(--k-soft); color: var(--k); border: var(--a-bw) solid var(--k); }
.a-reward svg { width: 14px; height: 14px; }
/* An item's icon (the admin's choice or the default of its kind; core/item-icons.js) */
.a-item-icon { display: inline-grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 50%;
    background: var(--a-accent-soft); color: var(--a-accent); }
.a-item-icon svg { width: 20px; height: 20px; }
/* The ready icons to choose from (ui/form.js type 'icon') */
.a-icon-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 6px; margin-top: 6px; }
.a-icon-choice { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 8px; cursor: pointer;
    border-radius: var(--a-radius-sm); border: var(--a-bw) solid var(--a-control); background: var(--a-surface); color: var(--a-text); font: inherit; }
.a-icon-choice:first-child { grid-column: span 3; }
.a-icon-choice svg { width: 20px; height: 20px; }
.a-icon-choice.is-active { border-color: var(--a-accent); box-shadow: 0 0 0 2px var(--a-accent); background: var(--a-accent-soft); color: var(--a-accent); }
.a-icon-choice:focus-visible { outline: var(--a-focus-w) solid var(--a-accent); outline-offset: 2px; }
.a-chip svg { width: 13px; height: 13px; vertical-align: -2px; }
.a-review-qr { align-items: center; text-align: center; gap: 8px; }
/* Google's QR on top, the visit's own below, well apart (owner 03/10) */
.a-review-qrs { display: flex; flex-direction: column; gap: 28px; }
.a-review-qrs .a-review-qr + .a-review-qr { padding-top: 24px; border-top: var(--a-bw) dashed var(--a-border); }
.a-review-qr .a-hint { max-width: 34ch; }
.a-top-clock { align-self: center; margin-inline-end: 8px; font-weight: 700; color: var(--a-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.a-product-lines { display: flex; flex-direction: column; }
.a-product-line { align-items: flex-start; }
.a-product-line .a-grow { min-width: 0; overflow-wrap: anywhere; }
.a-total-box .a-dl dd strong { font-size: 1.125rem; }
.a-search-row { display: flex; gap: 8px; align-items: center; }
.a-search-row .a-search { width: 100%; }
.a-opt-choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.a-opt { display: flex; align-items: center; gap: 6px; padding: 10px 12px; border-radius: var(--a-radius-md); border: var(--a-bw) solid var(--a-control);
    background: var(--a-surface); color: var(--a-text); font: inherit; cursor: pointer; text-align: start; }
.a-opt small { color: var(--a-muted); margin-inline-start: auto; }
.a-opt.is-on { border-color: var(--a-accent); background: var(--a-accent-soft); color: var(--a-accent); font-weight: 600; }
.a-opt svg { width: 16px; height: 16px; flex: none; }
.a-opt-group input { height: 42px; padding: 0 12px; border-radius: var(--a-radius-sm); border: var(--a-bw) solid var(--a-control); background: var(--a-surface); color: var(--a-text); font: inherit; }
.a-opt-group input[aria-invalid="true"] { border-color: var(--a-bad); box-shadow: 0 0 0 1px var(--a-bad); }
/* a follow-up job's state: its main state, its inner step small under it (owner 08/10) */
.a-fu-state { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px; }
/* the customer finder (owner 08/10): its matches to pick, the one picked */
.a-find-results { gap: 6px; }
.a-find-hit { width: 100%; justify-content: flex-start; text-align: start; }
.a-find-picked { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border: var(--a-bw) solid var(--a-control); border-radius: var(--a-radius-sm); background: var(--a-surface); }
.a-find-picked bdi { flex: 1; font-weight: 600; }
/* the booking QR poster's preview (owner 09/10): the page at a readable size, never wider than its card */
.a-qr-poster { max-width: 420px; }
.a-opt-img { width: 36px; height: 36px; object-fit: cover; border-radius: var(--a-radius-sm); flex: none; }
/* The choices editor (owner 08/10, sections/catalog/choice-editor.js): the groups beside the customer's live panel on a
   computer, one above the other on a phone; the preview stays in view while the list scrolls. */
.a-ced { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 16px; align-items: start; }
.a-ced-preview { padding: 12px; border-radius: var(--a-radius-md); border: var(--a-bw) dashed var(--a-control); background: var(--a-surface-2); }
.a-ced-preview h3 { margin: 0; font-size: 1rem; }
.a-ced-total { font-size: 1.0625rem; padding-top: 8px; border-top: var(--a-bw) solid var(--a-border); }
.a-ced-group .a-card-head { flex-wrap: wrap; gap: 6px; }
.a-ced-group .a-card-head h2 { flex: 1 1 160px; }
.a-ced-astpl { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.a-ced-astpl .a-input { flex: 1 1 220px; }
.a-ced-names summary { cursor: pointer; padding: 6px 0; color: var(--a-muted); }
.a-ced-items .a-checks { max-height: 260px; overflow: auto; }
/* A product's / service's pictures (owner 08/10, sections/catalog/pictures.js): up to 8, the first the main one */
.a-pics { display: flex; flex-direction: column; gap: 10px; grid-column: 1 / -1; }
.a-pics-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.a-pic { position: relative; margin: 0; aspect-ratio: 1; border-radius: var(--a-radius); overflow: hidden; border: var(--a-bw) solid var(--a-border); background: var(--a-surface-2); cursor: grab; }
.a-pic > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.a-pic.is-main { border: 2px solid var(--a-accent); }
.a-pic.is-busy { display: grid; place-items: center; cursor: default; }
.a-pic-main { position: absolute; top: 6px; inset-inline-start: 6px; display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; border-radius: var(--a-radius-pill); background: var(--a-accent); color: var(--a-accent-ink); font-size: 0.6875rem; font-weight: 700; }
.a-pic-main svg { width: 12px; height: 12px; }
.a-pic-tools { position: absolute; inset-inline: 0; bottom: 0; display: flex; justify-content: center; gap: 2px; padding: 4px; background: var(--a-surface); border-top: var(--a-bw) solid var(--a-border); }
.a-pic-tools .a-icon-btn { width: 30px; height: 30px; }
.a-pic-add { aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border-radius: var(--a-radius); border: 2px dashed var(--a-control); color: var(--a-text); cursor: pointer; text-align: center; padding: 8px; }
.a-pic-add:hover { border-color: var(--a-accent); color: var(--a-accent); }
.a-pic-add svg { width: 28px; height: 28px; }
.a-pic-add small { color: var(--a-muted); }

/* a computer: the groups and the customer's panel each scroll on their own (owner 08/10: the panel moved only when the
   other side reached its middle), inside the window's one height */
@media (min-width: 720px) {
    .a-modal.is-steady > .a-modal-body:has(> .a-stack > .a-ced) { overflow: hidden; display: flex; flex-direction: column; }
    .a-modal-body > .a-stack:has(> .a-ced) { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
    .a-ced { flex: 1 1 auto; min-height: 0; align-items: stretch; }
    .a-ced-main, .a-ced-preview { min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
    .a-ced-main { padding-inline-end: 4px; }
}
@media (max-width: 719px) { .a-ced { grid-template-columns: minmax(0, 1fr); } }

/* The ticket machine and the queue screen (frontend/staff/devices/): public devices, no menu. */
html[data-section="machine"] .a-nav, html[data-section="board"] .a-nav { display: none; }
html[data-section="machine"] .a-main, html[data-section="board"] .a-main { margin-inline-start: 0; max-width: none; }
.a-machine { align-items: center; text-align: center; max-width: 920px; margin: 0 auto; }
.a-machine-title { font-size: 1.625rem; font-weight: 800; margin: 8px 0; }
.a-machine-grid { width: 100%; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.a-big-choice { align-items: center; text-align: center; min-height: 150px; justify-content: center; }
.a-big-choice svg { width: 36px; height: 36px; color: var(--a-accent); }
.a-big-choice .a-choice-name { font-size: 1.25rem; }
.a-big-choice.is-primary { border-color: var(--a-accent); }
.a-machine .a-form { width: 100%; max-width: 520px; text-align: start; }
.a-machine > .a-btn.a-wide { max-width: 520px; min-height: 56px; font-size: 1.125rem; }
.a-ticket-number { font-size: clamp(96px, 22vw, 200px); line-height: 1; font-weight: 900; color: var(--a-accent); font-variant-numeric: tabular-nums; }
.a-ticket-line { font-size: 1.25rem; font-weight: 600; margin: 0; }
/* the products at the ticket machine (13/10, staff/devices/machine.js): the shop's cards large for a finger, his list
   under them, the buttons at the end; the product window itself is the shop's (its styles further down) */
.a-mprod { max-width: 1100px; }
.a-mprod-grid { width: 100%; display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.a-mprod-card { display: flex; flex-direction: column; align-items: stretch; gap: 6px; padding: 10px 10px 14px; text-align: start; cursor: pointer;
    border-radius: var(--a-radius); border: var(--a-bw) solid var(--a-border); background: var(--a-surface); color: var(--a-text); font: inherit; box-shadow: var(--a-shadow); }
.a-mprod-card:hover, .a-mprod-card:focus-visible { border-color: var(--a-accent); }
.a-mprod-card:focus-visible { outline: var(--a-focus-w, 2px) solid var(--a-accent); outline-offset: 2px; }
.a-mprod-card:disabled { cursor: default; box-shadow: none; border-style: dashed; }
.a-mprod-pic { display: grid; place-items: center; aspect-ratio: 1; border-radius: var(--a-radius-sm); overflow: hidden; color: var(--a-accent);
    background: linear-gradient(160deg, var(--a-accent-soft), var(--a-surface-2)); }
.a-mprod-pic img { width: 100%; height: 100%; object-fit: cover; }
.a-mprod-pic svg { width: 48px; height: 48px; }
.a-mprod-brand { color: var(--a-accent); font-size: 0.75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.a-mprod-cname { font-weight: 700; font-size: 1.0625rem; line-height: 1.3; overflow-wrap: anywhere; }
.a-mprod-price { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.a-mprod-price strong { font-size: 1.25rem; color: var(--a-accent); font-variant-numeric: tabular-nums; }
.a-mprod-price small { color: var(--a-muted); }
.a-mprod-card .a-pbadge { align-self: flex-start; }
.a-mprod-list { width: 100%; max-width: 720px; display: flex; flex-direction: column; gap: 8px; text-align: start; padding: 14px 16px;
    border-radius: var(--a-radius); border: var(--a-bw) solid var(--a-control); background: var(--a-surface); }
.a-mprod-list h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font-size: 1.125rem; }
.a-mprod-line { display: flex; align-items: center; gap: 12px; padding-block: 8px; border-top: var(--a-bw) solid var(--a-border); }
.a-mprod-line > img, .a-mprod-noimg { flex: none; width: 52px; height: 52px; border-radius: var(--a-radius-sm); object-fit: cover; display: grid; place-items: center;
    background: var(--a-surface-2); color: var(--a-accent); }
.a-mprod-noimg svg { width: 24px; height: 24px; }
.a-mprod-name { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-weight: 600; overflow-wrap: anywhere; }
.a-mprod-qty { display: inline-flex; align-items: center; gap: 6px; padding: 3px; border-radius: var(--a-radius-pill); border: var(--a-bw) solid var(--a-control); }
.a-mprod-qty strong { min-width: 28px; text-align: center; font-size: 1.125rem; font-variant-numeric: tabular-nums; }
.a-mprod-foot { width: 100%; max-width: 720px; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.a-mprod-foot .a-btn { min-height: 56px; font-size: 1.0625rem; }
.a-mprod-foot .a-btn.a-wide { flex: 1 1 100%; }
.a-mprod-asked { width: 100%; max-width: 520px; text-align: start; padding: 12px 16px; border-radius: var(--a-radius); border: var(--a-bw) solid var(--a-border); background: var(--a-surface); }
.a-mprod-asked h3 { margin: 0 0 6px; font-size: 1.0625rem; }
.a-mprod-asked ul { margin: 0; padding-inline-start: 20px; display: flex; flex-direction: column; gap: 4px; }
@media (max-width: 559px) { .a-mprod-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }
/* a ticket's products at the kiosk (13/10, staff/kiosk/queue-products.js): one line each — picture, name and variant,
   quantity, state, the next step; the window's actions at its foot */
.a-qprod-head { align-items: center; justify-content: flex-start; gap: 10px; flex-wrap: wrap; }
.a-qprod-lines { display: flex; flex-direction: column; }
.a-qprod-line { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-block: 10px; border-top: var(--a-bw) solid var(--a-border); }
.a-qprod-line > img { flex: none; width: 52px; height: 52px; border-radius: var(--a-radius-sm); object-fit: cover; background: var(--a-surface-2); }
.a-qprod-name { flex: 1 1 180px; min-width: 0; display: flex; flex-direction: column; gap: 2px; overflow-wrap: anywhere; }
.a-qprod-acts { display: inline-flex; align-items: center; gap: 8px; margin-inline-start: auto; }
.a-qprod-done > summary { cursor: pointer; color: var(--a-muted); padding-block: 8px; }
.a-qprod-foot { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; padding-top: 12px; border-top: var(--a-bw) solid var(--a-border); }
.a-qprod-from { align-self: flex-start; margin-top: 4px; }
.a-board { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 719px) { .a-board { grid-template-columns: 1fr; } }
.a-board-col { display: flex; flex-direction: column; gap: 12px; }
.a-board-col h2 { display: flex; align-items: center; gap: 8px; font-size: 1.375rem; margin: 0; }
.a-board-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-radius: var(--a-radius);
    border: var(--a-bw) solid var(--a-border); background: var(--a-surface); box-shadow: var(--a-shadow); }
.a-board-card.is-called { border-color: var(--a-accent); background: var(--a-accent-soft); }
.a-board-num { font-size: 2.75rem; font-weight: 900; font-variant-numeric: tabular-nums; }
.a-board-who { font-size: 1.25rem; font-weight: 600; color: var(--a-muted); display: inline-flex; align-items: center; gap: 4px; }
/* «Next» = ONE numbered list (14/10, docs/QUEUE_TURNS_PLAN.md): place · code · booking time / worker · the estimate */
.a-board-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.a-board-row { display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: 14px; padding: 10px 16px;
    border-radius: var(--a-radius-md); border: var(--a-bw) solid var(--a-border); background: var(--a-surface); }
.a-board-row[data-booked] { border-color: var(--a-accent); }
.a-board-pos { min-width: 2.25rem; height: 2.25rem; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center;
    background: var(--a-surface-2); color: var(--a-text); font-weight: 800; font-variant-numeric: tabular-nums; }
.a-board-code { display: inline-flex; align-items: center; gap: 6px; font-size: 1.75rem; font-weight: 900; font-variant-numeric: tabular-nums; }
.a-board-row[data-booked] .a-board-code { color: var(--a-accent); }
.a-board-meta { display: flex; flex-direction: column; gap: 2px; font-size: 1rem; color: var(--a-muted); min-width: 0; }
.a-board-meta > span { display: inline-flex; align-items: center; gap: 4px; }
.a-board-wait { display: flex; flex-direction: column; align-items: flex-end; text-align: end; font-size: 1.125rem; }
.a-board-wait small { font-size: 0.875rem; color: var(--a-muted); }
.a-board-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 4px 0 0; font-size: 0.9375rem; color: var(--a-muted); }
.a-board-legend > span { display: inline-flex; align-items: center; gap: 4px; }
.a-board-flash { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
    background: var(--a-accent); color: var(--a-accent-ink); text-align: center; }
.a-board-flash[hidden] { display: none; }
/* a call over the whole screen: the page under it never scrolls (13/10: scrollbars showed on the room's TV at every call,
   as under a window — the same rule as html:has(.a-overlay)) */
html:has(.a-board-flash:not([hidden])) { overflow: hidden; }
.a-board-flash-label { font-size: 2.125rem; font-weight: 700; }
.a-board-flash-num { font-size: clamp(140px, 30vw, 320px); line-height: 1; font-weight: 900; font-variant-numeric: tabular-nums; }
.a-board-flash-who { font-size: 2.5rem; font-weight: 700; }
.a-board-sound { margin-bottom: 12px; }
/* Settings → General → «The queue: products» (13/10): two number fields side by side; the products as picture cards */
.a-qp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.a-qp-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.a-qp-item { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px; border-radius: var(--a-radius-md);
    border: var(--a-bw) solid var(--a-control); background: var(--a-surface); cursor: pointer; text-align: center; position: relative; }
.a-qp-item:has(input:checked) { border-color: var(--a-accent); background: var(--a-accent-soft); }
.a-qp-item input { position: absolute; top: 8px; inset-inline-start: 8px; }
.a-qp-item img, .a-qp-noimg { width: 72px; height: 72px; object-fit: contain; border-radius: var(--a-radius-sm); }
.a-qp-noimg { display: grid; place-items: center; background: var(--a-surface-2); color: var(--a-muted); }
.a-qp-name { font-weight: 600; font-size: 0.875rem; overflow-wrap: anywhere; }
.a-qp-item.is-out { border-style: dashed; }
/* The waiting room's showcase (13/10, docs/QUEUE_PRODUCTS_PLAN.md S2): beside the numbers on a wide screen, under them on
   a narrow one; one product at a time, a soft entrance (none when the device asks for reduced motion). A call hides it. */
.a-board-room { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }
.a-board-room:has(> .a-board-show:not([hidden])) { grid-template-columns: minmax(0, 1fr) minmax(280px, 34%); }
@media (max-width: 899px) { .a-board-room:has(> .a-board-show:not([hidden])) { grid-template-columns: minmax(0, 1fr); } }
.a-board-show[hidden] { display: none; }
.a-board-show { position: sticky; top: 12px; }
.a-board-show-card { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--a-radius);
    border: var(--a-bw) solid var(--a-border); background: var(--a-surface); box-shadow: var(--a-shadow);
    animation: a-show-in 0.7s cubic-bezier(.2, .8, .2, 1) both; position: relative; }
@keyframes a-show-in { from { opacity: 0; transform: translateX(28px) scale(0.96); } to { opacity: 1; transform: none; } }
[dir="rtl"] .a-board-show-card { animation-name: a-show-in-rtl; }
@keyframes a-show-in-rtl { from { opacity: 0; transform: translateX(-28px) scale(0.96); } to { opacity: 1; transform: none; } }
/* the advert's parts: a band, the picture slowly zooming, the price as a badge, the dots and the bar of its seconds */
.a-board-show-band { margin: 0; display: flex; align-items: center; gap: 8px; padding: 10px 18px; font-weight: 800; font-size: 1.0625rem;
    letter-spacing: 0.02em; background: var(--a-accent); color: var(--a-accent-ink); }
.a-board-show-band svg { width: 20px; height: 20px; }
.a-board-show-pic { position: relative; }
.a-board-show-pic img { animation: a-show-zoom var(--show-s, 8s) ease-out both; }
@keyframes a-show-zoom { from { transform: scale(1); } to { transform: scale(1.08); } }
.a-board-show-pic .a-board-show-price { position: absolute; inset-inline-end: 14px; bottom: 14px; margin: 0; padding: 8px 14px; border-radius: var(--a-radius-pill);
    background: var(--a-accent); color: var(--a-accent-ink); box-shadow: var(--a-shadow); animation: a-show-pop 0.5s 0.35s cubic-bezier(.2, .9, .3, 1.4) both; }
.a-board-show-pic .a-board-show-price strong { color: inherit; font-size: 1.875rem; }
.a-board-show-pic .a-board-show-price small { color: inherit; font-size: 0.8125rem; }
@keyframes a-show-pop { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: none; } }
.a-board-show-dots { display: flex; justify-content: center; gap: 6px; padding: 0 18px 12px; }
.a-board-show-dots span { width: 8px; height: 8px; border-radius: 50%; background: var(--a-control); }
.a-board-show-dots span.is-on { background: var(--a-accent); width: 22px; border-radius: var(--a-radius-pill); }
.a-board-show-bar { height: 4px; background: var(--a-surface-2); }
.a-board-show-bar span { display: block; height: 100%; background: var(--a-accent); transform-origin: 0 50%; animation: a-show-bar var(--show-s, 8s) linear both; }
[dir="rtl"] .a-board-show-bar span { transform-origin: 100% 50%; }
@keyframes a-show-bar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .a-board-show-card, .a-board-show-pic img, .a-board-show-price, .a-board-show-bar span { animation: none; } }
.a-board-show-pic { aspect-ratio: 4 / 3; background: var(--a-surface-2); display: grid; place-items: center; overflow: hidden; }
.a-board-show-pic img { width: 100%; height: 100%; object-fit: contain; }
.a-board-show-info { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px 18px; }
.a-board-show-brand { margin: 0; font-size: 0.9375rem; font-weight: 700; color: var(--a-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.a-board-show-name { margin: 0; font-size: 1.75rem; line-height: 1.2; overflow-wrap: anywhere; }
.a-board-show-price { margin: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; }
.a-board-show-price strong { font-size: 2rem; color: var(--a-accent); font-variant-numeric: tabular-nums; }
.a-board-show-price small { color: var(--a-muted); font-size: 0.9375rem; }
.a-board-show-desc { margin: 0; color: var(--a-muted); font-size: 1.0625rem; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; overflow: hidden; }

/* ── Styles (docs/THEME_PLAN.md §4): what a style changes beyond its tokens ──
   The colours, corners, frames, shadows and heading type come from core/themes.js;
   here only what tokens cannot say. A new style = its entry in themes.js + its block here. */

/* Material 3: depth by tone, not by shadow; rounded, soft, tonal. */
html[data-style="material"] :is(.a-card, .a-tile, .a-table-wrap, .a-worker, .a-choice, .a-board-card) { box-shadow: none; }
html[data-style="material"] :is(.a-card, .a-modal) .a-tile { background: var(--a-surface-2); }
html[data-style="material"] .a-nav-item.is-active { font-weight: 600; }
html[data-style="material"] .a-btn.a-primary { box-shadow: var(--a-shadow); }
html[data-style="material"] .a-top { background: color-mix(in srgb, var(--a-bg) 92%, transparent); }

/* Elegant: the shop's identity — a gold rule over each card, serif headings, fine spacing. */
html[data-style="elegant"] .a-card { border-top: 2px solid var(--a-deco); }
html[data-style="elegant"] .a-card-head h2 svg, html[data-style="elegant"] .a-more-item svg { color: var(--a-deco); }
html[data-style="elegant"] .a-nav-item.is-active { box-shadow: inset 3px 0 0 var(--a-deco); }
html[dir="rtl"][data-style="elegant"] .a-nav-item.is-active { box-shadow: inset -3px 0 0 var(--a-deco); }
html[data-style="elegant"] :is(.a-field-label, .a-tile-label, .a-table th) { letter-spacing: .02em; }
html[data-style="elegant"] .a-top h1 { letter-spacing: .01em; }
/* Its tiles sit on the ivory of the card with a fine frame, never on the beige raised surface (figures in
   amber or brown on beige read «like wood», owner 02/10). Scoped: a preview in Elegant shows it too. */
@scope ([data-style="elegant"]) to ([data-style]) {
    :scope .a-tiles .a-tile { background-color: var(--a-surface); border-color: var(--a-border); }
}

/* High contrast: clarity first — heavier text, underlined links, every state framed, no fading, no tints to read through. */
html[data-style="contrast"] body { font-weight: 500; }
html[data-style="contrast"] :is(a, .a-link) { text-decoration: underline; text-underline-offset: 3px; }
html[data-style="contrast"] :is(.a-nav-item.is-active, .a-menu > .is-active, .a-alert.is-unread, .a-more-item.is-active) { outline: var(--a-bw) solid currentColor; outline-offset: -2px; }
html[data-style="contrast"] :is(.a-pill, .a-pay, .a-badge, .a-chip, .a-state, .a-tabs a) { border: var(--a-bw) solid currentColor; }
html[data-style="contrast"] :is(.a-card, .a-modal) .a-tile { border-color: var(--a-border); }
html[data-style="contrast"] .a-seg button.is-active { outline: 2px solid var(--a-accent-ink); outline-offset: -5px; }
html[data-style="contrast"] .a-row.is-dim { opacity: 1; font-style: italic; }
html[data-style="contrast"] svg.lucide { stroke-width: 2.5; }
html[data-style="contrast"] :is(.a-card, .a-tile, .a-table-wrap, .a-worker, .a-choice, .a-board-card, .a-modal) { box-shadow: none; }

/* ── The data colours and Vivid (owner 02/10, docs/THEME_PLAN.md §12) ──
   An element showing one kind of data says so (data-kind="tips"…; ui/stats.js tiles / card, ui/table.js
   columns, the reports' figures); its colours come from core/themes.js (--a-d-<kind>…, fitted per style
   and mode, the admin may change a kind's colour). They show only where the data colours are on
   (data-colors="colorful"), and Vivid fills the tiles with them. Each block is scoped to the NEAREST
   element that declares the look (@scope … to …): a preview of another look inside the page keeps its own.
   Every selector inside starts with :scope, so it wins by specificity over the plain component rules (a tile
   inside a card…), never by the finer «scope proximity» rule of the cascade.
   The report tables are coloured on screen only: the PDF draws them under another class (exportReport). */
[data-kind="revenue"] { --k: var(--a-d-revenue); --k-soft: var(--a-d-revenue-soft); --k-fill: var(--a-d-revenue-fill); --k-fill-2: var(--a-d-revenue-fill-2); --k-on: var(--a-d-revenue-on); }
[data-kind="services"] { --k: var(--a-d-services); --k-soft: var(--a-d-services-soft); --k-fill: var(--a-d-services-fill); --k-fill-2: var(--a-d-services-fill-2); --k-on: var(--a-d-services-on); }
[data-kind="products"] { --k: var(--a-d-products); --k-soft: var(--a-d-products-soft); --k-fill: var(--a-d-products-fill); --k-fill-2: var(--a-d-products-fill-2); --k-on: var(--a-d-products-on); }
[data-kind="tips"] { --k: var(--a-d-tips); --k-soft: var(--a-d-tips-soft); --k-fill: var(--a-d-tips-fill); --k-fill-2: var(--a-d-tips-fill-2); --k-on: var(--a-d-tips-on); }
[data-kind="share"] { --k: var(--a-d-share); --k-soft: var(--a-d-share-soft); --k-fill: var(--a-d-share-fill); --k-fill-2: var(--a-d-share-fill-2); --k-on: var(--a-d-share-on); }
[data-kind="surcharge"] { --k: var(--a-d-surcharge); --k-soft: var(--a-d-surcharge-soft); --k-fill: var(--a-d-surcharge-fill); --k-fill-2: var(--a-d-surcharge-fill-2); --k-on: var(--a-d-surcharge-on); }
[data-kind="tax"] { --k: var(--a-d-tax); --k-soft: var(--a-d-tax-soft); --k-fill: var(--a-d-tax-fill); --k-fill-2: var(--a-d-tax-fill-2); --k-on: var(--a-d-tax-on); }
[data-kind="expenses"] { --k: var(--a-d-expenses); --k-soft: var(--a-d-expenses-soft); --k-fill: var(--a-d-expenses-fill); --k-fill-2: var(--a-d-expenses-fill-2); --k-on: var(--a-d-expenses-on); }
[data-kind="profit"] { --k: var(--a-d-profit); --k-soft: var(--a-d-profit-soft); --k-fill: var(--a-d-profit-fill); --k-fill-2: var(--a-d-profit-fill-2); --k-on: var(--a-d-profit-on); }
[data-kind="cash"] { --k: var(--a-d-cash); --k-soft: var(--a-d-cash-soft); --k-fill: var(--a-d-cash-fill); --k-fill-2: var(--a-d-cash-fill-2); --k-on: var(--a-d-cash-on); }
[data-kind="card"] { --k: var(--a-d-card); --k-soft: var(--a-d-card-soft); --k-fill: var(--a-d-card-fill); --k-fill-2: var(--a-d-card-fill-2); --k-on: var(--a-d-card-on); }
[data-kind="wallet"] { --k: var(--a-d-wallet); --k-soft: var(--a-d-wallet-soft); --k-fill: var(--a-d-wallet-fill); --k-fill-2: var(--a-d-wallet-fill-2); --k-on: var(--a-d-wallet-on); }
[data-kind="points"] { --k: var(--a-d-points); --k-soft: var(--a-d-points-soft); --k-fill: var(--a-d-points-fill); --k-fill-2: var(--a-d-points-fill-2); --k-on: var(--a-d-points-on); }
[data-kind="visits"] { --k: var(--a-d-visits); --k-soft: var(--a-d-visits-soft); --k-fill: var(--a-d-visits-fill); --k-fill-2: var(--a-d-visits-fill-2); --k-on: var(--a-d-visits-on); }
/* a payment method without its own data colour (the wallet): neutral, never the colour of the group around it */
[data-kind="method"] { --k: var(--a-muted); --k-soft: var(--a-surface-2); }

/* Colourful (Modern, Material, Elegant, High contrast): the tile keeps its style's own background (a tint of
   each colour over ivory / grey turned muddy, «like wood», owner 02/10); the colour is in a top edge, the
   figure and its icon, and in the card edges and the report figures. Vivid fills the tiles (below). */
@scope ([data-colors="colorful"]) to ([data-colors]) {
    :scope .a-tiles .a-tile[data-kind] { box-shadow: inset 0 3px 0 var(--k); }
    :scope .a-tiles .a-tile[data-kind] .a-tile-value, :scope .a-tiles .a-tile[data-kind] .a-tile-label svg { color: var(--k); }
    :scope .a-card[data-kind] { border-top: 3px solid var(--k); }
    :scope .a-card[data-kind] > .a-card-head h2 svg { color: var(--k); }
    /* the report's boxes (owner 03/10: «coloured as the style, as the Sales tiles»): the tile's top edge, a soft tint of
       its colour on its head, the icon and the result in its colour */
    :scope .a-rgroup[data-kind] { box-shadow: inset 0 3px 0 var(--k); }
    :scope .a-rgroup[data-kind] tr.is-head td { background: var(--k-soft); }
    :scope .a-rgroup[data-kind] .a-rgroup-name svg { color: var(--k); }
    :scope .a-mchip-ic[data-kind] { background: none; color: var(--k); }
    :scope :is(.a-report-table, .a-table, .a-lines-dl) [data-kind] { color: var(--k); }
    :scope :is(.a-report-table, .a-table, .a-lines-dl) .a-amount[data-kind], :scope .a-lines-dl dd[data-kind] { font-weight: 700; }
}
/* High contrast: a heavier edge, as its frames. */
@scope ([data-style="contrast"][data-colors="colorful"]) to ([data-style]) {
    :scope .a-tiles .a-tile[data-kind] { box-shadow: inset 0 4px 0 var(--k); }
}

/* Vivid: filled gradient tiles (the accent's, or each kind's with the data colours on), lifted cards. */
@scope ([data-style="vivid"]) to ([data-style]) {
    :scope .a-tiles .a-tile { background-color: var(--a-accent-fill); background-image: linear-gradient(135deg, var(--a-accent-fill), var(--a-accent-fill-2));
        border-color: transparent; color: var(--a-accent-ink); box-shadow: var(--a-shadow); }
    :scope .a-tiles .a-tile :is(.a-tile-label, .a-tile-value, .a-tile-sub), :scope .a-tiles .a-tile .a-tile-label svg { color: inherit; }
    :scope .a-card { box-shadow: var(--a-shadow); }
    :scope .a-card > .a-card-head h2 svg { color: var(--a-accent); }
    :scope .a-btn.a-primary { background-image: linear-gradient(135deg, var(--a-accent-fill), var(--a-accent-fill-2)); }
    /* the report's boxes: the head filled as a tile (the accent's; each kind's with the data colours on, below) */
    :scope .a-rgroup tr.is-head { background-color: var(--a-accent-fill); background-image: linear-gradient(135deg, var(--a-accent-fill), var(--a-accent-fill-2)); }
    :scope .a-rgroup tr.is-head td { background: transparent; color: var(--a-accent-ink); }
    :scope .a-rgroup tr.is-head td :is(*, svg) { color: inherit; }
}
@scope ([data-style="vivid"][data-colors="colorful"]) to ([data-style]) {
    :scope .a-tiles .a-tile[data-kind] { background-color: var(--k-fill); background-image: linear-gradient(135deg, var(--k-fill), var(--k-fill-2)); color: var(--k-on); box-shadow: var(--a-shadow); }
    :scope .a-tiles .a-tile[data-kind] :is(.a-tile-label, .a-tile-value, .a-tile-sub), :scope .a-tiles .a-tile[data-kind] .a-tile-label svg { color: inherit; }
    :scope .a-rgroup[data-kind] { box-shadow: var(--a-shadow); }
    :scope .a-rgroup[data-kind] tr.is-head { background-color: var(--k-fill); background-image: linear-gradient(135deg, var(--k-fill), var(--k-fill-2)); }
    :scope .a-rgroup[data-kind] tr.is-head td { background: transparent; color: var(--k-on); }
    :scope .a-rgroup[data-kind] tr.is-head td :is(*, svg) { color: inherit; }
    /* a tile that is not money (customers, attendance, counts): varied colours from the same fitted palette, by its place
       (as the old pages did); green and red stay for profit / loss, which tiles name themselves */
    :scope .a-tiles > .a-tile:not([data-kind]):nth-child(6n+1) { --k-fill: var(--a-d-revenue-fill); --k-fill-2: var(--a-d-revenue-fill-2); --k-on: var(--a-d-revenue-on); }
    :scope .a-tiles > .a-tile:not([data-kind]):nth-child(6n+2) { --k-fill: var(--a-d-share-fill); --k-fill-2: var(--a-d-share-fill-2); --k-on: var(--a-d-share-on); }
    :scope .a-tiles > .a-tile:not([data-kind]):nth-child(6n+3) { --k-fill: var(--a-d-tips-fill); --k-fill-2: var(--a-d-tips-fill-2); --k-on: var(--a-d-tips-on); }
    :scope .a-tiles > .a-tile:not([data-kind]):nth-child(6n+4) { --k-fill: var(--a-d-cash-fill); --k-fill-2: var(--a-d-cash-fill-2); --k-on: var(--a-d-cash-on); }
    :scope .a-tiles > .a-tile:not([data-kind]):nth-child(6n+5) { --k-fill: var(--a-d-surcharge-fill); --k-fill-2: var(--a-d-surcharge-fill-2); --k-on: var(--a-d-surcharge-on); }
    :scope .a-tiles > .a-tile:not([data-kind]):nth-child(6n+6) { --k-fill: var(--a-d-card-fill); --k-fill-2: var(--a-d-card-fill-2); --k-on: var(--a-d-card-on); }
    :scope .a-tiles > .a-tile:not([data-kind]) { background-color: var(--k-fill); background-image: linear-gradient(135deg, var(--k-fill), var(--k-fill-2)); color: var(--k-on); }
    /* the screen's buttons (owner 05/10, «the style is Vivid»): each icon's tile filled, in turn, as the tiles are */
    :scope .a-view .a-toolbar:not(:is(.a-card, .a-state, .a-review, .a-modal) .a-toolbar) > .a-btn:not(.a-danger):nth-child(6n+1) { --k-fill: var(--a-d-revenue-fill); --k-fill-2: var(--a-d-revenue-fill-2); --k-on: var(--a-d-revenue-on); }
    :scope .a-view .a-toolbar:not(:is(.a-card, .a-state, .a-review, .a-modal) .a-toolbar) > .a-btn:not(.a-danger):nth-child(6n+2) { --k-fill: var(--a-d-share-fill); --k-fill-2: var(--a-d-share-fill-2); --k-on: var(--a-d-share-on); }
    :scope .a-view .a-toolbar:not(:is(.a-card, .a-state, .a-review, .a-modal) .a-toolbar) > .a-btn:not(.a-danger):nth-child(6n+3) { --k-fill: var(--a-d-tips-fill); --k-fill-2: var(--a-d-tips-fill-2); --k-on: var(--a-d-tips-on); }
    :scope .a-view .a-toolbar:not(:is(.a-card, .a-state, .a-review, .a-modal) .a-toolbar) > .a-btn:not(.a-danger):nth-child(6n+4) { --k-fill: var(--a-d-cash-fill); --k-fill-2: var(--a-d-cash-fill-2); --k-on: var(--a-d-cash-on); }
    :scope .a-view .a-toolbar:not(:is(.a-card, .a-state, .a-review, .a-modal) .a-toolbar) > .a-btn:not(.a-danger):nth-child(6n+5) { --k-fill: var(--a-d-surcharge-fill); --k-fill-2: var(--a-d-surcharge-fill-2); --k-on: var(--a-d-surcharge-on); }
    :scope .a-view .a-toolbar:not(:is(.a-card, .a-state, .a-review, .a-modal) .a-toolbar) > .a-btn:not(.a-danger):nth-child(6n+6) { --k-fill: var(--a-d-card-fill); --k-fill-2: var(--a-d-card-fill-2); --k-on: var(--a-d-card-on); }
}
/* A box's parts in their colours (the data colours on): what came in = income, the shop's account = the accent, the
   worker's account = his share; in Vivid their tiles filled as the tiles are. (The payment methods: their own symbol in
   their colour, every style — .a-mchip-ic.) */
@scope ([data-colors="colorful"]) to ([data-colors]) {
    :scope .a-rgroup tr[data-part="revenue"] { --pk: var(--a-d-revenue); --pk-soft: var(--a-d-revenue-soft); --pk-ink: var(--a-d-revenue);
        --pk-fill: var(--a-d-revenue-fill); --pk-fill-2: var(--a-d-revenue-fill-2); --pk-on: var(--a-d-revenue-on); }
    :scope .a-rgroup tr[data-part="share"] { --pk: var(--a-d-share); --pk-soft: var(--a-d-share-soft); --pk-ink: var(--a-d-share);
        --pk-fill: var(--a-d-share-fill); --pk-fill-2: var(--a-d-share-fill-2); --pk-on: var(--a-d-share-on); }
    :scope .a-rgroup tr[data-part="accent"] { --pk: var(--a-accent); --pk-soft: var(--a-accent-soft); --pk-ink: var(--a-accent); }
}
@scope ([data-style="vivid"]) to ([data-style]) {
    :scope .a-rgroup tr[data-part] .a-part-ic { background-color: var(--pk-fill, var(--a-accent-fill));
        background-image: linear-gradient(135deg, var(--pk-fill, var(--a-accent-fill)), var(--pk-fill-2, var(--a-accent-fill-2))); color: var(--pk-on, var(--a-accent-ink)); }
}
/* Vivid: the screen's buttons' icon tiles filled (the accent's; each in turn with the data colours on, above). */
@scope ([data-style="vivid"]) to ([data-style]) {
    :scope .a-view .a-toolbar:not(:is(.a-card, .a-state, .a-review, .a-modal) .a-toolbar) > .a-btn:not(.a-danger) svg {
        background-color: var(--k-fill, var(--a-accent-fill)); background-image: linear-gradient(135deg, var(--k-fill, var(--a-accent-fill)), var(--k-fill-2, var(--a-accent-fill-2)));
        color: var(--k-on, var(--a-accent-ink));
    }
}
/* The cash register's breakdown (js/cash-view.js, kiosk and admin): each line in its colour on screen
   (its PDF is written from the server's values separately, untouched). */
@scope ([data-colors="colorful"]) to ([data-colors]) {
    .cashv-line-services { --k: var(--a-d-services); }
    .cashv-line-products, .cashv-line-shop { --k: var(--a-d-products); }
    .cashv-line-tips { --k: var(--a-d-tips); }
    .cashv-line-expenses { --k: var(--a-d-expenses); }
    :scope :is(.cashv-line-services, .cashv-line-products, .cashv-line-shop, .cashv-line-tips, .cashv-line-expenses) td:not(.cashv-zero) { color: var(--k); font-weight: 700; }
}

/* ── The «Appearance» window and Settings → Appearance (ui/appearance.js, sections/settings/look.js) ── */
.a-look { display: flex; flex-direction: column; gap: 10px; }
.a-look-h { margin: 8px 0 0; font-size: .9375rem; font-weight: var(--a-head-weight); font-family: var(--a-font-head); }
.a-look-styles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 960px) { .a-stack .a-look-styles { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.a-look-style {
    display: flex; flex-direction: column; align-items: stretch; gap: 6px; padding: 10px; text-align: start; cursor: pointer;
    border: var(--a-bw) solid var(--a-control); border-radius: var(--a-radius-md); background: var(--a-surface); color: var(--a-text); font: inherit;
}
.a-look-style.is-active { border-color: var(--a-accent); box-shadow: 0 0 0 2px var(--a-accent); }
.a-look-name { display: flex; align-items: center; gap: 6px; font-weight: 700; }
.a-look-name svg { color: var(--a-accent); width: 16px; height: 16px; }
.a-look-desc { color: var(--a-muted); font-size: .8125rem; line-height: 1.35; }
/* A small screen in the style's own colours and shape (its variables are set on this element). */
.a-look-mini { display: flex; flex-direction: column; gap: 6px; padding: 8px; height: 86px; border-radius: var(--a-radius-sm);
    background: var(--a-bg); border: var(--a-bw) solid var(--a-border); overflow: hidden; }
.a-look-bar { height: 10px; width: 55%; border-radius: var(--a-radius-pill); background: var(--a-accent); }
.a-look-card { flex: 1; display: flex; flex-direction: column; gap: 5px; padding: 7px; border-radius: var(--a-radius-md);
    background: var(--a-surface); border: var(--a-bw) solid var(--a-border); box-shadow: var(--a-shadow); }
.a-look-mini[data-style="elegant"] .a-look-card { border-top: 2px solid var(--a-deco); }
.a-look-line { height: 5px; width: 80%; border-radius: 3px; background: var(--a-text); opacity: .85; }
.a-look-line.is-short { width: 50%; background: var(--a-muted); }
.a-look-row { display: flex; gap: 5px; margin-top: auto; }
.a-look-btn { width: 38%; height: 10px; border-radius: var(--a-radius-btn); background: var(--a-accent); }
.a-look-chip { width: 22%; height: 10px; border-radius: var(--a-radius-pill); background: var(--a-good-soft); border: var(--a-bw) solid var(--a-good); }
.a-look-sample { margin: 4px 0 0; padding: 10px 12px; border-radius: var(--a-radius-sm); background: var(--a-surface-2); }
.a-look-source { display: flex; align-items: center; gap: 6px; }
.a-look-source svg { width: 16px; height: 16px; }
.a-look-brand { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.a-look-brand input[type=color] { width: 72px; height: 42px; padding: 3px; border-radius: var(--a-radius-sm); border: var(--a-bw) solid var(--a-control); background: var(--a-surface); cursor: pointer; }
.a-look-hex { width: 130px; height: 42px; padding: 0 12px; border-radius: var(--a-radius-sm); border: var(--a-bw) solid var(--a-control);
    background: var(--a-surface); font-family: ui-monospace, Consolas, monospace; text-transform: lowercase; }
.a-look-hex[aria-invalid="true"] { border-color: var(--a-bad); box-shadow: 0 0 0 1px var(--a-bad); }
.a-look-swatches { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.a-look-swatch { width: 36px; height: 36px; border-radius: 50%; cursor: pointer; background: var(--sw); border: 2px solid var(--a-surface); box-shadow: 0 0 0 var(--a-bw) var(--a-control); }
.a-look-result { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 960px) { .a-look-result { grid-template-columns: 1fr 1fr; } }
.a-look-result-row { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: var(--a-radius-md); border: var(--a-bw) solid var(--a-border); }
.a-look-page { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: var(--a-radius-sm); background: var(--a-surface); color: var(--a-text); border: var(--a-bw) solid var(--a-border); }
.a-look-sample-btn { padding: 8px 14px; border-radius: var(--a-radius-btn); background: var(--a-accent); color: var(--a-accent-ink); font-weight: 700; }
.a-look-sample-link { color: var(--a-accent); font-weight: 600; text-decoration: underline; }
.a-look-numbers dd { font-variant-numeric: tabular-nums; }
.a-look-note { display: flex; align-items: center; gap: 6px; margin: 0; font-size: .8125rem; color: var(--a-muted); }
.a-look-note svg { width: 16px; height: 16px; flex: none; color: var(--a-accent); }
/* The style cards' small data tiles (revenue, tips, profit): their ink, filled in Vivid. */
.a-look-kinds { display: flex; gap: 4px; }
.a-look-kind { flex: 1; height: 8px; border-radius: var(--a-radius-pill); background: var(--k); }
.a-look-mini[data-style="vivid"] .a-look-kind { height: 10px; background-image: linear-gradient(135deg, var(--k-fill), var(--k-fill-2)); }
/* Settings → Appearance: a colour per kind of data, and the tiles drawn as the app will draw them. */
.a-look-kinds-grid { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); margin-bottom: 10px; }
.a-look-kind-row { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: var(--a-radius-sm);
    border: var(--a-bw) solid var(--a-border); background: var(--a-surface); }
.a-look-kind-name { flex: 1; display: flex; align-items: center; gap: 8px; font-weight: 600; min-width: 0; cursor: pointer; }
.a-look-kind-dot { width: 14px; height: 14px; flex: none; border-radius: 50%; background: var(--dot); box-shadow: 0 0 0 var(--a-bw) var(--a-control); }
.a-look-kind-row input[type=color] { width: 44px; height: 34px; padding: 2px; flex: none; border-radius: var(--a-radius-sm); border: var(--a-bw) solid var(--a-control); background: var(--a-surface); cursor: pointer; }
.a-look-kind-hex { width: 70px; font-size: .8125rem; color: var(--a-muted); }
.a-look-data-preview { display: grid; gap: 12px; grid-template-columns: 1fr; margin-top: 12px; }
@media (min-width: 960px) { .a-look-data-preview { grid-template-columns: 1fr 1fr; } }
.a-look-data-panel { padding: 12px; border-radius: var(--a-radius-md); background: var(--a-bg); color: var(--a-text); border: var(--a-bw) solid var(--a-border); }
.a-look-data-panel .a-tiles { margin-bottom: 0; }
.a-look-kind-row [hidden], .a-look-data-actions [hidden] { display: none; }
.a-look-own { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0; padding: 10px 12px; border-radius: var(--a-radius-sm);
    background: var(--a-info-soft); color: var(--a-text); }
.a-look-own > svg { width: 18px; height: 18px; flex: none; color: var(--a-info); }
.a-look-own > span { flex: 1; min-width: 200px; }
.a-look-data-mode { display: block; margin-bottom: 8px; font-size: .875rem; }
.a-look-data-panel .a-tile { border-color: var(--a-border); }   /* as every tile: an edge, never blended into the panel */

/* ── Settings → Website (sections/settings/site.js): the preview and the sections ── */
.a-site-frame { width: 100%; height: 560px; border: var(--a-bw) solid var(--a-border); border-radius: var(--a-radius-md); background: var(--a-surface); }
@media (max-width: 719px) { .a-site-frame { height: 440px; } }
.a-site-sections { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.a-site-section { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: var(--a-radius-sm);
    border: var(--a-bw) solid var(--a-border); background: var(--a-surface); }
.a-site-section.is-hidden { background: var(--a-surface-2); border-style: dashed; }
.a-site-show { display: flex; align-items: center; gap: 10px; font-weight: 600; cursor: pointer; }
.a-site-show input { width: 20px; height: 20px; accent-color: var(--a-accent); }
.a-site-section .a-icon-btn:disabled { opacity: .35; cursor: default; }

/* ── Invoices (docs/INVOICE_DESIGN_PLAN.md): a PDF drawn by pdf.js, the complete-invoice window, the designs ── */
.a-visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.a-pdf { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.a-pdf-page { display: block; width: 100%; height: auto; max-width: 820px; border: var(--a-bw) solid var(--a-border); border-radius: var(--a-radius-sm);
    box-shadow: var(--a-shadow); }
.a-pdf.is-ticket .a-pdf-page { max-width: 340px; }
.a-inv-pages { min-height: 200px; }
.a-inv-pages.is-busy .a-pdf-page { outline: 2px dashed var(--a-accent); outline-offset: 3px; }
.a-inv-ticket { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 600; }
.a-inv-take { display: flex; align-items: center; gap: 14px; padding: 12px; border: var(--a-bw) solid var(--a-border); border-radius: var(--a-radius-md); background: var(--a-surface-2); }
.a-inv-take p { margin: 4px 0 0; }
.a-inv-qr:empty { display: none; }
.a-inv-design { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.a-inv-design > .a-inv-preview { position: sticky; top: 12px; }
.a-inv-preview .a-pdf { max-height: 78vh; overflow: auto; padding: 4px; }
.a-inv-company { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.a-inv-company li { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: var(--a-radius-sm); background: var(--a-surface-2); }
.a-inv-company li.is-ok { color: var(--a-good); }
.a-inv-company li.is-missing { color: var(--a-bad); background: var(--a-bad-soft); font-weight: 600; }
.a-inv-company li.is-optional { color: var(--a-muted); }
.a-inv-company a { margin-inline-start: auto; }
.a-inv-templates { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.a-inv-template { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 8px; border: var(--a-bw) solid var(--a-control);
    border-radius: var(--a-radius-md); background: var(--a-surface); color: var(--a-text); font: inherit; font-weight: 600; cursor: pointer; }
.a-inv-template[aria-checked=true] { border-color: var(--a-accent); background: var(--a-accent-soft); color: var(--a-accent); box-shadow: 0 0 0 var(--a-focus-w) var(--a-accent-soft); }
.a-inv-template svg { width: 26px; height: 26px; }
.a-inv-template small { color: var(--a-muted); font-weight: 400; text-align: center; }
.a-inv-colour { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.a-inv-colour input[type=color] { width: 52px; height: 40px; padding: 2px; border: var(--a-bw) solid var(--a-control); border-radius: var(--a-radius-sm); background: var(--a-surface); }
@media (max-width: 999px) {
    .a-inv-design { grid-template-columns: 1fr; }
    .a-inv-design > .a-inv-preview { position: static; }
}
@media (max-width: 519px) { .a-inv-templates { grid-template-columns: 1fr; } }
/* printing a PDF drawn in the app (ui/pdf-view.js printPages): only its pages, one per sheet */
.a-print-sheet { display: none; }
@media print {
    html.is-printing-pdf body > *:not(.a-print-sheet) { display: none !important; }
    html.is-printing-pdf .a-print-sheet { display: block; }
    .a-print-sheet img { display: block; width: 100%; height: auto; page-break-after: always; break-after: page; }
    .a-print-sheet img:last-child { page-break-after: auto; break-after: auto; }
}

/* The kiosk's «Google» tab (frontend/staff/kiosk/google.js): a large QR to the shop's Google reviews */
.a-kgoogle { display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: 520px; margin: 0 auto; padding: 24px 18px; text-align: center; }
.a-kgoogle h2 { margin: 0; font-size: 1.5rem; }
.a-kgoogle-stars { display: flex; gap: 6px; color: var(--a-warn); }
.a-kgoogle-stars svg { width: 30px; height: 30px; fill: currentColor; }
.a-kgoogle-qr { margin: 8px 0; }

/* The tax desk's calculator (sections/finance/gestor.js calcView): the figures, then the results, one above the other
   (ADMIN_APP_PLAN §12). Its own layout, never the automatic cards: on a computer a table whose number columns —
   header, values, input boxes — all keep to the line's end; on a phone each item a compact block (its name, then
   «real» beside its box / real · yours · difference in three small columns). */
.a-calc-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
.a-calc-wrap { background: var(--a-surface); border: var(--a-bw) solid var(--a-border); border-radius: var(--a-radius); overflow: hidden; }
.a-calc-table { table-layout: fixed; }
.a-calc-table.is-inputs thead th:first-child { width: 50%; }
.a-calc-table.is-results thead th:first-child { width: 40%; }
.a-calc-table th.is-num, .a-calc-table td.is-num { text-align: end; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* a value that is words (the Sociedades regime), not a number: it wraps in its own cell, never under the box beside it */
.a-calc-table td.is-num.is-words { white-space: normal; overflow-wrap: anywhere; }
.a-calc-table tr.a-calc-head th { padding-top: 14px; background: var(--a-surface-2); color: var(--a-text); font-weight: 700; text-align: start; }
.a-calc-table tr.is-strong td { font-weight: 700; }
.a-calc-table td.is-up, .a-calc-table td.is-down { color: var(--a-accent); font-weight: 700; }
.a-calc-table td.is-same { color: var(--a-muted); }
.a-calc-table label { font-weight: 600; }
.a-calc-input input, .a-calc-input select { display: block; width: 100%; max-width: 12rem; margin-inline-start: auto; text-align: end;
    font-variant-numeric: tabular-nums; }
.a-calc-input input[aria-invalid=true] { border-color: var(--a-bad); box-shadow: 0 0 0 var(--a-focus-w) var(--a-bad-soft); }
@media (max-width: 719px) {
    .a-calc-table, .a-calc-table tbody { display: block; }
    .a-calc-table thead { display: none; }
    .a-calc-table tr { display: grid; gap: 4px 12px; padding: 10px 12px; border-top: var(--a-bw) solid var(--a-border); }
    .a-calc-table tr:first-child { border-top: 0; }
    .a-calc-table tr td { border: 0; padding: 0; }
    .a-calc-table tr.a-calc-head { display: block; padding: 0; }
    .a-calc-table tr.a-calc-head th { display: block; padding: 10px 12px; }
    .a-calc-table td.a-calc-name { grid-column: 1 / -1; }
    .a-calc-table td[data-label]::before { content: attr(data-label); display: block; color: var(--a-muted); font-size: 0.75rem; font-weight: 400; }
    .a-calc-table.is-inputs tr:not(.a-calc-head) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; }
    .a-calc-table.is-inputs td.is-num[data-label] { text-align: start; }
    .a-calc-table.is-results tr:not(.a-calc-head) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .a-calc-table.is-results td.is-num { white-space: normal; overflow-wrap: anywhere; }
    .a-calc-input input, .a-calc-input select { max-width: none; }
}

/* the platform's register in words (owner 11/10): each value on its own line, the values before behind «Antes» */
.a-aud-vals { display: grid; gap: 2px; font-size: 0.875rem; }
.a-aud-before { margin-top: 6px; }
.a-aud-before > summary { cursor: pointer; color: var(--a-muted); font-size: 0.8125rem; }

/* ONE product window (13/10, admin/ui/product-window.js): the online shop's product page and the queue's ticket machine
   open the same window, so its styles live here (moved from site/site.css, unchanged). */
.a-pbadges { position: absolute; top: 8px; inset-inline-start: 8px; display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.a-pv .a-pbadges { position: static; flex-direction: row; flex-wrap: wrap; }
.a-pbadges:empty { display: none; }
.a-pbadge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: var(--a-radius-pill); font-size: 0.75rem; font-weight: 700;
    background: var(--a-surface); color: var(--a-text); border: var(--a-bw) solid var(--a-border); box-shadow: var(--a-shadow); }
.a-pbadge svg { width: 13px; height: 13px; }
.a-pbadge.is-featured { background: var(--a-accent); color: var(--a-accent-ink); border-color: var(--a-accent); }
.a-pbadge.is-new { background: var(--a-good-soft, var(--a-surface)); color: var(--a-good); border-color: var(--a-good); }
.a-pbadge.is-low { background: var(--a-warn-soft, var(--a-surface)); color: var(--a-warn); border-color: var(--a-warn); }
.a-pbadge.is-out { background: var(--a-bad-soft, var(--a-surface)); color: var(--a-bad); border-color: var(--a-bad); }
/* The product's page (owner 08/10, product.js): large on a computer, the whole screen on a phone */
.a-modal.is-product { width: min(1120px, 96vw); max-width: none; }
/* the name is the page's own heading: the window's title stays for screen readers only (never shown twice) */
.a-modal.is-product .a-modal-head h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.a-modal.is-product .a-modal-head { justify-content: flex-end; }
.a-pv { display: flex; flex-direction: column; gap: 24px; }
.a-pv-main { display: grid; gap: 28px; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: start; }
.a-pv-media { position: sticky; top: 0; }
.a-pv-info { gap: 14px; }
.a-pv-name { margin: 0; font-size: 1.5rem; line-height: 1.25; }
.a-pv-pricebox { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.a-pv-price { font-size: 1.75rem; color: var(--a-accent); font-variant-numeric: tabular-nums; }
.a-pv-desc { color: var(--a-text); line-height: 1.6; white-space: pre-line; }
.a-pv-choices { padding-block: 4px; }
.a-pv-qty { display: inline-flex; align-items: center; gap: 4px; padding: 3px; border-radius: var(--a-radius-pill); border: var(--a-bw) solid var(--a-control); }
.a-pv-qty-n { min-width: 26px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.a-pv .a-opts-foot { justify-content: flex-start; position: sticky; bottom: 0; background: var(--a-surface); padding-block: 12px 4px; z-index: 1; }
.a-pv-total-label { margin-inline-start: auto; color: var(--a-muted); }
.a-pv-add { min-height: 48px; padding-inline: 22px; font-size: 1rem; }
.a-pv-related h3 { margin: 0 0 10px; font-size: 1.125rem; }
.a-pv-rel-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(150px, 170px); gap: 12px; overflow-x: auto; padding-block-end: 6px; scrollbar-width: thin; }
.a-pv-rel { display: flex; flex-direction: column; gap: 6px; padding: 8px; border-radius: var(--a-radius); border: var(--a-bw) solid var(--a-border);
    background: var(--a-surface); color: var(--a-text); font: inherit; text-align: start; cursor: pointer; }
.a-pv-rel:hover { border-color: var(--a-accent); }
.a-pv-rel > img, .a-pv-rel-icon { width: 100%; aspect-ratio: 1; border-radius: var(--a-radius-sm); object-fit: cover; background: var(--a-surface-2);
    display: grid; place-items: center; color: var(--a-muted); }
.a-pv-rel-icon { background: linear-gradient(160deg, var(--a-accent-soft), var(--a-surface-2)); color: var(--a-accent); }
.a-pv-rel-icon svg { width: 36px; height: 36px; }
/* An item's details (owner 11/10): its brand, «the essentials» beside the price, then its description, characteristics
   and questions — tabs on a computer, the parts one under the other on a phone. */
.a-product-brand, .a-pv-brand { margin: 0; color: var(--a-accent); font-size: 0.75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.a-pv-brand { font-size: 0.8125rem; }
.a-pv-keys { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; }
.a-pv-key { padding: 10px 12px; border-radius: var(--a-radius-sm, var(--a-radius)); background: var(--a-surface-2); min-width: 0; }
.a-pv-key dt { color: var(--a-muted); font-size: 0.75rem; font-weight: 600; }
.a-pv-key dd { margin: 2px 0 0; font-weight: 700; overflow-wrap: anywhere; }
.a-pv-more { border-top: var(--a-bw) solid var(--a-border); padding-top: 8px; }
.a-pv-tabs { display: flex; gap: 4px; border-bottom: var(--a-bw) solid var(--a-border); overflow-x: auto; scrollbar-width: none; }
.a-pv-tab { display: inline-flex; align-items: center; gap: 8px; padding: 12px 16px; border: 0; border-bottom: 3px solid transparent; margin-bottom: calc(-1 * var(--a-bw));
    background: none; color: var(--a-muted); font: inherit; font-weight: 700; white-space: nowrap; cursor: pointer; }
.a-pv-tab svg { width: 18px; height: 18px; }
.a-pv-tab:hover { color: var(--a-text); }
.a-pv-tab.is-active { color: var(--a-accent); border-bottom-color: var(--a-accent); }
.a-pv-tab:focus-visible { outline: var(--a-focus-w, 2px) solid var(--a-accent); outline-offset: -2px; }
.a-pv-part { display: none; padding-block: 18px 4px; }
.a-pv-part.is-shown { display: block; }
.a-pv-part-title { display: none; }
.a-pv-sections { display: grid; gap: 16px; max-width: 72ch; }
.a-pv-section h4 { margin: 0 0 6px; font-size: 1rem; }
.a-pv-section p { margin: 0; line-height: 1.7; white-space: pre-line; }
.a-pv-specs { margin: 0; border-radius: var(--a-radius); border: var(--a-bw) solid var(--a-border); overflow: hidden; max-width: 720px; }
.a-pv-spec { display: grid; grid-template-columns: minmax(120px, 38%) minmax(0, 1fr); gap: 16px; padding: 12px 16px; }
.a-pv-spec:nth-child(odd) { background: var(--a-surface-2); }
.a-pv-spec dt { color: var(--a-muted); font-weight: 600; }
.a-pv-spec dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.a-pv-faq { display: grid; gap: 10px; max-width: 760px; }
.a-faq { border-radius: var(--a-radius); border: var(--a-bw) solid var(--a-border); background: var(--a-surface); }
.a-faq[open] { border-color: var(--a-accent); box-shadow: var(--a-shadow); }
.a-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; font-weight: 700; cursor: pointer; list-style: none; }
.a-faq summary::-webkit-details-marker { display: none; }
.a-faq summary:focus-visible { outline: var(--a-focus-w, 2px) solid var(--a-accent); outline-offset: 2px; border-radius: var(--a-radius); }
.a-faq-chev { flex: none; width: 20px; height: 20px; color: var(--a-accent); transition: transform .2s ease; }
.a-faq[open] .a-faq-chev { transform: rotate(180deg); }
.a-faq-answer { padding: 0 16px 16px; line-height: 1.7; white-space: pre-line; color: var(--a-text); }
@media (prefers-reduced-motion: reduce) { .a-faq-chev { transition: none; } }
@media (max-width: 759px) {
    .a-pv-tabs { display: none; }
    .a-pv-part, .a-pv-part.is-shown { display: block; padding-block: 16px 8px; border-bottom: var(--a-bw) solid var(--a-border); }
    .a-pv-part:last-child { border-bottom: 0; }
    .a-pv-part-title { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 1.0625rem; }
    .a-pv-part-title svg { width: 20px; height: 20px; color: var(--a-accent); }
    .a-pv-spec { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; padding: 10px 12px; }
}
.a-pv-rel-name { font-weight: 600; font-size: 0.875rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* its gallery: the picture large, thumbnails under it, arrows, a tap opens it full screen */
.a-gal { display: flex; flex-direction: column; gap: 10px; }
.a-gal-stage { position: relative; aspect-ratio: 1; border-radius: var(--a-radius); overflow: hidden; background: var(--a-surface-2); display: grid; place-items: center;
    cursor: zoom-in; touch-action: pan-y; user-select: none; }
.a-gal-stage > img { width: 100%; height: 100%; object-fit: contain; animation: a-gal-in .25s ease; }
.a-gal-stage.is-empty { cursor: default; color: var(--a-accent); background: linear-gradient(160deg, var(--a-accent-soft), var(--a-surface-2)); }
.a-gal-stage.is-empty svg { width: 64px; height: 64px; }
@keyframes a-gal-in { from { opacity: .3; } to { opacity: 1; } }
.a-gal-arrow, .a-gal-full { position: absolute; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; border: var(--a-bw) solid var(--a-border);
    background: var(--a-surface); color: var(--a-text); box-shadow: var(--a-shadow); cursor: pointer; }
.a-gal-arrow { top: 50%; transform: translateY(-50%); }
.a-gal-arrow.is-prev { inset-inline-start: 10px; }
.a-gal-arrow.is-next { inset-inline-end: 10px; }
.a-gal-full { top: 10px; inset-inline-end: 10px; width: 38px; height: 38px; }
.a-gal-arrow svg, .a-gal-full svg { width: 20px; height: 20px; }
.a-gal-count { position: absolute; bottom: 10px; inset-inline-start: 10px; padding: 3px 9px; border-radius: var(--a-radius-pill); background: var(--a-surface);
    color: var(--a-text); font-size: 0.75rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.a-gal-count:empty { display: none; }
.a-gal-thumbs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: thin; padding-block-end: 2px; }
.a-gal-thumb { flex: none; width: 64px; height: 64px; padding: 0; border-radius: var(--a-radius-sm); border: 2px solid transparent; overflow: hidden;
    background: var(--a-surface-2); cursor: pointer; }
.a-gal-thumb img { width: 100%; height: 100%; object-fit: cover; }
.a-gal-thumb.is-on { border-color: var(--a-accent); }
/* full screen: the picture alone on a dark ground, zoom and swipe */
.a-lightbox { position: fixed; inset: 0; z-index: 2000; background: var(--a-lb-bg, rgb(8 10 14 / 0.94)); /* raw-ok: the dark ground behind a photo, any style */
    display: grid; place-items: center; color: var(--a-lb-ink, #fff); /* raw-ok: on the dark ground */ }
.a-lb-stage { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; touch-action: none; cursor: zoom-in; }
.a-lightbox.is-zoomed .a-lb-stage { cursor: grab; }
.a-lb-img { max-width: 94vw; max-height: 86vh; object-fit: contain; transform-origin: center; transition: transform .08s linear; user-select: none; }
.a-lb-btn { position: absolute; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 0; cursor: pointer;
    background: rgb(255 255 255 / 0.16); color: inherit; /* raw-ok: a light veil on the dark ground */ }
.a-lb-btn:hover { background: rgb(255 255 255 / 0.28); /* raw-ok: on the dark ground */ }
.a-lb-btn svg { width: 24px; height: 24px; }
.a-lb-btn.is-close { top: 14px; inset-inline-end: 14px; }
.a-lb-btn.is-prev { inset-inline-start: 14px; top: 50%; transform: translateY(-50%); }
.a-lb-btn.is-next { inset-inline-end: 14px; top: 50%; transform: translateY(-50%); }
.a-lb-count { position: absolute; top: 24px; inset-inline-start: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.a-lb-hint { position: absolute; bottom: 18px; inset-inline: 0; text-align: center; font-size: 0.8125rem; opacity: .8; pointer-events: none; }
@media (max-width: 759px) {
    .a-pv-main { grid-template-columns: minmax(0, 1fr); gap: 18px; }
    .a-pv-media { position: static; }
    .a-pv-name { font-size: 1.25rem; }
    .a-overlay:has(.a-modal.is-product) { align-items: stretch; }
    .a-modal.is-product { width: 100vw; max-height: none; height: 100vh; height: 100dvh; border-radius: 0; animation: none; }
    .a-gal-arrow { display: none; }
    .a-gal-stage { aspect-ratio: auto; height: min(58vh, 100vw); }
    .a-pv .a-opts-foot { flex-wrap: wrap; margin-inline: -16px; padding-inline: 16px; box-shadow: 0 -8px 16px -12px var(--a-shadow-color, rgb(0 0 0 / 0.35)); /* raw-ok: a soft lift over the content */ }
    .a-pv .a-opts-foot .a-pv-add { flex: 1 1 100%; justify-content: center; }
    .a-pv-info { padding-block-end: 8px; }
    .a-lb-btn.is-prev, .a-lb-btn.is-next { display: none; }
}
.a-opts { display: flex; flex-direction: column; gap: 14px; }
.a-opts-foot { display: flex; align-items: center; justify-content: flex-end; gap: 12px; flex-wrap: wrap; padding-top: 6px; border-top: var(--a-bw) solid var(--a-border); }
.a-opts-foot strong { font-size: 1.25rem; color: var(--a-accent); font-variant-numeric: tabular-nums; }