/* Invoice. Flat surfaces, hairline rules, one accent. Numbers use tabular figures. */

:root {
    --bg: #f6f5f0;
    --surface: #ffffff;
    --sunken: #eeece4;
    --ink: #171715;
    --ink-2: #3d3c37;
    --muted: #6c6a62;
    --faint: #9c9a90;
    --rule: #e5e2d9;
    --rule-2: #d3cfc2;
    --bar: #cfcabb;
    --accent: #d9480f;
    --accent-soft: #fbe9df;
    --ok: #2b7a4b;
    --ok-soft: #e1f0e7;
    --warn: #915f00;
    --warn-soft: #f7ebcc;
    --bad: #b42318;
    --bad-soft: #fbe3e0;
    --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%236c6a62' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
    --radius: 12px;
    --radius-sm: 8px;
    --font: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    color-scheme: light;
}

/* Dark theme: follows the system until the toggle is used, then follows the toggle. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg: #111110;
        --surface: #191917;
        --sunken: #232321;
        --ink: #f2f0e9;
        --ink-2: #d2cfc5;
        --muted: #9a978c;
        --faint: #6b695f;
        --rule: #2a2926;
        --rule-2: #3b3a35;
        --bar: #3f3e38;
        --accent: #ff7a3d;
        --accent-soft: #3a2316;
        --ok: #5cc287;
        --ok-soft: #15281d;
        --warn: #e2b455;
        --warn-soft: #2d2412;
        --bad: #ff7d70;
        --bad-soft: #321a17;
        --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%239a978c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
        color-scheme: dark;
    }
}
:root[data-theme="dark"] {
    --bg: #111110;
    --surface: #191917;
    --sunken: #232321;
    --ink: #f2f0e9;
    --ink-2: #d2cfc5;
    --muted: #9a978c;
    --faint: #6b695f;
    --rule: #2a2926;
    --rule-2: #3b3a35;
    --bar: #3f3e38;
    --accent: #ff7a3d;
    --accent-soft: #3a2316;
    --ok: #5cc287;
    --ok-soft: #15281d;
    --warn: #e2b455;
    --warn-soft: #2d2412;
    --bad: #ff7d70;
    --bad-soft: #321a17;
    --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%239a978c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
    color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font: 400 14px/1.5 var(--font);
    -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.icon { width: 18px; height: 18px; flex: none; }

.num, .mono, .stat-value, .sum dd, td.r, .tile-price, .sbar-value { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--mono); font-size: 13px; letter-spacing: -0.01em; }
.num { white-space: nowrap; }
.muted { color: var(--muted); }
.strong { font-weight: 500; }
.r { text-align: right; }

/* --- Shell ----------------------------------------------------------------------- */

.shell { display: grid; grid-template-columns: 236px minmax(0, 1fr); min-height: 100vh; }
.shell--locked { display: block; } /* a shop whose plan has ended has no sidebar to make room for */

.side {
    position: sticky; top: 0; height: 100vh;
    display: flex; flex-direction: column; gap: 18px;
    padding: 20px 14px 14px;
    border-right: 1px solid var(--rule);
}
.brand { display: flex; align-items: center; gap: 10px; padding: 0 6px; }
.mark { width: 30px; height: 30px; border-radius: 8px; background: var(--ink); color: var(--bg); display: grid; place-items: center; }
.mark svg { width: 20px; height: 20px; }
.brand-text { display: grid; line-height: 1.15; }
.brand-text b { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.brand-text small { font-size: 11.5px; color: var(--muted); }

.nav { display: grid; gap: 2px; }
.nav a, .nav-link {
    display: flex; align-items: center; gap: 10px;
    height: 36px; padding: 0 10px; border-radius: var(--radius-sm);
    color: var(--muted); font-weight: 500;
    transition: background .12s, color .12s;
}
button.nav-link { width: 100%; border: 0; background: none; font: inherit; font-weight: 500; text-align: left; cursor: pointer; }
.nav a:hover, .nav-link:hover { color: var(--ink); background: color-mix(in srgb, var(--sunken) 60%, transparent); }
.nav a.is-active, .nav-link.is-active { color: var(--ink); background: var(--sunken); }
.nav a.is-active .icon { color: var(--accent); }
.count { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--ink); color: var(--bg); font: 500 11.5px/20px var(--mono); text-align: center; }

.side-foot { margin-top: auto; display: grid; gap: 10px; }
.me { display: flex; align-items: center; gap: 10px; padding: 10px; border-top: 1px solid var(--rule); margin: 0 -14px; padding: 12px 14px 0; }
.avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--sunken); display: grid; place-items: center; font-weight: 600; font-size: 13px; flex: none; }
.me-text { display: grid; min-width: 0; line-height: 1.25; flex: 1; }
.me-text b { font-weight: 500; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.me-text small { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.me form { margin: 0; }

.main { min-width: 0; }
.content { padding: 32px 40px 72px; max-width: 1680px; }
.topbar, .tabbar { display: none; }
.topbar-actions { display: flex; align-items: center; gap: 2px; }

/* --- Page header ------------------------------------------------------------------ */

.page-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.page-head h1 { font-size: 24px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sub { color: var(--muted); margin-top: 4px; max-width: 60ch; }
.mono-title { font-family: var(--mono); font-size: 22px; letter-spacing: -0.02em; }
.form-narrow + .form-narrow { margin-top: 16px; }
.table td.when .when-time::before { content: ", "; }
.head-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.head-actions form { margin: 0; }
.back { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); margin: -8px 0 14px -4px; padding: 4px 6px; border-radius: 6px; font-weight: 500; }
.back:hover { color: var(--ink); background: var(--sunken); }
.link { background: none; border: 0; padding: 0; color: var(--ink); font-weight: 500; text-decoration: underline; text-decoration-color: var(--rule-2); text-underline-offset: 3px; }
.link:hover { text-decoration-color: var(--ink); }
.link-danger { color: var(--bad); }

/* --- Buttons ---------------------------------------------------------------------- */

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    height: 36px; padding: 0 14px; border-radius: var(--radius-sm);
    border: 1px solid var(--rule-2); background: var(--surface); color: var(--ink);
    font-weight: 500; white-space: nowrap;
    transition: border-color .12s, background .12s, transform .06s;
}
.btn:hover { border-color: var(--ink); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; border-color: var(--rule-2); transform: none; }
.btn-primary { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.btn-primary:hover { background: var(--ink-2); border-color: var(--ink-2); }
.btn-primary:disabled:hover { background: var(--ink); border-color: var(--ink); }
.btn-danger { color: var(--bad); }
.btn-danger:hover { border-color: var(--bad); background: var(--bad-soft); }
.btn-sm { height: 30px; padding: 0 11px; font-size: 13px; }
.btn-block { width: 100%; height: 42px; }
.side-new { margin: 0 4px; }
.icon-btn { width: 32px; height: 32px; display: inline-grid; place-items: center; border-radius: 8px; border: 0; background: none; color: var(--muted); }
.icon-btn:hover { background: var(--sunken); color: var(--ink); }
.theme-sun, .theme-moon { display: grid; place-items: center; }
.theme-sun { display: none; }
:root[data-theme="dark"] .theme-sun { display: grid; }
:root[data-theme="dark"] .theme-moon { display: none; }
.icon-btn-danger:hover { background: var(--bad-soft); color: var(--bad); }

/* --- Panels, tables ---------------------------------------------------------------- */

.panel { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); }
.panel-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--rule); }
.panel-head h2 { font-size: 14px; font-weight: 600; }
.panel-head .muted { font-size: 12.5px; }
.empty-note { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 28px 18px; color: var(--muted); text-align: center; }
.table-panel { overflow-x: auto; }

.table { width: 100%; border-collapse: collapse; }
.table th { text-align: left; font-size: 12px; font-weight: 500; color: var(--muted); padding: 11px 18px; border-bottom: 1px solid var(--rule); white-space: nowrap; }
.table th.r { text-align: right; }
.table td { padding: 13px 18px; border-bottom: 1px solid var(--rule); vertical-align: middle; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: color-mix(in srgb, var(--sunken) 45%, transparent); }
.table .narrow { width: 1%; white-space: nowrap; }
.table td.actions { text-align: right; }
.table td.actions form { display: inline; margin: 0; }
.table tr.is-off td:not(.narrow):not(:nth-last-child(2)) { color: var(--faint); }
.table tr.is-void .num, .table tr.is-void .mono { text-decoration: line-through; color: var(--faint); }
.table tr[data-href] { cursor: pointer; }
.item-cell { display: inline-flex; align-items: center; gap: 12px; }
.thumb { width: 40px; height: 40px; flex: none; display: grid; place-items: center; overflow: hidden; border-radius: 8px; background: var(--sunken); color: var(--muted); font-weight: 600; }
.thumb img { width: 100%; height: 100%; object-fit: contain; }  /* the whole picture, never cropped */
.item-text { display: grid; min-width: 0; line-height: 1.35; }
.item-text small { color: var(--muted); font-size: 12px; max-width: 360px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* The veg / non-veg mark: a small square outline with a filled dot, the way it's shown everywhere in
   India (FSSAI's own mark) — instantly readable without a word, in either colour scheme. */
.food-dot { flex: none; width: 13px; height: 13px; border-radius: 3px; display: inline-grid; place-items: center; vertical-align: middle; }
/* Where the dot sits directly before plain text (no flex gap already spacing things out). */
.food-dot--badge { margin-right: 5px; }
.food-dot::after { content: ""; width: 6px; height: 6px; border-radius: 50%; }
.food-dot--veg { border: 1.5px solid var(--ok); }
.food-dot--veg::after { background: var(--ok); }
.food-dot--non-veg { border: 1.5px solid var(--bad); }
.food-dot--non-veg::after { background: var(--bad); border-radius: 0; clip-path: polygon(50% 0%, 0% 100%, 100% 100%); width: 7px; height: 6px; }

/* A row of radio "pills" — same look as .chip, but real radio inputs (the veg / non-veg picker, and
   the Dine-in / Takeaway picker). The native radio is an invisible, full-cover sibling of
   .pill-radio-body (same recipe as .toggle's hidden checkbox next to its <i>): a plain sibling
   selector reads each one's own checked state, on by itself, with no JS and no reliance on :has()
   (which works fine here too, but needs a newer browser than this plain, decades-old selector ever
   has to worry about). */
.pill-radios { display: flex; gap: 8px; flex-wrap: wrap; }
.pill-radios label { position: relative; cursor: pointer; }
.pill-radios input[type="radio"] { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.pill-radio-body {
    display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px;
    border-radius: 999px; border: 1px solid var(--rule-2); background: transparent; color: var(--ink-2);
    font-size: 14px; font-weight: 500; transition: border-color .12s, background .12s, color .12s;
}
.pill-radios label:hover .pill-radio-body { border-color: var(--ink); }
.pill-radios input:focus-visible ~ .pill-radio-body { outline: 2px solid var(--accent); outline-offset: 2px; }
.pill-radios input:checked ~ .pill-radio-body { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.pill-radios input:checked ~ .pill-radio-body .food-dot--veg { border-color: var(--bg); }
.pill-radios input:checked ~ .pill-radio-body .food-dot--veg::after { background: var(--bg); }
.pill-radios input:checked ~ .pill-radio-body .food-dot--non-veg { border-color: var(--bg); }
.pill-radios input:checked ~ .pill-radio-body .food-dot--non-veg::after { background: var(--bg); }
.pill-radios input:checked ~ .pill-radio-body .icon { color: var(--bg); }

/* Items page: list / grid switch and the grid cards */
.toolbar--split { justify-content: space-between; margin-bottom: 12px; }
.chips--row { margin-bottom: 16px; }
.view-toggle { display: inline-flex; border: 1px solid var(--rule-2); border-radius: var(--radius-sm); overflow: hidden; background: var(--surface); }
.view-toggle a { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; color: var(--muted); font-size: 13px; font-weight: 500; transition: background .12s, color .12s; }
.view-toggle a + a { border-left: 1px solid var(--rule-2); }
.view-toggle a:hover { color: var(--ink); background: var(--sunken); }
.view-toggle a.is-active { background: var(--ink); color: var(--bg); }
.view-toggle .icon { width: 16px; height: 16px; }
/* Every card is the same size: rows are as tall as the tallest card, and the footer sits at the bottom. */
.item-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(236px, 1fr)); grid-auto-rows: 1fr; gap: 16px; align-items: stretch; }
.item-card { display: flex; flex-direction: column; overflow: hidden; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); transition: border-color .12s, box-shadow .12s; }
.item-card:hover { border-color: var(--rule-2); box-shadow: 0 6px 18px -12px rgba(0, 0, 0, .25); }
.item-card.is-off .card-media, .item-card.is-off .card-body { opacity: .5; }
.card-body { flex: 1; display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 12px; }
.card-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.card-title { flex: 1 1 auto; min-width: 0; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-title:hover { text-decoration: underline; text-decoration-color: var(--rule-2); text-underline-offset: 3px; }
.card-price { font: 500 14px var(--mono); white-space: nowrap; font-variant-numeric: tabular-nums; }
.card-desc { font-size: 13px; line-height: 1.45; min-height: 2.9em; }  /* two lines, filled or not */
.card-meta { color: var(--faint); font-size: 12px; }
.card-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 8px 8px 16px; border-top: 1px solid var(--rule); }
.card-switch { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--muted); font-size: 12.5px; }
.card-actions { display: flex; align-items: center; }
.card-actions form { margin: 0; }
.cell-sub { display: block; color: var(--muted); font-size: 12px; }
.items-cell { color: var(--ink-2); max-width: 280px; }
.num.is-void { text-decoration: line-through; color: var(--faint); }

.pill {
    display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px 0 8px;
    border-radius: 999px; background: var(--sunken); color: var(--ink-2);
    font-size: 12px; font-weight: 500; vertical-align: middle;
}
.pill { white-space: nowrap; }
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill-open { background: var(--warn-soft); color: var(--warn); }
.pill-paid, .pill-invoiced { background: var(--ok-soft); color: var(--ok); }
.pill-void { background: var(--bad-soft); color: var(--bad); }
.pill-unpaid { background: var(--warn-soft); color: var(--warn); }
.pill-cancelled { background: var(--sunken); color: var(--muted); }
.pill-credit { background: var(--warn-soft); color: var(--warn); }

/* --- Toolbar, chips ---------------------------------------------------------------- */

.toolbar { display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; margin-bottom: 16px; }
.search { position: relative; display: block; margin: 0; flex: 0 1 280px; min-width: 200px; }
.search .icon { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--faint); width: 16px; height: 16px; pointer-events: none; }
.search input[type=search] { padding-left: 34px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.chip {
    display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px;
    border-radius: 999px; border: 1px solid var(--rule-2); background: transparent; color: var(--ink-2);
    font-size: 13px; font-weight: 500; transition: border-color .12s, background .12s;
}
.chip:hover { border-color: var(--ink); }
.chip i { font: 500 11.5px var(--mono); color: var(--muted); font-style: normal; }
.chip.is-active { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.chip.is-active i { color: color-mix(in srgb, var(--bg) 70%, transparent); }
.chip-add { border-style: dashed; color: var(--muted); list-style: none; cursor: pointer; }
.chip-add .icon { width: 14px; height: 14px; }
.chip-add::-webkit-details-marker { display: none; }
.pop { position: relative; }
.pop-body { position: absolute; z-index: 5; top: 38px; left: 0; display: flex; gap: 6px; padding: 8px; background: var(--surface); border: 1px solid var(--rule-2); border-radius: 10px; box-shadow: 0 8px 24px rgba(0, 0, 0, .08); }
/* Wide enough to read from the start, and grows with what is typed (up to the 60-character limit).
   `input[type=text]` is needed to beat the global width: 100% above, which collapses in this shrink-wrapped box. */
.pop-body input[type=text] { width: 220px; min-width: 220px; max-width: min(420px, calc(100vw - 96px)); height: 32px; }
@supports (field-sizing: content) {
    .pop-body input[type=text] { width: auto; field-sizing: content; }
}
/* Drag an item onto a category chip */
[data-move-url][draggable] { cursor: grab; }
.is-dragging { opacity: .45; }
.chip.is-drop-target { border-style: dashed; border-color: var(--ink); }
.chip.is-over { background: var(--accent-soft); border-style: solid; border-color: var(--accent); color: var(--ink); }
body.is-dragging-item .chip:not(.is-drop-target) { opacity: .55; }
/* The preview that follows the pointer while dragging: small and see-through, so the chips stay visible under it. */
.drag-ghost {
    position: fixed; top: -200px; left: -200px; max-width: 200px; padding: 5px 12px;
    border: 1px solid color-mix(in srgb, var(--ink) 35%, transparent); border-radius: 999px;
    background: color-mix(in srgb, var(--surface) 55%, transparent); color: var(--ink);
    font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    opacity: .7; pointer-events: none;
}
.drag-hint { color: var(--faint); }
@media (hover: none) { .drag-hint { display: none; } }  /* touch screens do not drag */
.inline-note { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; color: var(--muted); }
.inline-note form { margin: 0; }

.notice { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 18px; margin-bottom: 20px; border: 1px solid var(--rule-2); border-left: 3px solid var(--accent); border-radius: var(--radius-sm); background: var(--surface); }

.empty { padding: 56px 20px; text-align: center; color: var(--muted); border: 1px dashed var(--rule-2); border-radius: var(--radius); }
.empty h2 { color: var(--ink); font-size: 16px; font-weight: 600; margin-bottom: 4px; }
.empty p { margin-bottom: 16px; }
p.empty { padding: 28px 20px; }

.pager { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 16px; margin-top: 14px; color: var(--muted); font-size: 13px; }
.pager b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.pager-links { display: flex; align-items: center; gap: 6px; }
.pager-numbers { display: flex; align-items: center; gap: 2px; }
.pager-num, .pager-gap { display: inline-grid; place-items: center; min-width: 32px; height: 32px; padding: 0 6px; border-radius: var(--radius-sm); color: var(--ink-2); font-variant-numeric: tabular-nums; text-decoration: none; }
a.pager-num:hover { background: var(--sunken); }
.pager-num.is-current { background: var(--ink); color: var(--bg); font-weight: 600; }
.pager-gap { color: var(--faint); min-width: 20px; }
.pager-size label { display: flex; align-items: center; gap: 8px; margin: 0; }
.pager-size select { width: auto; height: 32px; padding: 0 28px 0 10px; }
@media (max-width: 640px) {
    .pager { justify-content: center; }
    .pager-count { flex: 1 0 100%; text-align: center; }
    .pager-word { display: none; }
    .pager-num, .pager-gap { min-width: 30px; }
}

/* Lists slide into place when the page opens (billing.js puts .rows-enter on <body> for a moment). */
@keyframes row-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.rows-enter .table-panel tbody tr,
.rows-enter .udhar-row,
.rows-enter .bill-card { animation: row-in .42s cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: 340ms; }
.rows-enter .table-panel tbody tr:nth-child(1), .rows-enter .udhar-list > :nth-child(1) { animation-delay: 0ms; }
.rows-enter .table-panel tbody tr:nth-child(2), .rows-enter .udhar-list > :nth-child(2) { animation-delay: 35ms; }
.rows-enter .table-panel tbody tr:nth-child(3), .rows-enter .udhar-list > :nth-child(3) { animation-delay: 70ms; }
.rows-enter .table-panel tbody tr:nth-child(4), .rows-enter .udhar-list > :nth-child(4) { animation-delay: 105ms; }
.rows-enter .table-panel tbody tr:nth-child(5), .rows-enter .udhar-list > :nth-child(5) { animation-delay: 140ms; }
.rows-enter .table-panel tbody tr:nth-child(6), .rows-enter .udhar-list > :nth-child(6) { animation-delay: 175ms; }
.rows-enter .table-panel tbody tr:nth-child(7), .rows-enter .udhar-list > :nth-child(7) { animation-delay: 210ms; }
.rows-enter .table-panel tbody tr:nth-child(8), .rows-enter .udhar-list > :nth-child(8) { animation-delay: 245ms; }
.rows-enter .table-panel tbody tr:nth-child(9), .rows-enter .udhar-list > :nth-child(9) { animation-delay: 280ms; }
.rows-enter .table-panel tbody tr:nth-child(10), .rows-enter .udhar-list > :nth-child(10) { animation-delay: 315ms; }

/* --- Forms ------------------------------------------------------------------------- */

input[type=text], input[type=email], input[type=number], input[type=search], input[type=tel], input[type=date], input[type=password], select, textarea {
    width: 100%; height: 38px; padding: 0 12px;
    border: 1px solid var(--rule-2); border-radius: var(--radius-sm);
    background: var(--surface); color: var(--ink); font: inherit;
    transition: border-color .12s, box-shadow .12s;
}
select:disabled { opacity: .5; cursor: not-allowed; }
/* One drop-down arrow everywhere: the browser's own is drawn differently by every system and sits hard
   against the edge. This is the same chevron in the theme's muted colour, with room around it. */
select:not([multiple]):not([size]) {
    -webkit-appearance: none; appearance: none;
    padding-right: 36px; text-overflow: ellipsis; cursor: pointer;
    background-image: var(--select-arrow); background-repeat: no-repeat;
    background-position: right 12px center; background-size: 16px 16px;
}
/* "New category" on the item form. */
.new-cat-toggle { display: inline-block; margin-top: 10px; font-size: 13px; }
.new-cat { margin-top: 12px; }
.new-cat[hidden] { display: none; }
/* Password field with a show / hide eye button (see _field.html and js/password.js). */
.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 42px; }
.pw-toggle {
    position: absolute; top: 50%; right: 4px; transform: translateY(-50%);
    width: 32px; height: 32px; display: grid; place-items: center;
    border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--muted); cursor: pointer;
}
.pw-toggle:hover { color: var(--ink); background: var(--rule); }
.pw-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.pw-toggle .icon { width: 18px; height: 18px; }
.pw-toggle .pw-off, .pw-toggle[aria-pressed=true] .pw-on { display: none; }
.pw-toggle[aria-pressed=true] .pw-off { display: inline-flex; }
textarea { height: auto; padding: 9px 12px; resize: vertical; line-height: 1.45; }
input::placeholder, textarea::placeholder { color: var(--faint); }
input:focus, select:focus, textarea:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); }
input[type=search]::-webkit-search-cancel-button { display: none; }

.form { display: grid; gap: 16px; max-width: 620px; }
.form-narrow { max-width: 520px; padding: 22px; }
.form-narrow > .panel-head, .form-narrow > form > .panel-head { padding: 0 0 12px; margin-bottom: 14px; }
.form-narrow p.hint, .form-narrow form > p.hint { color: var(--muted); font-size: 12.5px; margin: 6px 0 16px; }
.head-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.stock-cell small { display: block; margin-top: 2px; }
.stock-cell .stock-total { display: block; margin-top: 4px; font-size: 14px; }
.form-section { padding: 22px; }
.form-section h2 { font-size: 14px; font-weight: 600; margin-bottom: 16px; }
.field { margin-bottom: 16px; }
.form-section .field:last-child, .form-narrow .field:last-of-type { margin-bottom: 0; }
.field label, .field > label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 6px; }
.field label em { font-style: normal; font-weight: 400; color: var(--faint); margin-left: 4px; }
.field .hint { display: block; color: var(--muted); font-size: 12.5px; margin-top: 5px; }
.field-foot { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.field-foot .hint { flex: 1; }
.counter { margin-top: 5px; font: 400 12px var(--mono); color: var(--faint); white-space: nowrap; font-variant-numeric: tabular-nums; }
.counter.is-near { color: var(--warn); }
.counter.is-full { color: var(--bad); font-weight: 500; }
.field .error { display: block; color: var(--bad); font-size: 12.5px; margin-top: 5px; }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--bad); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; align-items: start; }
.check { display: flex !important; align-items: center; gap: 10px; font-weight: 500; cursor: pointer; margin: 0 !important; }
.check input { width: 16px; height: 16px; accent-color: var(--ink); }

/* Inventory: one size's stock, as its own small form (a <form> can't wrap a <tr>). */
.size-list { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.size-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; padding: 12px; border: 1px solid var(--rule-2); border-radius: var(--radius-sm); }
.size-row.is-off { background: var(--sunken); }
.size-row .size-name { flex: 1 1 120px; font-weight: 500; padding-bottom: 9px; }
.size-row label.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 0; flex: 1 1 140px; font-size: 13px; font-weight: 500; }
.size-row label.field em { font-style: normal; font-weight: 400; color: var(--faint); }
.size-row .size-actions { display: flex; gap: 6px; flex: 0 0 auto; padding-bottom: 1px; }
/* Settings: the form on the left, a live invoice preview on the right */
/* A grid: the cards on the left (stacked), the preview on the right. On big screens the cards
   sit two across, with Invoices underneath, and the preview takes the third column. */
.settings { display: grid; grid-template-columns: minmax(0, 640px) minmax(300px, 400px); gap: 20px 32px; align-items: start; }
/* The cards live in their own block (one column), so the preview beside it is a single tall cell: it stays in view all
   the way down and nothing can slide in underneath it. */
.settings-main { display: grid; gap: 20px; min-width: 0; align-content: start; }
.settings-main .form-section { padding: 24px; margin: 0; }
.settings-actions { position: sticky; bottom: 0; z-index: 3; display: flex; justify-content: flex-end; gap: 8px; padding: 14px 0; background: var(--bg); border-top: 1px solid var(--rule); }
.preview { grid-column: 2; grid-row: 1; align-self: start; position: sticky; top: 24px; }
@media (min-width: 1700px) {
    .settings { grid-template-columns: minmax(0, 1fr) minmax(320px, 400px); }
    .settings-main { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
    .settings-main .form-section--wide, .settings-actions { grid-column: 1 / -1; }
}
.preview-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 10px; }
/* "Preview" and "Close" only exist where the preview is hidden beside the form (tablet and phone). */
.preview-btn, .preview-close { display: none; }
.preview-head h2 { font-size: 14px; font-weight: 600; }
.preview-head small { color: var(--muted); font-size: 12.5px; }
.preview-paper { margin: -4px 0 10px; color: var(--muted); font-size: 12.5px; }
.preview-paper b { color: var(--ink); font-weight: 500; }
.preview [hidden] { display: none !important; }
.paper--mini { margin: 0; max-width: none; padding: 28px 28px 24px; font-size: 12.5px; }
.paper--mini h2 { font-size: 16px; overflow-wrap: anywhere; }
.paper--mini .paper-top { gap: 20px; padding-bottom: 20px; }
.paper--mini .paper-top > div:first-child { min-width: 0; }
.paper--mini .paper-id { flex: none; }
.paper--mini .paper-id strong { font-size: 14px; white-space: nowrap; }
.paper--mini .paper-table { margin-top: 22px; }
.paper--mini .paper-foot { margin-top: 28px; }
.form-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 20px; }
.form-narrow .form-actions { margin-top: 24px; }
form.form-narrow { margin-bottom: 0; }

.uploader-row { display: flex; align-items: center; gap: 16px; }
.uploader-preview { width: 88px; height: 88px; flex: none; display: grid; place-items: center; overflow: hidden; border: 1px dashed var(--rule-2); border-radius: 12px; background: var(--sunken); color: var(--faint); }
.uploader-preview img { width: 100%; height: 100%; object-fit: contain; }
.uploader-preview .icon { width: 26px; height: 26px; }
.uploader-body { display: grid; gap: 6px; justify-items: start; min-width: 0; }
.uploader-body .hint, .uploader-body .error { margin: 0; }
.uploader input[type=file] { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); }
.uploader input[type=file]:focus-visible + label.btn { outline: 2px solid var(--accent); outline-offset: 2px; }
.uploader label.btn { display: inline-flex; margin: 0; font-size: 13px; cursor: pointer; }
.uploader-remove { margin-top: 12px !important; font-weight: 400 !important; color: var(--muted); }
/* A QR code must stay whole and sharp: shown in full (not cropped to a square), on white. */
.uploader-preview--qr { background: #fff; }
.uploader-preview--qr img { object-fit: contain; }
.upi-panel { display: grid; justify-items: center; gap: 12px; margin: 0 0 18px; padding: 18px 16px 16px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--sunken); text-align: center; }
.upi-panel[hidden] { display: none; }
.upi-amount { margin: 0; display: grid; gap: 2px; justify-items: center; color: var(--muted); font-size: 12.5px; letter-spacing: .02em; }
.upi-amount b { margin: 0; color: var(--ink); font: 600 26px/1.2 var(--mono); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.upi-qr { display: block; width: min(100%, 248px); height: auto; background: #fff; padding: 10px; border-radius: 14px; box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
.upi-panel .hint { margin: 0; max-width: 30ch; line-height: 1.45; }
/* The QR made for this bill: an SVG on white. The quiet zone is inside the picture, so no extra padding. */
.upi-qr--live { width: min(100%, 272px); aspect-ratio: 1; padding: 0; overflow: hidden; }
.upi-qr--live[hidden], .upi-qr[hidden] { display: none; }
.upi-qr--live svg { display: block; width: 100%; height: 100%; }
.upi-id { margin: 0; color: var(--muted); font-size: 12.5px; overflow-wrap: anywhere; }
.upi-id b { color: var(--ink); font-family: var(--mono); font-weight: 500; }
.upi-panel [hidden] { display: none; }
.upi-setup { display: grid; gap: 8px; width: 100%; max-width: 320px; }
.upi-setup-title { margin: 0; font-size: 15px; font-weight: 600; }
.upi-setup-row { display: flex; gap: 8px; }
.upi-setup-row input { flex: 1; min-width: 0; }
.hint-block { display: block; color: var(--muted); font-size: 12.5px; margin-bottom: 14px; }
.pay-note { color: var(--muted); font-size: 12.5px; margin: -4px 0 12px; }
.disc-row { display: grid; grid-template-columns: minmax(0, 1fr) 104px; gap: 8px; align-items: stretch; }
.disc-row .seg { height: 100%; }
.disc-row .seg-item { display: grid; }
.disc-row .seg-item span { height: 100%; min-height: 38px; font-size: 15px; }
.seg--two { grid-template-columns: repeat(2, 1fr); }
.disc-limit { color: var(--muted); font-size: 12.5px; margin-top: 5px; }
.stock-in { color: #1f7a3d; } .stock-out { color: #b3261e; }
.switch { width: 34px; height: 20px; padding: 0; border: 0; border-radius: 999px; background: var(--rule-2); position: relative; transition: background .15s; }
.switch i { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); }
.switch.is-on { background: var(--ok); }
.switch.is-on i { transform: translateX(14px); }
.table td form { margin: 0; }

/* --- Flash ------------------------------------------------------------------------- */

.flash { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 8px; }
.flash li { padding: 10px 14px; border: 1px solid var(--rule); border-left: 3px solid var(--ink); border-radius: var(--radius-sm); background: var(--surface); transition: opacity .3s, transform .3s; }
.flash-success { border-left-color: var(--ok) !important; }
.flash-error { border-left-color: var(--bad) !important; }
.flash-warning { border-left-color: var(--warn) !important; }
.flash li.is-leaving { opacity: 0; transform: translateY(-4px); }

/* --- Dashboard ---------------------------------------------------------------------- */

/* Four separate cards with space between them. */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-bottom: 20px; }
.stat { display: grid; gap: 4px; padding: 18px 22px; align-content: start; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); }
.stat-label { color: var(--muted); font-size: 13px; }
.stat-value { font-size: 26px; font-weight: 600; letter-spacing: -0.025em; line-height: 1.2; }
.stat-note { color: var(--muted); font-size: 12.5px; }
.up { color: var(--ok); font-weight: 500; }
.down { color: var(--bad); font-weight: 500; }

/* Dashboard cards live on a 12-column grid, so they can reflow to fill the screen:
   laptop: chart + best sellers, then open orders + invoices; wide screens: all three
   top cards in one row and the invoices table underneath, full width. */
.dash { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px; margin-bottom: 20px; }
.dash > .panel { display: flex; flex-direction: column; min-width: 0; }
.dash-chart { grid-column: span 7; }
.dash-best { grid-column: span 5; }
.dash-open { grid-column: span 5; }
.dash-invoices { grid-column: span 7; }
.wide-only { display: none; }
.show-sm { display: none; }
@media (min-width: 1700px) {
    .dash-chart { grid-column: span 6; }
    .dash-best, .dash-open { grid-column: span 3; }
    .dash-invoices { grid-column: span 12; }
    .wide-only { display: table-cell; }
}

/* Sales chart */
.range { position: relative; display: inline-flex; gap: 2px; padding: 3px; background: var(--sunken); border-radius: 10px; overflow-x: auto; max-width: 100%; scrollbar-width: none; }
.range::-webkit-scrollbar { display: none; }
.range a { position: relative; z-index: 1; flex: none; height: 28px; min-width: 38px; padding: 0 10px; display: inline-grid; place-items: center; border-radius: 7px; font-size: 12.5px; font-weight: 500; color: var(--muted); transition: color .2s; }
.range a:hover { color: var(--ink); }
.range a.is-active { color: var(--bg); background: var(--ink); }
.range-thumb { display: none; position: absolute; z-index: 0; top: 3px; left: 0; height: 28px; width: var(--w, 0); border-radius: 7px; background: var(--ink); transform: translateX(var(--x, 0)); transition: transform .32s cubic-bezier(.3, .7, .2, 1), width .32s cubic-bezier(.3, .7, .2, 1); }
.range.has-thumb .range-thumb { display: block; }
.range.has-thumb a.is-active { background: transparent; }
/* The date button beside the period buttons, and the little form it opens */
.dash-chart .panel-head { gap: 10px; flex-wrap: wrap; }
.panel-head .pop.daterange { margin-left: auto; }
.chip-date { height: 34px; gap: 8px; padding: 0 12px; cursor: pointer; list-style: none; white-space: nowrap; }
.chip-date::-webkit-details-marker { display: none; }
.chip-date .icon { width: 15px; height: 15px; }
.chip-date.is-active { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.daterange-body { flex-wrap: wrap; align-items: end; left: auto; right: 0; width: min(320px, calc(100vw - 32px)); gap: 10px; padding: 12px; }
.daterange-body label { display: grid; gap: 4px; flex: 1 1 130px; margin: 0; color: var(--muted); font-size: 12px; font-weight: 500; }
.daterange-body input[type=date] { width: 100%; height: 34px; font-size: 13px; }
.daterange-body > .btn { flex: 1 1 100%; }
.daterange-presets { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 1 100%; }

.sales-body { flex: 1; display: flex; flex-direction: column; transition: opacity .18s; }
.sales-body.is-loading { opacity: .45; }
.sales-summary { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; padding: 18px 20px 0; animation: fadeup .45s ease-out backwards; }
.sales-total { display: block; font-size: 28px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.sales-delta { margin-top: 2px; font-size: 12.5px; }
.sales-facts { display: flex; gap: 28px; margin: 0; }
.sales-facts dt { color: var(--muted); font-size: 12px; }
.sales-facts dd { margin: 1px 0 0; font-size: 14px; font-weight: 500; font-variant-numeric: tabular-nums; }
.swatch { display: inline-block; width: 14px; height: 0; margin-right: 6px; vertical-align: middle; border-top: 1.5px dashed var(--muted); }

.sales-chart { flex: 1; display: flex; flex-direction: column; padding: 18px 20px 14px 54px; min-height: 270px; }
.sales-plot { position: relative; flex: 1; min-height: 190px; }
.sales-grid, .sales-bars { position: absolute; inset: 0; }
.gl { position: absolute; left: 0; right: 0; height: 0; border-top: 1px dashed var(--rule); animation: fadein .6s ease-out backwards; }
.gl:first-child { border-top: 1px solid var(--rule-2); }
.gl span { position: absolute; right: calc(100% + 10px); top: -8px; width: 44px; text-align: right; font: 400 11px var(--mono); color: var(--faint); }
.sales-avg { position: absolute; left: 0; right: 0; height: 0; border-top: 1px dashed color-mix(in srgb, var(--muted) 60%, transparent); pointer-events: none; z-index: 1; animation: fadein .8s .5s ease-out backwards; }

/* The sales curve: a smooth line with a soft fill under it that draws in from the left. The
   columns (.sbar) are invisible hit areas, one per point: each holds its dot and its tooltip. */
.sales-line { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; animation: swipe 1.25s cubic-bezier(.45, .05, .2, 1) .1s backwards; }
.sales-line stop:first-child { stop-color: var(--accent); stop-opacity: .34; }
.sales-line stop:last-child { stop-color: var(--accent); stop-opacity: 0; }
.sl-area { animation: fadein .9s .55s ease-out backwards; }
.sl-stroke { stroke: var(--accent); stroke-width: 2.5px; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; filter: drop-shadow(0 5px 7px color-mix(in srgb, var(--accent) 38%, transparent)); }
.is-flat .sl-area { display: none; }
.is-flat .sl-stroke { stroke: var(--faint); filter: none; }

.sales-bars { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); align-items: stretch; }
.sbar { position: relative; display: flex; align-items: flex-end; justify-content: center; min-width: 0; outline: 0; cursor: default; }
/* a thin guide that follows the pointer */
.sbar::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 0; border-left: 1px dashed color-mix(in srgb, var(--accent) 55%, transparent); opacity: 0; transition: opacity .15s; }
.sbar:hover::before, .sbar:focus-visible::before { opacity: 1; }
.sbar-fill { position: absolute; z-index: 2; left: 50%; bottom: var(--h); width: 12px; height: 12px; margin: 0 0 -6px -6px; box-sizing: border-box; border-radius: 50%; background: var(--surface); border: 2.5px solid var(--accent); transform: scale(0); transition: transform .2s cubic-bezier(.3, 1.6, .5, 1); }
.with-dots .sbar-fill { transform: scale(.62); background: var(--accent); animation: dotpop .45s cubic-bezier(.3, 1.6, .5, 1) backwards; animation-delay: calc(var(--i) * 1000ms / var(--n) + 260ms); }
.sbar:hover .sbar-fill, .sbar:focus-visible .sbar-fill { transform: scale(1); background: var(--surface); }
.sbar.is-current .sbar-fill { transform: scale(.9); background: var(--accent); animation: dotpop .45s cubic-bezier(.3, 1.6, .5, 1) 1.1s backwards, ping 2.2s ease-out 1.6s infinite; }
.sbar.is-current:hover .sbar-fill { transform: scale(1.1); }
.sbar-value { position: absolute; z-index: 1; bottom: calc(var(--h) + 12px); font: 400 11px var(--mono); color: var(--muted); animation: fadein .5s .9s ease-out backwards; }
.sbar-tip { position: absolute; z-index: 5; bottom: calc(var(--h) + 18px); left: 50%; transform: translate(-50%, 6px); display: grid; gap: 1px; min-width: 128px; padding: 9px 12px; border-radius: 9px; background: var(--ink); color: var(--bg); font-size: 12px; line-height: 1.35; white-space: nowrap; opacity: 0; pointer-events: none; box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .5); transition: opacity .14s, transform .14s; }
.sbar-tip b { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.sbar-tip small { opacity: .68; font-size: 11.5px; }
.sbar:hover .sbar-tip, .sbar:focus-visible .sbar-tip { opacity: 1; transform: translate(-50%, 0); }
/* keep the tooltip on screen at both ends */
.sbar:nth-child(-n+3) .sbar-tip { left: 0; transform: translate(0, 6px); }
.sbar:nth-last-child(-n+3) .sbar-tip { left: auto; right: 0; transform: translate(0, 6px); }
.sbar:nth-child(-n+3):hover .sbar-tip, .sbar:nth-child(-n+3):focus-visible .sbar-tip,
.sbar:nth-last-child(-n+3):hover .sbar-tip, .sbar:nth-last-child(-n+3):focus-visible .sbar-tip { transform: translate(0, 0); }
.sales-empty { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; color: var(--muted); pointer-events: none; animation: fadein .6s .2s ease-out backwards; }

.sales-axis { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); margin-top: 10px; }
.sales-axis span { display: flex; justify-content: center; }
.sales-axis i { font-style: normal; font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.sales-axis .is-current i { color: var(--ink); font-weight: 600; }
@keyframes sgrow { from { transform: scaleY(0); opacity: 0; } }
@keyframes swipe { from { clip-path: inset(-16px 100% -16px 0); } to { clip-path: inset(-16px -16px -16px 0); } }
@keyframes dotpop { from { transform: scale(0); } }
@keyframes ping { from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); } 70%, to { box-shadow: 0 0 0 11px transparent; } }
@keyframes fadein { from { opacity: 0; } }
@keyframes fadeup { from { opacity: 0; transform: translateY(6px); } }

/* Best sellers' filters */
.best-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 18px 0; margin: 0; }
.best-filters select { width: auto; flex: 1 1 140px; min-width: 0; max-width: 100%; height: 34px; padding-top: 0; padding-bottom: 0; font-size: 13px; }
.best-filters .best-limit { flex: 0 1 96px; }
.best-filters .best-period { flex: 1 1 100%; }
.best-dates { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; flex: 1 1 100%; min-width: 0; color: var(--muted); }
.best-dates[hidden] { display: none; }
.best-dates label { display: grid; gap: 3px; flex: 1 1 120px; min-width: 0; margin: 0; }
.best-dates small { color: var(--muted); font-size: 11.5px; font-weight: 500; }
.best-dates input[type=date] { min-width: 0; width: 100%; height: 34px; padding: 0 8px; font-size: 12.5px; }
.best-filters .seg { flex: 0 0 auto; }
.seg--compact .seg-item span { height: 32px; padding: 0 12px; font-size: 13px; white-space: nowrap; }
.best-filters [hidden] { display: none; }
.dash-best.is-loading .rank, .dash-best.is-loading .empty-note { opacity: .45; }
.rank-main { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.rank-top small { font-size: 12px; color: var(--faint); }
.rank { list-style: none; margin: 0; padding: 6px 18px 12px; flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: space-around; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--rule) transparent; }
.rank li { padding: 10px 0; flex: none; }
/* The card is as tall as the chart beside it, never taller: a long list (Top 20, 50) scrolls
   inside it instead of stretching every card in the row. */
.dash-best { contain: size; min-height: 380px; }
/* A card with forms that open inside it (a shop's Add-ons in the console) grows with them instead of spilling out below. */
.dash-best.dash-fit { contain: none; min-height: 0; }
.rank-top { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.rank-top .num { color: var(--muted); font-size: 13px; }
.rank-bar { height: 4px; border-radius: 2px; background: var(--sunken); overflow: hidden; }
.rank-bar i { display: block; height: 100%; background: var(--ink); border-radius: 2px; animation: rankfill 1.05s cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: calc(var(--i) * 110ms + 160ms); }
.rank li { animation: fadeup .5s ease-out backwards; animation-delay: calc(var(--i) * 70ms); }
@keyframes rankfill { from { width: 0; } }

.rows { list-style: none; margin: 0; padding: 0; flex: 1; align-content: start; }
.rows li { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--rule); }
.rows li:last-child { border-bottom: 0; }
.rows-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 14px; }
.rows-title { display: grid; line-height: 1.35; min-width: 0; font-weight: 500; }
.rows-title small { color: var(--muted); font-size: 12px; font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rows-title small .mono { font-size: 11.5px; }
.rows .num { font-size: 13.5px; }

/* --- Order screen ------------------------------------------------------------------- */

.pos { display: grid; grid-template-columns: minmax(0, 1fr) 372px; gap: 24px; align-items: start; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); grid-auto-rows: 1fr; gap: 10px; }
.tile {
    position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 10px;
    min-height: 88px; padding: 0; gap: 0; overflow: hidden; text-align: left;
    background: var(--surface); border: 1px solid var(--rule); border-radius: 10px;
    transition: border-color .12s, transform .06s, box-shadow .12s;
}
.tile:hover { border-color: var(--ink); }
.tile:active { transform: scale(.98); }
/* Text-only tiles: name, price, then the description slot, top to bottom. */
.tile-body { flex: 1; display: flex; flex-direction: column; justify-content: flex-start; gap: 3px; padding: 12px 14px; min-height: 88px; }
/* Tiles with pictures: the picture is always 4:3 (cropped to fit, whatever its shape), and the
   text sits right under it, so there is never an empty gap between picture and price. */
.tiles--media { grid-template-columns: repeat(auto-fill, minmax(164px, 1fr)); }
.tiles--media .tile-body { justify-content: flex-start; gap: 3px; min-height: 0; padding: 10px 12px 12px; }
.tile-body > .tile-desc { margin-top: 2px; min-height: 2.8em; }  /* two lines, filled or not */
.tiles--media .tile-name { padding-right: 0; }
.tiles--media .tile-price { margin-top: 3px; }
.tile-media, .card-media { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--sunken); }
.tile-media img, .card-media img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: contain; }
/* A picture is shown whole, fitted inside its box and never cropped. Any spare room is filled with a soft, blurred copy of the same picture. */
.tile-media::before, .card-media::before { content: ""; position: absolute; inset: -16px; background: var(--img) center / cover no-repeat; filter: blur(16px) saturate(1.15); opacity: .6; }
.tile-initial { position: absolute; inset: 0; display: grid; place-items: center; font: 600 30px var(--font); color: var(--faint); }
.tile-desc, .card-desc { color: var(--muted); font-size: 12px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tile-name { font-weight: 500; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; padding-right: 22px; }
.tile-price { font: 400 13px var(--mono); color: var(--muted); }
.tile-qty { position: absolute; top: 9px; right: 9px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--accent); color: #fff; font: 500 12px/22px var(--mono); text-align: center; }
.tile.is-in { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.tile.is-off .tile-name::after { content: " · hidden"; color: var(--faint); font-weight: 400; }

.ticket { position: sticky; top: 24px; display: flex; flex-direction: column; max-height: calc(100vh - 48px); background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); }
.ticket-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--rule); }
.ticket-head h2 { font-size: 14px; font-weight: 600; }
.ticket-lines { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1 1 auto; min-height: 0; }
.ticket-empty { padding: 36px 16px; text-align: center; color: var(--faint); }
.tl { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--rule); }
.tl-info { flex: 1; min-width: 0; line-height: 1.3; }
.tl-name { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-rate { font: 400 12px var(--mono); color: var(--muted); }
.stepper { display: inline-flex; align-items: center; border: 1px solid var(--rule-2); border-radius: 8px; }
.stepper button { width: 28px; height: 28px; display: grid; place-items: center; border: 0; background: none; color: var(--muted); border-radius: 7px; }
.stepper button:hover { background: var(--sunken); color: var(--ink); }
.stepper .icon { width: 14px; height: 14px; }
.stepper b { min-width: 24px; text-align: center; font: 500 13px var(--mono); }
/* A weighed line has more to show: the amount, a g/kg switch and one-tap amounts. Name, rate and the
   remove button sit on top; the stepper, unit switch and amount in the middle; the quick amounts below. */
.tl--weighed { flex-wrap: wrap; row-gap: 6px; }
.tl--weighed .tl-info { order: 1; flex: 1 1 calc(100% - 44px); }
.tl--weighed .tl-remove { order: 2; }
.tl--weighed .stepper { order: 3; }
.tl--weighed .unit-toggle { order: 4; }
.tl--weighed .tl-amt { order: 5; margin-left: auto; }
.tl--weighed .qty-chips { order: 6; flex: 1 0 100%; }
.unit-toggle { display: inline-flex; border: 1px solid var(--rule-2); border-radius: 8px; overflow: hidden; }
.unit-toggle button { min-width: 34px; height: 28px; padding: 0 8px; border: 0; background: none; color: var(--muted); font: 500 12px var(--mono); cursor: pointer; }
.unit-toggle button + button { border-left: 1px solid var(--rule-2); }
.unit-toggle button.is-on { background: var(--ink); color: var(--bg); }
.qty-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.qty-chips button { height: 28px; padding: 0 10px; border: 1px solid var(--rule-2); border-radius: 999px; background: transparent; color: var(--ink-2); font: 500 12px var(--mono); cursor: pointer; transition: border-color .12s, background .12s; }
.qty-chips button:hover { border-color: var(--ink); }
.qty-chips button.is-on { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.stepper input.qty-input { flex: none; width: 58px; min-width: 0; height: 28px; padding: 0 4px; border: 0; background: transparent; text-align: right; font: 500 13px var(--mono); -moz-appearance: textfield; }
.qty-input::-webkit-outer-spin-button, .qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.tl-amt { min-width: 74px; text-align: right; font: 400 13px var(--mono); }
.tl-remove { flex: none; width: 28px; height: 28px; margin-right: -6px; display: grid; place-items: center; border: 0; border-radius: 8px; background: none; color: var(--muted); font: 400 24px/1 var(--sans, inherit); cursor: pointer; }
.tl-remove:hover { color: var(--bad); background: var(--sunken); }
.tl-remove:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.sum { margin: 0; padding: 14px 16px; display: grid; gap: 6px; border-top: 1px solid var(--rule); }
.sum > div { display: flex; justify-content: space-between; gap: 12px; color: var(--muted); }
.sum dt, .sum dd { margin: 0; }
.sum dd { color: var(--ink); }
.sum-total { color: var(--ink) !important; font-size: 17px; font-weight: 600; padding-top: 8px; margin-top: 4px; border-top: 1px dashed var(--rule-2); }
.sum-total dd { letter-spacing: -0.01em; }
.ticket-more { border-top: 1px solid var(--rule); padding: 0 16px; }
.ticket-more summary { cursor: pointer; padding: 12px 0; font-weight: 500; color: var(--ink-2); list-style: none; }
.ticket-more summary::-webkit-details-marker { display: none; }
.ticket-more summary::after { content: "+"; float: right; color: var(--muted); }
.ticket-more[open] summary::after { content: "–"; }
.ticket-more .field { margin-bottom: 12px; }
.ticket-actions { display: grid; grid-template-columns: 1fr 1.4fr; gap: 8px; padding: 14px 16px; border-top: 1px solid var(--rule); }
.ticket-actions .btn { height: 40px; }
.ticket-bar { display: none; }

/* --- Checkout ----------------------------------------------------------------------- */

.checkout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 24px; align-items: start; }
.pay { padding: 22px; position: sticky; top: 24px; }
.pay .sum { padding: 14px 0 18px; border-top: 1px solid var(--rule); margin-top: 6px; }
.affix { display: flex; align-items: stretch; }
.affix span { display: grid; place-items: center; padding: 0 12px; border: 1px solid var(--rule-2); border-right: 0; border-radius: var(--radius-sm) 0 0 var(--radius-sm); background: var(--sunken); color: var(--muted); }
.affix input { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); border: 1px solid var(--rule-2); border-radius: var(--radius-sm); overflow: hidden; }
.seg-item { margin: 0 !important; cursor: pointer; border-left: 1px solid var(--rule-2); }
.seg-item:first-child { border-left: 0; }
.seg-item input { position: absolute; opacity: 0; pointer-events: none; }
.seg-item span { display: grid; place-items: center; height: 36px; font-weight: 500; color: var(--muted); transition: background .12s, color .12s; }
.seg-item:hover span { color: var(--ink); }
.seg-item input:checked + span { background: var(--ink); color: var(--bg); }
.seg-item input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: -2px; }
.detail { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; }
.detail + .inline-note { margin-top: 16px; }
.detail .sum { padding: 14px 18px 16px; }
.facts { margin: 0; padding: 4px 18px; }
.facts > div { display: grid; gap: 2px; padding: 12px 0; border-bottom: 1px solid var(--rule); }
.facts > div:last-child { border-bottom: 0; }
.facts dt { color: var(--muted); font-size: 12.5px; }
.facts dd { margin: 0; overflow-wrap: anywhere; }
.facts dd a { text-decoration: underline; text-decoration-color: var(--rule-2); text-underline-offset: 3px; }

/* --- Invoice paper ------------------------------------------------------------------- */
/* The bill: white, quiet, one accent (the total). The same markup is the screen, the print and the
   customer's link. Colours are fixed (not themed): it is a document, and it prints. */

.paper {
    position: relative; max-width: 780px; min-width: 0; margin: 0 auto; padding: 48px 56px 40px;
    background: #fff; color: #171715; border: 1px solid #ebe9e1; border-radius: 16px;
    box-shadow: 0 1px 2px rgba(23, 23, 21, .04), 0 24px 48px -32px rgba(23, 23, 21, .22);
    font-size: 14px; line-height: 1.5; overflow-wrap: anywhere;
}
.paper h2 { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; margin-bottom: 8px; }
.paper p { color: #6b685f; line-height: 1.5; margin: 0; }
.paper p + p { margin-top: 2px; }
.paper .pre { white-space: pre-line; }

.paper-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 32px; padding-bottom: 28px; border-bottom: 1px solid #ebe9e1; }
.paper-from { min-width: 0; }
.paper-id { display: grid; gap: 3px; justify-items: end; align-content: start; text-align: right; color: #6b685f; flex: none; }
.paper-id strong { font: 500 17px var(--mono); color: #171715; letter-spacing: -0.02em; overflow-wrap: normal; }
.paper-kind { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #9c9a90; }
.paper-status { margin-top: 8px; padding: 2px 11px; border-radius: 999px; font-size: 12px; font-weight: 500; line-height: 1.6; }
.paper-status.is-paid { background: #e8f5ee; color: #17703f; }
.paper-status.is-void { background: #fdecea; color: #b42318; }
.paper-status.is-unpaid { background: #fff4e0; color: #9a5b00; }

.paper-meta { display: flex; flex-wrap: wrap; gap: 20px 56px; margin: 24px 0 28px; }
.paper-meta div { display: grid; gap: 4px; min-width: 0; align-content: start; }
.paper-meta dt { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #9c9a90; }
.paper-meta dd { margin: 0; font-weight: 500; }
.paper-sub { display: block; margin-top: 1px; color: #6b685f; font-weight: 400; font-variant-numeric: tabular-nums; }

/* The items. Columns on a wide page; on a phone each item is "name … amount" with "qty × rate" under it. */
.bl { --bl-cols: minmax(0, 1fr) 64px 104px 112px; }
.bl--tax { --bl-cols: minmax(0, 1fr) 64px 104px 72px 112px; }
.bl-head, .bl-row { display: grid; grid-template-columns: var(--bl-cols); column-gap: 12px; align-items: baseline; }
.bl-head { padding: 0 0 10px; border-bottom: 1px solid #e3e0d6; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #9c9a90; font-weight: 500; }
.bl-head .r { text-align: right; }
.bl-rows { list-style: none; margin: 0; padding: 0; }
.bl-row { padding: 14px 0; border-bottom: 1px solid #f0eee7; }
.bl-name { min-width: 0; font-weight: 500; }
.bl-name small { display: block; margin-top: 2px; color: #8a877d; font-size: 12.5px; font-weight: 400; }
.bl-figures { display: contents; }
.bl-qty, .bl-rate, .bl-tax, .bl-amount { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bl-rate, .bl-tax { color: #6b685f; }
.bl-amount { font-weight: 500; }

.paper-sum { margin: 22px 0 0 auto; width: min(100%, 300px); display: grid; gap: 8px; }
.paper-sum div { display: flex; justify-content: space-between; gap: 16px; color: #6b685f; }
.paper-sum dt, .paper-sum dd { margin: 0; font-variant-numeric: tabular-nums; }
.paper-sum dd { color: #171715; }
.paper-total { margin-top: 8px; padding-top: 14px; border-top: 1px solid #171715; align-items: baseline; font-size: 22px; font-weight: 600; letter-spacing: -0.01em; color: #171715 !important; }
.paper-sum small { color: #8a877d; font-size: 12px; }
.paper-incl dt, .paper-incl dd { font-size: 12.5px; color: #8a877d !important; }
.paper-tax { width: 100%; margin-top: 20px; border-collapse: collapse; font-size: 12.5px; color: #6b685f; font-variant-numeric: tabular-nums; }
.paper-tax th { text-align: left; font-weight: 500; padding: 6px 0; border-bottom: 1px solid #e8e6dd; }
.paper-tax td { padding: 5px 0; border-bottom: 1px solid #f3f1ea; color: #171715; }
.paper-tax .r { text-align: right; }
.rc-tax { list-style: none; margin: 8px 0 0; padding: 6px 0 0; border-top: 1px dashed currentColor; font-size: 0.85em; display: grid; gap: 2px; }
.rc-tax li { display: flex; flex-direction: column; }
.rc-tax b { font-weight: 500; }
.rc-name small { font-weight: 400; opacity: .7; }
.paper-foot { margin-top: 40px; padding-top: 18px; border-top: 1px solid #f0eee7; text-align: center; color: #9c9a90; }
.paper-stamp { position: absolute; top: 120px; right: 56px; transform: rotate(-8deg); padding: 4px 18px; border: 2px solid #b42318; border-radius: 6px; color: #b42318; font: 600 22px var(--font); letter-spacing: .2em; text-transform: uppercase; opacity: .8; pointer-events: none; }
.paper.is-void .bl-row, .paper.is-void .paper-sum dd { color: #9c9a90; }

/* The small invoice on the Settings page (and its phone sheet) uses a plain 3-column table. */
.paper-table { width: 100%; border-collapse: collapse; }
.paper-table th { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #9c9a90; font-weight: 500; text-align: left; padding: 0 0 10px; border-bottom: 1px solid #e3e0d6; }
.paper-table td { padding: 12px 0; border-bottom: 1px solid #f0eee7; font-variant-numeric: tabular-nums; }
.paper-table .r { text-align: right; }
.paper-table th:not(:first-child), .paper-table td:not(:first-child) { padding-left: 16px; }

/* Thermal receipts (80 mm / 58 mm): one narrow column, black on white, each item on two lines. */
.paper--80mm, .paper--58mm { margin: 0 auto; padding: 16px 14px 18px; font-size: 12.5px; color: #000; border-radius: 6px; }
.paper--80mm { width: 302px; max-width: 100%; } /* 80 mm paper prints about 72 mm wide */
.paper--58mm { width: 220px; max-width: 100%; font-size: 11.5px; } /* 58 mm paper prints about 48 mm wide */
.paper--80mm p, .paper--58mm p { color: #000; line-height: 1.35; margin: 0; }
.paper--80mm .paper-stamp, .paper--58mm .paper-stamp { top: 70px; right: 14px; font-size: 16px; padding: 2px 10px; }
.rc-head { text-align: center; padding-bottom: 10px; border-bottom: 1px dashed #000; }
.rc-head h2 { font-size: 15px; margin: 0 0 4px; overflow-wrap: anywhere; }
.rc-meta { display: grid; gap: 2px; padding: 8px 0; border-bottom: 1px dashed #000; }
.rc-meta div { display: flex; justify-content: space-between; gap: 8px; }
.rc-meta span { opacity: .7; }
.rc-meta b { font-weight: 500; text-align: right; overflow-wrap: anywhere; }
.rc-lines { list-style: none; margin: 0; padding: 6px 0; border-bottom: 1px dashed #000; }
.rc-lines li { padding: 5px 0; }
.rc-name { font-weight: 500; overflow-wrap: anywhere; }
.rc-calc { display: flex; justify-content: space-between; gap: 8px; font-variant-numeric: tabular-nums; }
.rc-calc b { font-weight: 500; }
.rc-sum { margin: 8px 0 0; display: grid; gap: 3px; }
.rc-sum div { display: flex; justify-content: space-between; gap: 8px; }
.rc-sum dt, .rc-sum dd { margin: 0; font-variant-numeric: tabular-nums; }
.rc-total { margin-top: 4px; padding-top: 6px; border-top: 1px solid #000; font-size: 15px; font-weight: 700; }
.rc-foot { margin-top: 12px; text-align: center; overflow-wrap: anywhere; }
.paper.is-void .rc-lines, .paper.is-void .rc-sum { opacity: .55; }

.paper-switch { align-items: center; margin-bottom: 14px; }
.paper-switch-label { font-size: 13px; color: var(--muted); margin-right: 4px; }

/* The customer's own copy of a bill (no app chrome). */
.public-bill { background: #f6f5f0; min-height: 100vh; }
.public-wrap { max-width: 880px; margin: 0 auto; padding: 20px 16px 48px; }
.public-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.public-note { margin-top: 16px; text-align: center; color: #8a877d; font-size: 13px; }
.public-wrap .paper { margin-left: auto; margin-right: auto; }

/* --- Dialog ------------------------------------------------------------------------- */

.dialog { border: 1px solid var(--rule-2); border-radius: 14px; padding: 22px; width: calc(100% - 32px); max-width: 400px; background: var(--surface); color: var(--ink); box-shadow: 0 24px 60px rgba(0, 0, 0, .25); }
.dialog::backdrop { background: rgba(17, 17, 16, .5); }
.dialog h2 { font-size: 16px; font-weight: 600; margin-bottom: 6px; }
.dialog p { color: var(--muted); }
.dialog--wide { max-width: 480px; }

/* The phone menu: a sheet that rises from the bottom edge. */
.sheet { margin: auto auto 0; width: 100%; max-width: 520px; padding: 14px 12px calc(14px + env(safe-area-inset-bottom)); border: 0; border-top: 1px solid var(--rule-2); border-radius: 18px 18px 0 0; background: var(--surface); color: var(--ink); box-shadow: 0 -12px 40px rgba(0, 0, 0, .25); }
.sheet::backdrop { background: rgba(17, 17, 16, .5); }
.sheet-who { display: flex; align-items: center; gap: 10px; padding: 2px 6px 12px; border-bottom: 1px solid var(--rule); }
.sheet-who .me-text { display: grid; line-height: 1.25; min-width: 0; margin-right: auto; }
.sheet-who .me-text b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sheet-who .me-text small { color: var(--muted); }
.sheet-links { display: grid; margin-top: 6px; }
.sheet-links a, .sheet-links button { display: flex; align-items: center; gap: 14px; width: 100%; height: 50px; padding: 0 10px; border: 0; border-radius: var(--radius-sm); background: none; color: var(--ink); font: inherit; font-weight: 500; text-align: left; cursor: pointer; }
.sheet-links a:active, .sheet-links button:active { background: var(--sunken); }
.sheet-links [hidden] { display: none !important; }
.sheet-links .icon { color: var(--muted); }
.sheet-links form { display: contents; }
.void-info { margin: 12px 0 16px; padding: 12px 14px; border: 1px solid var(--rule); border-radius: var(--radius-sm); background: var(--sunken); font-size: 13.5px; }
.void-info p { margin: 4px 0 8px; }
.void-info ul { margin: 0; padding-left: 18px; color: var(--muted); display: grid; gap: 4px; }
.void-info b { color: var(--ink); font-weight: 600; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 22px; }
/* Ingredients on the item form: a card per ingredient, with one amount for each size under it */
.recipe > summary { cursor: pointer; font-weight: 500; list-style: none; display: flex; align-items: center; gap: 8px; }
.recipe > summary::-webkit-details-marker { display: none; }
.recipe > summary::before { content: "›"; display: inline-block; width: 14px; color: var(--muted); transition: transform .12s; }
.recipe[open] > summary::before { transform: rotate(90deg); }
.recipe-rows { display: grid; gap: 10px; margin: 12px 0 8px; }
.recipe-row { display: grid; gap: 10px; padding: 12px; border: 1px solid var(--rule-2); border-radius: var(--radius-sm); background: var(--sunken); }
.recipe-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.recipe-new { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.recipe-new[hidden] { display: none; }
.recipe-amounts { display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); gap: 8px; }
.recipe-amount { display: grid; gap: 4px; margin: 0; }
.recipe-label { color: var(--muted); font-size: 12px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recipe-amount .affix { margin: 0; }
/* The unit sits after the number (the shared .affix draws its box before it). */
.recipe-amount .affix input { min-width: 0; border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.recipe-amount .affix .recipe-unit { min-width: 40px; padding: 0 10px; border: 1px solid var(--rule-2); border-left: 0; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: var(--surface); color: var(--muted); font: 400 12.5px var(--mono); white-space: nowrap; }
.recipe-tools { display: flex; gap: 8px; align-items: center; }
@media (max-width: 480px) { .recipe-new { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .recipe-new input[name="recipe_new_name"] { grid-column: 1 / -1; } }

/* Sizes / portions editor on the item form */
.size-edit { display: grid; gap: 8px; margin: 10px 0 8px; }
.size-edit-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 160px) auto; gap: 8px; align-items: center; }
.size-edit-row .affix { margin: 0; }
.size-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.size-tools .chip { height: 28px; cursor: pointer; }
.rc-extras { color: var(--muted); font-size: 12px; }
@media (max-width: 480px) { .size-edit-row { grid-template-columns: minmax(0, 1fr) auto; } .size-edit-row .affix { grid-column: 1; } }

/* The "customise" dialog: pick a size, tick add-ons, set a quantity, add. */
.variant-picker { max-width: 400px; }
.vp-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.vp-head h2 { margin: 4px 0 0; min-width: 0; overflow-wrap: anywhere; }
.vp-close { flex: none; margin: -6px -8px 0 0; }
@media (max-width: 760px) { .vp-close { width: 40px; height: 40px; } }
.vp-group { border: 0; margin: 14px 0 0; padding: 0; min-width: 0; }
.vp-group[hidden] { display: none; }
.vp-group legend { padding: 0; margin-bottom: 8px; color: var(--muted); font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: .04em; }
.vp-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; }
.vp-choice { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 12px; border: 1px solid var(--rule-2); border-radius: 10px; background: transparent; color: var(--ink); text-align: left; cursor: pointer; font: inherit; }
.vp-choice b { font-weight: 600; }
.vp-choice small { color: var(--muted); font: 400 12px var(--mono); }
.vp-choice:hover { border-color: var(--ink); }
.vp-choice.is-on { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.vp-choice.is-on small { color: color-mix(in srgb, var(--bg) 70%, transparent); }
.vp-choice:disabled { opacity: .45; cursor: not-allowed; }
.vp-addon-list { display: grid; gap: 6px; }
.vp-addon { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid var(--rule-2); border-radius: 10px; cursor: pointer; }
.vp-addon:hover { border-color: var(--ink); }
.vp-addon input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); flex: none; }
.vp-addon span { flex: 1; }
.vp-addon small { color: var(--muted); font: 400 12.5px var(--mono); }
.vp-addon.is-on { border-color: var(--ink); background: var(--sunken); }
.vp-qty { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; }
.vp-qty > span { color: var(--muted); font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: .04em; }
.tl-addons { color: var(--muted); font-size: 12px; line-height: 1.3; overflow-wrap: anywhere; }
.tile-price small { font-size: 11px; color: var(--muted); font-weight: 400; }
.card-price small { font-size: 11px; color: var(--muted); font-weight: 400; }
.vp-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--rule); }
.vp-row:last-of-type { border-bottom: 0; }
.vp-row.is-off { opacity: .5; }
.vp-row.is-off .stepper { visibility: hidden; }
.vp-name { font-weight: 500; }
.vp-note { display: block; font-size: 12px; color: var(--muted); font-weight: 400; }

/* --- Motion ------------------------------------------------------------------------- */

.content > * { animation: rise .35s ease-out backwards; }
.content > *:nth-child(2) { animation-delay: .04s; }
.content > *:nth-child(3) { animation-delay: .08s; }
.content > .pos { animation: none; } /* the phone's fixed review bar lives inside it */
@keyframes rise { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* --- Tablet and phone ----------------------------------------------------------------- */

@media (max-width: 1100px) {
    .settings { grid-template-columns: minmax(0, 1fr); }
    .preview { display: none; }
    .preview-btn { display: inline-flex; }
    .preview.is-open { display: block; position: fixed; inset: 0; height: 100vh; height: 100dvh; align-self: stretch; z-index: 60; overflow-y: auto; padding: 16px 16px calc(28px + env(safe-area-inset-bottom)); background: var(--bg); }
    .preview.is-open .preview-head { position: sticky; top: -16px; z-index: 1; margin: -16px -16px 12px; padding: 12px 16px; background: var(--bg); border-bottom: 1px solid var(--rule); align-items: center; }
    .preview.is-open .preview-head small { margin-right: auto; }
    .preview.is-open .preview-close { display: inline-flex; }
    .preview.is-open .paper { margin-left: auto; margin-right: auto; }
    body.preview-open { overflow: hidden; }
    .pos { grid-template-columns: minmax(0, 1fr) 330px; }
    .checkout { grid-template-columns: minmax(0, 1fr) 340px; }
}

@media (max-width: 960px) {
    .shell { display: block; }
    .side { display: none; }
    .content { padding: 20px 16px 120px; }
    .settings-actions { position: static; }

    .topbar { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--rule); position: sticky; top: 0; z-index: 10; background: var(--bg); }
    .tabbar {
        display: grid; grid-template-columns: repeat(5, 1fr); align-items: center;
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
        padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
        background: var(--surface); border-top: 1px solid var(--rule);
    }
    .tabbar a { position: relative; display: grid; justify-items: center; gap: 2px; padding: 6px 0; color: var(--muted); font-size: 11px; font-weight: 500; }
    .tabbar a.is-active { color: var(--ink); }
    .tabbar a.is-active .icon { color: var(--accent); }
    .tabbar .tab-new { width: 46px; height: 46px; margin: -18px auto 0; padding: 0; place-items: center; border-radius: 14px; background: var(--ink); color: var(--bg); box-shadow: 0 6px 16px rgba(0, 0, 0, .2); }
    .tabbar .tab-new .icon { width: 22px; height: 22px; }
    .dot { position: absolute; top: 0; left: calc(50% + 6px); min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--accent); color: #fff; font: 500 10px/16px var(--mono); text-align: center; font-style: normal; }

    .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .dash { grid-template-columns: minmax(0, 1fr); }
    .dash > .panel { grid-column: 1 / -1; }
    .dash-best { contain: none; min-height: 0; }
    .dash-best .rank { flex: none; max-height: 440px; }

    .pos, .checkout, .detail { grid-template-columns: 1fr; }
    .ticket { position: static; max-height: none; }
    .ticket-lines { overflow: visible; }
    .pay { position: static; }
    .ticket-bar {
        position: fixed; left: 12px; right: 12px; bottom: calc(76px + env(safe-area-inset-bottom)); z-index: 15;
        display: flex; align-items: center; justify-content: space-between; gap: 12px;
        height: 48px; padding: 0 16px; border-radius: 12px; background: var(--ink); color: var(--bg);
        box-shadow: 0 8px 24px rgba(0, 0, 0, .25); font-weight: 500;
    }
    .ticket-bar b { font: 500 15px var(--mono); margin-left: auto; }
    .ticket-bar span:last-child { display: inline-flex; align-items: center; gap: 4px; }
    .ticket-bar[hidden] { display: none !important; }

    .paper { padding: 28px 20px; }
    .paper-top { flex-direction: column; align-items: stretch; gap: 18px; }
    .paper-id { justify-items: start; text-align: left; }
    .paper-status { justify-self: end; }
    .paper-meta { gap: 20px 40px; }
    .paper-stamp { top: 90px; right: 20px; }
    .paper-switch { flex-wrap: wrap; }
}

/* A phone: nothing on the invoice screen may be wider than the screen. The action buttons become a
   2-column grid (Print on top, full width), and the bill's items stack as "name … amount / qty × rate". */
@media screen and (max-width: 640px) {
    .head-actions { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .head-actions > *, .head-actions form { min-width: 0; }
    .head-actions .btn { width: 100%; justify-content: center; }
    .head-actions .btn-primary { grid-column: 1 / -1; order: -2; }
    .head-actions form { display: contents; }
    .head-actions form .btn { grid-column: 1 / -1; order: 3; } /* Void: last, on its own row, so it is not tapped by mistake */
    .mono-title { font-size: 20px; overflow-wrap: anywhere; }

    .paper { padding: 24px 18px 22px; border-radius: 14px; }
    .paper h2 { font-size: 20px; }
    /* The invoice number and its status share a row instead of stacking four lines high. */
    .paper-id { grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; }
    .paper-id > :not(.paper-status) { grid-column: 1; }
    .paper-status { grid-column: 2; grid-row: 1 / span 2; align-self: start; margin-top: 0; }
    .paper-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin: 20px 0 22px; }
    .bl-head { display: none; }
    .bl-row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 3px; padding: 12px 0; }
    .bl-name { grid-column: 1; grid-row: 1; }
    .bl-amount { grid-column: 2; grid-row: 1; }
    .bl-figures { display: flex; flex-wrap: wrap; gap: 0 6px; grid-column: 1 / -1; grid-row: 2; color: #8a877d; font-size: 12.5px; }
    .bl-qty, .bl-rate, .bl-tax { text-align: left; color: #8a877d; }
    .bl-qty::after { content: " ×"; }
    .bl-tax::before { content: "· "; }
    .bl-tax::after { content: " " attr(data-label); }
    .bl-tax.is-none { display: none; }
    .paper-sum { width: 100%; }
}

@media (max-width: 640px) {
    .hide-sm { display: none; }
    .head-actions { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
    .head-actions .btn { justify-content: center; }
    .head-actions .btn-primary { grid-column: 1 / -1; order: -1; }
    .table td.when { white-space: nowrap; }
    .table td.when .when-year { display: none; }
    .history-table th, .history-table td { padding-left: 8px; padding-right: 8px; }
    .history-table th:first-child, .history-table td:first-child { padding-left: 14px; }
    .history-table th:last-child, .history-table td:last-child { padding-right: 14px; }
    .table td.when .when-time { display: block; font-size: 12px; }
    .table td.when .when-time::before { content: none; }
    .form-narrow { padding: 16px; }
    .inventory-table .item-text .strong { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .size-row { gap: 10px; padding: 12px; }
    .size-row .size-name { flex: 1 1 100%; padding-bottom: 0; }
    .size-row label.field { flex: 1 1 100%; }
    .size-row .size-actions { margin-left: auto; }
    .size-row .size-actions .btn { height: 40px; }
    .size-row form + form .size-actions { margin-left: 0; }
    .size-row .size-actions .icon-btn { width: 40px; height: 40px; border: 1px solid var(--rule-2); }
    .size-row + .size-row { margin-top: 0; }
    .show-sm { display: block; }
    .field-row { grid-template-columns: 1fr; gap: 0; }
    .page-head h1 { font-size: 21px; }
    .table th, .table td { padding-left: 12px; padding-right: 12px; }
    .stat { padding: 14px 16px; }
    .stat-value { font-size: 22px; }
    .chart { gap: 6px; padding: 14px 10px 10px; height: 200px; }
    .search { flex: 1 1 100%; }
    .dash-chart .panel-head { flex-wrap: wrap; gap: 10px; }
    .dash-chart .range { width: 100%; }
    .dash-chart .range a { flex: 1; min-width: 0; padding: 0 4px; }
    .sales-chart { padding: 14px 18px 10px 44px; }
    .sales-total { font-size: 24px; }
    .sales-facts { gap: 20px; }
    .sbar-tip { min-width: 110px; }
    .toolbar--split .search { flex: 1 1 auto; min-width: 0; }
    .item-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .card-body { padding: 10px 12px 8px; gap: 4px; }
    .card-top { flex-direction: column; align-items: flex-start; gap: 2px; }
    .card-title { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
    .card-foot { padding: 4px 4px 4px 12px; }
    .card-switch span { display: none; }
    .view-toggle a span { display: none; }
    .view-toggle a { padding: 0 11px; }
}

/* --- Print: only the invoice ----------------------------------------------------------- */

@media print {
    @page { margin: 14mm; }
    body { background: #fff; }
    .side, .topbar, .tabbar, .flash, .no-print, .dialog { display: none !important; }
    .shell { display: block; }
    .content { padding: 0; max-width: none; }
    .content > * { animation: none; }
    .paper { border: 0; box-shadow: none; padding: 0; max-width: none; border-radius: 0; }
}

/* Receipt widths when printing. Declared last so they win over the generic .paper print rule above. */
@media print {
    .paper--80mm { width: 72mm; max-width: none; margin: 0; padding: 2mm 1mm; border-radius: 0; }
    .paper--58mm { width: 48mm; max-width: none; margin: 0; padding: 2mm 1mm; border-radius: 0; }
    .public-bill { background: #fff; }
    .public-wrap { max-width: none; padding: 0; }
}

/* Live search: the list dims a moment while the new results load. */
[data-live] { transition: opacity .15s; }
[data-live].is-searching { opacity: .55; }

/* --- Inventory add-on: sections, summary cards, row forms, counts, reports ------------------------- */
.subnav { display: flex; gap: 4px; overflow-x: auto; margin: 0 0 18px; padding-bottom: 2px; scrollbar-width: none; -webkit-overflow-scrolling: touch; border-bottom: 1px solid var(--rule); }
.subnav::-webkit-scrollbar { display: none; }
.subnav a { flex: none; padding: 9px 12px; color: var(--muted); font-weight: 500; white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.subnav a:hover { color: var(--ink); }
.subnav a.is-on { color: var(--ink); border-bottom-color: var(--accent); }

.inv-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.inv-stats .stat { display: grid; gap: 4px; align-content: start; padding: 14px 16px; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); color: inherit; }
.inv-stats .stat-label { color: var(--muted); font-size: 12.5px; font-weight: 500; }
.inv-stats .stat-value { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; }
.inv-stats .stat--warn { border-color: var(--warn); }
.notice { margin: 0 0 16px; padding: 10px 14px; border-radius: var(--radius-sm); background: var(--sunken); }
.notice--warn { background: var(--warn-soft); color: var(--warn); }
.attention { padding: 14px 18px; margin-bottom: 18px; }
.attention h2 { font-size: 14px; font-weight: 600; margin-bottom: 8px; }
.attention ul { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
.form-error { margin: 0 0 14px; padding: 10px 14px; border-radius: var(--radius-sm); background: var(--bad-soft); color: var(--bad); font-weight: 500; }
.form-h2 { font-size: 14px; font-weight: 600; margin: 20px 0 6px; }

.rows { display: grid; gap: 10px; margin: 10px 0 8px; }
.row-card { display: grid; grid-template-columns: minmax(0, 2fr) repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; align-items: end; padding: 12px; border: 1px solid var(--rule-2); border-radius: var(--radius-sm); background: var(--sunken); }
.row-card .field { margin: 0; display: grid; gap: 4px; font-size: 12.5px; font-weight: 500; color: var(--muted); }
.row-card .field > span { font-size: 12px; }
.row-card .row-title { grid-column: 1 / -1; display: grid; gap: 2px; }
.row-card .icon-btn { justify-self: end; }
/* A purchase-order row: the item gets a whole line, then quantity, unit and price share the next. */
.row-card.row-card--stock { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1.2fr) auto; }
.row-card--stock > label.field:first-child { grid-column: 1 / -1; }
.row-card--stock .icon-btn { grid-column: auto; align-self: end; }
/* A receive-goods row: the item (or the ordered line) gets a whole line, then the counts, then expiry. */
.row-card.row-card--receive { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.row-card--receive > label.field:has([data-stock-choice]), .row-card--receive > .row-title { grid-column: 1 / -1; }
.row-card--receive > label.field:has(input[name="line_expiry"]) { grid-column: span 2; }
.row-card--receive > .icon-btn { grid-column: 4; align-self: end; }
.usage-grid .row-card { background: none; border: 0; padding: 0; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.date-field { display: grid; gap: 4px; margin: 0; }
.chips--row { margin-bottom: 14px; }
.reorder-group { margin-bottom: 16px; }

.count-input { width: 110px; text-align: right; }
.count-note { display: block; width: 100%; min-width: 150px; margin-top: 6px; font-weight: 400; }
.row-card input, .row-card select { min-width: 0; width: 100%; }
.report-table th, .report-table td { padding-left: 10px; padding-right: 10px; }

@media (max-width: 960px) {
    .inv-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .row-card { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .row-card > .field:first-of-type, .row-card > label.field:first-child { grid-column: 1 / -1; }
    .row-card .icon-btn { grid-column: 2; }
    .row-card.row-card--stock { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .row-card.row-card--receive { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .row-card--receive > label.field:has(input[name="line_expiry"]) { grid-column: 1 / -1; }
    .row-card--receive > .icon-btn { grid-column: 2; }
    .count-input { width: 84px; }
}

/* Tables page and the printable QR sheet */
.table-add { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; padding: 14px 18px; margin-bottom: 20px; }
.table-add label { display: grid; gap: 4px; font-size: 12.5px; color: var(--muted); }
.table-add input[name="name"] { width: 240px; max-width: 100%; }
.table-add input[name="count"] { width: 90px; }
.table-add .hint { flex-basis: 100%; color: var(--muted); }
.table-count { margin-bottom: 12px; }
.table-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.table-card { display: grid; gap: 14px; padding: 16px; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); container-type: inline-size; }
.table-card.is-taken { border-color: var(--warn); }
.table-card header { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.table-card h2 { font-size: 16px; font-weight: 600; }
.table-card footer { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; }
/* The QR window on the Tables page */
.qr-modal { width: calc(100% - 32px); max-width: 380px; padding: 0; border: 0; background: transparent; color: var(--ink); overflow: visible; }
.qr-modal--wide { max-width: 760px; }
.qr-modal::backdrop { background: rgba(8, 8, 6, .6); backdrop-filter: blur(4px); }
.qr-modal[open] { animation: qr-in .28s cubic-bezier(.2, .9, .3, 1.15) both; }
.qr-modal[open]::backdrop { animation: qr-fade .25s ease both; }
.qr-modal-body { position: relative; display: grid; gap: 16px; padding: 20px; background: var(--surface); border: 1px solid var(--rule-2); border-radius: 24px; box-shadow: 0 30px 80px rgba(0, 0, 0, .35); }
.qr-x { position: absolute; top: 30px; right: 30px; z-index: 1; display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 50%; background: #f1efe7; color: #111; cursor: pointer; transition: background .12s; }
.qr-x:hover { background: #e2dfd3; }
.qr-modal--wide .qr-x { top: 28px; right: 28px; background: var(--sunken); color: var(--ink); }
.qr-title { font-size: 18px; font-weight: 600; padding-right: 40px; }
.qr-actions { display: flex; gap: 8px; }
.qr-actions .btn-primary { flex: 1; justify-content: center; }
.qr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; max-height: 60vh; overflow-y: auto; padding: 2px; }

/* The card itself is always white with black ink: it is what gets printed and scanned. */
.qr-card { display: grid; justify-items: center; gap: 6px; padding: 26px 20px 22px; text-align: center; background: #fff; color: #111; border-radius: 18px; border: 1px solid #ebe8df; break-inside: avoid; }
.qr-shop { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #6c6a62; }
.qr-frame { width: 100%; max-width: 230px; margin: 10px 0 6px; padding: 10px; border-radius: 18px; background: #fff; box-shadow: 0 0 0 2px #111; }
.qr-code svg { display: block; width: 100%; height: auto; }
.qr-code path { fill: #111; }
.qr-table { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; }
.qr-help { font-size: 13px; color: #6c6a62; }
/* The platform's name under the code. The card is always white, so it always gets the logo made for a light page. */
.qr-brand { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 10px; padding-top: 12px; border-top: 1px solid #ebe8df; font-size: 11.5px; color: #6c6a62; }
.qr-brand img { height: 20px; width: auto; display: block; }

@keyframes qr-in { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes qr-fade { from { opacity: 0; } to { opacity: 1; } }

/* Printing QR codes: only the cards, two to a row, whatever is on screen. */
#print-area { display: none; }
@media print {
    body.is-printing-qr > *:not(#print-area) { display: none !important; }
    body.is-printing-qr #print-area { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10mm; }
    body.is-printing-qr .qr-card { border: 1px dashed #999; padding: 10mm; }
}

/* Tick several categories (the add-on form): each one is a pill that fills in when ticked. */
.pick-grid { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 8px; }
.pick { position: relative; display: inline-flex; align-items: center; cursor: pointer; }
.pick input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.pick span { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border: 1px solid var(--rule-2); border-radius: 999px; background: var(--surface); color: var(--ink-2); font-size: 13.5px; font-weight: 500; transition: background .12s, border-color .12s, color .12s; }
.pick input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.pick input:checked + span::before { content: "✓"; font-size: 12px; }
.pick input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Table picker at the top of the order ticket */
.ticket-table { padding: 12px 16px; border-bottom: 1px solid var(--rule); margin: 0; }
.ticket-table label { font-size: 12.5px; }
.ticket-table .hint { display: block; margin-top: 6px; }

/* A drop-down with a search box (searchable_select.js). The real <select> stays in the form, hidden. */
.ss { position: relative; }
.ss-button {
    width: 100%; height: 38px; padding: 0 36px 0 12px; text-align: left; cursor: pointer;
    border: 1px solid var(--rule-2); border-radius: var(--radius-sm); background-color: var(--surface); color: var(--ink);
    font: inherit; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    background-image: var(--select-arrow); background-repeat: no-repeat; background-position: right 12px center; background-size: 16px 16px;
    transition: border-color .12s, box-shadow .12s;
}
.ss-button.is-empty { color: var(--muted); }
.ss-button:hover { border-color: var(--faint); }
.ss-button[aria-expanded="true"] { border-color: var(--ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ink) 10%, transparent); }
.ss-panel {
    position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; right: 0;
    background: var(--surface); border: 1px solid var(--rule-2); border-radius: var(--radius-sm);
    box-shadow: 0 16px 40px rgba(0, 0, 0, .28); overflow: hidden;
    animation: ss-in .14s ease-out;
}
.ss-panel[hidden] { display: none; }
.ss-search { width: 100%; height: 40px; padding: 0 12px; border: 0; border-bottom: 1px solid var(--rule); border-radius: 0; background: transparent; color: var(--ink); font: inherit; outline: none; }
.ss-search::-webkit-search-cancel-button { display: none; }
.ss-list { list-style: none; margin: 0; padding: 4px; max-height: 232px; overflow-y: auto; overscroll-behavior: contain; }
.ss-option { padding: 9px 10px; border-radius: 6px; cursor: pointer; font-size: 14px; }
.ss-option[hidden] { display: none; }
.ss-option.is-active { background: var(--sunken); }
.ss-option.is-chosen { font-weight: 600; }
.ss-option.is-chosen::after { content: "✓"; float: right; color: var(--accent); }
.ss-none { padding: 14px 12px; color: var(--muted); font-size: 13.5px; text-align: center; }
.ss-none[hidden] { display: none; }
@keyframes ss-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* A banner on an order that needs the staff's decision */
.accept-note { display: block; margin: 0 0 18px; padding: 12px 16px; border: 1px solid var(--warn); border-radius: var(--radius-sm); background: var(--warn-soft); color: var(--warn); line-height: 1.5; }
.accept-note b { display: inline; font-weight: 600; }

/* An order waiting to be accepted stays highlighted until it is accepted or rejected. */
.table tbody tr.is-pending { background: var(--warn-soft); box-shadow: inset 4px 0 0 var(--warn); }
.table tbody tr.is-pending:hover { background: var(--warn-soft); filter: brightness(.97); }
.table-card.is-pending { background: var(--warn-soft); border-color: var(--warn); animation: pending-pulse 2.2s ease-in-out infinite; }
@keyframes pending-pulse { 50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--warn) 22%, transparent); } }

/* --- Toggle switches (the Table requests settings) --------------------------------------------- */

/* Its own class, deliberately not .switch: that name is already the Items page's Available/Hidden
   button (line ~491) and sharing it corrupted both — this one is a checkbox-driven on/off pill. */
.toggle { position: relative; display: inline-block; flex: none; width: 46px; height: 28px; }
.toggle input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.toggle i {
    display: block; width: 100%; height: 100%; border-radius: 999px;
    background: var(--bar); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .15);
    transition: background .25s ease;
}
.toggle i::after {
    content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px;
    border-radius: 50%; background: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .35), 0 0 0 .5px rgba(0, 0, 0, .06);
    transition: transform .3s cubic-bezier(.2, .9, .3, 1.25), width .2s ease;
}
.toggle input:checked + i { background: var(--accent); }
.toggle input:checked + i::after { transform: translateX(18px); }
/* Held down: the knob stretches a little, the way a real switch gives. */
.toggle input:active + i::after { width: 26px; }
.toggle input:checked:active + i::after { transform: translateX(14px); }
.toggle input:focus-visible + i { outline: 2px solid var(--accent); outline-offset: 2px; }
/* A soft ring breathes out of a switch the moment it is flipped on (settings.js marks the flip). */
.toggle.is-flipped input:checked + i { animation: switch-pulse .45s ease; }
@keyframes switch-pulse {
    0% { box-shadow: inset 0 1px 2px rgba(0, 0, 0, .15), 0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent); }
    100% { box-shadow: inset 0 1px 2px rgba(0, 0, 0, .15), 0 0 0 9px transparent; }
}

.toggle-lg { width: 54px; height: 32px; }
.toggle-lg i::after { width: 26px; height: 26px; }
.toggle-lg input:checked + i::after { transform: translateX(22px); }
.toggle-lg input:active + i::after { width: 30px; }
.toggle-lg input:checked:active + i::after { transform: translateX(18px); }

.switch-head { display: flex; justify-content: space-between; align-items: center; gap: 18px; }
.switch-head h2 { margin-bottom: 4px; }
.switch-sub { font-size: 13.5px; color: var(--muted); line-height: 1.5; max-width: 46ch; }

/* The three options slide shut when the master switch goes off (rows 1fr -> 0fr). */
.switch-body { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .35s ease; }
.switch-body > .switch-rows { overflow: hidden; min-height: 0; transition: opacity .25s .08s ease; }
.switch-section.is-off .switch-body { grid-template-rows: 0fr; }
.switch-section.is-off .switch-body > .switch-rows { opacity: 0; transition-delay: 0s; }

/* The same slide for a section whose options are plain fields (Settings > Order location). */
.switch-body > .switch-fields { overflow: hidden; min-height: 0; margin: 16px -3px 0; padding: 0 3px; transition: opacity .25s .08s ease; }
.switch-section.is-closed .switch-body { grid-template-rows: 0fr; }
.switch-section.is-closed .switch-body > .switch-fields { opacity: 0; transition-delay: 0s; }

/* The options sit in their own sunken group, like a settings list. */
.switch-rows { display: grid; margin-top: 16px; padding: 2px 16px; background: var(--sunken); border-radius: var(--radius); }
.switch-row { display: flex; align-items: center; gap: 14px; padding: 14px 0; cursor: pointer; }
.switch-row + .switch-row { border-top: 1px solid var(--rule-2); }
.switch-ico {
    flex: none; width: 40px; height: 40px; border-radius: 12px;
    display: grid; place-items: center;
    background: var(--accent-soft); color: var(--accent);
    transition: background .3s ease, color .3s ease;
}
.switch-ico svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.switch-text { flex: 1; min-width: 0; }
.switch-text b { display: block; font-size: 14.5px; font-weight: 600; transition: color .3s ease; }
.switch-text small { display: block; margin-top: 1px; font-size: 13px; color: var(--muted); }
/* A row switched off goes quiet: its icon tile and title dim until it is on again. */
.switch-row:has(input:not(:checked)) .switch-ico { background: color-mix(in srgb, var(--muted) 14%, transparent); color: var(--faint); }
.switch-row:has(input:not(:checked)) .switch-text b { color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
    .toggle i, .toggle i::after, .switch-ico, .switch-text b, .switch-body, .switch-body > .switch-rows, .switch-body > .switch-fields { transition: none; }
    .toggle.is-flipped input:checked + i { animation: none; }
}

/* A customer's request from the table QR page (clean / waiter / bill), until the staff tap Done. */
/* Amber means "a table has an order" (taken, to accept). A customer *calling* is dark ink, so the two never look alike:
   the card gets an ink outline and a solid banner with the request, its icon and a Done button. */
.table-card.is-asking { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.table-request {
    display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 12px;
    background: var(--ink); color: var(--bg); border-radius: 10px;
}
.req-ico { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--bg); color: var(--ink); }
.req-ico svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transform-origin: 50% 20%; animation: req-ring 2.8s ease-in-out infinite; }
.req-text { display: grid; gap: 1px; min-width: 0; flex: 1; line-height: 1.3; }
.req-text b { font-size: 13.5px; font-weight: 600; }
.req-text small { font-size: 12px; color: color-mix(in srgb, var(--bg) 68%, transparent); }
.table-request form { flex: none; }
.table-request { max-height: 120px; overflow: hidden; transition: max-height .22s ease, opacity .18s ease, padding .22s ease, margin .22s ease; }
.table-request.is-done { max-height: 0; opacity: 0; padding-block: 0; margin-block: -7px; }
/* In a narrow card the Done button drops under the text, full width, instead of squeezing it. */
@container (max-width: 250px) { .table-request { flex-wrap: wrap; } .table-request form { flex: 1 1 100%; } .table-request .btn { width: 100%; justify-content: center; } }
.table-request .btn { background: var(--bg); border-color: var(--bg); color: var(--ink); }
.table-request .btn:hover { background: color-mix(in srgb, var(--bg) 88%, var(--ink)); }
@keyframes req-ring { 0%, 55%, 100% { transform: rotate(0); } 62% { transform: rotate(14deg); } 70% { transform: rotate(-12deg); } 78% { transform: rotate(8deg); } 86% { transform: rotate(-4deg); } }

/* "New order" toasts (live_orders.js) */
.toasts { position: fixed; z-index: 80; top: 16px; right: 16px; display: grid; gap: 10px; width: min(360px, calc(100vw - 32px)); pointer-events: none; }
.toast {
    pointer-events: auto; position: relative; display: flex; align-items: center; gap: 12px;
    padding: 12px 40px 12px 14px; text-decoration: none; color: var(--ink);
    background: var(--surface); border: 1px solid var(--warn); border-left-width: 5px; border-radius: var(--radius);
    box-shadow: 0 14px 36px rgba(0, 0, 0, .28);
    animation: toast-in .32s cubic-bezier(.2, .9, .3, 1.15) both;
}
.toast.is-leaving { animation: toast-out .22s ease-in both; }
.toast-icon { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--warn-soft); color: var(--warn); }
.toast-icon .icon { width: 18px; height: 18px; }
.toast-text { display: grid; gap: 1px; min-width: 0; line-height: 1.35; }
.toast-text b { font-weight: 600; }
.toast-text span { color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.toast-close { position: absolute; top: 6px; right: 6px; width: 28px; height: 28px; border: 0; border-radius: 50%; background: transparent; color: var(--muted); font-size: 18px; cursor: pointer; }
.toast-close:hover { background: var(--sunken); color: var(--ink); }
/* A customer calling a waiter (clean / bill too): the same dark ink as the banner on the Tables page, not the amber of an order. */
.toast--call { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.toast--call .toast-icon { background: var(--bg); color: var(--ink); }
.toast--call .toast-icon svg { transform-origin: 50% 20%; animation: req-ring 2.8s ease-in-out infinite; }
.toast--call .toast-text span { color: color-mix(in srgb, var(--bg) 70%, transparent); }
.toast--call .toast-close { color: color-mix(in srgb, var(--bg) 70%, transparent); }
.toast--call .toast-close:hover { background: color-mix(in srgb, var(--bg) 16%, transparent); color: var(--bg); }
@keyframes toast-in { from { opacity: 0; transform: translateX(24px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateX(24px); } }
@media (max-width: 760px) { .toasts { top: 12px; left: 16px; right: 16px; width: auto; } }
@media (prefers-reduced-motion: reduce) { .toast, .table-card.is-pending, .req-ico svg, .toast--call .toast-icon svg { animation: none; } .table-request { transition: none; } }

/* The order-sound switch: a bell, or a crossed-out bell when it is off */

/* Udhar (pay later): the checkout panel, the owing list and a customer's page. */
.udhar-panel { display: grid; gap: 4px; padding: 14px 16px; margin-bottom: 14px; border: 1px solid var(--rule-2); border-radius: var(--radius-sm); background: var(--sunken); }
.udhar-panel[hidden] { display: none; }
.udhar-panel .field { margin-bottom: 0; }
.udhar-days { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.udhar-days input { width: 110px; }
.udhar-due { color: var(--muted); font-size: 14px; }
.udhar-due b { color: var(--ink); font-weight: 600; }
.customer-owes { margin: 0 0 14px; padding: 10px 14px; border-radius: var(--radius-sm); background: var(--warn-soft); color: var(--warn); font-size: 13.5px; }
.customer-owes[hidden] { display: none; }
.customer-owes.is-late { background: var(--bad-soft); color: var(--bad); }

.udhar-group { margin: 0 0 24px; }
.udhar-group > h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-size: 14px; font-weight: 600; }
.udhar-group > h2 .count { margin-left: 0; }
.udhar-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.udhar-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; align-items: center; padding: 14px 18px; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); }
.udhar-row[data-href] { cursor: pointer; }
.udhar-row.is-overdue { border-color: var(--bad); }
.udhar-row.is-today { border-color: var(--warn); }
.udhar-who { min-width: 0; }
.udhar-who a { font-weight: 600; color: inherit; text-decoration: none; }
.udhar-who a:hover { text-decoration: underline; }
.udhar-who small { display: block; color: var(--muted); font-size: 13px; }
.udhar-amount { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.udhar-amount small { display: block; font-weight: 400; color: var(--muted); font-size: 12.5px; }
.udhar-late { color: var(--bad); }
.udhar-clear { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.udhar-clear select { width: auto; min-width: 84px; }
.udhar-days-form { display: flex; gap: 10px; align-items: end; flex-wrap: wrap; }
.udhar-days-form .field { margin: 0; }
.udhar-days-form input { width: 120px; }
@media (max-width: 640px) {
    .udhar-row { grid-template-columns: minmax(0, 1fr); }
    .udhar-amount { text-align: left; }
}
.stats--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 640px) { .stats--three { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .stats--three .stat:first-child { grid-column: 1 / -1; } .stats--three .stat { padding: 14px 16px; } .stats--three .stat-value { font-size: 22px; } }
.udhar-bill { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; background: var(--warn-soft); border-color: var(--warn); }
.udhar-bill p { margin: 2px 0 0; }
.section-title { font-size: 15px; margin: 28px 0 10px; }

/* A customer's udhar page: header, figures, "receive payment", one card per open bill. */
.cust-head { display: flex; align-items: center; gap: 16px; margin: 4px 0 20px; }
.cust-head h1 { margin: 0; font-size: 26px; line-height: 1.15; }
.cust-head .sub { margin: 2px 0 0; color: var(--muted); }
.avatar--lg { width: 52px; height: 52px; font-size: 20px; flex: none; }
.stat--owes { border-color: var(--warn); }
.stat--owes .stat-value { color: var(--warn); }
.days-form { display: flex; gap: 8px; align-items: center; margin: 2px 0; }
.days-form input { width: 84px; min-width: 0; }
.receive-card { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 8px; }
.receive-copy h2 { margin: 0 0 2px; font-size: 16px; }
.receive-copy p { margin: 0; font-size: 13.5px; max-width: 44ch; }
.receive { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.receive label { display: grid; gap: 4px; margin: 0; }
.receive label > span:first-child { font-size: 12px; color: var(--muted); }
.receive .affix input { width: 130px; min-width: 0; }
.receive select { min-width: 92px; }
.receive input.is-invalid { border-color: var(--bad); }
.receive-go { white-space: nowrap; }
.bill-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.bill-card { display: grid; gap: 14px; padding: 16px 18px; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); }
.bill-card.is-overdue { border-color: var(--bad); }
.bill-card.is-today { border-color: var(--warn); }
.bill-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.bill-figures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; margin: 0; }
.bill-figures div { display: grid; gap: 1px; }
.bill-figures dt { font-size: 12px; color: var(--muted); }
.bill-figures dd { margin: 0; font-variant-numeric: tabular-nums; }
.bill-figures .is-balance dd { font-weight: 600; }
.bill-card .receive { padding-top: 14px; border-top: 1px solid var(--rule); }
.bill-card .receive .receive-go { flex: 1 1 auto; justify-content: center; }
.udhar-bill .receive { margin-left: auto; }
@media (max-width: 640px) {
    .bill-cards { grid-template-columns: minmax(0, 1fr); }
    .receive { width: 100%; }
    .receive-amount { flex: 1 1 140px; }
    .receive .affix input { width: 100%; }
    .receive-go { flex: 1 1 100%; justify-content: center; }
    .cust-head h1 { font-size: 22px; }
}

/* Checkout phone box: the list of customers with a similar number. It is wider than the box (the phone box
   is half a row) and opens towards the left, so names are never cut down to a letter. */
.suggest-wrap { position: relative; }
.suggest { position: absolute; z-index: 30; right: 0; left: auto; top: calc(100% + 4px); width: max(100%, min(320px, 86vw)); margin: 0; padding: 4px; list-style: none; max-height: 280px; overflow-y: auto; background: var(--surface); border: 1px solid var(--rule-2); border-radius: var(--radius-sm); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28); }
.suggest[hidden] { display: none; }
.suggest--up { top: auto; bottom: calc(100% + 4px); }
.suggest--search { left: 0; right: auto; top: calc(100% + 6px); width: max(100%, min(340px, 86vw)); }
.suggest--search.suggest--up { top: auto; bottom: calc(100% + 6px); }
.suggest li { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name owes" "phone owes"; gap: 1px 12px; align-items: center; padding: 9px 11px; border-radius: 6px; cursor: pointer; }
.suggest li:hover, .suggest li.is-active { background: var(--sunken); }
.suggest-name { grid-area: name; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.suggest-phone { grid-area: phone; color: var(--muted); font-size: 13.5px; font-variant-numeric: tabular-nums; }
.suggest-phone b { color: var(--ink); font-weight: 600; }
.suggest-owes { grid-area: owes; font-size: 12.5px; color: var(--warn); text-align: right; white-space: nowrap; }

/* ---------- Pay later: picking a customer, the re-order screen, waiting orders ---------- */
.later-pick { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.later-pick h2 { margin: 0 0 14px; font-size: 16px; }
.later-sub { margin: 22px 0 10px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.search--big { flex: none; width: 100%; min-width: 0; }
.search--big input[type=search] { height: 48px; font-size: 16px; padding-left: 40px; border-radius: 12px; }
.search--big .icon { left: 14px; width: 18px; height: 18px; }
.regulars { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.regular { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--rule); border-radius: 12px; background: var(--surface); color: inherit; text-decoration: none; transition: border-color .15s, transform .15s, background .15s; }
.regular:hover { border-color: var(--ink-2); background: var(--sunken); transform: translateY(-1px); }
.regular-text { display: grid; min-width: 0; flex: 1; }
.regular-text b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.regular-text small { color: var(--muted); font-variant-numeric: tabular-nums; }
.regular-owes { font-size: 12.5px; font-weight: 600; color: var(--warn); white-space: nowrap; }
.later-add .field:last-of-type { margin-bottom: 18px; }

.later-head { display: flex; align-items: center; gap: 16px; margin: 6px 0 22px; }
.later-head h1 { margin: 0; font-size: 26px; line-height: 1.15; }
.later-head .sub { margin: 2px 0 0; color: var(--muted); font-variant-numeric: tabular-nums; }
.later-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; }
.chip-info { display: inline-flex; align-items: center; height: 26px; padding: 0 11px; border-radius: 999px; background: var(--sunken); color: var(--ink-2); font-size: 12.5px; text-decoration: none; }
.chip-info.is-warn { background: var(--warn-soft); color: var(--warn); font-weight: 600; }

.later-last { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 18px; margin-bottom: 8px; border: 1px solid var(--rule); border-radius: 14px; background: linear-gradient(135deg, var(--sunken), var(--surface)); }
.later-last div { display: grid; gap: 2px; min-width: 0; }
.later-last small { color: var(--muted); font-size: 12.5px; }
.later-last b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

.usual { display: grid; gap: 8px; margin: 0 0 14px; padding: 0; list-style: none; }
.usual-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 14px 12px 18px; border: 1px solid var(--rule); border-radius: 14px; background: var(--surface); transition: border-color .18s, background .18s, box-shadow .18s; }
.usual-row.is-on { border-color: var(--ink); background: var(--sunken); box-shadow: 0 0 0 1px var(--ink) inset; }
.usual-name { display: grid; gap: 2px; min-width: 0; }
.usual-name b { font-weight: 600; }
.usual-name small { color: var(--muted); font-size: 12.5px; }
.stepper--lg { flex: none; border-radius: 12px; background: var(--bg); }
.stepper--lg button { width: 40px; height: 40px; font-size: 20px; line-height: 1; border-radius: 11px; color: var(--ink); }
.stepper--lg button:active { transform: scale(.92); }
.stepper--lg input { width: 54px; height: 40px; border: 0; background: transparent; text-align: center; font: 600 16px var(--mono); padding: 0; min-width: 0; }
.usual-row.is-on .stepper--lg button[data-plus] { background: var(--ink); color: var(--bg); }

.later-other { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 18px; margin-bottom: 18px; border: 1px dashed var(--rule-2); border-radius: 14px; background: none; color: var(--ink); text-align: left; cursor: pointer; transition: border-color .15s, background .15s; }
.later-other:hover { border-color: var(--ink-2); background: var(--sunken); }
.later-other span { display: grid; flex: 1; gap: 1px; }
.later-other small { color: var(--muted); font-size: 12.5px; }
.later-first { padding: 36px 24px; margin-bottom: 18px; text-align: center; border: 1px dashed var(--rule-2); border-radius: 14px; }
.later-first h2 { margin: 0 0 6px; font-size: 17px; }
.later-first p { margin: 0 auto 16px; max-width: 42ch; color: var(--muted); }

.later-bar { position: sticky; bottom: 16px; z-index: 5; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 14px 16px 14px 20px; margin-top: 8px; border: 1px solid var(--rule-2); border-radius: 16px; background: var(--surface); box-shadow: 0 14px 34px rgba(0, 0, 0, .28); }
.later-sum { display: grid; gap: 1px; margin-right: auto; }
.later-sum span { font-size: 12.5px; color: var(--muted); }
.later-sum b { font-size: 24px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.later-sum small { color: var(--muted); font-size: 12px; }
.later-days { display: grid; gap: 3px; margin: 0; }
.later-days > span:first-child { font-size: 12px; color: var(--muted); }
.later-days small { font-size: 12px; color: var(--muted); }
.later-days small b { color: var(--ink); font-weight: 600; }
.affix--end { display: flex; align-items: stretch; }
.affix--end input { width: 70px; height: 38px; border-radius: var(--radius-sm) 0 0 var(--radius-sm); text-align: right; }
.affix--end span { border: 1px solid var(--rule-2); border-left: 0; border-right: 1px solid var(--rule-2); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; padding: 0 10px; }
.later-go { height: 46px; padding: 0 22px; font-size: 15px; }
.later-go[disabled] { opacity: .45; }
.ticket-later { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--rule); }
.ticket-later span:last-child { display: grid; min-width: 0; }
.ticket-later small { color: var(--muted); font-size: 12px; }

.wait-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; margin: 0 0 8px; padding: 0; list-style: none; }
.wait-card { display: grid; gap: 12px; padding: 16px 18px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface); }
.wait-card.is-overdue { border-color: var(--bad); }
.wait-card.is-today { border-color: var(--warn); }
.wait-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.wait-top .muted { margin-left: 6px; font-size: 12.5px; }
.wait-lines { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.wait-lines li { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.wait-lines small { color: var(--muted); }
.wait-lines b { font-weight: 500; font-variant-numeric: tabular-nums; }
.wait-foot { display: flex; align-items: center; justify-content: space-between; padding-top: 12px; border-top: 1px solid var(--rule); }
.btn-ghost { background: none; border-color: transparent; color: var(--muted); }
.btn-ghost:hover { color: var(--bad); background: var(--bad-soft); }
.cust-head { justify-content: flex-start; }
.cust-new { margin-left: auto; }

/* The statement invoice: a day heading, then that day's items. */
.bl-date { list-style: none; padding: 14px 0 6px; font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #8a877d; border-bottom: 1px solid #e3e0d6; }
.rc-date { list-style: none; padding: 8px 0 2px; font-weight: 700; border-bottom: 1px dashed currentColor; }

@media (max-width: 860px) { .later-pick { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
    .later-head h1 { font-size: 22px; }
    .usual-row { padding-left: 14px; }
    .later-bar { position: fixed; left: 12px; right: 12px; bottom: 74px; padding: 12px 14px; gap: 10px 12px; }
    .later-sum { flex: 1 1 100%; flex-direction: row; display: flex; align-items: baseline; gap: 8px; }
    .later-sum b { margin-left: auto; font-size: 22px; }
    .later-days { flex: 1 1 100%; display: flex; align-items: center; gap: 8px; }
    .later-days > span:first-child { white-space: nowrap; }
    .later-days small { margin-left: auto; font-size: 13px; }
    .affix--end input { height: 34px; width: 58px; }
    .later-go { flex: 1 1 100%; justify-content: center; height: 44px; }
    #later { padding-bottom: 150px; }
    .wait-list { grid-template-columns: minmax(0, 1fr); }
    .cust-new { margin-left: 0; }
    .cust-head { flex-wrap: wrap; }
}

/* Orders waiting to be billed: one compact row each (a daily customer has dozens). */
.wait-panel { padding: 4px 0; }
.wait-rows { margin: 0; padding: 0; list-style: none; }
.wait-row { display: grid; grid-template-columns: 112px minmax(0, 1fr) auto 36px; gap: 4px 16px; align-items: center; padding: 12px 18px; border-bottom: 1px solid var(--rule); border-left: 3px solid transparent; }
.wait-row:last-child { border-bottom: 0; }
.wait-row.is-overdue { border-left-color: var(--bad); }
.wait-row.is-today { border-left-color: var(--warn); }
.wait-when { display: grid; }
.wait-when small, .wait-amt small { color: var(--muted); font-size: 12.5px; }
.wait-items { min-width: 0; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.wait-items small { color: var(--muted); }
.wait-amt { display: grid; text-align: right; font-variant-numeric: tabular-nums; }
.wait-amt small.udhar-late { color: var(--bad); }
.wait-cancel .icon-btn { color: var(--faint); }
.wait-cancel .icon-btn:hover { color: var(--bad); }
@media (max-width: 640px) {
    .wait-row { grid-template-columns: minmax(0, 1fr) auto 32px; padding: 12px 14px; }
    .wait-items { grid-column: 1 / -1; grid-row: 2; }
}

/* ---------- Pay later pages: spacing and layout fixes ---------- */
/* A .panel has no padding of its own: these hold text and fields directly, so they need it. */
.receive-card, .later-find, .later-add, .udhar-bill { padding: 20px 22px; }
.later-pick { gap: 24px; }
.later-find .search--big { margin-bottom: 4px; }
.regulars { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }

/* Names are shown with a capital first letter, whatever was typed. */
.regular-text b, .later-head h1, .cust-head h1, .udhar-who a, .suggest-name, .wait-when b { text-transform: capitalize; }

/* The three figures at the top of a customer's page: same height, nothing hanging underneath. */
.stats--three .stat { align-content: space-between; min-height: 112px; }
.stat--days .days-form { margin: 0; }
.stat-input { width: 84px; height: 40px; padding: 0 10px; font-size: 22px; font-weight: 600; letter-spacing: -0.02em; border-radius: var(--radius-sm); }
.stat--days .btn { height: 36px; }
.stat-input::placeholder { color: var(--ink); opacity: 1; }

/* Open invoices: one row each on a wide screen (the figures run across), stacked on a phone. */
.bill-cards { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) {
    .bill-card { grid-template-columns: 170px minmax(0, 1fr) auto; align-items: center; gap: 12px 28px; }
    .bill-top { flex-direction: column; align-items: flex-start; gap: 8px; }
    .bill-figures { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .bill-card .receive { padding: 0 0 0 28px; border-top: 0; border-left: 1px solid var(--rule); flex-wrap: nowrap; }
    .bill-card .receive .receive-go { flex: none; }
}

/* A number that already belongs to someone: who, and what continuing will change. */
.later-confirm { display: grid; gap: 12px; padding: 16px; border: 1px solid var(--warn); border-radius: 12px; background: var(--warn-soft); }
.later-confirm p { margin: 0; }
.later-confirm-icon { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--surface); color: var(--warn); }
.later-name { text-transform: capitalize; }
.later-rename { padding: 10px 12px; border-radius: 8px; background: var(--surface); font-size: 13.5px; }
.later-confirm-actions { display: grid; gap: 8px; margin-top: 4px; }

/* Dashboard with Pay later on: two short lists side by side. */
/* Open orders and Recent invoices keep their places. Recent pay later is a row of its own below them on a
   normal screen, and sits beside Recent invoices on a wide one (where they share a row, half each). */
.dash-later { grid-column: span 12; }
@media (min-width: 1700px) {
    .dash-invoices.dash-invoices--compact { grid-column: span 6; }
    .dash-later { grid-column: span 6; }
}
.rows--compact li { gap: 12px; }
.rows--compact .rows-title small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rows--compact .pill { flex: none; }
.rows--compact li.is-void .rows-title, .rows--compact li.is-void .num { color: var(--faint); }

/* Settings > Order alerts */
.sound-section h2 em { font-style: normal; font-weight: 400; font-size: 12.5px; color: var(--muted); margin-left: 8px; }
.sound-note { margin: 0 0 16px; color: var(--muted); font-size: 13.5px; }
.sound-on { margin-bottom: 16px; }
.sound-tones { flex-wrap: wrap; }
.sound-level { margin-left: 6px; font-weight: 600; font-variant-numeric: tabular-nums; }
.sound-section input[type=range] { width: 100%; max-width: 360px; accent-color: var(--ink); }
.sound-section.is-off .sound-tones, .sound-section.is-off input[type=range] { opacity: .5; }
.sound-tip { display: block; margin-top: 10px; }
.sound-section .field { margin: 18px 0 0; }
.sound-section .sound-on { display: flex; margin: 0; }
.sound-section [data-sound-test] { margin-top: 20px; }
.sound-section .sound-speak { display: flex; margin: 18px 0 0; }
.sound-section .sound-speak + .hint { margin-top: 6px; }
.sound-lang[hidden] { display: none; }
.sound-lang .hint { display: block; margin-top: 8px; }
.sound-lang button:disabled { opacity: .45; cursor: not-allowed; }
.speech-help { margin-top: 8px; font-size: 13px; color: var(--muted); }
.speech-help summary { cursor: pointer; color: var(--ink-2); font-weight: 500; }
.speech-help p, .speech-help ul { margin: 8px 0 0; }
.speech-help ul { padding-left: 18px; display: grid; gap: 4px; }
.sound-samples { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.sound-samples .btn { margin-top: 0; }

/* Inventory forms: which unit a number is in, "New supplier" next to the supplier list, the supplier dialog. */
.unit-note { margin-left: 6px; font-weight: 500; font-size: 12px; color: var(--accent, var(--ink-2)); }
.unit-note:empty { display: none; }
.supplier-pick { display: grid; align-content: start; gap: 6px; }
.supplier-pick .field { margin-bottom: 0; }
.link.supplier-new, .field .hint .link { font-size: 12.5px; }
.supplier-modal .supplier-lead { margin: 0 0 14px; color: var(--muted); font-size: 13.5px; }
.supplier-modal .field { margin-bottom: 12px; }
.supplier-modal .hint { display: block; margin-top: 4px; }
.supplier-modal .form-error { margin: 0 0 12px; }
.supplier-modal[open] { animation: qr-in .22s cubic-bezier(.2, .9, .3, 1.15) both; }
.row-card .field .hint { display: block; margin-top: 4px; font-size: 11.5px; line-height: 1.35; }
input.is-locked { background: var(--sunken); color: var(--muted); cursor: not-allowed; }
.po-nudge[hidden], .po-nudge [hidden] { display: none; }
.po-nudge .notice { display: block; margin: 12px 0 0; border-left: 3px solid var(--accent); }
.po-nudge .notice b { display: block; margin-bottom: 2px; }
.po-nudge-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; font-size: 13.5px; }
.po-nudge-list a { font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* A long run of filter chips stays on one line and scrolls sideways, rather than wrapping into a second row. */
.chips--scroll {
    flex-wrap: nowrap; overflow-x: auto; min-width: 0; max-width: 100%;
    padding: 2px 36px 6px 0; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent);
}
.chips--scroll::-webkit-scrollbar { display: none; }
.chips--scroll .chip { flex: none; white-space: nowrap; }
@media (hover: hover) and (pointer: fine) {
    /* With a mouse there is no swipe, so keep a slim bar to drag. */
    .chips--scroll { scrollbar-width: thin; scrollbar-color: var(--rule-2) transparent; }
    .chips--scroll::-webkit-scrollbar { display: block; height: 6px; }
    .chips--scroll::-webkit-scrollbar-thumb { background: var(--rule-2); border-radius: 3px; }
}
.toolbar > .chips--scroll { flex: 1 1 100%; }

/* Reports: the period picker sits on one line, its fields and button the same height. */
.report-filter { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin: 0 0 18px; }
.report-filter .date-field { gap: 6px; font-size: 13px; font-weight: 500; }
.report-filter .date-field input { height: 40px; width: 170px; }
.report-filter .btn { height: 40px; padding: 0 20px; }
.chips--row[aria-label="Reports"] { margin-bottom: 16px; }
@media (max-width: 640px) {
    .report-filter { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; }
    .report-filter .date-field input { width: 100%; }
    .report-filter .btn { grid-column: 1 / -1; justify-content: center; }
    /* Show and Print share one row, equal width (Show alone, on pages without Print, still spans the row). */
    .report-filter .rep-show { grid-column: 1 / 2; }
    .report-filter .rep-print { grid-column: 2 / 3; margin-left: 0; }
}

/* The same sideways-scrolling row, on a phone only (wide screens have the room to wrap). */
@media (max-width: 640px) {
    .chips--scroll-sm {
        flex-wrap: nowrap; overflow-x: auto; min-width: 0; max-width: 100%;
        padding: 2px 36px 6px 0; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
        scrollbar-width: none;
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent);
        mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent);
    }
    .chips--scroll-sm::-webkit-scrollbar { display: none; }
    .chips--scroll-sm .chip { flex: none; white-space: nowrap; }
    .toolbar > .chips--scroll-sm { flex: 1 1 100%; }
}

/* Business report: the answer first (profit or loss), then the figures behind it. */
.rep-period { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; margin: 0 0 6px; }
.rep-period .chips { padding-bottom: 6px; }
.rep-period .report-filter { margin: 0 0 6px; }
.rep-span { margin: 0 0 16px; color: var(--muted); font-size: 13.5px; }
.rep-span b { color: var(--ink); font-weight: 600; }

.rep-verdict { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 20px 32px; align-items: center; padding: 22px 26px; margin-bottom: 16px; border-left: 4px solid var(--rule-2); }
.rep-verdict--profit { border-left-color: var(--ok); background: linear-gradient(90deg, var(--ok-soft), var(--surface) 55%); }
.rep-verdict--loss { border-left-color: var(--bad); background: linear-gradient(90deg, var(--bad-soft), var(--surface) 55%); }
.rep-verdict-main { display: grid; gap: 4px; }
.rep-verdict-tag { font-size: 13px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--muted); }
.rep-verdict--profit .rep-verdict-tag { color: var(--ok); }
.rep-verdict--loss .rep-verdict-tag { color: var(--bad); }
.rep-verdict-amount { font-size: 36px; font-weight: 650; letter-spacing: -0.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.rep-verdict--profit .rep-verdict-amount { color: var(--ok); }
.rep-verdict--loss .rep-verdict-amount { color: var(--bad); }
.rep-verdict-note { color: var(--muted); font-size: 13.5px; }
.rep-calc { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.rep-calc td { padding: 7px 0; border-bottom: 1px dashed var(--rule-2); }
.rep-calc td.r { text-align: right; }
.rep-calc .rep-op { display: inline-block; width: 18px; color: var(--muted); font-weight: 600; }
.rep-calc-total td { padding-top: 10px; border-bottom: 0; border-top: 2px solid var(--ink); font-weight: 650; }
.rep-verdict .rep-fine { grid-column: 1 / -1; margin: 0; }
.rep-fine { margin: 10px 0 0; color: var(--muted); font-size: 12.5px; line-height: 1.5; }
.rep-pad { padding: 0 18px 14px; }
.rep-empty { margin: 0; padding: 22px 18px; color: var(--muted); text-align: center; }

.rep-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 16px; }
.rep-stats .stat { color: inherit; text-decoration: none; padding: 14px 16px; }
.rep-stats .stat-value { font-size: 22px; }
.rep-stats a.stat:hover { border-color: var(--rule-2); }
.rep-stats .stat--warn { border-color: var(--warn); }
.rep-chart { margin-bottom: 16px; }
.rep-chart .panel-head h2 .muted { font-weight: 400; font-size: 13px; }

/* The cards under the chart are laid out by how much room there is, not left to wrap: two by two when four will not
   fit across (never three and one left over), four across on a wide screen, one column on a phone. With three cards
   (no Expenses add-on) they are three across when there is room, else two with the last spanning the row. */
.rep-grid-box { container-type: inline-size; margin-bottom: 16px; }
.rep-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.rep-grid--three > :last-child { grid-column: 1 / -1; }
@container (min-width: 920px) { .rep-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); } .rep-grid--three > :last-child { grid-column: auto; } }
@container (min-width: 1220px) { .rep-grid--four { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@container (max-width: 640px) { .rep-grid { grid-template-columns: minmax(0, 1fr); } .rep-grid--three > :last-child { grid-column: auto; } }
.rep-card { padding: 0; }
.rep-card .panel-head { padding: 14px 18px 0; }
.rep-bars { list-style: none; margin: 0; padding: 14px 18px 18px; display: grid; gap: 14px; }
.rep-bar-head { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.rep-bar { height: 8px; margin: 6px 0 4px; border-radius: 99px; background: var(--sunken); overflow: hidden; }
.rep-bar i { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.rep-card .rep-fine { padding: 0 18px 16px; margin-top: -4px; }
.rep-mini { margin: 6px 0 0; }
.rep-mini td { padding: 9px 18px; }
.rep-mini .rep-calc-total td { border-top: 1px solid var(--rule-2); }

.table-panel > .panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 14px 18px; }
.table-panel > .panel-head h2 .muted { font-weight: 400; font-size: 13px; }
.rep-later-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding: 0 18px 12px; }
.rep-later-stats > div { display: grid; gap: 2px; padding: 12px 14px; border: 1px solid var(--rule); border-radius: var(--radius-sm); background: var(--sunken); }
.rep-later-stats .stat-value { font-size: 20px; }
.rep-later-stats .is-late { border-color: var(--bad); background: var(--bad-soft); }
.rep-later-stats .is-late .stat-value { color: var(--bad); }
.rep-how { padding: 14px 18px; margin: 16px 0 24px; }
.rep-how summary { cursor: pointer; font-weight: 600; }
.rep-how ul { margin: 12px 0 0; padding-left: 18px; display: grid; gap: 8px; color: var(--ink-2); font-size: 13.5px; line-height: 1.55; }

@media (max-width: 860px) {
    .rep-verdict { grid-template-columns: 1fr; padding: 18px; }
    .rep-later-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .rep-period { gap: 4px; }
    .rep-verdict-amount { font-size: 30px; }
    .rep-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .rep-stats .stat { padding: 12px 14px; }
    .rep-stats .stat-value { font-size: 19px; }
}
@media print {
    .rep-verdict, .rep-stats .stat, .rep-card { break-inside: avoid; }
    .rep-how[open] summary { display: none; }
}
.rep-chart ~ .table-panel { margin-bottom: 16px; }

/* The report's long tables: the pager sits inside the panel, and the table dims while a page loads. */
.rep-table-body { transition: opacity .15s; }
[data-rep-table].is-loading .rep-table-body { opacity: .45; pointer-events: none; }
.rep-pager { padding: 12px 18px; margin: 0; border-top: 1px solid var(--rule); }
.rep-table-body .table .narrow { width: 44px; }

/* Dashboard: Overview / Reports. The switch glides; each view fades out and the next rises in piece by piece. */
.dash-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.dash-switch { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; padding: 3px; border: 1px solid var(--rule-2); border-radius: 999px; background: var(--sunken); }
.dash-switch a { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-width: 112px; height: 34px; padding: 0 16px; border-radius: 999px; color: var(--muted); font-size: 13.5px; font-weight: 500; text-decoration: none; transition: color .25s; }
.dash-switch a .icon { width: 16px; height: 16px; }
.dash-switch a[aria-selected="true"] { color: var(--bg); }
.dash-switch a { -webkit-tap-highlight-color: transparent; background: transparent; }
@media (hover: hover) { .dash-switch a:not([aria-selected="true"]):hover { color: var(--ink); } }
.vt-thumb { position: absolute; z-index: 0; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); border-radius: 999px; background: var(--ink); box-shadow: 0 2px 8px color-mix(in srgb, var(--ink) 25%, transparent); transition: transform .38s cubic-bezier(.3, 1.25, .5, 1); }
.dash-switch[data-view="reports"] .vt-thumb { transform: translateX(100%); }
.dash-switch a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* A hidden view is not display:none: browsers restart a view's animations (the chart drawing in) each time it
   comes back from that. It keeps its place in the layout with no height, so nothing replays and nothing shifts. */
.dash-pane[hidden] { display: block !important; height: 0; margin: 0; padding: 0; overflow: hidden; visibility: hidden; }
/* A cross-fade: the arriving view takes its place in the layout at once and fades in, while the leaving one lies
   over it (out of the layout, so the page does not jump) and fades out. There is never an empty frame between. */
.dash-panes { position: relative; }
.dash-pane.is-leaving { position: absolute; top: 0; left: 0; right: 0; z-index: 0; animation: pane-out .2s ease-in .08s forwards; pointer-events: none; }
.dash-pane.is-entering { position: relative; z-index: 1; animation: pane-in .28s ease-out both; }
.dash-pane.is-entering > * { animation: pane-item .36s cubic-bezier(.2, .8, .2, 1) backwards; }
.dash-pane.is-entering > :nth-child(1) { animation-delay: 0ms; }
.dash-pane.is-entering > :nth-child(2) { animation-delay: 30ms; }
.dash-pane.is-entering > :nth-child(3) { animation-delay: 60ms; }
.dash-pane.is-entering > :nth-child(4) { animation-delay: 90ms; }
.dash-pane.is-entering > :nth-child(5) { animation-delay: 120ms; }
.dash-pane.is-entering > :nth-child(6) { animation-delay: 150ms; }
.dash-pane.is-entering > :nth-child(n+7) { animation-delay: 180ms; }
@keyframes pane-out { to { opacity: 0; transform: translateY(-6px); } }
@keyframes pane-in { from { opacity: 0; } }
@keyframes pane-item { from { opacity: 0; transform: translateY(10px); } }

/* The report's own pieces: key figures rise one by one, the profit figure pops, bars grow from the left. */
.dash-pane.is-entering .rep-stats .stat { animation: pane-item .5s cubic-bezier(.2, .8, .2, 1) backwards; }
.dash-pane.is-entering .rep-stats .stat:nth-child(1) { animation-delay: 70ms; }
.dash-pane.is-entering .rep-stats .stat:nth-child(2) { animation-delay: 100ms; }
.dash-pane.is-entering .rep-stats .stat:nth-child(3) { animation-delay: 130ms; }
.dash-pane.is-entering .rep-stats .stat:nth-child(4) { animation-delay: 160ms; }
.dash-pane.is-entering .rep-stats .stat:nth-child(5) { animation-delay: 190ms; }
.dash-pane.is-entering .rep-stats .stat:nth-child(6) { animation-delay: 220ms; }
.dash-pane.is-entering .rep-stats .stat:nth-child(n+7) { animation-delay: 250ms; }
.dash-pane.is-entering .rep-verdict-amount { animation: amount-pop .7s cubic-bezier(.3, 1.4, .5, 1) .18s backwards; }
.dash-pane.is-entering .rep-calc tr { animation: pane-item .45s cubic-bezier(.2, .8, .2, 1) backwards; }
.dash-pane.is-entering .rep-calc tr:nth-child(1) { animation-delay: 120ms; }
.dash-pane.is-entering .rep-calc tr:nth-child(2) { animation-delay: 170ms; }
.dash-pane.is-entering .rep-calc tr:nth-child(3) { animation-delay: 220ms; }
.dash-pane.is-entering .rep-calc tr:nth-child(4) { animation-delay: 270ms; }
.rep-bar i { transform-origin: left center; }
.dash-pane.is-entering .rep-bar i { animation: bar-grow .8s cubic-bezier(.2, .8, .2, 1) .2s backwards; }
.dash-pane.is-entering .rep-later-stats > div { animation: pane-item .5s cubic-bezier(.2, .8, .2, 1) backwards; }
@keyframes amount-pop { from { opacity: 0; transform: translateY(10px) scale(.92); } }
@keyframes bar-grow { from { transform: scaleX(0); } }

/* While the report loads (or a new period is fetched) there is something to look at. */
.dash-pane.is-refreshing { opacity: .45; transition: opacity .15s; pointer-events: none; }
.rep-skeleton { display: grid; gap: 14px; }
.rep-skeleton i { display: block; border-radius: var(--radius); background: linear-gradient(100deg, var(--sunken) 30%, color-mix(in srgb, var(--sunken) 55%, var(--surface)) 50%, var(--sunken) 70%); background-size: 220% 100%; animation: shimmer 1.3s linear infinite; }
.rep-skeleton .sk-hero { height: 150px; }
.rep-skeleton .sk-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.rep-skeleton .sk-row i { height: 84px; }
.rep-skeleton .sk-block { height: 260px; }
@keyframes shimmer { from { background-position: 120% 0; } to { background-position: -120% 0; } }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* A new page of a table: its rows rise in again. */
[data-rep-table].swap-in .table tbody tr { animation: row-in .35s cubic-bezier(.2, .8, .2, 1) backwards; }
[data-rep-table].swap-in .table tbody tr:nth-child(2) { animation-delay: 30ms; }
[data-rep-table].swap-in .table tbody tr:nth-child(3) { animation-delay: 60ms; }
[data-rep-table].swap-in .table tbody tr:nth-child(4) { animation-delay: 90ms; }
[data-rep-table].swap-in .table tbody tr:nth-child(5) { animation-delay: 120ms; }
[data-rep-table].swap-in .table tbody tr:nth-child(6) { animation-delay: 150ms; }
[data-rep-table].swap-in .table tbody tr:nth-child(7) { animation-delay: 180ms; }
[data-rep-table].swap-in .table tbody tr:nth-child(8) { animation-delay: 210ms; }
[data-rep-table].swap-in .table tbody tr:nth-child(9) { animation-delay: 240ms; }
[data-rep-table].swap-in .table tbody tr:nth-child(n+10) { animation-delay: 270ms; }

.rep-print { margin-left: auto; }

@media (max-width: 640px) {
    .dash-actions { width: 100%; gap: 10px; }
    .dash-switch { flex: 1 1 100%; order: 2; }
    .dash-switch a { min-width: 0; }
    .dash-actions .btn-primary { flex: 1 1 100%; order: 1; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
    .dash-pane.is-leaving, .dash-pane.is-entering, .dash-pane.is-entering *, [data-rep-table].swap-in .table tbody tr, .rep-skeleton i { animation: none !important; }
    .vt-thumb { transition: none; }
}
@media print { .dash-switch, .dash-actions { display: none; } .dash-pane.is-entering, .dash-pane.is-entering * { animation: none !important; } }

/* Expenses: a one-line add form above the list. */
.exp-add { padding: 18px 20px; margin-bottom: 18px; }
.exp-fields { display: grid; grid-template-columns: 170px minmax(0, 1.2fr) 150px minmax(0, 1.6fr); gap: 12px 16px; align-items: start; }
.exp-fields .field { margin: 0; }
.exp-add-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 14px; flex-wrap: wrap; }
.exp-add-foot .rep-fine { margin: 0; }
.exp-kinds { margin-bottom: 14px; }
.chip i { font-style: normal; }
@media (max-width: 860px) { .exp-fields { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .exp-fields { grid-template-columns: 1fr; } .exp-add-foot .btn { width: 100%; justify-content: center; } }
.rep-calc-sub td { font-weight: 600; border-bottom: 1px solid var(--rule-2); }
.rep-edit { margin-left: 6px; font-size: 12.5px; font-weight: 500; }
.form.exp-add { max-width: none; }

/* A view that was already shown only fades back in: it is not display:none while away, so nothing inside replays. */
.dash-pane.is-fading { position: relative; z-index: 1; animation: pane-in .28s ease-out both; }
/* Content swapped in a view that is already showing (a new period, or the report replacing its placeholder):
   nothing fades out and in; the numbers count up, the bars grow and the chart draws, in place. */
.dash-pane.is-updated .rep-bar i { animation: bar-grow .7s cubic-bezier(.2, .8, .2, 1) backwards; }
/* When the report cannot be fetched: say so, and offer to try again. The page is never reloaded for it. */
.rep-error { display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; padding: 14px 18px; margin-bottom: 16px; border: 1px solid var(--bad); border-radius: var(--radius); background: var(--bad-soft); color: var(--bad); }
.rep-error span { color: var(--muted); font-size: 13px; }
.rep-error .btn { margin-left: auto; }
@media (prefers-reduced-motion: reduce) { .dash-pane.is-fading, .dash-pane.is-updated .rep-bar i { animation: none !important; } }

/* Section tabs: while the next page is fetched, what is below them is dimmed; the tab bar stays as it is. */
.content > .subnav { position: relative; }
.content.is-soft-loading > :not([data-soft-nav]) { opacity: .5; transition: opacity .15s; pointer-events: none; }

/* The crop step: a frame the picture is moved and zoomed inside; what is in the frame is what is saved. */
.uploader[data-crop] .uploader-preview { width: 112px; height: 84px; }
.dialog.cropper { max-width: 440px; }
.cropper > p { margin-bottom: 14px; }
.crop-stage { position: relative; width: 100%; aspect-ratio: 4 / 3; max-height: 62vh; margin-inline: auto; overflow: hidden; border-radius: 12px; background: var(--sunken); touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; }
.crop-stage.is-grabbing { cursor: grabbing; }
.crop-stage img { position: absolute; left: 0; top: 0; max-width: none; transform-origin: 0 0; pointer-events: none; -webkit-user-drag: none; }
.crop-stage::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; box-shadow: inset 0 0 0 1px rgb(0 0 0 / .12);
    background: linear-gradient(90deg, transparent calc(33.33% - .5px), rgb(255 255 255 / .45) 33.33%, transparent calc(33.33% + .5px), transparent calc(66.66% - .5px), rgb(255 255 255 / .45) 66.66%, transparent calc(66.66% + .5px)),
                linear-gradient(transparent calc(33.33% - .5px), rgb(255 255 255 / .45) 33.33%, transparent calc(33.33% + .5px), transparent calc(66.66% - .5px), rgb(255 255 255 / .45) 66.66%, transparent calc(66.66% + .5px)); }
.crop-stage:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.crop-tools { display: flex; align-items: center; gap: 14px; margin-top: 14px; }
.crop-tools input[type=range] { flex: 1; min-width: 0; accent-color: var(--ink); }
.crop-shapes { display: inline-flex; gap: 4px; flex: none; }
.crop-shapes .btn[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
@media (max-width: 460px) { .cropper .dialog-actions { flex-wrap: wrap; } .cropper .dialog-actions .btn-primary { order: -1; flex: 1 0 100%; } }
.uploader-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.uploader-actions .btn { margin: 0; }
.uploader-actions button.btn { display: inline-flex; align-items: center; gap: 6px; }
.uploader-actions .icon { width: 15px; height: 15px; }
.uploader-actions button.btn:disabled { opacity: .6; cursor: progress; }
/* The ShelfBill logo comes in a light-page and a dark-page version; the one that suits the theme shows. */
.logo-lockup { display: inline-flex; align-items: center; line-height: 0; }
.logo-lockup img { height: 30px; width: auto; display: block; }
:root[data-theme="dark"] .logo-on-light, :root:not([data-theme="dark"]) .logo-on-dark { display: none; }
.brand .logo-lockup { margin-left: -2px; }

/* The sidebar logo: centred and larger, and it moves. The receipt "prints" down and the name slides in when you
   arrive (once per browser session: theme.js sets data-logo="seen" afterwards); every few seconds the receipt
   flutters like it hangs from a hook; and it flutters faster when you point at it. */
.side .brand { justify-content: center; padding: 6px 0 2px; }
.side .brand .logo-lockup { margin-left: 0; }
.side .brand .logo-lockup img { height: 42px; }
.logo-anim { display: inline-grid; }
.logo-anim .logo-layer { grid-area: 1 / 1; display: block; line-height: 0; }
.logo-anim .logo-mark img { transform-origin: 17% 2%; animation: logo-flutter 9s ease-in-out 2.4s infinite; }
.logo-anim .logo-mark { animation: logo-print .85s cubic-bezier(.2, .7, .2, 1) backwards; }
.logo-anim .logo-word { animation: logo-word-in .6s cubic-bezier(.2, .7, .2, 1) .45s backwards; transition: transform .25s ease; }
.brand:hover .logo-anim .logo-word { transform: translateX(2px); }
.brand:hover .logo-anim .logo-mark img { animation: logo-flutter-fast .9s ease-in-out; }
:root[data-logo="seen"] .logo-anim .logo-mark, :root[data-logo="seen"] .logo-anim .logo-word { animation: none; }
@keyframes logo-print { from { clip-path: inset(0 0 100% 0); transform: translateY(-6px); } to { clip-path: inset(0 0 0 0); transform: none; } }
@keyframes logo-word-in { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }
@keyframes logo-flutter {
    0%, 38%, 100% { transform: rotate(0); }
    6% { transform: rotate(4deg); } 14% { transform: rotate(-3deg); } 22% { transform: rotate(1.8deg); } 30% { transform: rotate(-.8deg); }
}
@keyframes logo-flutter-fast { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(5deg); } 45% { transform: rotate(-4deg); } 70% { transform: rotate(2deg); } }
@media (prefers-reduced-motion: reduce) {
    .logo-anim .logo-layer, .logo-anim .logo-mark img { animation: none !important; transition: none !important; }
    .brand:hover .logo-anim .logo-word { transform: none; }
}
.brand .brand-tag { margin-left: 8px; align-self: center; font-size: 11.5px; color: var(--muted); }
.auth-brand .logo-lockup img { height: 34px; }

/* Import menu */
.imp { display: grid; gap: 16px; max-width: 880px; }
.imp-step { padding: 18px 20px; display: grid; gap: 12px; justify-items: start; }
.imp-step h2 { font-size: 15px; font-weight: 600; display: flex; align-items: center; gap: 10px; }
.imp-step form { width: 100%; }
.imp-num { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--ink); color: var(--bg); font-size: 12px; font-weight: 600; }
.imp-alert { width: 100%; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--bad-soft); color: var(--bad); font-size: 13.5px; }
.imp-alert ul { margin: 8px 0 0; padding-left: 0; list-style: none; display: grid; gap: 4px; color: var(--ink); }
.imp-row { display: inline-block; min-width: 56px; font-weight: 600; color: var(--bad); }
.imp-cols { font-size: 13.5px; }
.imp-cols td:first-child { white-space: nowrap; }
.imp-mode { padding: 12px 14px; margin-bottom: 14px; border: 1px solid var(--rule-2); border-radius: var(--radius-sm); background: var(--sunken); display: grid; gap: 8px; }
.imp-stats { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.imp-stats div { display: grid; padding: 10px 16px; min-width: 96px; border: 1px solid var(--rule); border-radius: var(--radius-sm); background: var(--surface); }
.imp-stats b { font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
.imp-stats span { font-size: 12px; color: var(--muted); }
.imp-stats .is-bad b { color: var(--bad); }
.imp-note { margin: 0 0 10px; font-size: 13px; color: var(--muted); }
.imp-note--bad { color: var(--bad); }
.imp-tag { display: inline-block; margin: 0 6px 4px 6px; padding: 1px 8px; border-radius: 999px; background: var(--sunken); color: var(--ink); }
.imp-table td { vertical-align: top; }
.imp-price { display: inline-block; margin: 0 12px 2px 0; color: var(--muted); font-size: 13px; white-space: nowrap; }
.imp-price b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.imp-skip td, .imp-same td { opacity: .65; }
.imp-error td { background: var(--bad-soft); }
.imp-confirm { display: flex; justify-content: flex-end; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.imp-confirm .imp-note { flex: 1 1 100%; margin: 0; text-align: right; }

/* Import menu: pictures, and the Export menu */
.imp-name { display: flex; align-items: center; gap: 10px; }
.imp-thumb { width: 36px; height: 36px; flex: none; border-radius: 8px; object-fit: cover; background: var(--sunken); }
.imp-thumb--none { display: inline-block; border: 1px dashed var(--rule-2); background: transparent; }
.pop--menu > summary { list-style: none; cursor: pointer; }
.pop--menu > summary::-webkit-details-marker { display: none; }
.pop-body--menu { flex-direction: column; gap: 2px; padding: 6px; min-width: 250px; left: 0; top: 42px; }
.pop-body--menu a { display: grid; gap: 1px; padding: 9px 12px; border-radius: var(--radius-sm); color: var(--ink); text-decoration: none; }
.pop-body--menu a:hover { background: var(--sunken); }
.pop-body--menu small { color: var(--muted); font-size: 12px; }

/* The notice about the trial or the plan's end, at the top of every page of the app. */
.sub-notice { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 0 0 16px; padding: 10px 14px; border-radius: var(--radius-sm); background: var(--sunken); font-weight: 500; }
.sub-notice--warn { background: var(--warn-soft); color: var(--warn); }
.sub-notice--bad { background: var(--bad-soft); color: var(--bad); }

/* --- Phone boxes (phone_field.js): red with a reason while wrong, green once it is a good number -------- */
input[data-digits] { transition: border-color .2s, box-shadow .2s; }
input[data-digits].is-invalid { border-color: var(--bad); box-shadow: 0 0 0 3px var(--bad-soft); }
input[data-digits].is-valid { border-color: var(--ok); }
.field-error { display: block; margin-top: 5px; color: var(--bad); font-size: 12.5px; animation: field-error-in .2s ease both; }
.field-error[hidden] { display: none; }
@keyframes field-error-in { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .field-error { animation: none; } }

/* --- Items added to an open table order (customer, or a friend through the share link) -------------- */
.additions { margin-bottom: 14px; padding: 12px 14px; border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 12px; background: var(--accent-soft); }
.additions h3 { margin: 0 0 6px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.additions ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.additions li b { display: block; font-weight: 600; }
.additions small { color: var(--muted); }

.table-waiting { margin: 0 0 8px; font-size: 13px; color: var(--muted); }
.table-waiting a { font-weight: 600; }

/* --- The signed-in person in the sidebar: ONE card. The picture wears a badge with the plan; hovering the card lifts a tray with
   the full plan chip, the theme switch and log out. Clicking the card opens their profile. ---------------------------- */
.me--card { display: block; }
.me-card { position: relative; border: 1px solid var(--rule); border-radius: 14px; transition: background .2s, border-color .2s, box-shadow .2s; }
.me-card:hover, .me-card:has(:focus-visible) { background: var(--sunken); border-color: var(--rule-2); box-shadow: 0 6px 16px rgba(0, 0, 0, .08); }
.me-link {
    display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 10px 14px 10px; border: 0; background: none; color: inherit; font: inherit; text-align: left;
    cursor: pointer; border-radius: 14px; transition: transform .2s;
}
.me-link:active { transform: scale(.98); }
.me-link:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.me-pic { position: relative; flex: none; }
.me-card .avatar { width: 36px; height: 36px; font-size: 14px; position: relative; background: var(--accent-soft); color: var(--accent); transition: transform .25s cubic-bezier(.2, .9, .3, 1.3); }
.me-card:hover .avatar { transform: scale(1.05); }
/* A thin ring turns round the picture all the time, and pings a few times when the page opens, so it reads as "tap me". */
.me-card .avatar::before {
    content: ""; position: absolute; inset: -4px; border-radius: 50%; background: conic-gradient(from 0deg, var(--accent), transparent 55%, var(--accent));
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px)); mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px));
    opacity: .55; animation: me-spin 7s linear infinite; transition: opacity .2s;
}
.me-card .avatar::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--accent); opacity: 0; animation: me-ping 1.8s ease-out 1.2s 3; }
.me-card:hover .avatar::before { opacity: 1; animation-duration: 2.2s; }
.me-card .me-text b { font-size: 13.5px; font-weight: 600; }
.me-go { flex: none; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; color: var(--muted); background: var(--sunken); transition: background .2s, color .2s, transform .2s; animation: me-nudge 4s ease-in-out 2s infinite; }
.me-card:hover .me-go { background: var(--surface); }
.me-go .icon { width: 14px; height: 14px; }
.me-link:hover .me-go, .me-link:focus-visible .me-go { background: var(--accent); color: #fff; transform: translateX(2px); animation: none; }

/* The plan, worn on the picture. */
.me-badge {
    position: absolute; left: 50%; bottom: -9px; transform: translateX(-50%); max-width: 56px; height: 15px; padding: 0 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    border-radius: 999px; font-family: inherit; font-size: 9px; font-weight: 700; line-height: 15px; font-style: normal; letter-spacing: .05em; text-transform: uppercase; box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
    background: var(--surface); color: var(--ink); border: 1px solid var(--rule-2); animation: plan-in .55s cubic-bezier(.2, .9, .3, 1.3) .3s both; transition: transform .25s cubic-bezier(.2, .9, .3, 1.3);
}
.me-card:hover .me-badge { transform: translateX(-50%) translateY(-1px) scale(1.08); }
.me-badge--free { background: var(--ok-soft); border-color: transparent; color: var(--ok); }
.me-badge--trial { background: var(--warn-soft); border-color: transparent; color: var(--warn); }
.me-badge--ended { background: var(--bad-soft); border-color: transparent; color: var(--bad); }
.me-badge--pro { background: linear-gradient(135deg, #ff9a5a, var(--accent)); border-color: transparent; color: #fff; }

/* The tray: rises from the top edge of the card while it is hovered (or has the keyboard). */
.me-tray {
    position: absolute; left: -1px; right: -1px; bottom: 100%; padding-bottom: 8px; z-index: 5; opacity: 0; visibility: hidden; transform: translateY(8px) scale(.97); transform-origin: bottom center;
    transition: opacity .16s, transform .22s cubic-bezier(.2, .9, .3, 1.2), visibility 0s .22s;
}
.me-card:hover .me-tray, .me-card:has(:focus-visible) .me-tray { opacity: 1; visibility: visible; transform: none; transition-delay: .12s, .12s, 0s; }
.me-tray-in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 8px; border: 1px solid var(--rule-2); border-radius: 16px; background: var(--surface); box-shadow: 0 14px 34px rgba(0, 0, 0, .28); }
.me-tray-in > *, .me-acts > * { opacity: 0; transform: translateY(6px); transition: opacity .2s, transform .25s cubic-bezier(.2, .9, .3, 1.2); }
.me-card:hover .me-tray-in > *, .me-card:has(:focus-visible) .me-tray-in > *, .me-card:hover .me-acts > *, .me-card:has(:focus-visible) .me-acts > * { opacity: 1; transform: none; }
.me-card:hover .me-tray-in > :nth-child(2), .me-card:has(:focus-visible) .me-tray-in > :nth-child(2) { transition-delay: .06s; }
.me-plan { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; padding: 6px 6px 6px 6px; border-radius: 10px; text-decoration: none; color: var(--muted); font-size: 12px; transition: background .2s, opacity .2s, transform .25s; }
.me-plan:hover { background: var(--sunken); color: var(--ink); }
.me-plan .plan-chip { animation: none; }
.me-manage { display: inline-flex; align-items: center; flex: none; }
.me-manage .icon { width: 13px; height: 13px; transition: transform .2s; }
.me-plan:hover .me-manage .icon { transform: translateX(3px); }
.me-acts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.me-acts form { margin: 0; display: contents; }
.me-act {
    display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; height: 34px; padding: 0 8px; border: 1px solid var(--rule); border-radius: 10px; background: none; color: var(--ink);
    font: inherit; font-size: 12.5px; font-weight: 500; cursor: pointer; transition: background .2s, color .2s, border-color .2s, opacity .2s, transform .25s;
}
.me-act:hover { background: var(--sunken); border-color: var(--rule-2); }
.me-act--out:hover { background: var(--bad-soft); color: var(--bad); border-color: transparent; }
.me-act .icon { width: 16px; height: 16px; }
.me-act:active { transform: scale(.96); }

.plan-chip {
    position: relative; display: inline-flex; align-items: center; gap: 6px; max-width: 100%; height: 24px; padding: 0 10px 0 8px; overflow: hidden; border: 1px solid var(--rule-2); border-radius: 999px;
    background: var(--sunken); color: var(--ink); font-size: 11.5px; font-weight: 600; line-height: 1; white-space: nowrap; transition: transform .2s, box-shadow .2s;
    animation: plan-in .55s cubic-bezier(.2, .9, .3, 1.3) .2s both;
}
.plan-chip b { font-weight: 600; }
.plan-chip em { font-style: normal; font-weight: 500; opacity: .75; }
.plan-chip .icon { width: 12px; height: 12px; flex: none; }
.plan-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.plan-link:hover .plan-chip, .plan-link:focus-visible .plan-chip { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 0, 0, .12); }
.plan-chip--base { color: var(--muted); }
.plan-chip--base b { color: var(--ink); }
.plan-chip--free { background: var(--ok-soft); border-color: transparent; color: var(--ok); }
.plan-chip--trial { background: var(--warn-soft); border-color: transparent; color: var(--warn); }
.plan-chip--trial .plan-dot, .plan-chip--ended .plan-dot { animation: plan-pulse 1.8s ease-out infinite; }
.plan-chip--ended { background: var(--bad-soft); border-color: transparent; color: var(--bad); }
.plan-chip--pro { background: linear-gradient(135deg, #ff9a5a, var(--accent)); border-color: transparent; color: #fff; }
.plan-chip--pro .icon { animation: plan-twinkle 2.6s ease-in-out infinite; }
.plan-chip--pro::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .45) 50%, transparent 65%); transform: translateX(-120%); animation: plan-sheen 4.5s ease-in-out 1.5s infinite; }
@keyframes me-spin { to { transform: rotate(360deg); } }
@keyframes me-ping { 0% { transform: scale(.9); opacity: .7; } 100% { transform: scale(1.5); opacity: 0; } }
@keyframes me-nudge { 0%, 85%, 100% { transform: translateX(0); } 92% { transform: translateX(3px); } }
@keyframes plan-in { from { opacity: 0; transform: translateY(6px) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes plan-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 55%, transparent); } 70%, 100% { box-shadow: 0 0 0 6px transparent; } }
@keyframes plan-twinkle { 0%, 100% { transform: scale(1) rotate(0); } 50% { transform: scale(1.25) rotate(25deg); } }
@keyframes plan-sheen { 0%, 60% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
@media (prefers-reduced-motion: reduce) {
    .me-card, .me-link, .me-card .avatar, .me-card .avatar::before, .me-card .avatar::after, .me-go, .me-badge, .me-tray, .me-tray-in > *, .me-acts > *, .plan-chip, .plan-chip .icon, .plan-chip::after, .plan-dot { animation: none !important; transition: none !important; }
}

/* The same badge in the phone menu and in the profile window. */
.sheet-who .plan-chip, .pm-sub .plan-chip { height: 22px; }
.plan-link { min-width: 0; text-decoration: none; border-radius: 999px; }
.sheet-who .plan-link { margin-right: 0; }
.pm-sub .plan-link { margin-right: 0; }

/* --- Profile window: opens from the name at the bottom of the sidebar -------------------------------- */
.pm {
    width: calc(100% - 32px); max-width: 420px; padding: 24px 22px 20px;
    border: 1px solid var(--rule-2); border-radius: 20px; background: var(--surface); color: var(--ink);
    box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
}
.pm[open] { animation: pm-in .32s cubic-bezier(.2, .9, .3, 1.15) both; }
.pm::backdrop { background: rgba(17, 17, 16, .55); backdrop-filter: blur(3px); }
.pm[open]::backdrop { animation: pm-fade .25s ease both; }
.pm[open] > :not(.pm-x) { animation: pm-rise .45s calc(.06s + var(--n, 0) * .06s) ease both; }
.pm > :nth-child(2) { --n: 1; } .pm > :nth-child(3) { --n: 2; } .pm > :nth-child(4) { --n: 3; } .pm > :nth-child(5) { --n: 4; }
/* Sticky, not absolute: on a short screen the window scrolls and the × has to stay in view. It takes no room of its own (negative margins), and sits above the sections that slide in. */
.pm-x { position: sticky; z-index: 2; top: -12px; margin: -12px -10px -34px auto; width: 34px; height: 34px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--sunken); color: var(--muted); cursor: pointer; transition: transform .2s, color .2s; }
.pm-x:hover { color: var(--ink); transform: rotate(90deg); }
.pm-x .icon { width: 17px; height: 17px; }

.pm-hero { display: grid; justify-items: center; text-align: center; gap: 6px; }
.pm-avatar { position: relative; width: 76px; height: 76px; display: grid; place-items: center; margin-bottom: 4px; }
.pm[open] .pm-avatar { animation: pm-pop .6s .08s cubic-bezier(.3, 1.4, .5, 1) both; }
.pm-avatar b { width: 66px; height: 66px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #fff; font-size: 28px; font-weight: 600; }
.pm-avatar b.is-pop { animation: pm-letter .35s cubic-bezier(.3, 1.6, .5, 1); }
.pm-ring {
    position: absolute; inset: 0; border-radius: 50%;
    background: conic-gradient(from 0deg, var(--accent), transparent 38%, var(--accent) 62%, transparent 88%);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
    animation: pm-spin 7s linear infinite;
}
.pm-hero h2 { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; max-width: 100%; overflow-wrap: anywhere; }
.pm-sub { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; color: var(--muted); font-size: 13.5px; }

.pm-facts { list-style: none; margin: 18px 0 0; padding: 4px 14px; background: var(--sunken); border-radius: 14px; }
.pm-facts li { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 10px 0; font-size: 13.5px; }
.pm-facts li + li { border-top: 1px solid var(--rule); }
.pm-facts .icon { width: 16px; height: 16px; color: var(--muted); }
.pm-facts span { color: var(--muted); }
.pm-facts b { font-weight: 500; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.pm-form { margin-top: 6px; }
.pm-names { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.pm .field label em { display: none; }
.pm-save { position: relative; overflow: hidden; width: 100%; justify-content: center; margin-top: 16px; transition: transform .15s, background .25s; }
.pm-save::after {
    content: ""; position: absolute; inset: 0; transform: translateX(-120%);
    background: linear-gradient(100deg, transparent 30%, color-mix(in srgb, var(--bg) 30%, transparent) 50%, transparent 70%);
    animation: pm-sheen 5s 1.4s ease-in-out infinite;
}
.pm-save:active { transform: scale(.98); }
.pm-save.is-saving { opacity: .7; pointer-events: none; }
.pm-save.is-done { background: var(--ok); border-color: var(--ok); color: #fff; }
.pm-save.is-done .icon { animation: pm-letter .4s ease both; }

.pm-foot { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.pm-foot form { display: contents; }
.pm-foot .btn { justify-content: center; }
.pm-out { color: var(--bad); }
.pm-out:hover { background: var(--bad-soft); border-color: color-mix(in srgb, var(--bad) 35%, transparent); }

@keyframes pm-in { from { opacity: 0; transform: translateY(14px) scale(.95); } to { opacity: 1; transform: none; } }
@keyframes pm-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pm-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes pm-pop { 0% { opacity: 0; transform: scale(.4) rotate(-20deg); } 70% { transform: scale(1.08); } 100% { opacity: 1; transform: none; } }
@keyframes pm-letter { 0% { transform: scale(.7); } 60% { transform: scale(1.14); } 100% { transform: scale(1); } }
@keyframes pm-spin { to { transform: rotate(360deg); } }
@keyframes pm-sheen { 0%, 55% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }

/* On a phone it is a sheet from the bottom, like the menu. */
@media (max-width: 560px) {
    .pm { width: 100%; max-width: none; margin: auto auto 0; border-radius: 22px 22px 0 0; border-bottom: 0; padding-bottom: calc(20px + env(safe-area-inset-bottom)); }
    .pm[open] { animation: pm-up .34s cubic-bezier(.2, .9, .3, 1) both; }
}
@keyframes pm-up { from { transform: translateY(100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) {
    .pm[open], .pm[open]::backdrop, .pm[open] > *, .pm[open] .pm-avatar, .pm-ring, .pm-save::after, .pm-avatar b, .pm-save.is-done .icon { animation: none !important; }
}

/* --- Change password ---------------------------------------------------------------------------------- */
.pc {
    position: relative; overflow: hidden; isolation: isolate;
    padding: 26px 24px 22px; background: var(--surface); border: 1px solid var(--rule); border-radius: 16px;
    animation: pc-rise .55s ease both;
}
.pc::before { content: ""; position: absolute; z-index: -1; inset: 0; background: radial-gradient(110% 80% at 0% 0%, var(--accent-soft), transparent 60%); opacity: .8; }
.pc-head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 18px; }
.pc-head h1 { font-size: 19px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; }
.pc-head p { margin-top: 4px; color: var(--muted); font-size: 13.5px; }
.pc-ico { flex: none; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); animation: pc-pop .6s .1s cubic-bezier(.3, 1.4, .5, 1) both; }
.pc-ico svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.pc-shackle { transform-origin: 16px 10.5px; animation: pc-shackle 5s 1.2s ease-in-out infinite; }
.pc-errors { margin-bottom: 14px; animation: pc-shake .4s ease both; }
.pc .field { animation: pc-rise .5s ease both; }
.pc .field:nth-of-type(1) { animation-delay: .12s; }
.pc-new { animation: pc-rise .5s .2s ease both; }
.pc-new .field { animation: none; }

/* The strength bar and the checklist under the new password. */
.pc-meter { display: flex; align-items: center; gap: 10px; margin-top: 10px; min-height: 18px; }
.pc-bars { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.pc-bars i { height: 5px; border-radius: 4px; background: var(--rule); transition: background .3s, transform .3s; transform-origin: left; }
.pc-meter b { min-width: 48px; text-align: right; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.pc-meter[data-level="1"] i:nth-child(-n+1) { background: var(--bad); }
.pc-meter[data-level="2"] i:nth-child(-n+2) { background: var(--warn); }
.pc-meter[data-level="3"] i:nth-child(-n+3) { background: var(--ok); }
.pc-meter[data-level="4"] i:nth-child(-n+4) { background: var(--ok); }
.pc-meter[data-level="1"] b { color: var(--bad); }
.pc-meter[data-level="2"] b { color: var(--warn); }
.pc-meter[data-level="3"] b, .pc-meter[data-level="4"] b { color: var(--ok); }
.pc-rules { list-style: none; margin: 10px 0 14px; padding: 0; display: grid; gap: 6px; }
.pc-rules li { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--muted); transition: color .25s; }
.pc-tick { flex: none; position: relative; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--rule-2); transition: background .25s, border-color .25s, transform .25s; }
.pc-tick::after { content: ""; position: absolute; left: 4.5px; top: 2px; width: 4px; height: 7px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0); transition: transform .25s; }
.pc-rules li.is-ok { color: var(--ink); }
.pc-rules li.is-ok .pc-tick { background: var(--ok); border-color: var(--ok); animation: pc-tick .35s ease; }
.pc-rules li.is-ok .pc-tick::after { transform: rotate(45deg) scale(1); }
.pc-match { min-height: 18px; margin: 8px 0 0; font-size: 13px; color: var(--muted); }
.pc-match.is-ok { color: var(--ok); }
.pc-match.is-off { color: var(--bad); }
.pc-match:not(:empty) { animation: pc-rise .25s ease both; }
.pc-note { margin: 12px 0 0; font-size: 12.5px; color: var(--faint); }

.pc-actions { display: grid; gap: 10px; margin-top: 20px; }
.pc-save { position: relative; overflow: hidden; width: 100%; justify-content: center; padding-block: 13px; transition: transform .15s; }
.pc-save::after {
    content: ""; position: absolute; inset: 0; transform: translateX(-120%);
    background: linear-gradient(100deg, transparent 30%, color-mix(in srgb, var(--bg) 30%, transparent) 50%, transparent 70%);
    animation: pc-sheen 5s 1.6s ease-in-out infinite;
}
.pc-save:active { transform: scale(.98); }
.pc-save.is-saving { opacity: .7; pointer-events: none; }
.pc-cancel { width: 100%; justify-content: center; border-color: transparent; background: transparent; color: var(--muted); }
.pc-cancel:hover { color: var(--ink); background: var(--sunken); }

@keyframes pc-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes pc-pop { 0% { opacity: 0; transform: scale(.5) rotate(-12deg); } 70% { transform: scale(1.08); } 100% { opacity: 1; transform: none; } }
@keyframes pc-shackle { 0%, 70%, 100% { transform: none; } 78% { transform: translateY(-2.5px) rotate(-14deg); } 88% { transform: translateY(-2.5px) rotate(-14deg); } 94% { transform: none; } }
@keyframes pc-tick { 0% { transform: scale(.6); } 60% { transform: scale(1.2); } 100% { transform: scale(1); } }
@keyframes pc-shake { 20% { transform: translateX(-4px); } 40% { transform: translateX(4px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }
@keyframes pc-sheen { 0%, 55% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }
@media (prefers-reduced-motion: reduce) {
    .pc, .pc-ico, .pc-shackle, .pc .field, .pc-new, .pc-errors, .pc-save::after, .pc-match:not(:empty), .pc-rules li.is-ok .pc-tick { animation: none !important; }
}