/* Lovebee Central — app styles.
   Calm, warm-neutral, honey accent. Built for all-day internal use + clean print. */

:root {
    --bg:        #f6f5f1;
    --surface:   #ffffff;
    --surface-2: #fbfaf7;
    --border:    #e7e3da;
    --border-strong: #d9d3c6;
    --text:      #2b2925;
    --text-soft: #5f5a51;
    --text-mute: #8a8479;
    --placeholder: #ada597;
    --accent:    #c1801c;
    --accent-ink:#9a6412;
    --accent-bg: #fbefd8;
    --accent-bg-soft: #fdf6e9;
    --danger:    #b23b32;
    --danger-bg: #fbe9e7;
    --ok:        #3f7d4f;
    --ok-bg:     #e6f2e8;
    --info-bg:   #e9eef5;
    --info-ink:  #3c5a86;
    --purple:    #6b4b93;
    --purple-bg: #ece7f6;
    --radius:    9px;
    --radius-sm: 6px;
    --shadow:    0 1px 2px rgba(31, 28, 22, .04), 0 2px 8px rgba(31, 28, 22, .05);
    --sidebar-w: 272px;
    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

/* The [hidden] attribute must win over component display rules
   (e.g. .field-row { display: grid }) — the UA default can't. */
[hidden] { display: none !important; }

html, body {
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font);
    font-size: 15px;
    line-height: 1.5;
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
}

a { color: var(--accent-ink); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { margin: 0; font-weight: 650; letter-spacing: -0.01em; }

.muted { color: var(--text-mute); }

/* ---------- Base form controls (component rules below may override) ---------- */
input[type=text], input[type=email], input[type=password], input[type=number],
input[type=search], input[type=url], input[type=tel], select, textarea {
    font: inherit;
    font-size: 14px;
    padding: 9px 11px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    width: 100%;
}
input:focus, select:focus, textarea:focus {
    outline: 2px solid var(--accent-bg);
    border-color: var(--accent);
}
/* Placeholders (hints, examples, "e.g." text) must read as unmistakably not-
   entered-data — browsers don't reliably do this on their own. */
::placeholder {
    color: var(--placeholder);
    opacity: 1; /* Firefox dims its placeholder color by default; pin it so this color is the real result everywhere */
    font-style: italic;
}

/* ---------- App shell ---------- */
.app {
    display: grid;
    grid-template-columns: var(--sidebar-w) 1fr;
    min-height: 100vh;
}

.sidebar {
    background: var(--surface-2);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
}

.sidebar__brand {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 18px 18px 14px;
    font-size: 20px;
    letter-spacing: -0.5px;
    color: var(--text-soft);
}
.sidebar__brand strong { color: var(--text); font-weight: 700; }
.sidebar__mark { font-size: 19px; }
.sidebar__logo { width: 19px; height: 19px; object-fit: contain; flex-shrink: 0; }
/* The text sits a little low in its own line box (the box keeps room for
   descenders "Lovebee Central" doesn't use), so a box-centred logo looked
   ~1.5px high next to the capitals. Nudge it down to the letters' middle;
   in em so it tracks the brand font size. (2026-10-02) */
.sidebar__logo, .authcard__logo { transform: translateY(0.075em); }

.sidebar__nav {
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.navlink {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: var(--radius-sm);
    color: var(--text-soft);
    font-weight: 500;
}
.navlink:hover { background: rgba(0,0,0,.035); text-decoration: none; color: var(--text); }
.navlink.is-active { background: var(--accent-bg); color: var(--accent-ink); font-weight: 600; }
.navlink .ic { flex: none; opacity: .9; }
.navbadge {
    margin-left: auto; flex: none;
    min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
    background: var(--danger); color: #fff; font-size: 11px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}

.navgroup__label {
    margin-top: 22px;
    padding: 22px 12px 5px;
    border-top: 1px solid var(--border);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--text-mute);
}

.main { display: flex; flex-direction: column; min-width: 0; }

/* Menu search (2026-11-05): above Dashboard, filters the menu as you type */
.navsearch {
    position: relative;
    margin: 0 10px 4px;
    display: flex;
    align-items: center;
}
.navsearch > .ic {
    position: absolute; left: 10px; pointer-events: none;
    width: 15px; height: 15px; color: var(--text-mute);
}
.navsearch input {
    width: 100%;
    padding: 7px 28px 7px 32px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    font: inherit; font-size: 14px;
    color: var(--text);
}
.navsearch input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }
.navsearch input::-webkit-search-cancel-button { display: none; }
.navsearch__key {
    position: absolute; right: 8px;
    font: 600 11px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    color: var(--text-mute);
    border: 1px solid var(--border); border-radius: 4px;
    padding: 2px 5px; background: var(--surface-2);
    pointer-events: none;
}
.navsearch input:focus + .navsearch__key,
.navsearch input:not(:placeholder-shown) + .navsearch__key { display: none; }
.sidebar__nav.is-searching .navgroup__label { margin-top: 10px; padding-top: 12px; }
.sidebar__nav.is-searching .navgroup__label.is-first { margin-top: 0; padding-top: 4px; border-top: 0; }
.navlink[hidden], .navgroup__label[hidden] { display: none; }
.navsearch__none { margin: 6px 12px; font-size: 13px; color: var(--text-mute); }

.topbar {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 56px;
    padding: 0 24px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 20;
}
/* flex/min-width/overflow so a long page title (e.g. a Resources page name)
   truncates with an ellipsis instead of wrapping and spilling out of the
   topbar's fixed height — most titles are short enough this never shows. */
.topbar__title {
    font-size: 15px; font-weight: 600; color: var(--text-soft); margin: 0;
    flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Account / Help / Sign out — moved out of the sidebar to the top right per
   Tim's ask, so the sidebar is nav-only. */
.topbar__actions { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.topbar__divider { color: var(--border-strong); font-size: 13px; }
.topbar__help {
    display: flex; align-items: center; gap: 6px;
    color: var(--text-soft); font-size: 13px; font-weight: 500;
}
.topbar__help:hover, .topbar__help.is-active { color: var(--text); text-decoration: none; }
.topbar__help .ic { width: 18px; height: 18px; }
.topbar__who {
    display: flex; align-items: baseline; gap: 6px;
    color: inherit; text-decoration: none;
    padding: 5px 8px; margin: -5px -8px; border-radius: var(--radius-sm);
}
.topbar__who:hover { background: rgba(0,0,0,.04); text-decoration: none; }
.who__name { font-weight: 600; font-size: 13px; }
.who__role { font-size: 12px; color: var(--text-mute); }

.topbar__toggle {
    border: 0; background: transparent; font-size: 20px; cursor: pointer; color: var(--text-soft);
    padding: 2px 6px; margin-left: -6px; border-radius: var(--radius-sm); line-height: 1;
}
.topbar__toggle:hover { background: rgba(0,0,0,.05); color: var(--text); }
.topbar__toggle .ic { width: 21px; height: 21px; display: block; }
/* Which face the button shows: a panel icon with an arrow in (hide) or out
   (show) on a computer screen, the usual ☰ on a phone (see Responsive). */
.topbar__toggle-phone, .topbar__toggle-hide, .topbar__toggle-show { display: none; }
/* Menu collapsed with the toggle (computer screens only; a phone keeps the
   slide-over menu below). The page then gets the whole window width, cap and all. */
@media (min-width: 861px) {
    .topbar__toggle-hide { display: block; }
    html.nav-collapsed .topbar__toggle-hide { display: none; }
    html.nav-collapsed .topbar__toggle-show { display: block; }
    html.nav-collapsed .app { grid-template-columns: 1fr; }
    html.nav-collapsed .sidebar { display: none; }
    html.nav-collapsed .content { max-width: none; }
}

.content { padding: 26px 24px 60px; max-width: 1200px; width: 100%; }
.content--wide { max-width: none; } /* wide data sheets (cost of goods) — use the full window, not a fixed cap */

/* ---------- Page header ---------- */
.page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}
.page-head__title { font-size: 22px; }
.page-head__date { margin: 4px 0 0; color: var(--accent); font-size: 20px; font-weight: 700; }
.page-head__sub { margin: 4px 0 0; color: var(--text-mute); font-size: 14px; }

/* ---------- Stat row ---------- */
.stat-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 14px;
    margin-bottom: 22px;
}
.stat {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px 18px;
    box-shadow: var(--shadow);
}
.stat__value { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; }
.stat__label { font-size: 12.5px; color: var(--text-mute); margin-top: 2px; }

/* ---------- Card ---------- */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
}
.card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
}
.card__head h3 { font-size: 15px; }
.card__body { padding: 16px 18px; }

/* ---------- Table ---------- */
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th, .table td {
    text-align: left;
    padding: 11px 18px;
    border-bottom: 1px solid var(--border);
}
.table th {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-mute);
    font-weight: 600;
    background: var(--surface-2);
}
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover td { background: var(--accent-bg-soft); }

/* Editable-row tables (inline input/select per row, a Remove checkbox, one
   Save changes button) have no natural minimum width the way a plain data
   table does — the inputs/selects just shrink to fit .table-wrap instead of
   forcing it to overflow and scroll, so on a phone every column gets
   crushed into an unreadable sliver. Below the breakpoint, .table--stack
   turns each row into its own labeled card (one field per line) instead of
   relying on horizontal scroll. Opt-in modifier, not the base .table — most
   tables in this app are read-only data grids that scroll horizontally
   just fine as-is and shouldn't restack. Each <td> needs a data-label
   attribute (the column's header text) for the ::before label to show. */
@media (max-width: 640px) {
    .table--stack thead { display: none; }
    .table--stack, .table--stack tbody, .table--stack tr, .table--stack td { display: block; width: 100%; }
    .table--stack tbody tr {
        border: 1px solid var(--border); border-radius: var(--radius);
        margin-bottom: 12px; padding: 4px 14px; background: var(--surface);
    }
    .table--stack tbody tr:last-child { margin-bottom: 0; }
    .table--stack tbody tr:hover td { background: none; }
    .table--stack td {
        display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0;
    }
    .table--stack td:last-child { border-bottom: 0; }
    .table--stack td::before {
        content: attr(data-label);
        flex: 0 0 auto; font-size: 12px; font-weight: 600; color: var(--text-mute);
        text-transform: uppercase; letter-spacing: .03em;
    }
    .table--stack td > input, .table--stack td > select { flex: 1; min-width: 0; width: auto; }
    /* Inventory's Product cell isn't a label+value row like the rest — it's
       the card's title, so it opts out of the ::before label + space-between
       layout and instead shows .cell-title__full (the row's full name,
       product + variant, unconditionally — unlike the desktop columns this
       repeats per row since each stacked row is now its own standalone
       card with nothing above it to group it under). */
    .table--stack .cell-title { display: block; padding: 12px 0 8px; border-bottom: 1px solid var(--border); }
    .table--stack .cell-title::before { content: none; }
    .table--stack .cell-title > a:not(.cell-title__full), .table--stack .cell-title > .cell-sub { display: none; }
    .table--stack .cell-title__full { display: block; }
    .table--stack.table--inventory td:not(:first-child) { border-left: 0; }
}

/* ---------- Pills ---------- */
.pill {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    background: var(--surface-2);
    border: 1px solid var(--border-strong);
    color: var(--text-soft);
}
.pill--active         { background: var(--ok-bg);      border-color: #bcdcc4; color: var(--ok); }
.pill--in_development  { background: var(--info-bg);    border-color: #c6d3e5; color: #3c5a86; }
.pill--seasonal        { background: var(--accent-bg);  border-color: #ecd39a; color: var(--accent-ink); }
.pill--discontinued    { background: #efece8;          border-color: var(--border-strong); color: var(--text-mute); }
.pill--draft           { background: #efece8;          border-color: var(--border-strong); color: var(--text-mute); }
.pill--sent            { background: var(--info-bg);    border-color: #c6d3e5; color: #3c5a86; }
.pill--paid            { background: var(--ok-bg);      border-color: #bcdcc4; color: var(--ok); }
/* Formulation channel — Tim's ask (2026-09-23): needs to read as obviously
   as status, so it's the same bold-pill treatment, just its own class
   names and colors so the two never look like the same kind of tag. */
.pill--retail          { background: var(--accent-bg);  border-color: #ecd39a; color: var(--accent-ink); }
.pill--white_label     { background: var(--info-bg);    border-color: #c6d3e5; color: var(--info-ink); }
.pill--private_label   { background: var(--purple-bg);  border-color: #d6c7ea; color: var(--purple); }
.pill--wholesale       { background: #e3f0ef;          border-color: #b5d6d3; color: #2f6b66; } /* teal: green is Active */
.page-head__title .pill { vertical-align: middle; margin-right: 8px; font-size: 13px; }

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 9px 15px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-strong);
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    line-height: 1;
    transition: background .12s, border-color .12s;
}
.btn:hover { text-decoration: none; background: var(--surface-2); }
.btn--primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn--primary:hover { background: var(--accent-ink); border-color: var(--accent-ink); }
.btn--ghost { border-color: transparent; background: transparent; color: var(--text-soft); }
.btn--ghost:hover { background: rgba(0,0,0,.05); }
.btn--sm { padding: 6px 10px; font-size: 13px; }
.btn--block { width: 100%; }
.btn--danger { border-color: #e0bab5; background: var(--danger-bg); color: var(--danger); }
.btn--danger:hover { background: #f6ddda; }

.linkbtn {
    border: 0; background: none; padding: 2px 4px; cursor: pointer;
    font: inherit; font-size: 12px; color: var(--text-mute); text-decoration: underline;
}
.linkbtn:hover { color: var(--text); }
.linkbtn--del:hover { color: var(--danger); }

.page-head__actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
/* ‹ Prev / All … / Next › on a record's page: one joined control, set apart
   from that page's own action buttons (Print, Duplicate, Edit…) so browsing
   and doing don't read as one row of look-alike buttons (Tim, 2026-09-28). */
.pager {
    display: inline-flex; align-items: stretch; margin-right: 18px;
    border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
    background: var(--surface); overflow: hidden;
}
.pager__btn {
    display: flex; align-items: center; padding: 6px 12px; white-space: nowrap;
    font-size: 13px; font-weight: 600; color: var(--text-soft); text-decoration: none;
}
.pager__btn + .pager__btn { border-left: 1px solid var(--border); }
.pager__btn:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.pager__btn.is-disabled { color: var(--border-strong); cursor: default; }
.pager__btn.is-disabled:hover { background: none; color: var(--border-strong); }

/* ---------- Filters ---------- */
.filters {
    display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
    margin-bottom: 16px;
}
.filters select { width: auto; }
/* Extra breathing room above the inventory sheets' own filter box specifically
   — it tends to sit right under a print-tools card or a tab strip, close
   enough to read as part of that block rather than its own control. Scoped
   to this modifier rather than added to .filters itself, which sits right
   under a .page-head on several other (already fine) pages. */
.filters--inv { margin-top: 16px; }
.filters--cogs { margin: 0 0 12px; }
.table--inventory td.inv-run { white-space: nowrap; }
.table--inventory td.inv-run .cell-sub { display: block; white-space: normal; max-width: 14rem; }
.atr-product { font-weight: 600; margin: 0 0 12px; }
.er-bday { display: flex; gap: 6px; }
.er-bday select { flex: 1 1 auto; min-width: 0; }
.er-bday input { width: 5.5rem; flex: 0 0 auto; }
.atr-msg { margin: 4px 0 0; padding: 8px 10px; border-radius: 6px; font-size: 14px; }
.atr-msg.is-ok { background: #eaf4ec; color: #2d6a3e; }
.atr-msg.is-err { background: #fbeaea; color: #9b2c2c; }
@media print { .table--inventory .inv-run { display: none; } }
@media print { .filters--cogs { display: none; } }
.filters__search {
    position: relative; display: flex; align-items: center; flex: 1; min-width: 220px;
}
.filters__search .ic {
    position: absolute;
    left: 11px;
    top: 50%;
    width: 16px;
    height: 16px;
    transform: translateY(-50%);
    color: var(--text-mute);
    pointer-events: none;
}
.filters__search input { padding-left: 36px; }
.filters__check, .filters__sort { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--text-soft); white-space: nowrap; }
.card.is-stale { opacity: .5; pointer-events: none; transition: opacity .12s ease; }

/* ---------- Tables extra ---------- */
.table-wrap { overflow-x: auto; }
.table .num { text-align: right; }
.table .loc { text-align: center; }
/* The count box itself must line up column-wise regardless of how wide the
   current-count figure next to it is (500 vs 0 vs 250…). Wrapping the figure
   + box in one inline-flex group with a fixed-width, right-aligned figure
   slot gives the group a constant overall width, so centering it in the
   (still a normal table-cell) <td> lines the box up the same every row
   instead of the whole group re-centering per row. */
.inv-cell { display: inline-flex; align-items: center; gap: 12px; }
.inv-cell .fig-chip { min-width: 2.75rem; text-align: right; }
/* Raw materials' figure also carries a unit name (e.g. "17.5 Bucket"), so it
   needs a wider fixed slot than a bare number for the same alignment to hold. */
.inv-cell--unit .fig-chip { min-width: 6rem; }
/* Inventory: a physical rule between each location column (and before
   Total) — Tim wanted the columns visibly separated, not just spaced. */
.table--inventory th:not(:first-child), .table--inventory td:not(:first-child) { border-left: 1px solid var(--border-strong); }
.table th a { color: inherit; }
/* The column a table is sorted by stands out (Tim, 2026-10-30): its heading
   in the accent colour on a tinted cell with a bar underneath, the arrow in
   a small badge. (A tint down the whole column was too much.) */
.table th:has(> a.is-sorted), .table th.is-sorted-col {
    background: var(--accent-bg);
    color: var(--accent-ink);
    box-shadow: inset 0 -3px 0 var(--accent);
}
.table th a.is-sorted { color: var(--accent-ink); font-weight: 700; }
.sort-arrow {
    display: inline-flex; align-items: center; justify-content: center; vertical-align: -3px;
    width: 21px; height: 17px; margin-left: 3px;
    border-radius: 4px; background: var(--accent); color: #fff;
}
.sort-arrow svg { display: block; }
@media print {
    .table th:has(> a.is-sorted), .table th.is-sorted-col { background: none; box-shadow: none; }
    .sort-arrow { background: none; color: inherit; }
}
.tlink { font-weight: 400; } /* Not bold (Tim, 2026-10-04). */
.cell-sub { display: block; font-size: 12px; color: var(--text-mute); margin-top: 1px; }
.cell-title__full { display: none; }
.table .row-group th {
    background: var(--accent-bg-soft);
    font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
    color: var(--text-soft); padding-top: 10px;
}

/* ---------- Formulation ingredient rows ---------- */
.irows-table th, .irows-table td { white-space: nowrap; vertical-align: middle; }
.irows-table td { padding: 5px 8px; }
.irows-table input, .irows-table select { width: 100%; min-width: 0; }
.irows-table .irow__phase { width: 5rem; }
.irows-table .irow__name  { min-width: 16rem; white-space: normal; }
.irows-table .irow__qty   { width: 5.5rem; }
.irows-table .irow__qty input, .irows-table .irow__cost input { text-align: right; }
.irows-table .irow__unit  { width: 7rem; }
.irows-table .irow__unit select { padding-right: 22px; }
.irows-table .irow__cost  { width: 7.5rem; white-space: normal; }
.irows-table .irow__cost .cell-sub { white-space: nowrap; }
.irows-table .irow__note  { min-width: 10rem; white-space: normal; }
.irows-table .irow__del   { width: 2rem; text-align: center; }
.irows-table .irow__handle { width: 1.6rem; text-align: center; padding-right: 0 !important; }
.irows-table tfoot td { font-weight: 700; }
.irows-table tfoot output { font-variant-numeric: tabular-nums; }

/* ---------- Drag-to-reorder handles (ingredient rows, method steps) ---------- */
.drag-handle {
    display: inline-block; cursor: grab; touch-action: none;
    color: var(--text-mute); font-size: 15px; letter-spacing: -2px;
    padding: 4px 2px; user-select: none;
}
.drag-handle:active { cursor: grabbing; }
.irow.is-dragging, .step-row.is-dragging { opacity: .45; background: var(--accent-bg-soft); }
td.nowrap { white-space: nowrap; }
/* Packaging form: a box's length × width × height */
.box-dims { align-items: flex-end; flex-wrap: nowrap; gap: 8px; margin-top: 4px; }
.box-dims .field { flex: 0 1 110px; min-width: 0; }
.box-dims__x { padding-bottom: 10px; color: var(--text-mute); font-weight: 600; }
.cr-run tr.is-dragging td { opacity: .45; background: var(--accent-bg-soft); }

/* ---------- Formulation method: numbered steps editor ---------- */
.steps-editor { list-style: decimal; padding-left: 1.6rem; margin: 0 0 10px; }
.steps-editor .step-row { padding: 4px 0; margin-bottom: 2px; }
.steps-editor .step-row::marker { font-weight: 600; color: var(--text-soft); }
.steps-editor .step-row__inner { display: flex; align-items: flex-start; gap: 6px; }
.steps-editor .step-text { flex: 1; min-width: 0; resize: vertical; }
.steps { padding-left: 1.4rem; margin: 0; }
.steps li { padding: 3px 0; }

.thumb-col { width: 48px; padding-right: 0 !important; }
.thumb {
    width: 36px; height: 36px;
    border-radius: 6px;
    object-fit: cover;
    display: block;
    border: 1px solid var(--border);
    background: var(--surface-2);
}
.thumb--empty {
    background: repeating-linear-gradient(45deg, var(--surface-2), var(--surface-2) 4px, #f1eee8 4px, #f1eee8 8px);
}
.tag {
    display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 4px;
    font-size: 11px; font-weight: 600; background: var(--accent-bg); color: var(--accent-ink);
}
/* keep the status + compliance columns on one line; long category paths may wrap */
.table--catalog td:nth-child(6),
.table--catalog td:nth-child(7),
.table--catalog th:nth-child(6),
.table--catalog th:nth-child(7) { white-space: nowrap; }
.table--catalog td:nth-child(3) { min-width: 9rem; }

.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; background: var(--border-strong); vertical-align: middle; }
.dot--approved        { background: var(--ok); }
.dot--needs_attention { background: var(--danger); }
.dot--future_rework   { background: #c9962e; }
.dot--to_sort         { background: var(--border-strong); }

/* ---------- Product form ---------- */
.pform__grid { display: grid; grid-template-columns: 1fr 320px; gap: 18px; align-items: start; }
.pform__grid--single { grid-template-columns: 1fr; } /* no .pform__side on this form — don't reserve room for one */
.pform__main { display: flex; flex-direction: column; gap: 16px; }
.pform__side { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 72px; }
.pform__foot {
    margin-top: 18px; display: flex; gap: 10px;
    padding-top: 16px; border-top: 1px solid var(--border);
}
.pform__photo { max-width: 100%; border-radius: var(--radius-sm); border: 1px solid var(--border); margin-bottom: 8px; }
.field__hint { font-size: 12px; color: var(--text-mute); }
.field__err { color: var(--danger); font-weight: 600; font-size: 12px; margin-left: 6px; }
.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.danger-form { margin-top: 22px; }

.dim-pair { display: flex; align-items: center; gap: 6px; }
.dim-pair input { width: 72px; min-width: 0; }
.dim-pair__unit { font-size: 12px; color: var(--text-mute); }
.dim-pair__eq { color: var(--text-mute); }

/* ---------- Variant blocks ---------- */
.vcards { display: flex; flex-direction: column; gap: 14px; }
.vcard {
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    padding: 14px 16px 16px;
}
.vcard__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 10px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--border);
}
.vcard__default {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 13px; font-weight: 600; color: var(--text-soft); cursor: pointer;
}
.vcard__default input { width: auto; }
.vcard__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 20px;
}
.vcard__grid .field__label { font-size: 12px; }
.vcard__grid input { background: var(--surface); }

.vol-pair { display: flex; align-items: center; gap: 6px; }
.vol-pair input { width: 5.5em; }
.vol-pair span { font-size: 13px; color: var(--text-mute); }

.vcard__dims {
    margin: 14px 0 0;
    border: 0; border-top: 1px solid var(--border);
    padding: 12px 0 0;
    display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center;
}
.vcard__dims legend { font-size: 12px; font-weight: 600; color: var(--text-mute); padding: 0; }
.vcard__dims label { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text-soft); }
.vcard__dims input { width: 4.5em; background: var(--surface); }

@media (max-width: 560px) {
    .vcard__grid { grid-template-columns: 1fr; }
}

/* ---------- Show view ---------- */
.show-grid { display: grid; grid-template-columns: 1fr 300px; gap: 18px; align-items: start; }
.show-main { display: flex; flex-direction: column; gap: 16px; }
.show-side { display: flex; flex-direction: column; gap: 16px; }
.show-photo { padding: 0; }
.show-photo img { display: block; width: 100%; border-radius: var(--radius) var(--radius) 0 0; }
.deflist { margin: 0; }
.deflist__row { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 14px; }
.deflist__row:last-child { border-bottom: 0; }
.deflist dt { color: var(--text-mute); flex: none; }
/* min-width + anywhere: a long unbroken value (a URL) wraps instead of running off the card */
.deflist dd { margin: 0; text-align: right; font-weight: 500; min-width: 0; overflow-wrap: anywhere; }
.deflist--plain .deflist__row { border-bottom: 0; padding: 4px 0; }
.profit-divider { border: none; border-top: 1px solid var(--border); margin: 12px 0; }

/* ---------- Lists page ---------- */
.table--lists td { padding: 8px 10px; vertical-align: middle; }
.table--lists tr.is-child td:first-child { padding-left: 34px; position: relative; }
.table--lists tr.is-child td:first-child::before {
    content: "\21B3"; position: absolute; left: 16px; color: var(--text-mute);
}
.inline-edit { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }

/* suppliers — whole table is one editable form */
.table--suppliers input[type="text"],
.table--suppliers input[type="url"] { width: 100%; min-width: 6rem; }
.table--suppliers td:nth-child(1) { min-width: 9rem; }
.table--suppliers td:nth-child(2) { min-width: 9.5rem; }
.table--suppliers td:nth-child(3) { min-width: 11rem; width: 24%; }
.table--suppliers td:nth-child(4) { min-width: 12rem; width: 32%; }
.table--suppliers .td-url { display: flex; align-items: center; gap: 6px; }
.table--suppliers .td-url input[type="url"] { flex: 1 1 auto; width: auto; min-width: 0; }
.table--suppliers .td-url a { flex: none; font-size: 15px; text-decoration: none; }
.table--suppliers .td-url input[type="text"] { flex: 1 1 auto; width: auto; min-width: 0; }
.table--suppliers .td-url a.td-open { font-size: 12.5px; font-weight: 600; white-space: nowrap; }
/* Whole-table edit forms styled like the inventory sheets (Suppliers,
   Equipment — 2026-10-01): the text cells and dropdowns read as plain text
   until hovered or clicked (same quiet input as checklist items), so the
   table looks like a data table rather than a grid of boxes — a number
   that matters (Freight +%) keeps a visible box, like an inventory count.
   The row's name is in the same bold gold as an inventory item name. */
.table--quiet td { padding: 8px 12px; vertical-align: middle; }
.table--quiet th { padding: 11px 12px; }
.table--quiet input[type="text"],
.table--quiet input[type="url"],
.table--quiet select {
    border-color: transparent; background: transparent;
    padding-top: 6px; padding-bottom: 6px; margin-left: -8px;
}
.table--quiet input[type="text"],
.table--quiet input[type="url"] { padding-left: 8px; padding-right: 8px; }
.table--quiet select { padding-left: 4px; cursor: pointer; }
.table--quiet input[type="text"]:hover,
.table--quiet input[type="url"]:hover,
.table--quiet select:hover { background: var(--surface); border-color: var(--border); }
.table--quiet input[type="text"]:focus,
.table--quiet input[type="url"]:focus,
.table--quiet select:focus { background: var(--surface); border-color: var(--accent); }
.table--quiet input.quiet-name { font-weight: 600; color: var(--accent-ink); }
.table--quiet td.num .tlink { display: inline-block; min-width: 1.5rem; }
/* Desktop column widths only — on a phone each row is a full-width card. */
@media (min-width: 641px) {
    /* Name, Qty, Brand, Model, Serial #, Category, Location, Remove */
    .table--equipment td:nth-child(1) { width: 24%; min-width: 11rem; }
    .table--equipment td:nth-child(3),
    .table--equipment td:nth-child(4),
    .table--equipment td:nth-child(5) { min-width: 8rem; }
    .table--equipment td:nth-child(6), .table--equipment td:nth-child(7) { min-width: 10rem; }
}
/* The add-a-row form sits in the tools strip above the table. */
.tools-add input, .tools-add select { flex: 1 1 160px; max-width: 280px; width: auto; }
.tools-add .pct-input { flex: 0 0 7rem; }
/* Quantity keeps a visible box, like an inventory count. */
.table--quiet .qty-input { width: 4.5rem; min-width: 0; text-align: right; }
.tools-add .qty-input { flex: 0 0 5rem; min-width: 0; text-align: right; }
.tools-manage { display: inline-flex; gap: 6px; flex-wrap: wrap; }
@media (max-width: 640px) {
    /* Stacked phone cards: the quiet fields line up with the labels. */
    .table--stack.table--quiet input[type="text"],
    .table--stack.table--quiet select { margin-left: 0; }
}
/* supplier page: which of our products each item goes into */
.table--supplier-items td.usedby-cell { min-width: 200px; max-width: 320px; font-size: 13.5px; }
.usedby__more { display: inline; }
.usedby__more summary { display: inline; cursor: pointer; color: var(--accent-ink); font-weight: 600; font-size: 12.5px; margin-left: 4px; }
.usedby__more[open] summary { display: block; margin: 2px 0 0; }
.stock-low-note { color: var(--danger); }
/* "On order" on the packaging/ingredients count sheets: a quiet checkbox
   until ticked, then a blue pill and a tinted row, so a low count that's
   already been ordered is obvious at a glance. */
.onorder-cell { white-space: nowrap; }
.onorder {
    display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
    padding: 3px 10px 3px 7px; border-radius: 999px; border: 1px solid transparent;
    font-size: 13px; color: var(--text-mute);
}
.onorder:hover { background: var(--surface-2); }
.onorder:has(input:checked) {
    background: var(--info-bg); border-color: #b7c9e3; color: #2f5a93; font-weight: 700;
}
.onorder__since { display: block; margin: 2px 0 0 8px; font-size: 12px; color: var(--text-mute); }
/* Batch form: the packaging a batch will take off Packaging inventory */
.batch-pkg__toggle { display: flex; align-items: center; gap: 6px; font-weight: 600; cursor: pointer; }
.batch-pkg__list { list-style: none; margin: 6px 0 0; padding: 0; font-size: 13.5px; }
.batch-pkg__list:empty { display: none; }
.batch-pkg__list li { padding: 5px 10px; border-left: 3px solid var(--border-strong); background: var(--surface-2); white-space: pre-wrap; }
.batch-pkg__list li + li { margin-top: 3px; }
.batch-pkg__list li.is-skip { color: var(--text-mute); border-left-color: var(--border); }
.batch-pkg__list li.is-note { color: var(--text-mute); font-style: italic; border-left-color: var(--border); }
input.onorder__qty { width: 70px; margin-left: 6px; padding: 4px 8px; font-size: 13px; text-align: right; }
.table--inventory tr:has(.onorder input:checked) input.onorder__qty { border-color: #b7c9e3; font-weight: 700; color: #2f5a93; }
.table--inventory tr:has(.onorder input:checked) td { background: #f3f7fc; }
.onorder-tag {
    display: inline-block; margin-top: 3px; padding: 1px 8px; border-radius: 999px;
    background: var(--info-bg); border: 1px solid #b7c9e3; color: #2f5a93;
    font-size: 11.5px; font-weight: 700; white-space: nowrap;
}
/* Preferred = what actually gets reordered: a clear badge, its own group first. */
.pref-badge {
    display: inline-block; white-space: nowrap;
    padding: 3px 10px; border-radius: 999px;
    background: var(--ok-bg); border: 1px solid #9fcaa9; color: var(--ok);
    font-size: 12.5px; font-weight: 700;
}
.pref-other { font-size: 12.5px; color: var(--text-mute); line-height: 1.35; }
.pref-other strong { color: var(--text-soft); font-weight: 600; }
.table--supplier-items tbody tr:not(.group-row) td:first-child { min-width: 190px; }
.table--supplier-items tr.is-pref td:first-child { box-shadow: inset 3px 0 0 var(--ok); }
.table--supplier-items tr.is-alt td { color: var(--text-soft); }
.table--supplier-items tr.group-row td {
    background: var(--surface-2); padding-top: 8px; padding-bottom: 8px;
    font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-mute);
}
.table--supplier-items tr.group-row--pref td { color: var(--ok); }
/* A details list laid out side by side (label above value) for a full-width card. */
.deflist--across { display: flex; flex-wrap: wrap; gap: 10px 48px; }
.deflist--across .deflist__row { flex-direction: column; justify-content: flex-start; gap: 2px; border-bottom: 0; padding: 0; }
.deflist--across dt { font-size: 12.5px; }
.deflist--across dd { text-align: left; }
.table--suppliers input[type="checkbox"] { width: auto; }
.table--suppliers .pct-input { width: 4.5rem; min-width: 0; text-align: right; }
.add-row .pct-input { flex: 0 0 7rem; min-width: 0; }
.inline-edit input { flex: 1; min-width: 140px; max-width: 300px; }
.inline-edit select { width: auto; }
.inline-edit input.cat-shelf { flex: 0 1 11rem; min-width: 8rem; }
.add-row { display: flex; gap: 8px; margin-top: 12px; padding: 12px 18px; flex-wrap: wrap; }
.add-row input { flex: 1; min-width: 160px; max-width: 300px; }
.add-row select { width: auto; }

/* team roster — name + staff ID + start date in one row */
.team-row input[name="name"] { flex: 2; min-width: 140px; max-width: none; }
.team-row input[name="staff_id"] { flex: 1; min-width: 90px; max-width: 130px; }
.team-row input[type="date"], .add-row input[type="date"] { flex: 0 0 150px; min-width: 130px; max-width: 160px; }

/* overhead items — name + monthly $ in one row */
.overhead-row input[name="name"] { flex: 2; min-width: 140px; max-width: none; }
.overhead-row input[name="monthly_amount"] { flex: 0 0 6.5rem; min-width: 0; text-align: right; }

@media (max-width: 980px) {
    .pform__grid, .show-grid { grid-template-columns: 1fr; }
    .pform__side { position: static; }
}

/* ---------- Forms ---------- */
.form { display: flex; flex-direction: column; gap: 14px; }
.field { display: flex; flex-direction: column; gap: 5px; }
.field__label { font-size: 13px; font-weight: 600; color: var(--text-soft); }
.form__actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
form.inline { display: inline; }

.narrow { max-width: 520px; display: flex; flex-direction: column; gap: 16px; }

.row-tools { white-space: nowrap; }
.row-tools .linkbtn { margin-left: 10px; }
.table tr.is-muted td { color: var(--text-mute); }
.table tr.is-muted .tlink { color: var(--text-mute); }

/* one-time credentials box */
.credbox {
    border: 1px solid #d9c48f;
    background: var(--accent-bg-soft);
    border-radius: var(--radius);
    padding: 16px 18px;
    margin-bottom: 18px;
}
.credbox h3 { font-size: 15px; margin-bottom: 4px; }
.credbox p { margin: 0 0 12px; font-size: 13px; color: var(--text-soft); }
.credbox dl { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; }
.credbox dt { color: var(--text-mute); font-size: 13px; }
.credbox dd { margin: 0; font-size: 14px; }
.credbox code {
    background: var(--surface); border: 1px solid var(--border-strong);
    padding: 2px 8px; border-radius: 4px; font-size: 14px; user-select: all;
}

/* ---------- Flash ---------- */
.flash {
    padding: 11px 15px;
    border-radius: var(--radius-sm);
    font-size: 14px;
    margin-bottom: 16px;
    border: 1px solid transparent;
}
.flash.is-success { background: var(--ok-bg);     border-color: #bcdcc4; color: var(--ok); }
.flash.is-error   { background: var(--danger-bg); border-color: #e6c3bf; color: var(--danger); }
.flash.is-info    { background: var(--info-bg);   border-color: #c6d3e5; color: #3c5a86; }

/* ---------- Auth card ---------- */
.body--centered {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: var(--bg);
}
.authcard {
    width: 100%;
    max-width: 360px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 28px 26px 30px;
}
.authcard__brand {
    display: flex; align-items: center; gap: 8px;
    color: var(--text-soft); font-size: 20px; letter-spacing: -0.5px; margin-bottom: 18px;
}
.authcard__brand strong { color: var(--text); }
.authcard__mark { font-size: 20px; }
.authcard__logo { width: 20px; height: 20px; object-fit: contain; flex-shrink: 0; }
.authcard__title { font-size: 20px; margin-bottom: 4px; }
.authcard__sub { color: var(--text-mute); font-size: 14px; margin: 0 0 20px; }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
    .app { grid-template-columns: 1fr; }
    .sidebar {
        position: fixed;
        left: 0; top: 0; bottom: 0;
        width: var(--sidebar-w);
        transform: translateX(-100%);
        transition: transform .18s ease;
        z-index: 50;
        box-shadow: var(--shadow);
    }
    .sidebar.is-open { transform: translateX(0); }
    .topbar__toggle-phone { display: block; }
    .content { padding: 20px 16px 48px; }
    /* Narrow screens: keep the actions cluster from crowding out the page
       title — icon-only Help, name-only account link, no role text. */
    .topbar { gap: 8px; padding: 0 12px; }
    .topbar__actions { gap: 10px; }
    .topbar__help span { display: none; }
    .who__role { display: none; }
}

/* ---------- Print ---------- */
@media print {
    .sidebar, .topbar, .btn, .pager, .page-head__sub { display: none !important; }
    .app { display: block; }
    .content { padding: 0; max-width: none; }
    .card, .stat { box-shadow: none; border-color: #ccc; }
    a { color: inherit; text-decoration: none; }
    body { background: #fff; font-size: 12px; }
    .page-head { margin-bottom: 4px; }
}

/* ============ Time clock kiosk ============ */
body.kiosk {
    background: var(--bg);
    min-height: 100vh;
}
.kiosk__bar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 26px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}
.kiosk__brand { font-weight: 700; font-size: 16px; }
.kiosk__clock { font-size: 17px; color: var(--text-soft); font-variant-numeric: tabular-nums; }
.kiosk__main { max-width: 760px; margin: 0 auto; padding: 28px 20px 60px; }
.kiosk__flash { font-size: 15px; }

.clock-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.clock-head h1 { font-size: 22px; }
.clock-loc { font-size: 15px; color: var(--text-soft); display: flex; align-items: center; gap: 8px; }
.clock-loc select { width: auto; font-size: 15px; padding: 8px 10px; }

.emp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.emp-tile {
    display: flex; flex-direction: column; gap: 4px;
    padding: 18px 16px;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    text-decoration: none; color: var(--text);
    min-height: 84px;
    transition: border-color .1s, background .1s;
}
.emp-tile:hover { text-decoration: none; border-color: var(--accent); background: var(--accent-bg-soft); }
.emp-tile.is-in { border-left: 4px solid var(--ok); }
.emp-tile__name { font-weight: 700; font-size: 17px; }
.emp-tile__status { font-size: 13px; color: var(--ok); font-weight: 600; }
.emp-tile__status--out { color: var(--text-mute); font-weight: 500; }

.pinpad { max-width: 340px; margin: 0 auto; text-align: center; }
.pinpad__back { display: inline-block; margin-bottom: 14px; font-size: 14px; }
.pinpad__name { font-size: 26px; font-weight: 700; }
.pinpad__prompt { color: var(--text-soft); margin: 4px 0 18px; }
.pinpad__field { text-align: left; margin-bottom: 14px; }
.pinpad__field select { font-size: 16px; padding: 10px; }
.pinpad__pin input {
    text-align: center; letter-spacing: .5em;
    font-size: 30px; padding: 12px; width: 100%;
    font-variant-numeric: tabular-nums;
}
.pinpad__keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 14px 0 18px; }
.keypad {
    font-size: 22px; font-weight: 600;
    padding: 16px 0;
    border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
    background: var(--surface); cursor: pointer; color: var(--text);
}
.keypad:active { background: var(--accent-bg); }
.keypad--wide, .keypad--del { font-size: 15px; }

.btn--lg { padding: 14px 22px; font-size: 16px; }

.punch-result {
    max-width: 420px; margin: 40px auto 0; text-align: center;
    padding: 32px 26px;
    border-radius: var(--radius); border: 1px solid var(--border-strong);
    background: var(--surface);
}
.punch-result.is-in  { border-color: #bcdcc4; background: var(--ok-bg); }
.punch-result.is-out { border-color: #ecd39a; background: var(--accent-bg); }
.punch-result__name { font-size: 22px; font-weight: 700; }
.punch-result__big  { font-size: 30px; font-weight: 800; letter-spacing: -0.02em; margin: 6px 0; }
.punch-result__sub  { color: var(--text-soft); margin-bottom: 18px; }
.punch-result__flag { color: var(--danger); font-size: 13px; margin-bottom: 14px; }

@media (max-width: 480px) {
    .emp-grid { grid-template-columns: 1fr 1fr; }
}

/* ============ Timesheets ============ */
.period-nav {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    margin-bottom: 16px;
}
.period-nav__custom { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.period-nav__custom input { width: auto; }

.ts-toggle { font-weight: 600; color: var(--accent-ink); }
.ts-detail > td { background: var(--surface-2); padding: 0 18px 12px; }
.table--inner { margin-top: 4px; font-size: 13px; }
.table--inner th { background: transparent; border-bottom: 1px solid var(--border); }
.table--inner td { padding: 7px 10px; }
.table--inner tr.is-flagged td { background: var(--danger-bg); }

.tag--warn { background: var(--danger-bg); color: var(--danger); }

.ts-tools { margin-top: 18px; }
.ts-tools > summary { cursor: pointer; font-weight: 600; font-size: 14px; padding: 8px 0; color: var(--text-soft); }
.ts-add { max-width: 560px; margin-top: 10px; }
.ts-tools-row { display: flex; gap: 24px; flex-wrap: wrap; align-items: flex-start; margin-bottom: 18px; }
.ts-tools-row > .ts-tools { flex: 0 0 auto; max-width: 560px; margin-top: 18px; }

/* Per-location stock-color blocks (Product inventory, Tim's ask 2026-09-23) —
   the same field-row repeated once per location, visually separated. */
.stock-colors__loc { padding: 12px 0; border-top: 1px solid var(--border); }
.stock-colors__loc:first-of-type { border-top: 0; padding-top: 4px; }
.stock-colors__loc-name { font-weight: 600; font-size: 13px; margin-bottom: 8px; }

dialog {
    border: 1px solid var(--border-strong); border-radius: var(--radius);
    padding: 22px; max-width: 460px; width: calc(100% - 32px);
    box-shadow: 0 10px 40px rgba(0,0,0,.2);
}
dialog::backdrop { background: rgba(30,28,22,.4); }
dialog h3 { margin-bottom: 8px; }

@media print {
    .period-nav, .ts-tools, .ts-toggle, .js-edit-entry, dialog { display: none !important; }
    .ts-detail { display: table-row !important; }
    .ts-detail[hidden] { display: table-row !important; }
}

/* ============ Packaging ============ */
.mono {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: 13px;
}

.chip {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    background: var(--surface-2);
    border: 1px solid var(--border-strong);
    color: var(--text-soft);
    white-space: nowrap;
}
a.chip { text-decoration: none; transition: filter .1s; }
a.chip:hover { text-decoration: none; filter: brightness(0.96); }
.chip--container { background: var(--info-bg);   border-color: #c6d3e5; color: #3c5a86; }
.chip--enclosure { background: #efe9f3;          border-color: #d9c9e2; color: #6b4a80; }
.chip--label     { background: var(--accent-bg); border-color: #ecd39a; color: var(--accent-ink); }
.chip--box       { background: #efe7dc;          border-color: #ddccb4; color: #7a5c33; }
.chip--bag       { background: var(--ok-bg);     border-color: #bcdcc4; color: var(--ok); }
.chip--component { background: #e2f0ee;          border-color: #b8d8d2; color: #2f6e63; }
.chip--card      { background: #f3e6ec;          border-color: #e0c3d1; color: #8a4266; }

.table--packaging th,
.table--packaging td,
.table--rm th,
.table--rm td { white-space: nowrap; }
.table--packaging .tlink,
.table--rm .tlink { white-space: normal; }
.table--packaging .cell-sub,
.table--rm .cell-sub { margin-top: 3px; white-space: normal; }
.table--rm td:nth-child(2) { min-width: 12rem; }
.table--packaging td:nth-child(2) { min-width: 12rem; }

/* type tabs on the packaging overview */
.pkg-tabs {
    display: flex; flex-wrap: wrap; gap: 4px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--border);
}
.pkg-tab {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 9px 14px;
    color: var(--text-soft); font-weight: 600; font-size: 14px;
    border: 1px solid transparent; border-bottom: 0;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    margin-bottom: -1px;
}
.pkg-tab:hover { background: var(--surface-2); text-decoration: none; color: var(--text); }
.pkg-tab.is-active {
    background: var(--surface);
    border-color: var(--border);
    color: var(--text);
}
.pkg-tab__n {
    font-size: 12px; font-weight: 600; color: var(--text-mute);
    background: var(--surface-2); border: 1px solid var(--border);
    border-radius: 999px; padding: 0 7px; min-width: 20px; text-align: center;
}
.pkg-tab.is-active .pkg-tab__n { background: var(--accent-bg); border-color: #ecd39a; color: var(--accent-ink); }

@media print { .pkg-tabs { display: none !important; } }

/* auto-name preview on the packaging form */
.pkg-preview {
    background: var(--accent-bg-soft);
    border: 1px solid #ecd39a;
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    font-size: 14px;
    color: var(--text-soft);
}
.pkg-preview strong { color: var(--text); font-weight: 700; }
.pkg-preview .field__hint { display: block; margin-top: 2px; }

/* supplier-option rows in the packaging form */
.orows { display: flex; flex-direction: column; gap: 12px; }
.orow {
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    padding: 12px 14px 10px;
}
.orow__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 10px 14px;
}
.orow__grid .field__label { font-size: 12px; }
.orow__grid input { background: var(--surface); }
.orow__note { grid-column: 1 / -1; }
.orow__cpu {
    display: block; padding: 9px 0 0;
    font-size: 15px; font-weight: 700; color: var(--text);
    font-variant-numeric: tabular-nums;
}
.orow__foot {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin-top: 10px; padding-top: 8px;
    border-top: 1px solid var(--border);
}
.orow__pref {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 13px; font-weight: 600; color: var(--text-soft); cursor: pointer;
}
.orow__pref input { width: auto; }

/* bill of materials on the product page */
.bom { margin-top: 14px; }
.bom:first-of-type { margin-top: 6px; }
.bom__head { font-size: 14px; margin-bottom: 6px; color: var(--text-soft); }
.bom .table--inner tfoot td { border-top: 1px solid var(--border-strong); border-bottom: 0; font-size: 13px; }
.bom-add {
    display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
    margin-top: 8px; padding: 10px 0 4px;
}
.bom-add select { width: auto; max-width: 100%; }
.bom-add .bom-comp { min-width: 220px; flex: 1; }
.bom-add .bom-qty { width: 4.5em; }
/* Wholesale packs (2026-10-06): same layout as the packaging lists */
.wpack__units { width: 5.5em; }
.wpack td .wpack__units { text-align: right; }
.wpack__box { min-width: 220px; max-width: 100%; }
.bom-add .wpack__box { flex: 1; }
.wpack__note { width: 100%; min-width: 120px; }
.bom-add .wpack__note { flex: 1; width: auto; }
.wpack__actions { white-space: nowrap; }
.wpack__actions form { display: inline; }
.wpack__actions form + form { margin-left: 10px; }
/* Packaging item page: Used by — product packaging / wholesale packs / bundles */
.usedby__head { margin: 14px 16px 4px; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--text-soft); }

@media print {
    .bom-add { display: none !important; }
}

/* ---------- Cost of goods ---------- */
.table--cogs th, .table--cogs td { white-space: nowrap; }
.table--cogs .group-start { border-left: 2px solid var(--border-strong); }
.table--cogs th:first-child, .table--cogs td:first-child { border-right: 2px solid var(--border-strong); }
.table--cogs thead tr:first-child th { text-align: center; }
/* Frozen header row: the wrap itself scrolls (both directions) inside a
   bounded height, so thead's sticky top:0 has a real scroll container to
   react to — sticking it to the page instead runs into ancestor-overflow
   quirks that don't reliably free it up. */
.table-wrap--tall { max-height: calc(100vh - 260px); overflow-y: auto; }
.table--cogs thead { position: sticky; top: 0; z-index: 15; will-change: transform; }
/* Sticky headers over a scrolling table are prone to a hairline gap right at
   their bottom edge — browsers round a sticky element's position to the
   nearest device pixel independently of the content scrolling underneath it,
   so at some scroll offsets the two don't quite line up and whatever's
   behind shows through for an instant. A border can't fix this (it's not a
   missing-paint problem, it's a sub-pixel rounding one) — the header's own
   background needs to physically overlap a couple of px past its real edge
   so there's slack for the rounding to land in. The Product column's th has
   rowspan="2", so it's a child of the FIRST header row in the markup even
   though it visually reaches all the way down to the same boundary —
   :last-child alone misses it, so it's targeted separately. */
.table--cogs thead tr:last-child th,
.table--cogs thead th[rowspan] {
    box-shadow: inset 0 -1px 0 var(--border), 0 2px 0 var(--surface-2);
}
/* ---------- Threshold colors (shared: cost of goods margins, inventory levels) ---------- */
/* A user-picked hex, via tier_color_style() — a badge around just the figure
   rather than painting the whole cell, so a column of them reads as a
   column of small badges with breathing room, not a solid wall of color. */
.fig-chip { display: inline-block; padding: 3px 10px; border-radius: 5px; }

/* Color-picker pair (a settings panel): native swatch + a typeable hex code,
   kept in sync by JS. */
.color-pick { display: inline-flex; gap: 6px; align-items: center; }
.color-pick input[type="color"] { width: 2.2rem; height: 2.2rem; padding: 2px; border: 1px solid var(--border-strong); border-radius: 6px; cursor: pointer; }

/* Inventory count box: type the new absolute count directly. Steppers (-/+
   buttons) were tried and dropped — typing straight into the box turned out
   to be all that's needed. */
input.inv-input { width: 3rem; text-align: center; }
input.inv-input.is-pending { border-color: var(--accent); font-weight: 600; }

/* Inventory print sheets: two alternate, non-interactive layouts (blank
   count sheet, current numbers) hidden on screen and swapped in for
   printing — app.js marks the one to show with .is-print-target right
   before calling window.print(). Plain multi-column text rather than the
   on-screen table, since a table can't reflow into newspaper-style columns.
   Both sheets share the same comfortable (not squeezed) row size — Tim was
   fine with the blank sheet running to a 2nd page rather than shrinking the
   font to force one page. */
.print-sheet { display: none; }
/* The print toolbar is just buttons now — "Print current numbers" and
   "Change stock options" each open a <dialog> with their own controls
   instead of trailing checkboxes/selects across the bar itself. Same
   pattern is meant to carry over to the other inventory pages. */
.print-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.print-tools__settings { margin-left: auto; }
.print-loc-picker__item { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.dialog-loc-list { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 14px; font-size: 14px; }
.dialog--wide { max-width: 640px; }
@media print {
    body.print-mode-active .page-head, body.print-mode-active .ts-tools,
    body.print-mode-active .print-tools-bar,
    body.print-mode-active #inventoryForm, body.print-mode-active #rmInventoryForm,
    body.print-mode-active #pkgInventoryForm,
    body.print-mode-active .filters--inv, body.print-mode-active .pkg-tabs {
        display: none !important;
    }
    .print-sheet.is-print-target { display: block; }
    .print-sheet__title { font-size: 16px; font-weight: 700; margin-bottom: 2px; }
    .print-sheet__meta { font-size: 10px; color: #555; margin-bottom: 12px; }
    .print-columns--2 { column-count: 2; column-gap: 28px; }
    .print-row {
        display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
        break-inside: avoid; padding: 4px 0; font-size: 11.5px; line-height: 1.5;
    }
    .print-row__name { flex: 1 1 auto; min-width: 0; word-break: break-word; }
    .print-row__counts { flex: 0 0 auto; white-space: nowrap; font-variant-numeric: tabular-nums; }
    .print-blank--wide { display: inline-block; width: 70px; border-bottom: 1px solid #000; }
    /* One write-in line per ticked location, its letter just to the left
       (S = Store, W = Warehouse; the sheet's header says which is which),
       lined up in columns at the right of every row and bottom-aligned so a
       name that wraps never shifts them (2026-10-03). */
    [data-key="blank"] .print-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: 8px; }
    .print-blank-locs { display: flex; gap: 10px; }
    .print-blank-loc { display: flex; align-items: baseline; gap: 3px; }
    .print-blank-loc[hidden] { display: none; }
    .print-blank-loc__label { font-size: 9.5px; font-weight: 700; color: #444; min-width: 8px; text-align: right; }
    [data-key="blank"] .print-blank--wide { width: 40px; }
    /* Current-numbers sheet: a faint rule between rows helps track across
       the printed numbers, worth keeping even though the blank sheet doesn't. */
    [data-key="counts"] .print-row { border-bottom: 1px solid #ddd; }
}

/* ---------- Help ---------- */
.help-content h2 { margin: 28px 0 10px; }
.help-content h2:first-child { margin-top: 0; }
.help-content h3 { margin: 18px 0 8px; }
.help-content p { margin: 0 0 12px; line-height: 1.6; }
.help-content ul { margin: 0 0 12px; padding-left: 22px; line-height: 1.6; }
.help-content li { margin-bottom: 4px; }
.help-content code {
    background: var(--surface-2); border: 1px solid var(--border);
    border-radius: 4px; padding: 1px 5px; font-size: 12.5px;
}
.help-content table { margin-bottom: 12px; }
.help-content hr { border: none; border-top: 1px solid var(--border); margin: 20px 0; }
.help-nav { display: flex; flex-direction: column; gap: 2px; }
.help-nav__link { padding: 7px 9px; border-radius: var(--radius-sm); color: var(--text-soft); font-size: 13px; }
.help-nav__link:hover { background: rgba(0,0,0,.035); text-decoration: none; color: var(--text); }
.help-nav__link.is-active { background: var(--accent-bg); color: var(--accent-ink); font-weight: 600; }

/* ---------- Price cards ---------- */
/* Ported from the standalone Lovebee Price Cards tool — deliberately its own
   literal black/white print look, independent of the app's own theming,
   since these are meant to look like a printed shelf tag, not an app page. */
:root {
    --pc-name-family: 'Serifa','Roboto Slab',Georgia,serif;
    --pc-name-size: 34px; --pc-name-weight: 700; --pc-name-align: center;
    --pc-subtitle-family: 'Helvetica Neue',Arial,sans-serif;
    --pc-subtitle-size: 13px; --pc-subtitle-weight: 400; --pc-subtitle-align: center;
    --pc-price-family: 'Serifa','Roboto Slab',Georgia,serif;
    --pc-price-size: 26px; --pc-price-size-2: 20px; --pc-price-weight: 700;
    --pc-desc-family: 'Helvetica Neue',Arial,sans-serif;
    --pc-desc-size: 15px; --pc-desc-weight: 400; --pc-desc-align: left;
    --pc-card-w: 100mm; --pc-card-h: 47mm; --pc-gap: 0mm;
    --pc-border: 1px solid #000;
    --pc-page-margin: 7mm;
}
.pricecards-editor .fieldset { border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; min-width: 0; }
.pricecards-editor .fieldset legend { font-weight: 600; padding: 0 6px; }
.pricecards-editor .field { margin-bottom: 8px; }
.pricecards-pane { background: #e7e7e3; border: 1px solid var(--border); border-radius: 10px; padding: 16px; overflow: hidden; }
.pricecards-scaler { transform-origin: top left; }
#pcSheet { width: calc(var(--pc-card-w)*2 + var(--pc-gap)); display: flex; flex-direction: column; gap: var(--pc-gap); background: #fff; }
.pc-pair { display: flex; gap: var(--pc-gap); break-inside: avoid; page-break-inside: avoid; }
.pc-card { width: var(--pc-card-w); height: var(--pc-card-h); border: var(--pc-border); overflow: hidden; background: #fff; padding: 4mm; box-sizing: border-box; }
.pc-name-card { position: relative; display: flex; align-items: center; justify-content: center; }
.pc-desc-card { display: flex; align-items: center; }
/* The unused half when an odd number of name & price tags are packed two to a slot. */
.pc-card.pc-empty-card, .pricecards-pane.no-border .pc-card.pc-empty-card { border: 0; outline: 0; }
.pc-left-inner { width: 100%; max-height: 100%; }
.pc-coins { position: absolute; top: 50%; right: 4mm; transform: translateY(-50%); margin: 0; display: flex; flex-direction: column; gap: 1.5mm; align-items: flex-end; }
.pc-coin { background: #000; color: #fff; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; line-height: 1; padding: 2mm; }
.pc-coin-price { font-family: var(--pc-price-family); font-weight: var(--pc-price-weight); font-size: var(--pc-price-size); }
.pc-coins.multi .pc-coin-price { font-size: var(--pc-price-size-2); }
.pc-coin-label { font-family: 'Helvetica Neue',Arial,sans-serif; font-weight: 700; letter-spacing: .06em; margin-top: .5mm; font-size: calc(var(--pc-price-size) * .38); }
.pc-coins.multi .pc-coin-label { font-size: calc(var(--pc-price-size-2) * .45); }
#pcSheet.price-inline .pc-name-card { gap: 3mm; }
#pcSheet.price-inline .pc-name-card .pc-left-inner { width: auto; flex: 0 1 auto; min-width: 0; }
#pcSheet.price-inline .pc-coins { position: static; transform: none; margin: 0; flex: 0 0 auto; }
.pc-name { font-family: var(--pc-name-family); font-weight: var(--pc-name-weight); font-size: var(--pc-name-size); text-align: var(--pc-name-align); line-height: 1.05; overflow-wrap: break-word; hyphens: auto; }
.pc-subtitle { font-family: var(--pc-subtitle-family); font-weight: var(--pc-subtitle-weight); font-size: var(--pc-subtitle-size); text-align: var(--pc-subtitle-align); line-height: 1.25; overflow-wrap: break-word; margin-top: 1.5mm; }
.pc-desc { font-family: var(--pc-desc-family); font-weight: var(--pc-desc-weight); font-size: var(--pc-desc-size); text-align: var(--pc-desc-align); line-height: 1.28; overflow-wrap: break-word; width: 100%; }
.pricecards-pane.no-border .pc-card { border: 0; outline: 0.2mm dashed #bbb; outline-offset: -0.1mm; }
@media print {
    .pricecards-editor, .pc-noprint, .ts-tools, .page-head__actions, .page-head__sub { display: none !important; }
    .pricecards-pane { border: 0; background: #fff; padding: 0; overflow: visible; }
    .pricecards-scaler { transform: none !important; }
    #pcSheet { gap: var(--pc-gap); }
}

/* ---------- Lists (general checklists + personal to-do) ---------- */
.daily-note {
    background: var(--info-bg);
    border-color: #c6d3e5;
    margin-bottom: 16px;
}
.daily-note .field__label { color: #3c5a86; }
.daily-note p { margin: 4px 0 0; }

.checklist-stack { display: flex; flex-direction: column; gap: 16px; }

/* Inline "add item" row, styled as one pill-shaped control (icon + input +
   hint) rather than the plain text-input-plus-button most .add-row forms
   use elsewhere — those are untouched, this only overrides the checklist's. */
.add-row--checklist {
    margin: 0 0 16px; padding: 4px 6px 4px 4px; flex-wrap: nowrap;
    border: 1px solid var(--border-strong); border-radius: 999px; align-items: center;
}
.add-row--checklist:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }
.add-row--checklist input {
    flex: 1; min-width: 0; max-width: none; border: none; background: transparent; padding: 8px 4px;
}
.add-row--checklist input:focus { outline: none; }
.add-row__submit {
    flex: 0 0 auto; width: 32px; height: 32px; padding: 0; border: none; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; cursor: pointer;
    background: var(--accent-bg); color: var(--accent-ink);
}
.add-row__submit:hover { background: var(--accent); color: #fff; }
.add-row__hint { flex: 0 0 auto; color: var(--text-mute); font-size: 12px; font-style: italic; padding-right: 8px; white-space: nowrap; }
@media (max-width: 560px) { .add-row__hint { display: none; } }

/* ---------- My notes (notes app, 2026-10-18) ---------- */
/* the list on the left, the open note on the right, filling the window below the heading */
.na { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 16px; height: calc(100vh - 190px); min-height: 460px; }
.na-list, .na-doc { display: flex; flex-direction: column; min-height: 0; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.na-list__top { display: flex; gap: 8px; padding: 12px; border-bottom: 1px solid var(--border); }
.na-list__top input { flex: 1; min-width: 0; }
.na-items { flex: 1; overflow-y: auto; margin: 0; padding: 6px; list-style: none; }
.na-group { margin: 8px 10px 4px; font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text-mute); }
.na-none { padding: 12px; }
/* your own order (2026-10-24): drag ⋮⋮ (shows on hover), or Sort in the footer */
.na-row { display: flex; align-items: center; gap: 2px; border-radius: 8px; }
.na-row .drag-handle { flex: 0 0 auto; padding: 0 2px 0 4px; opacity: 0; transition: opacity .15s; }
.na-row:hover .drag-handle { opacity: 1; }
.na-row.is-dragging { opacity: .45; background: var(--accent-bg-soft); }
.na-row .na-item { flex: 1; min-width: 0; }
.na-items.is-searching .drag-handle { display: none; }
.na-list__foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 14px; border-top: 1px solid var(--border); font-size: 12px; color: var(--text-mute); }
.na-list__foot[hidden] { display: none; }
.na-list__foot select { width: auto; padding: 3px 8px; font-size: 12.5px; }
.na-item { display: block; width: 100%; padding: 10px 12px; border: 0; border-radius: 8px; background: none; font: inherit; text-align: left; color: var(--text); cursor: pointer; }
.na-item:hover { background: var(--surface-2); }
.na-item.is-on { background: var(--accent-bg-soft); }
.na-item__title { display: flex; justify-content: space-between; gap: 8px; font-size: 14.5px; font-weight: 600; }
.na-item__title > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.na-item__date { flex: none; font-size: 12px; font-weight: 400; color: var(--text-mute); }
.na-item__peek { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 2px; font-size: 13px; line-height: 1.45; color: var(--text-soft); }
.na-pin { margin-right: 4px; color: var(--accent); }
.na-doc__bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--border); font-size: 13px; color: var(--text-mute); }
.na-doc__bar[hidden], .na-doc textarea[hidden] { display: none; }
.na-doc__left, .na-doc__tools { display: inline-flex; align-items: center; gap: 14px; }
.na-back { display: none; }
.na-doc textarea { flex: 1; width: 100%; padding: 22px 28px; border: 0; border-radius: 0; resize: none; font: inherit; font-size: 16px; line-height: 1.65; color: var(--text); background: transparent; outline: none; box-shadow: none; }
.na-doc textarea::first-line { font-size: 20px; font-weight: 700; } /* the first line is the title */
.na-saved { color: var(--ok); }
.na-saved.is-error { color: var(--danger); }
.na-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--text-mute); }
.linkbtn-mute { padding: 0; border: 0; background: none; font: inherit; font-size: 13px; color: var(--text-mute); cursor: pointer; }
.linkbtn-mute:hover { color: var(--accent-ink); }
.linkbtn-mute:disabled { opacity: .4; cursor: default; }
.linkbtn-mute.is-pinned { color: var(--accent); font-weight: 600; }
.linkbtn-mute--del:hover { color: var(--danger); }
/* phone: the list fills the screen; a note opens full screen with ← Notes to go back */
@media (max-width: 760px) {
    .na { grid-template-columns: 1fr; height: calc(100vh - 170px); min-height: 400px; }
    .na .na-doc { display: none; }
    .na.is-reading .na-list { display: none; }
    .na.is-reading .na-doc { display: flex; }
    .na-back { display: inline; color: var(--accent-ink); font-weight: 600; }
    .na-doc textarea { padding: 16px 18px; }
    .na-row .drag-handle { opacity: 1; }
}
.checklist { list-style: none; margin: 0; padding: 0; }
.checklist__item {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 9px 0; border-bottom: 1px solid var(--border);
}
.checklist__item:last-child { border-bottom: 0; }
.checklist__item.is-dragging { opacity: .45; background: var(--accent-bg-soft); }
.checklist__item input[type="checkbox"] { width: 17px; height: 17px; flex: 0 0 auto; cursor: pointer; }
.checklist__check { display: flex; align-items: center; gap: 10px; cursor: pointer; flex: 1; min-width: 0; }
.checklist__check span { word-break: break-word; }
.checklist__item.is-done .checklist__check span { text-decoration: line-through; color: var(--text-mute); }
.checklist__edit-form { flex: 1; min-width: 0; }
input.checklist__input {
    width: 100%; border: 1px solid transparent; background: transparent;
    padding: 5px 8px; border-radius: 5px; font: inherit; color: inherit;
}
input.checklist__input:hover { background: var(--surface-2); }
input.checklist__input:focus { border-color: var(--border-strong); background: var(--surface); outline: none; }
.checklist__del { font-size: 19px; line-height: 1; padding: 0 4px; }
.checklist__empty { padding: 8px 0; }
.notif--unread { background: var(--accent-bg-soft); }
.notif--unread .cell-sub { color: var(--accent-ink); }

/* Persistent "all lists" rail beside a list's own content — lets you jump
   straight from one list to another without a round trip through /lists. */
.lists-grid { display: grid; grid-template-columns: 220px 1fr; gap: 18px; align-items: start; }
/* An even grid of equal cards (Packaging lists, Categories). These used to
   borrow .lists-grid, which became the Lists page's side panel + main
   column, squeezing their first card into 220px. */
.cards-grid .table--lists td.num { white-space: nowrap; }
/* Two-step sign-in (sign-in card) */
.twofa-steps { margin: 0 0 16px; padding-left: 20px; font-size: 14px; line-height: 1.5; }
.twofa-steps li + li { margin-top: 10px; }
.twofa-qr { width: 200px; margin: 10px 0 6px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.twofa-qr svg { display: block; width: 100%; height: auto; }
.twofa-manual summary { cursor: pointer; font-size: 13px; color: var(--accent-ink); }
.twofa-key { display: block; margin: 6px 0 2px; font-size: 15px; letter-spacing: .08em; word-break: break-all; }
input.twofa-code { font-size: 22px; letter-spacing: .2em; text-align: center; }
.twofa-remember { display: flex; align-items: center; gap: 8px; margin: 4px 0 14px; font-size: 14px; cursor: pointer; }
.twofa-cancel { margin-top: 10px; text-align: center; }
/* Security page */
.sec-on  { color: var(--ok); font-weight: 700; }
.sec-off { color: var(--danger); font-weight: 700; }
.sec-sub { margin: 18px 0 8px; font-size: 14px; }
.sec-rules { margin: 0; padding-left: 18px; font-size: 14px; line-height: 1.5; }
.sec-rules li + li { margin-top: 6px; }
.sec-codes { border-color: #9fcaa9; }
.sec-codes__list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.sec-codes__list code { display: block; padding: 8px 10px; font-size: 16px; letter-spacing: .06em; text-align: center; background: var(--surface-2); border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); }
/* Packaging lists: cards stack down columns (pinboard style) so a short card
   tucks under the one above instead of leaving a gap the height of the
   tallest card in its row (Styles and BOM roles are long). */
.cards-grid.cards-grid--stack { display: block; columns: 380px; column-gap: 18px; }
.cards-grid.cards-grid--stack > .card { break-inside: avoid; margin-bottom: 18px; }
/* Keep Save on the same line as the name and its type badge. */
.cards-grid--stack .inline-edit { flex-wrap: nowrap; }
.cards-grid--stack .inline-edit input { min-width: 0; }
.cards-grid--stack .inline-edit .pill { flex: none; }
/* Categories: the first card (with its parent pickers) needs more room than the second. */
@media (min-width: 981px) {
    .cards-grid.cards-grid--wide-first { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
}
.cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 400px), 1fr)); gap: 18px; align-items: start; }
.lists-nav { position: sticky; top: 72px; padding: 0; overflow: hidden; }
/* This mobile override has to live AFTER the two unconditional rules just
   above rather than in the shared 980px media query near the top of the
   file — same specificity, so whichever comes later in the file wins
   regardless of the media condition, and the unconditional rules above
   were silently winning at every width, including narrow ones. */
@media (max-width: 980px) {
    .lists-grid { grid-template-columns: 1fr; }
    .lists-nav { position: static; }
}
.lists-nav__list { list-style: none; margin: 0; padding: 0; max-height: 65vh; overflow-y: auto; }
.lists-nav__list li { border-bottom: 1px solid var(--border); }
.lists-nav__list li:last-child { border-bottom: 0; }
.lists-nav__empty { display: block; padding: 12px 14px; }
.lists-nav__link {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 10px 14px; color: var(--text);
}
.lists-nav__link:hover { background: var(--surface-2); text-decoration: none; }
.lists-nav__link.is-active { background: var(--accent-bg); font-weight: 600; }
.lists-nav__link span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lists-nav__count { color: var(--text-mute); font-size: 12px; flex: 0 0 auto; }
.lists-nav__add { padding: 12px 14px; border-top: 1px solid var(--border); }
.lists-nav__add input { width: 100%; margin-bottom: 8px; }

/* The list-of-lists panel's own drag-to-reorder + "Sort A-Z" — a class of
   its own (.lists-nav__row) rather than styling .lists-nav__list li
   directly, since that base rule is shared with Cost tracking's identical
   but non-reorderable rail (see the comment below) and this shouldn't
   touch it. */
.lists-nav__toolbar {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 8px 10px 8px 14px; border-bottom: 1px solid var(--border);
    font-size: 12px;
}
.lists-nav__toolbar .drag-handle { font-size: 13px; padding: 0 1px; }
.lists-nav__row { display: flex; align-items: center; gap: 2px; }
.lists-nav__row .drag-handle { flex: 0 0 auto; padding-left: 6px; }
.lists-nav__row .lists-nav__link { flex: 1; min-width: 0; }
.lists-nav__row.is-dragging { opacity: .45; background: var(--accent-bg-soft); }

/* Cost tracking (redesigned 2026-10-21) uses the Lists layout (.ln: panel
   of trackers + the open tracker; on a phone one at a time, with ← back),
   plus the grand total pinned above the trackers and each tracker's total
   beside its name. */
.costtrack-nav__total { flex: none; font-size: 13px; font-weight: 600; color: var(--text-soft); }
.costtrack-bar-total { font-size: 16px; color: var(--text); }
.costtrack-grand {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 12px 14px; border-bottom: 1px solid var(--border);
    background: var(--surface-2); font-size: 13px; color: var(--text-soft);
}
.costtrack-grand strong { font-size: 15px; color: var(--text); }
.cost-input { flex: 0 0 8rem; text-align: right; }

/* Cost tracking items now share the Lists checklist markup/behaviour
   (checkbox, drag handle, click-to-edit, no per-row Save button) instead of
   a plain table — but each item has two editable fields (description, cost)
   where a checklist item only has one, so the edit-form itself needs to be
   a small flex row rather than the single full-width input Lists uses. */
form.costtrack-edit-form { display: flex; gap: 8px; flex: 1; min-width: 0; }
.costtrack-edit-form input.costtrack-desc-input { flex: 1; min-width: 0; width: auto; }
.costtrack-edit-form input.cost-input { flex: 0 0 8rem; width: auto; }
.costtrack-done-cost { color: var(--text-mute); font-size: 14px; white-space: nowrap; }
.costtrack-done-toggle { flex: 1; min-width: 0; }
.costtrack-total-line { display: flex; align-items: center; justify-content: space-between; font-size: 15px; }
.costtrack-total-note, .costtrack-done-sum { font-size: 13px; font-weight: 500; color: var(--text-mute); margin-left: 6px; }
.costtrack-sort-row {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    padding: 10px 18px; background: var(--surface-2); border-bottom: 1px solid var(--border);
}
.costtrack-sort-label { font-size: 13px; color: var(--text-mute); }
.ln-doc__body .costtrack-add { margin-top: 4px; padding: 8px 6px 12px; }
.ln-doc__body .costtrack-add input { max-width: none; }
.ln-doc__body .costtrack-add .cost-input { flex: 0 0 8rem; min-width: 0; }
.ln-doc__body .costtrack-sort-row { border-radius: 8px; border-bottom: 0; padding: 8px 12px; }
.costtrack-edit-form input { min-width: 0; } /* inputs won't shrink below their natural width otherwise */
/* phone: the tracker's name on its own line; description over cost + Add when adding; each item's cost a little narrower */
@media (max-width: 760px) {
    .costtrack-bar .ln-name { flex: 1 1 100%; order: 3; }
    .costtrack-bar .ln-doc__tools { margin-left: auto; }
    .ln-doc__body .costtrack-add input[name="description"] { flex: 1 1 100%; }
    .ln-doc__body .costtrack-add .cost-input { flex: 1 1 0; }
    .costtrack-bar ~ .ln-doc__body .checklist-stack .card__body { padding-left: 4px; padding-right: 4px; }
    form.costtrack-edit-form { flex-wrap: wrap; gap: 0; }
    .costtrack-edit-form input.costtrack-desc-input { flex: 1 1 100%; }
    .costtrack-edit-form input { padding-top: 3px; padding-bottom: 3px; }
    .costtrack-edit-form input.cost-input { flex: 0 0 8rem; margin-left: auto; color: var(--text-soft); }
    .costtrack-item .drag-handle { padding: 0 2px; }
}

/* ---------- Bin cards ---------- */
.bincard-preview { display: block; max-width: 600px; width: 100%; margin-top: 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); }

/* ---------- Shifts (weekly schedule) ---------- */
.week-nav { display: flex; gap: 8px; margin-bottom: 16px; }
/* One board per store location — heading + its own grid + its own
   "Copy to next week", stacked one after another down the page. */
.shift-board { margin-bottom: 28px; }
.shift-board__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.shift-board__head h3 { font-size: 16px; }
/* Each board is its own separate <table>, so left to the default
   table-layout:auto, each one distributes its day-column widths based on
   its OWN content — a busy Ridgeway Wednesday can end up a few px
   narrower/wider than a quiet Niagara Wednesday even though both tables
   total the same width, staggering the columns instead of aligning them.
   table-layout:fixed makes every column's width purely a function of the
   CSS below (identical on every board) instead of content. */
/* min-width on the <table> itself (not the cells — fixed layout ignores
   cell min-width for sizing) keeps day columns from being squeezed
   uncomfortably narrow on small screens; .table-wrap scrolls horizontally
   below that width instead, same as it always did. 200px per day column is
   a measured number, not a guess: a typical "11:00 AM–4:00 PM" chip plus
   its "Copy" button needs ~158px unwrapped, plus the cell's own 36px of
   padding — at the real page's ~1152px content width, columns were only
   getting ~140px, well under that, hence the wrapping. This is wider than
   the page's own content area on most desktop screens, so .table-wrap now
   scrolls horizontally there too, in exchange for chips that stay on one
   line — that trade-off is the explicit point of this change. */
.shift-grid { table-layout: fixed; min-width: 1570px; }
.shift-grid th, .shift-grid td { vertical-align: top; }
.shift-grid__day { text-align: center; line-height: 1.4; }
.shift-cell { min-height: 52px; }
.shift-grid th:first-child, .shift-grid td:first-child { width: 170px; }
/* Vertical dividers between day columns — the shift grid otherwise relies
   entirely on row stripes/padding, which made it hard to tell at a glance
   where one day ends and the next begins. */
.shift-grid th:not(:first-child), .shift-grid td:not(:first-child) { border-left: 1px solid var(--border-strong); }

/* Today's whole column gets a rectangle drawn around it — border-collapse
   on .table merges each cell's matching left/right edge into one seamless
   line down the column, so setting the same border on every cell in it
   (plus top on the header, bottom on the last row) reads as one continuous
   outline rather than a per-cell box. Selectors are deliberately specific
   (.shift-grid td.shift-cell.is-today, not just .is-today) so they outrank
   the plain divider rule above on the shared border-left property. */
.shift-grid th.shift-grid__day--today,
.shift-grid td.shift-cell.is-today {
    border-left: 2px solid var(--accent);
    border-right: 2px solid var(--accent);
}
.shift-grid thead th.shift-grid__day--today { border-top: 2px solid var(--accent); }
.shift-grid tbody tr:last-child td.shift-cell.is-today { border-bottom: 2px solid var(--accent); }

.emp-color-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.inline-edit input.emp-color-input { flex: 0 0 auto; width: 2.2rem; height: 2.2rem; min-width: 0; max-width: none; padding: 2px; border: 1px solid var(--border-strong); border-radius: 6px; cursor: pointer; }
/* Which store(s) an employee can be scheduled at — forced onto its own line
   within the name/colour/Save row via flex-basis:100%, since cramming it
   onto the same line got tight even before the table gained a scroll wrap. */
.emp-loc-checks { flex-basis: 100%; display: flex; gap: 12px; flex-wrap: wrap; }
.emp-loc-check { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--text-mute); }
.inline-edit .emp-loc-check input { flex: 0 0 auto; width: auto; min-width: 0; max-width: none; }

.shift-chip {
    display: block; padding: 4px 8px;
    background: var(--accent-bg); color: var(--accent-ink);
    border-radius: var(--radius-sm); font-size: 12px; font-weight: 600;
    border-left: 4px solid var(--border-strong);
}
.shift-chip:hover { background: var(--accent); color: #fff; text-decoration: none; }
.shift-chip__note { display: block; font-weight: 400; color: var(--text-mute); font-size: 11px; }
.shift-chip--readonly { margin-bottom: 4px; }
.shift-add {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border: 1px dashed var(--border-strong); border-radius: 50%;
    color: var(--text-mute); font-size: 14px;
}
.shift-add:hover { background: var(--surface-2); text-decoration: none; color: var(--text); }

/* Draggable wrapper around an editable shift chip — pairs it with a small
   "Copy" button, and is the thing that actually gets picked up and dropped
   onto another employee/day cell. */
.shift-chip-wrap { display: flex; align-items: stretch; gap: 2px; margin-bottom: 4px; cursor: grab; }
.shift-chip-wrap:active { cursor: grabbing; }
.shift-chip-wrap.is-dragging { opacity: .4; }
.shift-chip-wrap .shift-chip { flex: 1; min-width: 0; margin-bottom: 0; }
.shift-dup-btn {
    flex: 0 0 auto; border: 1px solid var(--border-strong); background: var(--surface);
    border-radius: var(--radius-sm); font-size: 10px; color: var(--text-mute);
    padding: 0 6px; cursor: pointer;
}
.shift-dup-btn:hover { background: var(--surface-2); color: var(--text); }
.shift-cell.is-dragover { background: var(--accent-bg-soft); outline: 2px dashed var(--accent); outline-offset: -2px; }

/* ---------- Product ingredients (plain-English lookup for the register) ---------- */
.ingredient-list { list-style: none; margin: 0; padding: 0; }
.ingredient-list__row { padding: 14px 20px; border-bottom: 1px solid var(--border); }
.ingredient-list__row:last-child { border-bottom: 0; }
.ingredient-list__name { font-weight: 700; font-size: 16px; margin-bottom: 3px; }
.ingredient-list__ingredients { font-size: 16px; color: var(--text-soft); line-height: 1.5; }
.ingredient-list mark { background: #b5ddff; color: var(--text); border-radius: 2px; padding: 0 1px; }

/* ---------- Resources (manually-ordered list of in-app pages/docs,
   with plain headings droppable between them) ---------- */
.reslist { list-style: none; margin: 0; padding: 0; }
.reslist__hint { margin: 0 0 10px 2px; }
/* Each row paints its own opaque background rather than relying on an
   enclosing .card the way most lists do — the list isn't wrapped in one
   anymore, specifically so the gap between sections shows the real page
   background through it (see group-start/group-end below), not another
   white surface that would just look like a hole in one continuous card. */
.reslist__item {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 18px; border-bottom: 1px solid var(--border);
    background: var(--surface);
}
.reslist__item:last-child { border-bottom: 0; }
.reslist__item .tlink { font-size: 15px; display: inline-flex; align-items: center; gap: 6px; }
.reslist__item .tlink .ic { width: 15px; height: 15px; flex: none; color: var(--text-mute); }
.reslist__item.is-dragging { opacity: .45; background: var(--accent-bg-soft); }
/* The heading sits outside its card as a plain label (same idea as the
   Shifts page's section titles) rather than a colored row inside it — no
   card chrome of its own, just enough spacing to read as its own thing:
   a gap above separating it from the previous section, a small gap below
   separating it from its own card. Still just another <li> in the one
   flat draggable list underneath — restyled, not restructured, so
   dragging/reordering doesn't change at all. */
.reslist__item--heading {
    background: none; border-bottom: 0; box-shadow: none;
    padding: 0 18px 10px; margin-top: 30px;
}
.reslist__item--heading:first-child { margin-top: 0; }
/* group-start/group-end (worked out in the view — the first/last real item
   in a run between headings) used to also round + shadow that item's own
   top/bottom edge; Tim tried it and preferred it flatter, so a section is
   now just its own plain-edged block of rows, told apart from the next one
   by the gap and the heading alone. */
.reslist__heading-form { flex: 1; min-width: 0; }
.report-list { list-style: none; margin: 0; padding: 0; }
.report-list__item { padding: 14px 18px; border-bottom: 1px solid var(--border); }
.report-list__item:last-child { border-bottom: 0; }
.report-list__item .tlink { font-size: 15px; }
.report-list__item p { margin: 4px 0 0; }
.reslist__heading-text, input.reslist__heading-input {
    font-weight: 700; text-transform: uppercase; font-size: 16px;
    letter-spacing: .03em; color: var(--text-soft);
}
input.reslist__heading-input {
    width: 100%; border: 1px solid transparent; background: transparent;
    padding: 5px 8px; border-radius: 5px; font-family: inherit;
}
input.reslist__heading-input:hover { background: var(--surface); }
input.reslist__heading-input:focus { border-color: var(--border-strong); background: var(--surface); outline: none; }
.reslist__del { font-size: 19px; line-height: 1; padding: 0 4px; }

/* ---------- Invoices ---------- */
/* Customer show page: details laid out as a horizontal band above the
   invoice list, not a narrow side column — a fixed-width sidebar next to a
   list that can grow long wastes horizontal space the table could use. */
.customer-info__row { display: flex; align-items: flex-start; gap: 28px; flex-wrap: wrap; }
.customer-info__item { display: flex; flex-direction: column; gap: 3px; min-width: 140px; }
.customer-info__value { font-size: 14px; font-weight: 500; white-space: pre-line; }
.customer-info__edit { margin-left: auto; }

.status-bar__row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* Packaging lists: one Save for every name (2026-10-26) — a changed name is tinted until saved */
.js-attr-name.is-changed { border-color: var(--accent); background: var(--accent-bg-soft); }
.attr-pending { align-self: center; font-size: 13px; }
.attr-foot { position: sticky; bottom: 0; z-index: 5; display: flex; justify-content: flex-end; align-items: center; gap: 12px; margin-top: 16px; padding: 12px 0; background: var(--bg); border-top: 1px solid var(--border); }
/* Website orders (2026-10-26) */
.pill--wo-processing { background: var(--info-bg); border-color: #c6d3e5; color: #3c5a86; }
.pill--wo-completed { background: var(--ok-bg); border-color: #bcdcc4; color: var(--ok); }
.pill--wo-on-hold, .pill--wo-pending { background: var(--accent-bg-soft); border-color: var(--accent); color: var(--accent-ink); }
.pill--wo-cancelled, .pill--wo-refunded, .pill--wo-failed { background: var(--surface-2); color: var(--text-mute); }
.pill--wo-wholesale { margin-left: 6px; background: var(--accent-bg-soft); border-color: var(--accent); color: var(--accent-ink); font-size: 11px; }
.wo-ship { max-width: 220px; }
.wo-pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.wo-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
.wo-main, .wo-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.wo-main > .card, .wo-side > .card { margin: 0; }
.wo-total td { font-weight: 700; font-size: 15px; }
.wo-who { line-height: 1.6; }
.wo-who p { margin: 6px 0 10px; }
.wo-method { font-weight: 600; }
.wo-note { margin: 0; white-space: pre-wrap; }
.wo-history { margin: 0; padding: 0; list-style: none; }
.wo-history li { padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 14px; line-height: 1.5; }
.wo-history li:last-child { border-bottom: 0; }
.wo-history__when { display: block; font-size: 12px; color: var(--text-mute); }
@media (max-width: 900px) { .wo-grid { grid-template-columns: 1fr; } }
/* Invoices from website orders (2026-10-25) */
.inv-web { margin-bottom: 16px; border-color: var(--accent); background: var(--accent-bg-soft); }
.inv-web .field__hint { margin: 4px 0 0; }
.inv-web__warn { margin: 8px 0 0; color: var(--danger); font-weight: 600; }
.inv-web--add .card__body { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.inv-web__pick { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.inv-web__pick select { width: auto; max-width: 100%; }
.inv-web__pick .field__hint { flex-basis: 100%; }
.orow__detail { margin-top: 6px; font-size: 13px; }
.status-bar__form { display: inline-flex; margin: 0; }
button.pill { cursor: pointer; font: inherit; }
button.pill:hover { filter: brightness(0.96); }
.pill.is-current { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Square-cornered throughout, by Tim's request — no rounded gray card
   border, no rounded accent boxes below (Bill to / Total / Notes). */
.invoice-doc { border: none; border-top: 5px solid var(--accent); border-radius: 0; }
.invoice-doc .card__body { padding: 38px 42px; }

.invoice-doc__head {
    display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap;
    margin-bottom: 28px; padding-bottom: 24px; border-bottom: 2px solid var(--border-strong);
}
.invoice-doc__business { font-size: 13.5px; line-height: 1.6; color: var(--text-soft); }
.invoice-doc__business strong { color: var(--text); font-size: 16px; }
/* the logo is served with its empty border trimmed, so it sits flush with the text below */
.invoice-doc__logo { display: block; max-width: 200px; max-height: 64px; width: auto; height: auto; margin-bottom: 18px; }
.settings-logo-preview { display: block; max-width: 240px; max-height: 120px; width: auto; height: auto; margin-bottom: 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 6px; }
.settings-stack { max-width: 640px; display: flex; flex-direction: column; gap: 16px; }
.settings-stack > .card { margin: 0; }
.settings-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.invoice-doc__meta { text-align: right; min-width: 220px; }
.invoice-doc__meta h1 { font-size: 30px; letter-spacing: 3px; margin: 0 0 18px; color: var(--accent-ink); }
/* Number / Date / Due / Order as two columns: labels right-aligned, values all starting on one line */
.invoice-doc__meta .deflist { display: grid; grid-template-columns: auto auto; justify-content: end; align-items: baseline; column-gap: 18px; row-gap: 8px; font-size: 14px; }
.invoice-doc__meta .deflist__row { display: contents; }
.invoice-doc__meta .deflist dt { color: var(--text-mute); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; text-align: right; }
.invoice-doc__meta .deflist dd { font-weight: 600; text-align: left; margin: 0; }
.invoice-doc__meta .deflist__row:last-child dd { color: var(--accent-ink); }

.invoice-doc__parties {
    margin-bottom: 22px; background: var(--surface-2); border-left: 3px solid var(--accent);
    padding: 14px 18px;
    display: flex; gap: 32px; flex-wrap: wrap;
}
.invoice-doc__party { flex: 1; min-width: 200px; }
.invoice-doc__parties .field__label { color: var(--accent-ink); }
.invoice-doc__parties p { margin: 6px 0 0; line-height: 1.6; }

.invoice-doc__table thead th {
    background: var(--accent-bg-soft); text-transform: uppercase; font-size: 11px;
    letter-spacing: .05em; color: var(--accent-ink); border-bottom: 2px solid var(--accent);
}
.invoice-doc__table td { padding-top: 11px; padding-bottom: 11px; }
.invoice-doc__table tfoot td { font-weight: 600; border-top: 2px solid var(--border); border-bottom: 0; }

/* padding-right matches .table td's own right padding (18px) so the dollar
   figures here form one continuous right-aligned column with the "Line
   total" numbers above — without it they sit flush with the card edge
   instead, ~18px further right than the table's own inset text. */
.invoice-doc__totals { display: flex; justify-content: flex-end; margin-top: 14px; padding-right: 18px; }
.invoice-doc__totals .deflist { width: 300px; max-width: 100%; }
.invoice-doc__grand {
    background: var(--accent-bg); border-top: none; margin-top: 8px !important;
    padding: 12px 14px !important;
}
.invoice-doc__grand dt, .invoice-doc__grand dd { font-size: 18px; color: var(--accent-ink); }

.invoice-doc__notes { margin-top: 26px; padding: 14px 18px; border-top: none; background: var(--surface-2); }
.invoice-doc__notes p { margin: 6px 0 0; white-space: pre-wrap; }
/* the wholesale terms carried over from a website order (2026-10-26) — quiet small print above the footer */
.invoice-doc__terms { margin-top: 26px; font-size: 12px; line-height: 1.55; color: var(--text-soft); }
.invoice-doc__terms p { margin: 4px 0 0; max-width: 680px; }

.invoice-doc__footer {
    display: flex; align-items: flex-end; justify-content: space-between;
    margin-top: 30px; padding-top: 14px; border-top: 1px solid var(--border-strong);
    font-size: 11px; color: var(--text-mute);
}
.invoice-doc__footer-business { flex: 1; }
.invoice-doc__footer-sep { margin: 0 8px; color: var(--border-strong); }
.invoice-doc__footer-page { flex: none; text-align: right; }
.invoice-doc__footer-page::before { content: "Page 1 of 1"; }

/* Real, auto-updating "Page X of Y" via CSS Paged Media — only resolves
   during print (these counters have no meaning on a normal single-page
   web view), and only in Chromium/Safari; Firefox doesn't support @page
   margin boxes as of 2026. The in-flow ".invoice-doc__footer-page" above
   shows "Page 1 of 1" for the on-screen preview and as a Firefox
   fallback; this print-only rule quietly supersedes it with the real
   count wherever the browser supports it. */
@media print {
    .invoice-doc__footer-page::before { content: ""; }
    @page {
        margin-bottom: 0.7in;
        @bottom-right {
            content: "Page " counter(page) " of " counter(pages);
            font-family: var(--font);
            font-size: 10px;
            color: var(--text-mute);
        }
    }
}

/* Backgrounds/tints above are load-bearing for this document, not just
   decorative — force them to survive to the printed page (most browsers
   strip background colors on print by default). */
.invoice-doc, .invoice-doc * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

@media print {
    .status-bar { display: none !important; }
}

/* ---------- Production sheets (printable pick sheet from a real wholesale order) ---------- */
.prod-sheet__head {
    display: flex; gap: 32px; flex-wrap: wrap;
    margin-bottom: 16px; padding-bottom: 12px; border-bottom: 2px solid var(--border-strong);
}
.prod-sheet__head > div { display: flex; flex-direction: column; gap: 2px; }
.prod-sheet__head strong { font-size: 16px; }
.prod-sheet__contact { font-size: 13px; color: var(--text-soft); }
.prod-sheet__packs { white-space: nowrap; }
.prod-sheet__box { white-space: nowrap; }
.prod-sheet__each { font-size: .8em; color: var(--text-soft); }
/* per-row label print button (2026-10-31) — .btn is hidden on the printout */
.prod-sheet__table .prod-sheet__print { width: 1%; padding-left: 4px; }
.prod-sheet__label { margin: -3px 0; padding: 3px 7px; gap: 3px; font-size: 12px; }
.prod-sheet__label svg { width: 14px; height: 14px; }
.prod-sheet .prod-sheet__total td { border-top: 2px solid var(--border-strong); border-bottom: 0; }
.prod-sheet .prod-sheet__table .prod-sheet__total td:first-child { text-align: left; }
.prod-sheet .prod-sheet__table .prod-sheet__total .cell-sub { white-space: normal; }

/* Pack labels (2026-10-31): 4 × 6 thermal labels, one per pack — ticked ones print, one per page. */
.pack-labels__note { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 16px; }
.pack-labels__note p { margin: 0; }
.pack-labels__all { display: flex; gap: 8px; }
.pack-labels { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.pack-label { display: flex; flex-direction: column; gap: 8px; cursor: pointer; }
.pack-label__pick { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; line-height: 1.3; }
.pack-label__pick input { margin-top: 2px; }
.pack-label img { width: 100%; aspect-ratio: 2 / 3; border: 1px solid var(--border-strong); border-radius: 4px; background: #fff; }
.pack-label:not(.is-on) img { opacity: .35; }
@media print {
    body:has(.pack-labels) .page-head, .pack-labels__note, .pack-label__pick, .pack-label:not(.is-on) { display: none !important; }
    /* Each label is one exact 4 × 6 page: a block (an inline image leaves a sliver of line
       space under it, which spilled a blank label after every one — Tim, 2026-10-31),
       a hair under 6 in so rounding can't tip it over, and nothing around it adding height. */
    html:has(.pack-labels), body:has(.pack-labels) { margin: 0; padding: 0; background: #fff; }
    body:has(.pack-labels) .app, body:has(.pack-labels) .main, body:has(.pack-labels) .content { display: block; margin: 0; padding: 0; min-height: 0; }
    .pack-labels { display: block; margin: 0; }
    .pack-label { display: block; width: 4in; height: 5.98in; margin: 0; padding: 0; overflow: hidden; break-inside: avoid; break-after: page; page-break-after: always; }
    .pack-label.is-last { break-after: auto; page-break-after: auto; }
    .pack-label img { display: block; width: 100%; height: 100%; aspect-ratio: auto; border: 0; border-radius: 0; }
}
/* Normal on screen — Tim only wanted the bump in print. */
.prod-sheet__table th, .prod-sheet__table td { font-size: 16px; padding: 14px 18px; }
/* QC / Packed tick-boxes (2026-10-06): plain squares that print cleanly; tick on screen or by hand */
.prod-sheet__table .prod-sheet__check { width: 84px; text-align: center; white-space: nowrap; padding-left: 10px; padding-right: 10px; }
/* the columns right of Product get room of their own, rather than the product
   name taking it all, and each heading sits centred over its column; Product
   stays left (Tim, 2026-10-29) */
.prod-sheet .prod-sheet__table th:not(:first-child), .prod-sheet .prod-sheet__table td:not(:first-child) { text-align: center; white-space: nowrap; }
@media screen and (min-width: 900px) {
    .prod-sheet__table th:nth-child(2) { width: 11%; }  /* # of items */
    .prod-sheet__table th:nth-child(3) { width: 10%; }  /* Packs */
    .prod-sheet__table th:nth-child(4) { width: 12%; }  /* Box */
    .prod-sheet__table th:nth-child(5) { width: 11%; }  /* Weight */
    .prod-sheet__table th.prod-sheet__check { width: 8%; }
}
.prod-sheet__check input { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; margin: 0; vertical-align: middle; border: 1.5px solid #333; border-radius: 3px; background: #fff; cursor: pointer; display: inline-grid; place-content: center; }
.prod-sheet__check input:checked::after { content: "\2713"; font-size: 15px; font-weight: 700; line-height: 1; color: #111; }
.prod-sheet__check input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Print only: a bit bigger than the screen version (still readable from a
   step back while physically packing) but sized — together with the hard
   spacing cuts below — to fit at least 18 line items on one printed page,
   Tim's explicit target. Tuned by measuring real rendered height against a
   held-out 18-row order (see memory), not guessed: 21px/normal padding
   only fit ~14 rows on one page, so per Tim's own fallback ("if spacing
   can't do it, reduce the font") both the size and the padding came down
   together until 18 rows actually fit with a little room to spare. A
   longer order than that will still spill to a second page — an honest
   content-volume limit, not something spacing/font tuning can fix. */
@media print {
    .prod-sheet .card__body { padding: 4px 12px; }
    .prod-sheet__head { margin-bottom: 4px; padding-bottom: 4px; gap: 24px; }
    .prod-sheet__table th, .prod-sheet__table td { font-size: 15px; padding: 2px 10px; }
    /* a little more room right of Product than before, without pushing most product names onto two lines */
    /* 7px (was 12) since the Weight column came in (2026-10-31) — keeps names on one line */
    .prod-sheet__table th:not(:first-child):not(.prod-sheet__check), .prod-sheet__table td:not(:first-child):not(.prod-sheet__check) { padding-left: 7px; padding-right: 7px; }
    .prod-sheet__table .prod-sheet__check { width: 1%; padding-left: 6px; padding-right: 6px; }
    .prod-sheet__each { display: none; } /* "each" / "+ box": the Packs column already says 2 × 6 */
    .prod-sheet__table .prod-sheet__print { display: none; }
    /* the box SKU alone on paper: its size underneath doubled every row and broke the 18-lines-a-page fit */
    .prod-sheet__box .cell-sub { display: none; }
    /* smaller headings, so a heading like "# of items" isn't what sets its column's width */
    .prod-sheet__table thead th { font-size: 12px; }
}

/* The production sheet's printout (Tim, 2026-10-31) — its own layout, replacing the
   card above on paper. Everything near-black: the printer is black and white, where
   light greys only wash out. */
.pp { display: none; }
@media print {
    .prod-sheet-head, .prod-sheet { display: none !important; }
    .pp { display: block; color: #000; }
    .pp__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding-bottom: 10px; border-bottom: 2.5px solid #000; }
    .pp__kicker { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
    .pp__cust { font-size: 22px; font-weight: 700; line-height: 1.15; margin-top: 2px; }
    .pp__contact, .pp__date { font-size: 13px; }
    .pp__order { text-align: right; }
    .pp__num { font-size: 30px; font-weight: 700; line-height: 1; }
    .pp__date { margin-top: 4px; }
    .pp__table { width: 100%; border-collapse: collapse; margin-top: 14px; }
    .pp__table th { font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; text-align: left; padding: 0 6px 6px; }
    .pp__table td { font-size: 14px; padding: 5px 6px; border-bottom: 1px solid #bbb; vertical-align: middle; }
    .pp__table tr { break-inside: avoid; }
    .pp__name { font-weight: 600; }
    .pp__kind { font-weight: 400; }
    .pp__n { text-align: right !important; font-variant-numeric: tabular-nums; }
    .pp__units { font-weight: 600; }
    /* centred with room either side, so the unit count and "2 × 6" don't run together */
    .pp__packs { text-align: center !important; font-size: 12.5px; white-space: nowrap; padding-left: 20px !important; padding-right: 12px !important; }
    .pp__box { font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; font-size: 12px; white-space: nowrap; }
    .pp__wt { white-space: nowrap; }
    .pp__ck { width: 40px; text-align: center !important; padding-left: 3px !important; padding-right: 3px !important; }
    .pp__ck span { display: inline-block; width: 15px; height: 15px; border: 1.2px solid #000; border-radius: 2px; vertical-align: middle; }
    .pp__foot { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; margin-top: 12px; padding-top: 8px; border-top: 2.5px solid #000; break-inside: avoid; }
    .pp__foot-label { font-size: 13px; font-weight: 600; }
    .pp__foot-note { font-size: 11px; margin-top: 2px; }
    .pp__total { font-size: 20px; font-weight: 700; white-space: nowrap; }
    .pp__total small { font-size: 11px; font-weight: 500; margin-right: 6px; }
}

/* ---------- Custom production runs: product picker on the left, the run on
   the right; printing swaps both for a production-sheet style table. ---------- */
.cr-grid { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(320px, 1.4fr); gap: 18px; align-items: start; }
@media (max-width: 860px) { .cr-grid { grid-template-columns: 1fr; } }
.cr-list { list-style: none; margin: 0; padding: 0; max-height: 62vh; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.cr-list > li + li { border-top: 1px solid var(--border); }
.cr-list > li.muted { padding: 10px 12px; }
.cr-list__item {
    display: flex; align-items: center; gap: 8px; width: 100%;
    padding: 9px 12px; background: none; border: 0; text-align: left;
    font: inherit; color: inherit; cursor: pointer;
}
.cr-list__item:hover { background: var(--accent-bg-soft); }
.cr-list__item > span:first-child { flex: 1; }
.cr-list__action { font-size: 12.5px; font-weight: 600; color: var(--accent-ink); white-space: nowrap; }
.cr-list__item.is-added { cursor: default; color: var(--text-mute); }
.cr-list__item.is-added:hover { background: none; }
.cr-list__item.is-added .cr-list__action { color: var(--text-mute); font-weight: 400; }
input.cr-run__qty { width: 90px; text-align: right; }
/* run tabs reuse the packaging overview's tab look, as buttons */
.cr-tabs .pkg-tab { background: none; font-family: inherit; cursor: pointer; }
.cr-tabs .pkg-tab:hover { background: var(--surface-2); }
.cr-tabs .pkg-tab.is-active { background: var(--surface); }
.cr-tabs__new { color: var(--accent-ink) !important; }
.cr-status { font-size: 12.5px; }
.cr-status.is-bad { color: var(--danger); font-weight: 600; }
.cr-send__msg { min-height: 1.3em; margin: 4px 0 10px; font-size: 13.5px; color: var(--text-soft); }
.cr-send__msg.is-bad { color: var(--danger); font-weight: 600; }
.cr-print { display: none; }
.cr-print__doc { font-size: 26px; margin: 0 0 4px; padding-bottom: 6px; border-bottom: 2px solid currentColor; }
.cr-print__title { font-size: 19px; font-weight: 600; margin: 8px 0 10px; }
.cr-print__done { width: 70px; }
.cr-print__notes { margin: 12px 0 0; font-size: 14px; white-space: pre-wrap; }
@media print {
    .cr-screen { display: none !important; }
    .cr-print { display: block !important; }
    td.cr-print__done { border: 1.5px solid #555 !important; }
}

/* ---------- Formulation print (Tim's ask, 2026-09-22): a hard-copy recipe
   book shouldn't carry cost figures — the ingredient list's own Cost column
   and the whole Cost card in the sidebar, on-screen otherwise, print only. */
@media print {
    .formulation-cost-col, .formulation-cost-card { display: none !important; }
}

/* ---------- Conversions (live weight/volume/distance calculator) ---------- */
.conv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; align-items: start; }
.conv-card .card__body { display: flex; flex-direction: column; gap: 12px; }
.conv-card .field__hint { margin-top: -4px; }

/* ---------- Settings > Menu (admin-editable sidebar, Tim's ask, 2026-09-23) ---------- */
.menu-tabs { display: flex; gap: 4px; margin-bottom: 14px; border-bottom: 1px solid var(--border); }
.menu-tab {
    padding: 8px 14px; color: var(--text-soft); font-weight: 500; font-size: 14px;
    border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.menu-tab:hover { color: var(--text); text-decoration: none; }
.menu-tab.is-active { color: var(--accent-ink); border-bottom-color: var(--accent); font-weight: 600; }

.menu-board { display: flex; flex-direction: column; gap: 12px; margin: 14px 0; }
.menu-section {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.menu-section.is-dragging { opacity: .45; background: var(--accent-bg-soft); }
.menu-section__head {
    display: flex; align-items: center; gap: 6px;
    padding: 10px 12px; border-bottom: 1px solid var(--border);
}
.menu-section__rename-form { flex: 1; min-width: 0; }
input.menu-section__title-input {
    width: 100%; border: 1px solid transparent; background: transparent;
    padding: 5px 8px; border-radius: 5px; font: inherit; font-weight: 600; color: inherit;
}
input.menu-section__title-input:hover { background: var(--surface-2); }
input.menu-section__title-input:focus { border-color: var(--border-strong); background: var(--surface-2); outline: none; }
input.menu-section__title-input::placeholder { font-weight: 400; font-style: italic; color: var(--text-mute); }

.menu-items { list-style: none; margin: 0; padding: 4px 0; min-height: 40px; }
.menu-item {
    display: flex; align-items: center; gap: 6px;
    padding: 6px 12px; border-bottom: 1px solid var(--border);
}
.menu-item:last-child { border-bottom: 0; }
.menu-item.is-dragging { opacity: .45; background: var(--accent-bg-soft); }
.menu-item__rename-form { flex: 1; min-width: 0; }
input.menu-item__title-input {
    width: 100%; border: 1px solid transparent; background: transparent;
    padding: 5px 8px; border-radius: 5px; font: inherit; color: inherit;
}
input.menu-item__title-input:hover { background: var(--surface-2); }
input.menu-item__title-input:focus { border-color: var(--border-strong); background: var(--surface-2); outline: none; }
input.menu-item__title-input::placeholder { color: var(--text-mute); }
input.menu-section__title-input.is-saving,
input.menu-item__title-input.is-saving { opacity: .6; }
input.menu-section__title-input.is-saved,
input.menu-item__title-input.is-saved { border-color: var(--ok); background: var(--ok-bg); transition: background .3s, border-color .3s; }
input.menu-section__title-input.is-save-failed,
input.menu-item__title-input.is-save-failed { border-color: var(--danger); background: var(--danger-bg); }
.menu-items__empty { padding: 10px 12px; font-size: 13px; }

.menu-add-item {
    display: flex; gap: 8px; align-items: center;
    padding: 10px 12px; border-top: 1px solid var(--border);
}
.menu-add-item select { flex: 1; min-width: 0; }
.menu-add-section { max-width: 420px; }

/* ---------- Cosmetic notifications (Health Canada CNF) ---------- */
.pill--cnf-draft        { background: #efece8;         border-color: var(--border-strong); color: var(--text-mute); }
.pill--cnf-filed        { background: var(--ok-bg);    border-color: #bcdcc4; color: var(--ok); }
.pill--cnf-discontinued { background: #efece8;         border-color: var(--border-strong); color: var(--text-mute); text-decoration: line-through; }
.cnf-prod { display: block; }
.btn.btn--xs { padding: 2px 8px; font-size: 12px; min-height: 0; }
.cnf-uncovered__list { list-style: none; margin: 8px 0 0; padding: 0; columns: 2 320px; column-gap: 32px; }
.cnf-uncovered__list li { break-inside: avoid; padding: 5px 0; border-bottom: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.cnf-uncovered__list li .btn { margin-left: auto; }

.cnf-check__list { margin: 0; padding: 12px 18px 12px 34px; }
.cnf-check__list li { margin: 3px 0; }
.cnf-check--todo { border-color: #e6c3bf; }
.cnf-check--todo .card__head h3 { color: var(--danger); }
.cnf-check--ok .card__body { color: var(--ok); background: var(--ok-bg); border-radius: var(--radius); font-weight: 500; }
.cnf-deflist dd { text-align: left; }
.cnf-deflist .deflist__row { gap: 24px; }
.cnf-deflist dt { width: 190px; }
.cnf-deflist dd { flex: 1; }
.cnf-ing td { vertical-align: top; }
.cnf-cond { font-size: 12.5px; color: var(--text-soft); margin-top: 3px; max-width: 360px; }
.cnf-cond summary { cursor: pointer; color: var(--accent-ink); }
.cnf-file__form { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.cnf-steps { margin: 0; padding-left: 20px; font-size: 13px; color: var(--text-soft); }
.cnf-steps li { margin: 4px 0; }
.cnf-inline-form { display: flex; gap: 8px; }
.cnf-inline-form input { flex: 1; min-width: 0; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.cnf-plist, .cnf-filings { list-style: none; margin: 0; padding: 0; }
.cnf-plist li, .cnf-filings li { padding: 6px 0; border-bottom: 1px solid var(--border); }
.cnf-plist li:last-child, .cnf-filings li:last-child { border-bottom: 0; }
.cnf-filings form.inline { display: inline; }
.cnf-formula { margin: 10px 0 0; font-size: 13px; }
.cnf-record { margin-top: 12px; }
.cnf-record summary { cursor: pointer; font-weight: 600; color: var(--accent-ink); margin-bottom: 8px; }

.cnf-form { display: flex; flex-direction: column; gap: 16px; }
.cnf-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 4px 16px; margin-top: 4px; }
.cnf-checks--inline { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.cnf-check-opt { display: inline-flex; align-items: flex-start; gap: 7px; font-weight: 400; line-height: 1.35; cursor: pointer; }
.cnf-check-opt input { margin-top: 2px; flex: none; }
.cnf-pick { border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: 8px; }
.cnf-pick__filter { width: 100%; margin-bottom: 6px; }
.cnf-pick__only { font-size: 13px; margin-bottom: 6px; }
.cnf-pick__list { max-height: 240px; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 3px 16px; }
.cnf-pick__list .cnf-check-opt.is-other { color: var(--text-mute); }
.cnf-pick__list .cnf-check-opt[hidden] { display: none; }
.cnf-ing-tools { display: inline-flex; gap: 8px; }
.cnf-irows .cnf-irow__name { min-width: 280px; }
.cnf-irows .cnf-irow__name input { width: 100%; }
.cnf-irows .cnf-irow__name .linkbtn { font-size: 12px; margin-top: 2px; }
.cnf-irows .cnf-irow__conc { min-width: 190px; }
.cnf-irows .cnf-irow__conc select { width: 100%; }
.cnf-irows .cnf-irow__conc .js-exact { width: 100%; margin-top: 4px; }
.cnf-irows .cnf-irow__tick { text-align: center; }
.cnf-irows tr.is-suggested .js-conc { background: var(--accent-bg-soft); border-color: var(--accent); }
.cnf-irows tr.is-dragging { opacity: .45; background: var(--accent-bg-soft); }
#cnfTotals.is-bad { color: var(--danger); font-weight: 600; }
.cnf-contact { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; margin-bottom: 10px; background: var(--surface-2); }
.cnf-contact__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.cnf-contact__head select { min-width: 260px; }
.cnf-contact__head .linkbtn--del { margin-left: auto; }
.cnf-contact__fields { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.cnf-contact__fields[hidden] { display: none; }
@media (max-width: 720px) {
    .cnf-deflist .deflist__row { flex-direction: column; gap: 2px; }
    .cnf-deflist dt { width: auto; }
}
@media print {
    .cnf-show .show-side, .danger-form { display: none !important; }
    .cnf-show { grid-template-columns: 1fr !important; }
}
.show-grid.cnf-show { grid-template-columns: minmax(0, 1fr) 340px; }
@media (max-width: 1000px) { .show-grid.cnf-show { grid-template-columns: 1fr; } }
.cnf-irows { table-layout: fixed; }
.cnf-irows .irow__handle { width: 1.8rem; }
.cnf-irows .cnf-irow__name, .cnf-irows th:nth-child(2) { width: auto; white-space: normal; }
.cnf-irows .cnf-irow__conc, .cnf-irows th:nth-child(3) { width: 13rem; min-width: 0; white-space: normal; }
.cnf-irows .cnf-irow__tick, .cnf-irows th:nth-child(4), .cnf-irows th:nth-child(5) { width: 6.5rem; text-align: center; }
.cnf-irows .cnf-irow__tick input { width: auto; }
.cnf-irows .irow__del, .cnf-irows th:nth-child(6) { width: 2.2rem; }
.cnf-irows tfoot td { white-space: normal; font-weight: 400; }
.cnf-irows tfoot output { font-weight: 700; }
.cnf-irows .cnf-legacy { color: var(--danger); white-space: normal; }
.cnf-ing td:nth-child(2) { min-width: 240px; }
.cnf-irows th:nth-child(1) { width: 1.8rem; }

/* Batch form: "Split between locations" grid */
.table.batch-split { width: auto; min-width: 320px; }
.batch-split td, .batch-split th { padding: 5px 10px; }
.batch-split input { width: 6rem; text-align: right; }
.batch-split tfoot td { font-weight: 700; border-top: 1px solid var(--border-strong); }

/* ---------- Events calendar ---------- */
.pager__btn.is-current { background: var(--accent-bg); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
.pill--ev-tentative { background: var(--accent-bg); border-color: #ecd39a; color: var(--accent-ink); }
.pill--ev-cancelled { background: #efece8; border-color: var(--border-strong); color: var(--text-mute); }
.ev-month { margin: 18px 0 8px; font-size: 14px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-soft); }
.ev-list { padding: 0; }
.ev { display: flex; align-items: flex-start; gap: 16px; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.ev:last-child { border-bottom: 0; }
.ev.is-cancelled .ev__title .tlink, .ev.is-cancelled .ev__meta { text-decoration: line-through; color: var(--text-mute); }
.ev__date { flex: none; width: 64px; text-align: center; border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
    padding: 4px 2px 5px; color: var(--text); text-decoration: none; background: var(--surface); }
.ev__mon { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; color: var(--accent-ink); }
.ev__day { display: block; font-size: 20px; font-weight: 700; line-height: 1.15; white-space: nowrap; }
.ev__dow { display: block; font-size: 11px; color: var(--text-mute); }
.ev__body { flex: 1; min-width: 0; }
.ev__title { font-size: 15px; font-weight: 600; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.ev__when { font-size: 12px; font-weight: 500; color: var(--text-mute); }
.ev__when.is-soon { color: var(--ok); font-weight: 700; }
.ev__meta { font-size: 13px; color: var(--text-soft); margin-top: 3px; overflow-wrap: anywhere; }
.ev__edit { flex: none; }
.ev-cal-head { display: flex; align-items: center; gap: 10px; margin: 6px 0 10px; }
.ev-cal-head h3 { margin: 0 6px; font-size: 18px; min-width: 150px; text-align: center; }
.ev-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); padding: 0; overflow: hidden; }
.ev-cal__dow { padding: 6px 8px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--text-mute); background: var(--surface-2); border-bottom: 1px solid var(--border); }
.ev-cal__day { min-height: 96px; padding: 4px 5px 6px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); min-width: 0; }
.ev-cal__day:nth-child(7n) { border-right: 0; }
.ev-cal__day.is-blank { background: var(--surface-2); }
.ev-cal__day.is-today { background: var(--accent-bg-soft); }
.ev-cal__num { font-size: 12px; font-weight: 600; color: var(--text-soft); margin-bottom: 3px; }
.ev-cal__num a { color: inherit; }
.ev-cal__day.is-today .ev-cal__num { color: var(--accent-ink); }
.ev-chip { display: block; font-size: 11.5px; line-height: 1.3; padding: 2px 5px; margin-bottom: 3px; border-radius: 4px;
    background: var(--info-bg); color: var(--info-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none; }
.ev-chip:hover { filter: brightness(0.96); }
.ev-chip--tentative { background: var(--accent-bg); color: var(--accent-ink); }
.ev-chip--cancelled { background: #efece8; color: var(--text-mute); text-decoration: line-through; }
.ev-chip__t { font-weight: 600; margin-right: 3px; }
.ev-deflist dt { width: 140px; }
.ev-deflist .deflist__row { gap: 24px; justify-content: flex-start; }
.ev-deflist dd { text-align: left; flex: 1; }
.ev-notes-head { font-size: 13px; margin: 16px 0 6px; color: var(--text-soft); text-transform: uppercase; letter-spacing: 0.04em; }
.ev-notes { white-space: normal; line-height: 1.5; }
.ev-detail { max-width: 760px; }
@media (max-width: 640px) {
    .ev { flex-wrap: wrap; }
    .ev-cal__day { min-height: 64px; padding: 3px; }
    .ev-chip { font-size: 10px; padding: 1px 3px; }
    .ev-cal__dow { padding: 4px 2px; font-size: 10px; text-align: center; }
}
.ev-tag { display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
    padding: 1px 7px; border-radius: 4px; vertical-align: 1px; }
.ev-tag--setup { background: var(--ok-bg); color: var(--ok); }
.ev-tag--teardown { background: var(--purple-bg); color: var(--purple); }
.ev__st { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 6px; font-size: 13px; font-weight: 500; color: var(--text); }
.ev-st { border: 1px solid var(--border-strong); border-radius: var(--radius); padding: 10px 14px 12px; margin: 6px 0 0;
    background: var(--surface-2); display: flex; flex-direction: column; gap: 8px; }
.ev-st legend { font-weight: 700; font-size: 13px; padding: 0 6px; }
.ev-st-box { display: flex; flex-wrap: wrap; gap: 12px; max-width: 760px; margin-bottom: 14px; }
.ev-st-box__item { flex: 1 1 240px; display: flex; align-items: center; gap: 10px; padding: 12px 14px;
    border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface); font-size: 15px; }
.ev-chip--setup { background: var(--ok-bg); color: var(--ok); }
.ev-chip--teardown { background: var(--purple-bg); color: var(--purple); }

/* Links in task text / the day's overview (2026-10-01) */
.checklist__link { flex: none; font-size: 12.5px; font-weight: 600; white-space: nowrap; padding: 2px 8px; border-radius: 5px;
    background: var(--accent-bg-soft); border: 1px solid #ecd39a; color: var(--accent-ink); text-decoration: none; max-width: 40%;
    overflow: hidden; text-overflow: ellipsis; }
.checklist__link:hover { background: var(--accent-bg); }
.checklist__item.is-done .checklist__link { opacity: .7; }
.text-link { font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* Batch tracking: runs that have reached their ready date (2026-10-01) */
.run-ready { border: 1px solid #bcdcc4; background: var(--ok-bg); border-radius: var(--radius); padding: 12px 16px; margin-bottom: 16px; }
.run-ready__head { display: flex; align-items: center; gap: 8px; color: var(--ok); font-size: 15px; }
.run-ready__head svg { width: 18px; height: 18px; }
.run-ready__list { list-style: none; margin: 8px 0 0; padding: 0; }
.run-ready__list li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 6px 0; border-top: 1px solid #cfe5d5; }
.run-ready__list li .btn { margin-left: auto; }
.table tr.is-ready td { background: var(--ok-bg); }
.table tr.is-ready .tag { background: var(--ok); color: #fff; }

/* Product variant: where its size comes from (2026-10-01) */
.vcard__dims-src { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 4px; }
.vcard__dims input::placeholder { color: var(--accent-ink); opacity: .6; }

/* ---------- Contacts (2026-10-01) ---------- */
.pill--cs-new         { background: var(--info-bg);   border-color: #c6d3e5; color: var(--info-ink); }
.pill--cs-interviewed { background: var(--purple-bg); border-color: #d6c7ea; color: var(--purple); }
.pill--cs-hired       { background: var(--ok-bg);     border-color: #bcdcc4; color: var(--ok); }
.pill--cs-not_now     { background: var(--accent-bg); border-color: #ecd39a; color: var(--accent-ink); }
.pill--cs-rejected    { background: #efece8;          border-color: var(--border-strong); color: var(--text-mute); }
.table--contacts th, .table--contacts td { padding: 10px 12px; }
.table--contacts .contact-note-cell { min-width: 11rem; max-width: 34rem; font-size: 13.5px; }
@media (min-width: 641px) {
    /* Short values stay on one line; the name and latest note do the wrapping. */
    .table--contacts td:first-child { min-width: 9rem; }
    .table--contacts td[data-label="Came in"], .table--contacts td[data-label="Status"],
    .table--contacts td[data-label="Phone"], .table--contacts td[data-label="Email"],
    .table--contacts td[data-label="Resume"] { white-space: nowrap; }
}
/* Date boxes on the Contacts pages, matched to the other inputs (scoped here
   so date fields elsewhere in Central don't shift). */
.tools-add input[type="date"], .contact-note-form__row input[type="date"], .contact-details input[type="date"] {
    font: inherit; font-size: 14px; padding: 8px 10px;
    border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
    background: var(--surface); color: var(--text);
}
.contact-details input[type="date"] { width: 100%; }
.tools-add input[type="date"] { flex: 0 0 10rem; min-width: 0; }
.contact-note-form textarea { width: 100%; resize: vertical; }
.contact-note-form__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.contact-note-form__row label { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-soft); }
.contact-note-form__row input[type="date"] { width: auto; }
.contact-notes { list-style: none; margin: 18px 0 0; padding: 0; }
.contact-notes li { padding: 12px 0; border-top: 1px solid var(--border); }
.contact-notes__head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 13px; }
.contact-notes__body { margin-top: 4px; line-height: 1.5; }
.contact-files { list-style: none; margin: 0 0 14px; padding: 0; }
.contact-files li { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.contact-files li > div { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.contact-files__thumb { width: 64px; height: 64px; object-fit: cover; border-radius: 6px; border: 1px solid var(--border); display: block; }
.contact-files__pdf { width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; border-radius: 6px; border: 1px solid var(--border); background: var(--danger-bg); color: var(--danger); font-weight: 700; font-size: 13px; text-decoration: none; }
.contact-upload { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.contact-upload input[type="file"] { flex: 1; min-width: 0; }

/* ---------- Back-in-stock emails (2026-10-01) ---------- */
.bis-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; margin-top: 14px; }
@media (max-width: 900px) { .bis-grid { grid-template-columns: 1fr; } }
.bis-grid textarea { width: 100%; resize: vertical; line-height: 1.5; }
.bis-fillins summary { cursor: pointer; font-size: 13px; color: var(--accent-ink); font-weight: 600; }
.bis-fillins ul { margin: 8px 0 6px; padding-left: 18px; font-size: 13px; line-height: 1.6; }
.bis-preview__meta { font-size: 13px; line-height: 1.6; margin-bottom: 10px; }
.bis-preview__meta .muted { display: inline-block; min-width: 4.5rem; }
.bis-preview__frame { width: 100%; height: 560px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: #f6f5f1; }
.bis-to { margin: 0 0 4px; font-size: 14px; }
.bis-recipients { list-style: none; margin: 0; padding: 0; }
.bis-recipients li { padding: 6px 0; border-bottom: 1px solid var(--border); }
.bis-recipients label { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; cursor: pointer; }
.bis-look { margin-top: 18px; }
.bis-look__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px 18px; }
.bis-logo { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }
.bis-logo__img { flex: 0 1 300px; min-height: 90px; display: flex; align-items: center; justify-content: center; padding: 14px; border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); text-align: center; font-size: 13px; }
.bis-logo__img img { max-width: 100%; height: auto; display: block; }
.bis-logo__controls { flex: 1 1 260px; display: grid; gap: 10px; align-content: start; }
.bis-logo__width { display: inline-flex; align-items: center; gap: 6px; }
.bis-logo__width input { width: 6rem; }
.bis-auto { display: inline-flex; align-items: center; gap: 6px; margin-left: 10px; font-size: 13px; }
.bis-logo__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px 14px; }

/* Packaging catalogue + inventory: one card per status (2026-10-01). */
.status-group + .status-group { margin-top: 18px; }
.status-group + .pform__foot { margin-top: 14px; }

/* ---------- Store overheads (2026-10-02) ---------- */
.pill--oh-open    { background: var(--ok-bg);     border-color: #bcdcc4; color: var(--ok); }
.pill--oh-opening { background: var(--info-bg);   border-color: #c6d3e5; color: var(--info-ink); }
.pill--oh-closed  { background: #efece8;          border-color: var(--border-strong); color: var(--text-mute); }
.page-head__title .pill { font-size: 12px; vertical-align: middle; margin-left: 6px; }
.oh-store .card__head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.oh-store__addr { margin: 0 0 10px; font-size: 13px; }
.oh-headline { display: flex; flex-direction: column; margin-bottom: 12px; }
.oh-headline__value { font-size: 30px; font-weight: 700; line-height: 1.1; color: var(--accent-ink); }
.oh-headline__label { font-size: 13px; color: var(--text-soft); }
.oh-figures { margin-bottom: 8px; }
.oh-figures th, .oh-figures td { padding: 8px 10px; }
.oh-figures__day td { background: var(--accent-bg-soft); }
.oh-figures__note { margin-top: 6px; }
.oh-business { margin-top: 18px; }
.oh-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px 24px; }
.oh-stats > div { display: flex; flex-direction: column; }
.oh-stats__label { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-mute); font-weight: 600; }
.oh-stats__value { font-size: 24px; font-weight: 700; }
.oh-stats__sub { font-size: 13px; color: var(--text-soft); }
.oh-closed { margin-top: 18px; }
.oh-split { margin: 0 0 14px; font-size: 14px; }
.oh-money { display: inline-flex; align-items: center; gap: 2px; }
.table--overheads .oh-amount { width: 6rem; text-align: right; }
.table--overheads td.num .oh-money input, .table--overheads td.num input.oh-amount { margin-left: 0; }
.table--overheads input.oh-amount:disabled { opacity: .35; }
.table--overheads .oh-total td { background: var(--surface-2); }
.oh-add .oh-money input { width: 6.5rem; }
.oh-add .oh-hours input { width: 5.5rem; }
.oh-add input.js-oh-hours:disabled { opacity: .45; }

/* Store overheads — real sales vs targets (2026-10-02) */
.oh-sales-meta { margin: 0 0 10px; font-size: 13px; }
.oh-sub { margin: 14px 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-mute); }
.oh-sales { display: grid; gap: 10px; }
.oh-sales__row { display: grid; gap: 4px; }
.oh-sales__top { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 14px; }
.oh-sales__pct { display: inline-block; min-width: 2.75rem; text-align: right; font-weight: 600; color: var(--text); }
.oh-bar { height: 8px; border-radius: 4px; background: var(--surface-2); border: 1px solid var(--border); overflow: hidden; }
.oh-bar__fill { display: block; height: 100%; background: var(--accent); border-radius: 4px; }
.oh-sales__avg { margin: 6px 0 0; font-size: 14px; }
.oh-chart { margin: 10px 0 0; }
.oh-chart figcaption { font-size: 12px; margin-bottom: 4px; }
.oh-chart svg { width: 100%; height: auto; display: block; }
.oh-chart__bar { fill: var(--accent); }
.oh-chart__bar:hover { fill: var(--accent-ink); }
.oh-chart__axis { stroke: var(--border-strong); stroke-width: 1; }
.oh-chart__target { stroke: var(--text-soft); stroke-width: 2; stroke-dasharray: 6 5; }
.oh-chart__tick { font-size: 11px; fill: var(--text-mute); }

/* Store overheads — clearer separation of the sales comparison (2026-10-02) */
.oh-section { margin-bottom: 22px; display: grid; gap: 16px; }
.oh-section__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-bottom: 8px; border-bottom: 2px solid var(--border-strong); }
.oh-section__head h3 { margin: 0; font-size: 18px; }
.oh-section__head .muted { font-size: 13px; }
.oh-section__pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 16px; align-items: start; }
@media (max-width: 1000px) { .oh-section__pair { grid-template-columns: 1fr; } }
.oh-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.oh-tiles--compact { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.oh-tile { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); padding: 12px 14px; display: flex; flex-direction: column; gap: 3px; }
.oh-tiles--compact .oh-tile { padding: 9px 10px; }
.oh-tile__head { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
.oh-tile__label { font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-mute); font-weight: 600; }
.oh-tile__pct { font-size: 13px; font-weight: 700; color: var(--text); }
.oh-tile__value { font-size: 24px; font-weight: 700; line-height: 1.15; }
.oh-tiles--compact .oh-tile__value { font-size: 18px; }
.oh-tile__target { font-size: 12.5px; color: var(--text-soft); margin-bottom: 6px; }
.oh-tile__note { font-size: 12px; color: var(--text-mute); margin-top: 4px; }
.oh-panel { background: var(--accent-bg-soft); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px 12px; margin: 4px 0 6px; }
.oh-panel .oh-sub { margin-top: 0; }
.oh-last30 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.oh-last30__stat { display: flex; flex-direction: column; gap: 2px; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; }
.oh-months__summary { margin: 0 0 8px; font-size: 14px; }
.oh-chart__bar--partial { fill: var(--accent); opacity: .45; }
.oh-chart__value { font-size: 11px; fill: var(--text-soft); font-weight: 600; }
.oh-chart__label { font-size: 11px; fill: var(--text-soft); }
.oh-chart__label--num { font-weight: 700; fill: var(--text); }
.oh-months__table { margin-top: 12px; }
.oh-months__table th, .oh-months__table td { padding: 7px 10px; font-size: 13.5px; }

/* Store overheads layout tidy-up (2026-10-02, Tim): a literal divide between
   "How sales compare" and "Sales needed", no shaded panel; cards stacked in
   one column on the store page. */
.oh-store-block { margin-top: 22px; }
.oh-store-block__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-bottom: 8px; margin-bottom: 12px; border-bottom: 2px solid var(--border-strong); }
.oh-store-block__head h3 { margin: 0; font-size: 18px; }
.oh-store-block__head .muted { font-size: 13px; }
.oh-store-block__link { margin-left: auto; }
.oh-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
@media (max-width: 900px) { .oh-pair { grid-template-columns: 1fr; } }
.oh-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 16px; align-content: start; }
.oh-details .oh-details__wide, .oh-details > input[type="hidden"] { grid-column: 1 / -1; }
@media (max-width: 640px) { .oh-details { grid-template-columns: 1fr; } }
.oh-chart__halo { paint-order: stroke; stroke: var(--surface); stroke-width: 4px; stroke-linejoin: round; }

/* Store overheads — what's still needed (2026-10-02) */
.oh-sales__gap { font-size: 12.5px; text-align: right; margin-top: 2px; }
.oh-tile__gap { font-size: 13px; margin-top: 4px; }
.oh-gap { color: var(--text-soft); font-weight: 600; }
.oh-gap--done { color: var(--ok); }
input[type="month"] { font: inherit; font-size: 14px; padding: 8px 10px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); width: 100%; }

/* Revenue (2026-10-02): every channel month by month, stacked. */
.rv-year { display: flex; align-items: center; gap: 8px; }
.rv-year select { width: auto; }
.rv-legend { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 13px; }
.rv-legend__group { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; flex-basis: 100%; } /* In person and Website each on their own line (Tim) */
.rv-legend__name { font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-mute); font-weight: 600; min-width: 6.5rem; }
.rv-legend__item { display: inline-flex; align-items: center; color: var(--text); }
.rv-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; flex: none; }
.rv-hit { fill: transparent; }
.rv-month:hover .rv-hit { fill: var(--surface-2); }
.rv-month--partial .rv-seg { opacity: .45; }
.rv-seg:hover { opacity: .8; }
.rv-month--partial .rv-seg:hover { opacity: .65; }
.rv-table { margin-top: 12px; }
.rv-table th, .rv-table td { padding: 7px 10px; font-size: 13.5px; white-space: nowrap; }
.rv-table th.rv-group { text-align: center; border-bottom: 1px solid var(--border); }
.rv-table .rv-sub { background: var(--surface-2); }
.rv-table .rv-total td { border-top: 2px solid var(--border-strong); font-weight: 600; }
/* Revenue — year over year (2026-10-02). */
.rv-toggle { display: inline-flex; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); overflow: hidden; font-size: 13px; }
.rv-toggle a { padding: 5px 12px; color: var(--text-soft); text-decoration: none; border-left: 1px solid var(--border); }
.rv-toggle a:first-child { border-left: 0; }
.rv-toggle a:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.rv-toggle a.is-active { background: var(--text); color: var(--surface); font-weight: 600; }
.rv-toggle--sm { font-size: 12.5px; }
.rv-toggle--sm a { padding: 3px 10px; }
.rv-grid { stroke: var(--border); stroke-width: 1; }
.rv-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.rv-line--main { stroke-width: 3; }
.rv-dot { stroke: var(--surface); stroke-width: 2; }
.rv-dot--partial { fill: var(--surface); stroke-width: 2.5; }
.rv-line-key { display: inline-block; width: 16px; height: 3px; border-radius: 2px; margin-right: 6px; }
.rv-dash-key { display: inline-block; width: 16px; border-top: 2px dashed var(--text-soft); margin-right: 6px; }
.rv-details { margin-top: 10px; }
.rv-details summary { cursor: pointer; font-size: 13.5px; color: var(--text-soft); }
.rv-note { margin-top: 8px; }
#yoy .oh-tile__gap { margin-top: 4px; }
/* Revenue colours page (2026-10-02). */
.rv-colours__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
@media (max-width: 1100px) { .rv-colours__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rv-colours__preview { grid-column: 1 / -1; }
@media (max-width: 640px) { .rv-colours__grid { grid-template-columns: 1fr; } }
.rv-colours .oh-sub:first-child { margin-top: 0; }
.rv-colours__row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 6px 0; border-bottom: 1px solid var(--border); }
.rv-colours__row:last-child { border-bottom: 0; }
.rv-colours__name { flex: 1 1 9rem; font-size: 14px; }
.rv-colours__was { font-size: 12px; display: inline-flex; align-items: center; gap: 4px; }
.rv-colours__was .rv-swatch { margin-right: 0; }
.rv-colours__svg { width: 100%; height: auto; display: block; margin: 4px 0 12px; }
.rv-colours__actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
/* Revenue — click a legend entry to hide / show that channel (2026-10-03). */
a.rv-chip { color: var(--text); text-decoration: none; border-radius: 4px; padding: 1px 4px; margin: -1px -4px; }
a.rv-chip:hover { background: var(--surface-2); text-decoration: none; }
a.rv-chip.is-off { color: var(--text-mute); text-decoration: line-through; }
a.rv-chip.is-off .rv-swatch { background: transparent !important; box-shadow: inset 0 0 0 1.5px var(--border-strong); }
.rv-hidden-note a { margin-left: 6px; }
/* Trend & projection. */
.rv-layers { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 8px; font-size: 13px; }
.rv-layer-toggle { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; color: var(--text); }
.rv-layer-toggle input { margin: 0; }
.rv-layer-toggle .rv-swatch, .rv-layer-toggle .rv-line-key { margin-right: 0; }
.rv-proj-key { display: inline-block; width: 11px; height: 11px; border: 1.5px dashed; border-radius: 2px; }
.rv-proj-bar { fill: none; stroke-width: 1.5; stroke-dasharray: 4 3; }
.rv-proj-range { stroke-width: 1.5; opacity: .7; }
.rv-line--dashed { stroke-width: 2.5; stroke-dasharray: 7 5; }
.rv-trend__year { font-weight: 600; fill: var(--text-soft); }
.rv-proj-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 18px; margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--border); font-size: 13.5px; }
.rv-proj-form label { display: flex; flex-direction: column; gap: 4px; color: var(--text-soft); }
.rv-proj-form select { width: auto; }
.rv-proj-form__num { display: inline-flex; align-items: center; gap: 6px; color: var(--text); }
.rv-proj-form__num input { width: 5rem; }
.rv-explain p { font-size: 13.5px; margin: 8px 0 0; color: var(--text-soft); }
.oh-tile__value small { font-size: 13px; font-weight: 600; }
/* Price cards in the Suppliers-style layout, + group cards (2026-10-03). */
.pricecards-editor { margin-bottom: 16px; }
.pricecards-editor .card__head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.pc-head-tools { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pc-head-tools .muted { font-size: 13px; margin-right: 4px; }
.table--pricecards td.pc-tick, .table--pricecards th.pc-tick,
#pcGroupProducts td.pc-tick, #pcGroupProducts th.pc-tick { width: 1%; white-space: nowrap; text-align: center; }
.table--quiet textarea {
    width: 100%; min-width: 0; resize: vertical; font: inherit; font-size: 13.5px; line-height: 1.4;
    border: 1px solid transparent; background: transparent; border-radius: var(--radius-sm);
    padding: 6px 8px; margin-left: -8px; color: var(--text);
}
.table--quiet textarea:hover { background: var(--surface); border-color: var(--border); }
.table--quiet textarea:focus { background: var(--surface); border-color: var(--accent); outline: none; }
.table--pricecards .td-url { display: flex; align-items: center; gap: 6px; }
.table--pricecards .td-url input { flex: 1 1 auto; width: auto; min-width: 0; }
.table--pricecards .td-url a.td-open { font-size: 12.5px; font-weight: 600; white-space: nowrap; text-decoration: none; }
.table--pricecards .pc-ingroup { font-size: 13px; color: var(--text-soft); }
/* Copies: number of name & price tags + whether the description prints. */
.table--pricecards .pc-copies { width: 1%; white-space: nowrap; }
.pc-copies-cell { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.table--quiet input.pc-copies-input { width: 3.4rem; text-align: center; padding: 4px 2px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); font: inherit; font-size: 13.5px; }
.pc-bulk { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; padding: 8px 16px; border-bottom: 1px solid var(--border); background: var(--accent-bg-soft); font-size: 13px; color: var(--text-soft); }
.pc-bulk input.pc-copies-input { width: 3.4rem; text-align: center; padding: 4px 2px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); font: inherit; font-size: 13.5px; }
.pc-copies-row { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-soft); white-space: nowrap; cursor: pointer; }
/* Auto-filled description waiting for review (cleared by "Looks good" or an edit). */
.pc-review { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin-top: 4px; font-size: 12.5px; }
.pc-review__tag { background: var(--info-bg); color: var(--info-ink); font-weight: 600; border-radius: 999px; padding: 1px 8px; }
.pc-review__src { color: var(--text-mute); }
.pc-review__ok { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; color: var(--text-soft); cursor: pointer; white-space: nowrap; }
.pc-review__count { font-size: 13px; font-weight: 600; color: var(--info-ink); background: var(--info-bg); border-radius: 999px; padding: 2px 10px; }
.pc-price-cell { display: inline-flex; align-items: center; justify-content: flex-end; gap: 1px; }
.table--quiet input.pc-price-input { width: 4.6rem; text-align: right; margin-left: 0; padding-left: 4px; padding-right: 4px; }
.table--pricecards .pc-members .cell-sub { max-width: 18rem; }
.pc-groups-intro { padding-bottom: 6px; }
.pc-groups-intro .field__hint { margin-top: 0; }
.pc-groups-intro .tools-add { margin-top: 8px; }
.pc-groups-intro .tools-add select { width: auto; max-width: 100%; }
#pcGroupProducts tr.is-picked td { background: var(--accent-bg-soft); }
#pcGroupProducts label { cursor: pointer; }
@media (min-width: 641px) {
    /* Print, Name, Subtitle, Price, Description, In a group / Products, Remove */
    .table--pricecards td:nth-child(2) { width: 24%; min-width: 12rem; }
    .table--pricecards td:nth-child(3) { width: 15%; }
    .table--pricecards td:nth-child(5) { width: 36%; min-width: 16rem; }
}
/* A product with no card name uses its catalog name (the placeholder) —
   show it as the name, not as greyed-out "empty" text. */
.table--pricecards input.quiet-name::placeholder { color: var(--accent-ink); opacity: 1; font-style: normal; font-weight: 600; }
.table--pricecards input.quiet-name:focus::placeholder { opacity: .45; }
.table--quiet textarea.is-autosized { overflow: hidden; resize: none; }
/* A group's price from its products shows as the price (just a shade softer
   than one typed in), not as faded "empty" text. */
.table--quiet input.pc-price-input::placeholder { color: var(--text-soft); font-style: normal; opacity: 1; }
.pc-price-cell { color: var(--text-soft); }
/* Sales check — automatic stock updates (2026-10-03). */
.ss-auto { margin-bottom: 16px; }
.ss-auto .card__head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.ss-auto .card__body > p { margin: 0 0 8px; }
.ss-auto__actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0 4px; }
.ss-auto__log { margin-top: 12px; }
.ss-auto__log summary { cursor: pointer; font-size: 13.5px; color: var(--text-soft); margin-bottom: 6px; }
.ss-auto__log th, .ss-auto__log td { padding: 6px 10px; font-size: 13px; }
/* Cost of goods — try a price (2026-10-03): the retail price is a quiet box
   you can type a test price into; the row turns highlighted while it shows
   test numbers. Nothing is saved. */
.cogs-try-note { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cogs-try-note .btn { margin-left: auto; }
.cogs-try { display: inline-flex; align-items: center; justify-content: flex-end; gap: 1px; }
.cogs-try__cur { color: var(--text-soft); }
.cogs-try input { width: 3.4rem; text-align: right; padding: 3px 5px; border: 1px solid transparent; background: transparent; border-radius: var(--radius-sm); font: inherit; color: var(--text); }
.cogs-try input:hover { border-color: var(--border); background: var(--surface); }
.cogs-try input:focus { border-color: var(--accent); background: var(--surface); outline: none; }
.cogs-try__reset { border: 0; background: none; color: var(--text-mute); cursor: pointer; font-size: 15px; line-height: 1; padding: 0 2px; }
.cogs-try__reset:hover { color: var(--danger); }
.table--cogs tr.is-trying td { background: var(--accent-bg-soft); }
.table--cogs tr.is-trying .cogs-try input { border-color: var(--accent); background: var(--surface); font-weight: 600; }
@media print { .cogs-try-note { display: none !important; } .cogs-try input { border: 0; } }
/* Bundles (2026-10-04). */
.bundle-form .card { margin-bottom: 16px; }
.bundle-form .field-row { display: grid; grid-template-columns: 2fr 1.4fr 1fr; gap: 12px; }
@media (max-width: 760px) { .bundle-form .field-row { grid-template-columns: 1fr; } }
.bundle-rows select { width: 100%; max-width: 30rem; }
.bundle-rows input.qty-input { width: 4.5rem; text-align: right; }
.bundle-rows tr.bundle-rows__new select { color: var(--text-soft); }
/* Product website page (2026-10-04). */
.web-page .card { margin-bottom: 16px; }
/* Send to website + preview bar (2026-10-10) */
.web-push { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 16px; padding: 12px 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--info-bg); }
.web-push__text { flex: 1 1 22rem; font-size: 13.5px; color: var(--text-soft); }
/* Settings › Website content (2026-10-10) */
.site-line { display: flex; gap: 8px; align-items: center; margin: 0 0 8px; }
.site-line select { flex: 0 0 auto; width: auto; }
.site-line input { flex: 1; min-width: 0; }
.site-care { padding: 12px 0; border-top: 1px solid var(--border); }
.site-care textarea { width: 100%; font: inherit; line-height: 1.5; }
/* Ingredient website / glossary page (2026-10-10) */
.ing-check { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 12px; cursor: pointer; line-height: 1.45; }
.ing-check input { margin-top: 3px; }
.ing-photo { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 18px; align-items: start; }
.ing-photo__img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); background: var(--surface-2); }
.ing-photo__none { display: grid; place-items: center; aspect-ratio: 4 / 3; padding: 12px; text-align: center; font-size: 13px; border: 1px dashed var(--border-strong); border-radius: var(--radius); }
@media (max-width: 640px) { .ing-photo { grid-template-columns: 1fr; } }
.ing-pair + .ing-pair { margin-top: 2px; }
.ing-faq { padding: 12px 0; border-bottom: 1px solid var(--border); }
.ing-faq:first-child { padding-top: 0; }
.ing-products { margin: 0; padding-left: 18px; columns: 2; }
.ing-products li { margin: 0 0 4px; break-inside: avoid; }
@media (max-width: 640px) { .ing-products { columns: 1; } }
.tag--ok { background: var(--ok-bg); color: var(--ok); }
.gl-status { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.gl-thumb { display: block; width: 44px; height: 33px; object-fit: cover; border-radius: 4px; background: var(--surface-2); }
.web-page__format { margin: 0 0 12px; }
.web-page__format code { font-size: 12px; background: var(--surface-2); padding: 1px 4px; border-radius: 4px; }
.web-page textarea { width: 100%; font: inherit; line-height: 1.5; }
.web-page__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; align-items: start; }
.web-page__grid.card__body { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.web-page__grid--cards { gap: 16px; }
@media (max-width: 900px) { .web-page__grid, .web-page__grid.card__body { grid-template-columns: 1fr; } }
.web-page__size { margin: 0 0 6px; }
.web-page__reviews { display: grid; gap: 8px; max-height: 420px; overflow-y: auto; }
.web-page__review { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; font-size: 13.5px; line-height: 1.45; }
.web-page__review:has(input:checked) { border-color: var(--accent); background: var(--accent-bg-soft); }
.web-page__review input { margin-top: 3px; }
.web-page__stars { color: var(--accent); letter-spacing: 1px; }
/* How Google sees this product (2026-10-06): a picture of a Google result, so it keeps Google's own look in either theme */
.gpreview { max-width: 640px; padding: 16px 18px; border: 1px solid var(--border); border-radius: var(--radius); background: #fff; font-family: Arial, Helvetica, sans-serif; }
.gpreview__site { font-size: 12.5px; color: #4d5156; }
.gpreview__title { margin: 4px 0 3px; font-size: 19px; line-height: 1.3; color: #1a0dab; }
.gpreview__rich { font-size: 13px; color: #70757a; }
.gpreview__stars { color: #e7711b; letter-spacing: 1px; }
.gpreview__desc { margin-top: 3px; font-size: 13.5px; line-height: 1.55; color: #4d5156; }
.gdata { margin-top: 14px; }
.gcheck { margin: 12px 0 0; padding: 10px 12px; border-radius: var(--radius-sm); font-size: 13.5px; }
.gcheck--ok { background: var(--ok-bg); color: var(--ok); }
.gcheck--warn { background: var(--danger-bg); color: var(--danger); }
.gcheck ul { margin: 6px 0 0 18px; padding: 0; }
.graw { margin-top: 12px; font-size: 13px; }
.graw summary { cursor: pointer; color: var(--text-soft); }
.graw pre { max-height: 360px; overflow: auto; margin: 8px 0 0; padding: 12px; border-radius: var(--radius-sm); background: var(--surface-2); font-size: 12px; line-height: 1.45; white-space: pre-wrap; word-break: break-word; }
.web-page .field select { width: 100%; margin-bottom: 6px; }

/* ---------- Packing lists (2026-10-06) ---------- */
.pl-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
@media (max-width: 700px) { .pl-grid { grid-template-columns: 1fr; } }
.pl-items td { vertical-align: middle; }
.pl-items input { width: 100%; }
.pl-items .pl-qty { width: 6em; text-align: right; }
.pl-preview { overflow: hidden; }
.pl-preview__frame { display: block; width: 100%; height: 1180px; border: 0; background: #e9e9e6; }
.pl-cust { display: block; padding: 6px 0 4px; }
/* Packing lists index (2026-10-06): equal-height start cards, search in the saved list's header */
.pl-nowrap { white-space: nowrap; }
.pl-start { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(260px, 1fr); gap: 18px; align-items: stretch; margin-bottom: 18px; }
.pl-start > .card { margin: 0; }
@media (max-width: 900px) { .pl-start { grid-template-columns: minmax(0, 1fr); } }
.pl-orders td { vertical-align: middle; }
.pl-byhand { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.pl-byhand .field { flex: 1; min-width: 200px; margin: 0; }
.pl-byhand .field__hint { order: 3; }
.pl-byhand .btn { margin-bottom: 22px; }
.pl-saved-head { flex-wrap: wrap; gap: 10px; }
.pl-saved-head h3 .muted { font-weight: 400; margin-left: 6px; }
.pl-search { display: flex; gap: 6px; align-items: center; margin-left: auto; }
.pl-search input { width: 260px; max-width: 100%; }

/* Customer notifications: a request from the website's "Email me when it's back" */
.pill--website { background: #eef4fb; border-color: #c9dbef; color: #2d5d8f; margin-left: 6px; vertical-align: 1px; }
.web-push--live { background: var(--ok-bg); border-color: #bcdcc4; }

/* ---------- Catalogue on phones (2026-10-11) ----------
   One compact row per product instead of the wide table, filters behind one
   button, and a sort picker. Desktop is untouched. To go back, delete this
   block and the .cat-list / filters__toggle / filters__sortpick markup in
   catalog/index.php. */
.cat-list, .filters__toggle, .filters__sortpick { display: none; }
.filters__extra { display: contents; }
@media (max-width: 640px) {
    .catalog-table { display: none; }
    .cat-list { display: block; list-style: none; margin: 0; padding: 0; }
    .cat-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--border); color: inherit; text-decoration: none; }
    .cat-list li:last-child .cat-row { border-bottom: 0; }
    .cat-row:active { background: var(--surface-2); }
    .cat-row .thumb { width: 44px; height: 44px; flex: none; }
    .cat-row__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
    .cat-row__name { font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .cat-row__sub { font-size: 13px; color: var(--text-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .cat-row__side { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
    .cat-row__price { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text); }
    .cat-row .pill { font-size: 11px; padding: 1px 7px; }
    .filters__search { flex-basis: 100%; }
    .filters__toggle { display: inline-flex; }
    .filters__sortpick { display: block; flex: 1; min-width: 0; }
    .filters__extra { display: none; }
    .filters.is-open .filters__extra { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; }
    .filters.is-open .filters__extra select { flex: 1 1 100%; width: 100%; }
}

/* ---------- A product's page on phones (2026-10-11) ----------
   Same information, laid out to read down a phone instead of scrolling
   sideways: photo + details first, each table row (variants, packaging,
   wholesale packs, batches) becomes a small card with its labels above the
   values, and the add-forms stack. Desktop is untouched. To go back, delete
   this block (the table--vcard / vcard__* / data-label markup in
   catalog/show.php does nothing without it). */
@media (max-width: 640px) {
    .show-grid { display: flex; flex-direction: column; align-items: stretch; gap: 16px; }
    .page-head:has(+ .show-grid) { flex-direction: column; align-items: stretch; gap: 12px; }
    .page-head:has(+ .show-grid) .page-head__actions { justify-content: flex-start; }
    .show-side { display: contents; }
    .show-side > section { order: -1; }
    .show-side > #cogs { order: 1; }
    .show-photo img { max-height: 240px; object-fit: contain; background: var(--surface-2); }
    .page-head__actions .pager { flex: 1 1 100%; }

    .table--vcard thead { display: none; }
    .table--vcard, .table--vcard tbody, .table--vcard tfoot { display: block; width: 100%; }
    .table--vcard tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 14px; padding: 12px 14px; border-bottom: 1px solid var(--border); }
    .table--vcard.table--inner tbody tr { padding: 12px 0; }
    .table--vcard tbody tr:last-child { border-bottom: 0; }
    .table--vcard tbody tr:hover td { background: none; }
    .table--vcard td { display: block; padding: 0; border: 0; text-align: left !important; min-width: 0; white-space: normal; }
    .table--vcard td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 2px; font-size: 11px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--text-mute); }
    .table--vcard td.vcard__title, .table--vcard td[colspan] { grid-column: 1 / -1; font-weight: 600; }
    .table--vcard td.vcard__title .cell-sub { font-weight: 400; }
    .table--vcard td.vcard__title { order: -1; }
    .table--vcard td.vcard__actions { padding-top: 2px; }
    .table--vcard td.vcard__actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 16px; }
    .table--vcard td.vcard__actions form { display: inline; }
    .table--vcard tfoot tr { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; padding: 10px 0 0; }
    .table--vcard tfoot td { padding: 0; border: 0; }
    .wpack.table--vcard td[data-label="Box"], .wpack.table--vcard td[data-label="Note"] { grid-column: 1 / -1; }
    .wpack.table--vcard td input, .wpack.table--vcard td select { width: 100%; }

    .bom-add { flex-wrap: wrap; }
    .bom-add select, .bom-add .bom-comp, .bom-add .wpack__box, .bom-add .wpack__note { flex: 1 1 100%; min-width: 0; width: 100%; }
}
.web-push__missing { flex: 1 1 100%; font-size: 13px; color: var(--text-soft); }
.web-push .btn:disabled { opacity: .5; cursor: not-allowed; }

/* Expenses calendar (2026-10-13) — reuses the Events month grid. The add form is
   one wrapping row (.form stacks fields in a column by default). */
.exp-add { flex-direction: row; flex-wrap: wrap; align-items: flex-end; gap: 12px 14px; }
.exp-add .field { flex: 0 0 auto; margin: 0; }
.exp-add input[type="date"] {
    font: inherit; font-size: 14px; padding: 8px 10px;
    border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
    background: var(--surface); color: var(--text); width: 100%;
}
.exp-add__date { width: 165px; }
.exp-add__who { flex: 2 1 220px !important; }
.exp-add__amt { width: 120px; }
.exp-add__note { flex: 3 1 220px !important; }
.exp-add__repeat { width: 170px; }
.exp-add__btn { flex: 0 0 auto; }
.exp-add [hidden] { display: none !important; }
.exp-cal__num { display: flex; justify-content: space-between; align-items: baseline; gap: 4px; }
.exp-cal__total { font-size: 11px; font-weight: 700; color: var(--text); }
.exp-chip { background: var(--accent-bg); color: var(--accent-ink); }
.exp-chip.is-upcoming { background: var(--surface); box-shadow: inset 0 0 0 1px var(--accent-bg); opacity: 0.85; }
.exp-repeat { font-weight: 700; margin: 0 2px 0 1px; }
.exp-row--upcoming td { color: var(--text-mute); }
.exp-scope { border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 14px 2px; margin: 4px 0 0; }
.exp-scope legend { font-size: 13px; font-weight: 600; color: var(--text-soft); padding: 0 6px; }
.exp-delete { display: flex; flex-wrap: wrap; gap: 0 12px; }
.exp-below { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 16px; margin-top: 16px; align-items: start; }
@media (max-width: 900px) { .exp-below { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
    .exp-add .field, .exp-add__btn { flex: 1 1 100% !important; width: auto; }
    .exp-cal__total { display: none; }
}
.exp-add__remind { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--text-soft); padding-bottom: 9px; cursor: pointer; }
.exp-add__remind .ic, .exp-bell .ic, .exp-reminders h3 .ic, #expform .ing-check .ic { width: 14px; height: 14px; vertical-align: -2px; }
.exp-bell { margin: 0 2px 0 1px; display: inline-flex; }
.exp-reminders { margin-top: 16px; }
.exp-reminders__hint { margin: 10px 0 12px; max-width: 760px; }
/* add form: details on the first row; repeat, reminder and Add on the second */
.exp-add__break { flex-basis: 100%; height: 0; }
.exp-add .exp-add__btn { margin-left: auto; }
.exp-chip .ic { width: 11px !important; height: 11px !important; vertical-align: -1px !important; }

/* Dashboard (rebuilt 2026-10-14) */
.dash-periods { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.dash-period { border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; background: var(--surface); min-width: 0; }
.dash-period__label { font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-mute); }
.dash-period__value { font-size: 26px; font-weight: 700; line-height: 1.2; margin: 4px 0 2px; font-variant-numeric: tabular-nums; }
.dash-period__split { font-size: 12.5px; color: var(--text-soft); margin-bottom: 6px; }
.dash-delta { font-size: 12.5px; color: var(--text-mute); }
.dash-delta.is-up { color: var(--ok); font-weight: 700; }
.dash-delta.is-down { color: var(--danger); font-weight: 700; }
.dash-lines { margin-top: 14px; border-top: 1px solid var(--border); }
.dash-line { display: flex; justify-content: space-between; align-items: baseline; gap: 6px 16px; flex-wrap: wrap; padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 14px; }
.dash-line:last-child { border-bottom: 0; }
.dash-neg { color: var(--danger); }
.dash-be { display: flex; flex-wrap: wrap; gap: 4px 18px; justify-content: flex-end; }
.dash-be > span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.dash-bar { display: inline-block; width: 70px; height: 7px; border-radius: 4px; background: var(--border); overflow: hidden; }
.dash-bar__fill { display: block; height: 100%; background: var(--accent); }
.dash-bar__fill.is-done { background: var(--ok); }
.dash-err { color: var(--danger); }
.dash-cur .field { margin: 0; }
.dash-list { list-style: none; margin: 0; padding: 0; }
.dash-list li { border-bottom: 1px solid var(--border); }
.dash-list li:last-child { border-bottom: 0; }
.dash-list__main { display: flex; align-items: baseline; gap: 10px; padding: 8px 18px; color: var(--text); text-decoration: none; }
.dash-list__main:hover { background: var(--surface-2, #faf9f6); }
.dash-list__when { flex: 0 0 82px; font-size: 13px; color: var(--text-soft); }
.dash-list li.is-today .dash-list__when { color: var(--accent-ink); font-weight: 700; }
.dash-list__what { flex: 1 1 auto; min-width: 0; }
.dash-list__amt { flex: 0 0 auto; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dash-list .exp-bell .ic { width: 13px; height: 13px; vertical-align: -2px; }
.dash-enroute__sup { padding: 10px 18px 4px; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-soft); background: var(--bg); border-bottom: 1px solid var(--border); }
.dash-enroute .dash-list__main { font-size: 14px; padding: 7px 18px; }
.dash-foot { margin: 0; padding: 10px 18px; border-top: 1px solid var(--border); font-size: 13px; }
.dash-events { display: flex; flex-direction: column; }
.dash-ev { display: flex; gap: 12px; padding: 10px 18px; border-bottom: 1px solid var(--border); color: var(--text); text-decoration: none; }
.dash-ev:hover { background: var(--surface-2, #faf9f6); }
.dash-ev.is-cancelled strong { text-decoration: line-through; color: var(--text-mute); }
.dash-ev__date { width: 54px; }
.dash-ev__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dash-ev__meta { font-size: 13px; color: var(--text-soft); }
.dash-attn { margin: 0; }
.dash-tiles { display: flex; flex-wrap: wrap; gap: 10px; }
.dash-tile { flex: 1 1 200px; display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: var(--radius); text-decoration: none; color: var(--text); border: 1px solid var(--border); }
.dash-tile:hover { filter: brightness(0.98); }
.dash-tile__n { font-size: 24px; font-weight: 700; min-width: 30px; text-align: center; }
.dash-tile__label { display: flex; flex-direction: column; font-weight: 600; font-size: 14px; }
.dash-tile__sub { font-weight: 400; font-size: 12px; color: var(--text-soft); }
.dash-tile--danger { background: var(--danger-bg); border-color: transparent; }
.dash-tile--danger .dash-tile__n { color: var(--danger); }
.dash-tile--ok { background: var(--ok-bg); border-color: transparent; }
.dash-tile--ok .dash-tile__n { color: var(--ok); }
.dash-tile--info { background: var(--info-bg); border-color: transparent; }
.dash-tile--info .dash-tile__n { color: var(--info-ink); }
@media (max-width: 760px) {
    .dash-periods { grid-template-columns: minmax(0, 1fr); }
    .dash-period { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 0 10px; }
    .dash-period__value { grid-column: 2; grid-row: 1; font-size: 20px; margin: 0; }
    .dash-period__split, .dash-period > div:last-child { grid-column: 1 / -1; }
    .dash-be { justify-content: flex-start; }
}
/* two columns: figures and lists on the left, the small cards stacked on the right */
.dash-grid { display: grid; grid-template-columns: minmax(0, 2.4fr) minmax(290px, 1fr); gap: 16px; align-items: start; }
.dash-main, .dash-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.dash-grid .card { margin: 0; }
/* En route: supplier groups flow into two balanced columns */
.dash-enroute { columns: 2 320px; column-gap: 0; column-rule: 1px solid var(--border); }
.dash-enroute__grp { break-inside: avoid; }
@media (max-width: 1000px) {
    .dash-grid { display: flex; flex-direction: column; }
    .dash-main, .dash-side { display: contents; }
    .dash-o1 { order: 1; } .dash-o2 { order: 2; } .dash-o3 { order: 3; }
    .dash-o4 { order: 4; } .dash-o5 { order: 5; } .dash-o6 { order: 6; }
}

/* Time clock — staff (2026-10-14): staff get the wide column, one line each; locations the narrow one */
.emp-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); gap: 18px; align-items: start; }
.emp-grid .card { margin: 0; }
.emp-grid .emp-loc-checks { flex-basis: auto; margin-left: 4px; gap: 14px; }
.emp-grid .emp-loc-check { font-size: 13px; white-space: nowrap; }
.emp-grid .row-tools { white-space: nowrap; vertical-align: middle; }
.emp-grid .row-tools form + form { margin-left: 12px; }
@media (max-width: 900px) {
    .emp-grid { grid-template-columns: minmax(0, 1fr); }
    .emp-grid .emp-loc-checks { flex-basis: 100%; margin-left: 0; }
}
/* save-as-you-go forms (app.js .js-autosave) */
form.is-autosaving .autosave-btn { display: none; }
.autosave-status { font-size: 12.5px; color: var(--text-mute); min-width: 5.5em; }
.autosave-status.is-saved { color: var(--ok); font-weight: 600; }
.autosave-status.is-failed { color: var(--danger); font-weight: 600; }
.contact-notes__tools { display: inline-flex; gap: 12px; align-items: baseline; }
.contact-note-edit { margin-top: 8px; }
.contact-note-edit[hidden], .contact-notes__body[hidden], .js-note-edit[hidden] { display: none !important; }

/* Shifts — month overview (2026-10-14): a row per day, grouped by week; reads well on a phone */
.sm-filter { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.sm-pill { padding: 5px 12px; border-radius: 999px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-soft); font-size: 13px; text-decoration: none; }
.sm-pill.is-on { background: var(--accent); border-color: var(--accent); color: #fff; }
.sm-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px, 300px); gap: 16px; align-items: start; }
.sm-days { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.sm-days .card, .sm-people { margin: 0; }
.sm-people { position: sticky; top: 12px; }
.sm-week { padding: 0; overflow: hidden; }
.sm-week__head { display: flex; justify-content: space-between; align-items: baseline; padding: 8px 16px; background: var(--bg); border-bottom: 1px solid var(--border);
    font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-soft); }
.sm-week__head a { font-weight: 600; text-transform: none; letter-spacing: 0; }
.sm-day { display: flex; gap: 14px; padding: 9px 16px; border-bottom: 1px solid var(--border); align-items: flex-start; }
.sm-day:last-child { border-bottom: 0; }
.sm-day.is-today { background: var(--accent-bg-soft); box-shadow: inset 3px 0 0 var(--accent); }
.sm-day.is-past { opacity: 0.6; }
.sm-day__date { flex: 0 0 40px; text-align: center; line-height: 1.1; }
.sm-day__dow { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--text-mute); }
.sm-day__num { display: block; font-size: 20px; font-weight: 700; color: var(--text); text-decoration: none; }
.sm-day.is-today .sm-day__num, .sm-day.is-today .sm-day__dow { color: var(--accent-ink); }
.sm-day__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; padding-top: 2px; }
.sm-day__none { font-size: 13px; color: var(--text-mute); padding-top: 6px; }
.sm-day.is-empty { padding-top: 6px; padding-bottom: 6px; }
.sm-loc { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.sm-loc__name { flex: 0 0 auto; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-mute); min-width: 9.5em; }
.sm-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sm-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface);
    font-size: 13.5px; color: var(--text); text-decoration: none; white-space: nowrap; }
a.sm-chip:hover { border-color: var(--accent); }
.sm-chip__dot { flex: none; width: 10px; height: 10px; border-radius: 50%; }
.sm-chip__name { font-weight: 600; }
.sm-chip__time { color: var(--text-soft); font-variant-numeric: tabular-nums; }
.sm-people__list { list-style: none; margin: 0; padding: 0; }
.sm-person { display: flex; align-items: center; gap: 8px; padding: 9px 16px; border-top: 1px solid var(--border); color: var(--text); text-decoration: none; }
.sm-person:hover { background: var(--surface-2); }
.sm-person.is-on { background: var(--accent-bg-soft); box-shadow: inset 3px 0 0 var(--accent); }
.sm-person__name { flex: 1 1 auto; font-weight: 600; }
.sm-person__stats { font-size: 12.5px; color: var(--text-soft); white-space: nowrap; }
@media (max-width: 860px) {
    .sm-layout { grid-template-columns: minmax(0, 1fr); }
    .sm-people { position: static; order: -1; }
    .sm-loc__name { flex-basis: 100%; min-width: 0; }
    .sm-day { padding: 9px 12px; gap: 10px; }
}
.sm-people__hint { margin: 0; padding: 10px 16px 12px; border-top: 1px solid var(--border); }

/* Shift planner (2026-10-14): one location's month as a grid — desktop */
.sp-bar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px; margin: 0 0 12px; font-size: 13px; color: var(--text-soft); }
.sp-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.sp-legend__item { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--text); }
.sp-grid { display: grid; grid-template-columns: 112px repeat(7, minmax(0, 1fr)); background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.sp-grid__corner, .sp-grid__dow { padding: 8px; font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-mute);
    background: var(--bg); border-bottom: 1px solid var(--border); }
.sp-grid__dow { border-left: 1px solid var(--border); }
.sp-week { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 8px 10px; background: var(--bg); border-bottom: 1px solid var(--border); font-size: 12px; }
.sp-week__label { font-weight: 700; color: var(--text-soft); }
.sp-week .linkbtn { font-size: 12px; text-align: left; }
.sp-day { min-height: 118px; padding: 6px; border-left: 1px solid var(--border); border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sp-day.is-out { background: var(--surface-2); }
.sp-day.is-out .sp-day__num { color: var(--text-mute); font-weight: 400; }
.sp-day.is-today { background: var(--accent-bg-soft); }
.sp-day.is-past .sp-shift { opacity: 0.7; }
.sp-day.is-over { box-shadow: inset 0 0 0 2px var(--accent); background: var(--accent-bg-soft); }
.sp-day.is-over.is-copy { box-shadow: inset 0 0 0 2px var(--ok); background: var(--ok-bg); }
.sp-day__head { display: flex; justify-content: space-between; align-items: center; }
.sp-day__num { font-size: 13px; font-weight: 700; color: var(--text-soft); }
.sp-day.is-today .sp-day__num { color: var(--accent-ink); }
.sp-add { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-soft);
    font-size: 15px; line-height: 1; cursor: pointer; opacity: 0.35; padding: 0; }
.sp-day:hover .sp-add, .sp-add:focus { opacity: 1; }
.sp-add:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.sp-shift { display: flex; align-items: flex-start; gap: 2px; border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: 5px;
    background: var(--surface); cursor: grab; font-size: 12px; line-height: 1.25; }
.sp-shift.is-dragging { opacity: 0.4; }
.sp-shift__main { flex: 1 1 auto; min-width: 0; padding: 3px 5px; color: var(--text); text-decoration: none; display: flex; flex-direction: column; }
.sp-shift__name { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-shift__time { color: var(--text-soft); white-space: nowrap; }
.sp-shift__del { flex: none; border: 0; background: none; color: var(--text-mute); cursor: pointer; font-size: 15px; line-height: 1; padding: 3px 5px; visibility: hidden; }
.sp-shift:hover .sp-shift__del { visibility: visible; }
.sp-shift__del:hover { color: var(--danger); }
.sp-dialog { border: 0; border-radius: var(--radius); padding: 0; width: min(420px, 92vw); box-shadow: 0 10px 40px rgba(0, 0, 0, .25); }
.sp-dialog::backdrop { background: rgba(30, 28, 24, .35); }
.sp-dialog form { padding: 18px 20px; }
.sp-dialog__title { margin: 0 0 4px; font-size: 16px; }
.sp-dialog__title span { font-weight: 400; color: var(--text-soft); }
.sp-dialog__err { margin: 0; color: var(--danger); font-size: 13px; }
.sp-dialog__foot { display: flex; justify-content: flex-end; gap: 8px; }
.sp-toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: var(--text); color: #fff; padding: 9px 16px; border-radius: 999px; font-size: 14px; z-index: 50; box-shadow: var(--shadow); }
@media (max-width: 900px) {
    .sp-grid { grid-template-columns: 90px repeat(7, minmax(110px, 1fr)); overflow-x: auto; }
}
/* shift undo (2026-10-14) */
.sp-undo { margin: 0 0 10px; }
.sp-undo .btn, .week-nav__undo .btn { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.week-nav { flex-wrap: wrap; }
.week-nav__undo { margin-left: auto; max-width: 60%; }

/* Website page — Family card (2026-10-15) */
.fam-table td { vertical-align: top; }
.fam-table input[type="text"] { min-width: 150px; }
.fam-table textarea { width: 100%; min-width: 220px; resize: vertical; font: inherit; font-size: 13.5px; }
.fam-table .fam-pos { width: 4.2em; text-align: right; }

/* Website page — AI drafts (2026-10-15): one yellow box under each drafted section */
.ai-draft { margin: -4px 0 14px; padding: 10px 12px; border: 1px solid #ecd9ae; border-radius: var(--radius-sm); background: var(--accent-bg-soft); }
.ai-draft__head { font-size: 12.5px; margin-bottom: 6px; color: var(--accent-ink); }
.ai-draft__text { white-space: pre-wrap; font-size: 14px; line-height: 1.5; color: var(--text); }
.ai-draft__src { margin: 0; padding-left: 18px; font-size: 14px; line-height: 1.5; }
.ai-draft__src li { margin-bottom: 4px; }
.ai-draft__src .muted { font-size: 12.5px; }
.ai-draft__actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; }
.ai-draft__note { flex: 1 1 200px; min-width: 0; font-size: 13px; padding: 3px 8px; }
.ai-draft__done { margin: -4px 0 14px; color: var(--ok); }

/* Website page — live length counts beside section names (2026-10-16) */
.wcount { font-weight: normal; font-size: 12px; color: var(--text-mute); margin-left: 6px; }
.wcount[data-state="ok"] { color: var(--ok); }
.wcount[data-state="under"] { color: var(--accent-ink); }
.wcount[data-state="over"] { color: var(--danger); }
.wredraft { margin-left: 8px; font-size: 12px; font-weight: normal; }
.ai-draft.is-busy { opacity: .75; }

/* Website page — story photo picker (2026-10-16) */
.photopick { width: min(920px, calc(100vw - 32px)); max-height: calc(100vh - 64px); padding: 0; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); }
.photopick::backdrop { background: rgba(30, 28, 24, .45); }
.photopick__head { position: sticky; top: 0; z-index: 1; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 12px 14px; background: var(--surface); border-bottom: 1px solid var(--border); }
.photopick__tabs { display: flex; gap: 4px; }
.photopick__tab { padding: 5px 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); font: inherit; font-size: 13px; cursor: pointer; }
.photopick__tab.is-on { background: var(--accent); border-color: var(--accent); color: #fff; }
.photopick__q { flex: 1 1 200px; min-width: 0; }
.photopick__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; padding: 14px; }
.photopick__item { display: flex; flex-direction: column; gap: 4px; padding: 0; border: 2px solid transparent; border-radius: var(--radius-sm); background: none; cursor: pointer; text-align: left; font: inherit; }
.photopick__item:hover, .photopick__item:focus-visible { border-color: var(--accent); }
.photopick__item img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 4px; background: var(--surface-2); }
.photopick__cap { font-size: 11.5px; color: var(--text-soft); line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; padding: 0 2px 2px; }
.photopick__foot { display: flex; gap: 10px; align-items: center; justify-content: center; padding: 0 14px 16px; }

/* Product ingredients — names A to Z on the left, the chosen product's list large on the right (2026-10-17) */
.pd { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 20px; align-items: start; }
.pd-index { padding: 24px 18px; /* names sit 28px in, matching the panel on the right */ border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.pd-cols { column-count: 2; column-gap: 10px; }
.pd-cols.is-ranked { column-count: 1; }
.pd-group { break-inside: avoid; padding: 12px 0; border-top: 1px solid var(--border); }
.pd-group:first-child { border-top: 0; padding-top: 0; }
.pd-letter { margin: 2px 10px 2px; font-size: 12px; font-weight: 700; letter-spacing: .08em; color: var(--text-mute); }
.pd-item { display: block; width: 100%; padding: 3px 10px; border: 0; border-radius: 6px; background: none; font: inherit; font-size: 15px; line-height: 1.45; text-align: left; color: var(--text); cursor: pointer; }
.pd-cols.is-ranked .pd-item { padding: 5px 10px; }
.pd-item:hover { background: var(--surface-2); }
.pd-item.is-on { background: var(--accent-bg-soft); color: var(--accent-ink); font-weight: 600; }
.pd-item.is-pinned { box-shadow: inset 3px 0 0 var(--accent); } /* held by a click */
.pd-held { margin-left: 6px; color: var(--accent-ink); }
.pd-letter--section { letter-spacing: .04em; text-transform: uppercase; }
.pd-hint { display: block; font-size: 12.5px; font-weight: 400; color: var(--text-soft); }
.pd-none { padding: 0 10px; }
/* stays in view below the top bar while the name list scrolls; a very long list scrolls inside */
.pd-detail { position: sticky; top: 72px; max-height: calc(100vh - 88px); overflow-y: auto; padding: 24px 28px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.pd-detail h3 { margin: 0 0 14px; font-size: 24px; line-height: 1.25; }
.pd-list { margin: 0; padding: 0; list-style: none; counter-reset: pd; font-size: 17px; line-height: 1.7; }
.pd-list.is-long { column-count: 2; column-gap: 28px; }
.pd-list li { display: grid; grid-template-columns: 30px 1fr; break-inside: avoid; counter-increment: pd; }
.pd-list li::before { content: counter(pd) "."; color: var(--text-mute); font-variant-numeric: tabular-nums; }
.pd-list li.is-hit { font-weight: 600; }
.pd-old { margin: 16px 0 0; padding: 8px 12px; border-radius: var(--radius-sm); background: var(--accent-bg-soft); color: var(--accent-ink); font-size: 13.5px; }
.pd-foot { margin: 16px 0 0; font-size: 12.5px; color: var(--text-mute); }
/* prices (2026-10-22): beside each name in the list, and every size under the name in the panel */
.pd-tag { float: right; margin-left: 10px; font-size: 13px; font-weight: 400; color: var(--text-mute); font-variant-numeric: tabular-nums; }
.pd-tag.is-sale { color: var(--danger); }
.pd-prices { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: -6px 0 18px; font-size: 17px; }
.pd-price strong { font-size: 19px; }
.pd-price__size { color: var(--text-soft); }
.pd-price s { color: var(--text-mute); }
.pd-sale { padding: 1px 7px; border-radius: 999px; background: var(--danger); color: #fff; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; vertical-align: 2px; }
.pd mark { padding: 0 1px; border-radius: 2px; background: #fde68a; color: inherit; }
@media (max-width: 860px) {
    .pd { grid-template-columns: 1fr; }
    .pd-detail { position: static; max-height: none; order: -1; } /* on a narrow screen the chosen product sits above the names */
}
.pi-missing { margin-top: 20px; }
.pi-missing summary { cursor: pointer; color: var(--text-soft); font-size: 14px; }

/* Employee records (2026-10-17) */
.er-grid { grid-template-columns: minmax(0, 1fr) 340px; }
.er-sub { margin: 18px 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-mute); }
.er-sub:first-child { margin-top: 0; }
.er-sin__saved { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 6px; }
.er-sin__saved code { font-size: 15px; letter-spacing: .04em; }
.er-sin__remove { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--text-soft); }
.er-head-note { font-size: 13px; }
.er-add { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.er-add > input[type="text"], .er-add select { width: auto; }
.er-add__name { flex: 1 1 200px; }
.er-add__note { flex: 1 1 180px; }
.er-add__label { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--text-soft); }
.er-add__label input { width: auto; }
.er-table { margin-top: 12px; }
.er-table td { vertical-align: top; }
.er-nowrap { white-space: nowrap; }
.er-glance dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; margin: 0; font-size: 14px; }
.er-glance dt { color: var(--text-mute); }
.er-glance dd { margin: 0; }
.er-shifts, .er-log { margin: 0; padding: 0; list-style: none; font-size: 14px; line-height: 1.7; }
.er-warn { color: var(--danger); }
.pill--er-sick     { background: var(--danger-bg); border-color: #e0bab5; color: var(--danger); }
.pill--er-vacation { background: var(--ok-bg); border-color: #bcdcc4; color: var(--ok); }
.pill--er-due      { background: var(--accent-bg-soft); border-color: #ecd9ae; color: var(--accent-ink); }
.pill--er-expired  { background: var(--danger-bg); border-color: #e0bab5; color: var(--danger); }
@media (max-width: 980px) { .er-grid { grid-template-columns: 1fr; } }

/* Cash drawer (2026-10-17) */
.cd { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
.cd-main, .cd-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.cd-main { container-type: inline-size; } /* the count's columns follow the space it actually has */
.cd-stores { flex-wrap: wrap; }
.cd-steps { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; padding: 0; list-style: none; font-size: 13px; color: var(--text-mute); }
.cd-steps li { padding: 4px 10px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); }
.cd-steps li.is-on { border-color: var(--accent); color: var(--accent-ink); font-weight: 600; background: var(--accent-bg-soft); }
.cd-steps li.is-done { color: var(--ok); }
.cd-late { margin: 0 0 16px; padding: 12px 16px; border: 1px solid #e0bab5; border-radius: var(--radius); background: var(--danger-bg); color: var(--danger); font-size: 14.5px; }
.cd-lead { margin-top: 0; }
.denoms { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 28px; }
.denoms h4 { margin: 0 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-mute); }
.denom { display: grid; grid-template-columns: 62px minmax(0, 1fr) 72px; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--border); }
.denom__face { font-weight: 600; font-size: 15px; }
.denom__face small { display: block; font-weight: 400; font-size: 11.5px; color: var(--text-mute); }
.denom input { width: 100%; padding: 7px 8px; font-size: 16px; text-align: center; }
.denom__sum { text-align: right; font-variant-numeric: tabular-nums; color: var(--text-soft); }
.cd-total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 14px; padding-top: 12px; border-top: 2px solid var(--text); font-size: 20px; font-weight: 700; }
.cd-total span:last-child, .cd-big, .cd-line span:last-child { font-variant-numeric: tabular-nums; }
.cd-actions { margin-top: 14px; flex-wrap: wrap; }
.cd-closebar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.cd-closebar .muted { display: block; font-size: 13.5px; }
/* "No cash today" (2026-10-22): close without counting, under Ready to close */
.cd-nocash { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; border-top: 1px solid var(--border); }
.cd-nocash > div { flex: 1 1 320px; }
.cd-nocash .muted { display: block; font-size: 13.5px; }
.cd-closebar[hidden] + .cd-nocash { border-top: 0; }
.cd-line { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; font-size: 14.5px; }
.cd-line--sub { color: var(--text-soft); font-size: 13.5px; padding-left: 12px; }
.cd-line--warn { color: var(--danger); }
.cd-line--total { margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--border); font-weight: 700; font-size: 16px; }
.cd-line--first { margin-top: 0; padding-top: 0; border-top: 0; }
.cd-hidden { margin-top: 10px; padding: 14px; border: 1px dashed var(--border); border-radius: 8px; text-align: center; color: var(--text-mute); font-size: 14px; }
.cd-result { margin-top: 10px; padding: 12px 14px; border-radius: 8px; font-weight: 700; font-size: 18px; text-align: center; }
.cd-result--ok { background: var(--ok-bg); color: var(--ok); }
.cd-result--warn { background: var(--danger-bg); color: var(--danger); }
.cd-result small { display: block; margin-top: 2px; font-weight: 400; font-size: 13px; }
.cd-out { margin: 0 0 4px; padding: 0; list-style: none; }
.cd-out li { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 14px; }
.cd-out__amt { display: inline-flex; align-items: baseline; gap: 10px; white-space: nowrap; }
.cd-add { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.cd-add select, .cd-add input { width: auto; min-width: 0; }
.cd-add__note { flex: 1 1 160px; }
.cd-add__amt { width: 84px !important; }
.cd-split { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cd-money { font-size: 18px; }
.cd-big { font-size: 22px; font-weight: 700; }
.cd-remind { margin: 4px 0 0; padding: 8px 12px; border-radius: 6px; background: var(--accent-bg-soft); color: var(--accent-ink); font-size: 13.5px; }
.cd-done { padding: 28px; text-align: center; }
.cd-done__tick { font-size: 30px; color: var(--ok); }
.cd-done h3 { margin: 6px 0; }
.cd-safe-form summary { cursor: pointer; color: var(--accent-ink); font-size: 13.5px; }
.cd-diff { font-variant-numeric: tabular-nums; }
.cd-diff--ok { color: var(--ok); }
.cd-diff--warn { color: var(--danger); font-weight: 600; }
.cd-hist td { vertical-align: top; }
.cd-reg { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.cd-reg__name { min-width: 150px; }
.cd-reg input[type="text"], .cd-reg select { width: auto; }
/* below ~1320px the summary moves under the count, so the count keeps its three columns */
@media (max-width: 1320px) { .cd { grid-template-columns: 1fr; } }
/* bills, coins, rolls side by side while there's room; rolls drop under on a narrow screen */
@container (max-width: 680px) { .denoms { grid-template-columns: repeat(2, minmax(0, 1fr)); } .denoms > div:last-child { margin-top: 16px; } }
@media (max-width: 560px) { .denoms { grid-template-columns: 1fr; } .cd-split { grid-template-columns: 1fr; } }

/* Company info (2026-10-18) */
/* two independent columns: each card sits right under the one above, no row gaps */
.ci-grid { columns: 2 440px; column-gap: 16px; }
.ci-grid > .ci-group { display: inline-block; width: 100%; margin: 0 0 16px; break-inside: avoid; vertical-align: top; }
.ci-group[hidden], .ci-item[hidden] { display: none; }
.ci-head-tools { display: inline-flex; align-items: center; gap: 10px; }
.ci-head-tools button[disabled] { opacity: .3; cursor: default; }
.ci-list { margin: 0; }
.ci-item { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--border); }
.ci-item:last-child { border-bottom: 0; }
.ci-item dt { font-size: 13.5px; color: var(--text-soft); }
.ci-note { display: block; font-size: 12px; color: var(--text-mute); }
.ci-item dd { margin: 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; font-size: 14.5px; }
.ci-value { overflow-wrap: anywhere; }
.ci-secret { font-size: 14px; letter-spacing: .04em; }
.ci-copy { flex: none; padding: 2px 9px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); font: inherit; font-size: 12px; color: var(--text-soft); cursor: pointer; }
.ci-copy:hover { border-color: var(--accent); color: var(--accent-ink); }
.ci-copy.is-done { border-color: #bcdcc4; background: var(--ok-bg); color: var(--ok); }
.ci-rows { display: flex; flex-direction: column; gap: 8px; margin: 6px 0 10px; }
.ci-row { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 8px; align-items: start; padding: 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); }
.ci-row__move { display: flex; flex-direction: column; }
.ci-row__fields { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 6px; }
.ci-row__fields textarea { resize: vertical; min-height: 0; }
.ci-row__note { grid-column: 1 / -1; font-size: 13px; }
.ci-row__opts { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--text-soft); white-space: nowrap; }
.ci-row__opts label { display: inline-flex; align-items: center; gap: 4px; }
.ci-row__remove { color: var(--danger); }
.ci-delete { padding-top: 0; }
.ci-add { display: flex; gap: 6px; align-items: center; }
.ci-add input { width: 200px; }
.ci-history { margin-top: 8px; }
@media (max-width: 560px) { .ci-item, .ci-row__fields { grid-template-columns: 1fr; gap: 2px; } }

/* En route: who it's coming from (2026-10-19) — only while the box is ticked */
.onorder__from { display: block; margin-top: 2px; font-size: 11.5px; color: var(--text-mute); }
.onorder__from select { width: auto; max-width: 160px; padding: 1px 4px; font-size: 11.5px; }
.onorder-cell:not(:has(.onorder input[type="checkbox"]:checked)) .onorder__from { display: none; }
/* En route page (2026-10-19) */
.er-group + .er-group { margin-top: 16px; }
.enr-table td { vertical-align: middle; }
.enr-long { color: var(--danger); font-weight: 600; }
.enr-use { max-width: 320px; font-size: 13.5px; color: var(--text-soft); }

/* Accounts: deactivated in their own list (2026-10-19) */
.people-inactive { margin-top: 16px; }

/* Daily sales (2026-10-19) */
.ds-filters { flex-wrap: wrap; gap: 8px; align-items: center; }
.ds-presets { display: flex; flex-wrap: wrap; gap: 6px; margin-right: 8px; }
.ds-figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin: 0 0 16px; }
.ds-fig { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.ds-fig--main { grid-column: span 2; }
.ds-fig__label { font-size: 12.5px; color: var(--text-mute); }
.ds-fig strong { font-size: 22px; font-variant-numeric: tabular-nums; }
.ds-fig--main strong { font-size: 28px; }
.ds-fig__vs { font-size: 12.5px; }
.ds-fig__vs.is-up { color: var(--ok); }
.ds-fig__vs.is-down { color: var(--danger); }
.ds-dot { display: inline-block; width: 8px; height: 8px; margin-right: 5px; border-radius: 50%; vertical-align: 1px; }
.ds-days td, .ds-days th { font-variant-numeric: tabular-nums; }
.ds-day.js-day { cursor: pointer; }
.ds-day.js-day:hover td { background: var(--surface-2); }
.ds-week td { background: var(--surface-2); border-top: 1px solid var(--border); font-size: 13.5px; color: var(--text-soft); }
.ds-week td strong { color: var(--text); font-size: 14.5px; }
.ds-week-gap td { height: 18px; padding: 0; border: 0; background: var(--bg); }
.ds-caret { display: inline-block; width: 12px; color: var(--text-mute); }
.ds-items-row > td { padding: 4px 12px 14px 30px; background: var(--surface-2); }
.ds-items { width: 100%; max-width: 760px; border-collapse: collapse; font-size: 13.5px; }
.ds-items td { padding: 3px 8px; border: 0; }
.ds-items__qty { width: 54px; color: var(--text-soft); white-space: nowrap; }
.ds-items__where { color: var(--text-soft); }
.ds-chip { display: inline-flex; align-items: center; margin-right: 10px; font-size: 12.5px; white-space: nowrap; }
.ds-days tfoot th { border-top: 2px solid var(--border); }
.ds-totals { margin-top: 16px; }
.ds-totals__tools { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.ds-totals__tools input { width: 200px; }
.ds-sort { font-size: 13px; color: var(--text-mute); }
.ds-sort .linkbtn.is-on { font-weight: 700; color: var(--accent-ink); }
#dsItems tr[hidden] { display: none; }
@media (max-width: 640px) { .ds-fig--main { grid-column: auto; } }

/* ---------- Lists (redesigned 2026-10-19, like My notes) ---------- */
/* the panel of lists on the left, the open list on the right, filling the window below the heading */
.ln { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 16px; height: calc(100vh - 190px); min-height: 460px; }
.ln-list, .ln-doc { display: flex; flex-direction: column; min-height: 0; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.ln-list__top { display: flex; gap: 8px; padding: 12px; border-bottom: 1px solid var(--border); }
.ln-list__top input { flex: 1; min-width: 0; }
.ln-new { display: flex; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--border); background: var(--accent-bg-soft); }
.ln-new[hidden] { display: none; }
.ln-new input { flex: 1; min-width: 0; }
.ln-items { flex: 1; overflow-y: auto; margin: 0; padding: 6px; list-style: none; }
.ln-none { padding: 12px; }
.ln-row { display: flex; align-items: center; gap: 2px; border-radius: 8px; }
.ln-row[hidden] { display: none; }
.ln-row .drag-handle { flex: 0 0 auto; padding: 0 2px 0 4px; opacity: 0; transition: opacity .15s; }
.ln-row:hover .drag-handle { opacity: 1; }
.ln-row.is-dragging { opacity: .45; background: var(--accent-bg-soft); }
.ln-item { flex: 1; min-width: 0; display: block; padding: 10px 12px; border-radius: 8px; color: var(--text); text-decoration: none; }
.ln-item:hover { background: var(--surface-2); text-decoration: none; }
.ln-item.is-on { background: var(--accent-bg-soft); }
.ln-item__title { display: flex; justify-content: space-between; gap: 8px; font-size: 14.5px; font-weight: 600; }
.ln-item__title > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ln-item__count { flex: none; font-size: 12px; font-weight: 400; color: var(--text-mute); }
.ln-item__peek { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 2px; font-size: 13px; line-height: 1.45; color: var(--text-soft); }
.ln-list__foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 14px; border-top: 1px solid var(--border); font-size: 12px; color: var(--text-mute); }
.ln-doc__bar { display: flex; align-items: center; gap: 14px; padding: 10px 16px; border-bottom: 1px solid var(--border); font-size: 13px; color: var(--text-mute); }
.ln-name { flex: 1; min-width: 0; }
.ln-name input { width: 100%; padding: 4px 8px; margin-left: -8px; border: 1px solid transparent; border-radius: 6px; background: transparent; font: inherit; font-size: 20px; font-weight: 700; color: var(--text); box-shadow: none; }
.ln-name input:hover { border-color: var(--border); }
.ln-name input:focus { border-color: var(--accent); background: var(--surface); outline: none; }
.ln-doc__tools { display: inline-flex; align-items: center; gap: 14px; flex: none; }
.ln-back { display: none; }
.ln-doc__body { flex: 1; overflow-y: auto; padding: 8px 12px 20px; }
.ln-doc--empty { align-items: center; justify-content: center; color: var(--text-mute); }
/* the checklist inside, without its own boxes: one open sheet */
.ln-doc__body .checklist-stack { gap: 4px; }
.ln-doc__body .checklist-stack > .card { border: 0; box-shadow: none; background: transparent; }
.ln-doc__body .checklist-stack > .card + .card { border-top: 1px solid var(--border); border-radius: 0; margin-top: 8px; }
.ln-doc__body .checklist-stack > .card > .card__head { padding: 14px 18px 4px; border: 0; background: transparent; }
.ln-doc__body .checklist-stack > .card > .card__head h3 { font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text-mute); }
.ln-doc__body .checklist__item { font-size: 15.5px; }
/* phone: the panel fills the screen; a list opens full screen with ← Lists */
@media (max-width: 760px) {
    .ln { grid-template-columns: 1fr; height: auto; min-height: 0; }
    .ln-list { max-height: none; }
    .ln .ln-doc { display: none; }
    .ln.is-reading .ln-list { display: none; }
    .ln.is-reading .ln-doc { display: flex; min-height: calc(100vh - 170px); }
    .ln-back { display: inline; color: var(--accent-ink); font-weight: 600; }
    .ln-doc__bar { flex-wrap: wrap; }
    .ln-row .drag-handle { opacity: 1; }
}

/* Daily sales: a day's items as rows of the table, amounts under their own columns (2026-10-19) */
.ds-item td { padding-top: 4px; padding-bottom: 4px; border-top: 0; border-bottom: 0; background: var(--surface-2); font-size: 13.5px; color: var(--text-soft); }
.ds-item td:first-child { padding-left: 34px; color: var(--text); }
.ds-item--last td { padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.ds-item__qty { display: inline-block; min-width: 34px; color: var(--text-mute); }
.ds-item[hidden] { display: none; }

/* Booked off on the shift calendars (2026-10-20): a card like a shift, greyed and striped */
.sp-off { display: flex; align-items: center; gap: 6px; margin-top: 4px; padding: 3px 6px; border: 1px dashed var(--border); border-left: 3px solid var(--text-mute); border-radius: 6px;
    background: repeating-linear-gradient(135deg, var(--surface-2) 0 6px, var(--surface) 6px 12px); font-size: 12px; color: var(--text-soft); }
.sp-off__main { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; line-height: 1.3; }
.sp-off__name { font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-off__label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-mute); }
.sp-off .sp-shift__del, .sp-off__rec { margin-left: auto; }
.sp-off__rec { color: var(--text-mute); text-decoration: none; }
.sp-mode { display: flex; gap: 16px; margin: 4px 0 10px; font-size: 14px; }
.sp-mode label { display: inline-flex; align-items: center; gap: 6px; }
.shift-chip--off { display: block; margin-bottom: 4px; border: 1px dashed var(--border); border-left: 3px solid var(--text-mute); color: var(--text-soft); font-weight: 600;
    background: repeating-linear-gradient(135deg, var(--surface-2) 0 6px, var(--surface) 6px 12px); }
.sm-chip--off { border-style: dashed; color: var(--text-soft); background: repeating-linear-gradient(135deg, var(--surface-2) 0 6px, var(--surface) 6px 12px); }
.pill--er-booked_off { background: var(--surface-2); border-color: var(--border); color: var(--text-soft); }

/* Donation requests (2026-10-20) */
.dn-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
.dn-main, .dn-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.dn-side { position: sticky; top: 72px; }
.dn-save { display: flex; gap: 8px; }
.dn-ask { max-width: 320px; white-space: normal; }
.dn-late { color: var(--danger); font-weight: 600; }
.dn-table td { vertical-align: top; }
.pill--dn-cash { background: var(--ok-bg); border-color: #bcdcc4; color: var(--ok); }
.pill--dn-gift_card { background: var(--accent-bg-soft); border-color: #ecd9ae; color: var(--accent-ink); }
.pill--dn-st-new { background: var(--info-bg); border-color: #c6d3e5; color: #3c5a86; }
.pill--dn-st-approved { background: var(--accent-bg-soft); border-color: #ecd9ae; color: var(--accent-ink); }
.pill--dn-st-given { background: var(--ok-bg); border-color: #bcdcc4; color: var(--ok); }
.pill--dn-st-declined { background: var(--surface-2); border-color: var(--border); color: var(--text-mute); }
@media (max-width: 900px) { .dn-grid { grid-template-columns: 1fr; } .dn-side { position: static; } }
/* date boxes on the donation form, matched to the text boxes beside them */
.dn-form input[type="date"] { font: inherit; font-size: 14px; line-height: 21px; padding: 8px 11px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); width: 100%; }

/* ---------- Packaging inventory on a phone (Tim, 2026-11-01) ----------
   Cards instead of the table: SKU / size or name / supplier SKU stacked on
   the left, a − count + stepper on the right, a Save bar pinned to the
   bottom, and a one-at-a-time count mode. Desktop keeps the table. */
.pmob { display: none; }
@media (max-width: 760px) {
    body:has(#pmob) .status-group, body:has(#pmob) .filters--inv, body:has(#pmob) .print-tools-bar,
    body:has(#pmob) .pform__foot, body:has(#pmob) .page-head__actions, body:has(#pmob) .page-head__sub { display: none !important; }
    body:has(#pmob) .content { padding-bottom: 96px; }
    body:has(#pmob) .pkg-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-bottom: 4px; }
    body:has(#pmob) .pkg-tabs::-webkit-scrollbar { display: none; }
    body:has(#pmob) .pkg-tab { flex: none; padding: 8px 11px; }
    .pmob { display: block; }
    .pmob__top { position: sticky; top: 56px; z-index: 10; background: var(--bg); margin: 0 -16px; padding: 8px 16px 8px; border-bottom: 1px solid var(--border); }
    .pmob__find { display: flex; gap: 8px; align-items: stretch; }
    .pmob__search { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 0 12px; color: var(--text-mute); }
    .pmob__search svg { width: 17px; height: 17px; flex: none; }
    .pmob__search input { border: 0; outline: 0; flex: 1; min-width: 0; font-size: 16px; padding: 11px 0; background: transparent; color: var(--text); }
    .pmob__bar { display: flex; margin-top: 8px; }
    .pmob__chips { display: flex; gap: 6px; overflow-x: auto; flex: 1; min-width: 0; scrollbar-width: none; }
    .pmob__chips::-webkit-scrollbar { display: none; }
    .pmob__chip, .pmob__countbtn { flex: none; border: 1px solid var(--border); background: var(--surface); border-radius: 999px; padding: 7px 12px; font: inherit; font-size: 14px; color: var(--text); }
    .pmob__chip b { font-weight: 600; color: var(--text-mute); margin-left: 3px; }
    .pmob__chip.is-on { background: var(--text); border-color: var(--text); color: #fff; }
    .pmob__chip.is-on b { color: #d6d0c4; }
    .pmob__countbtn { border-radius: 12px; font-weight: 600; padding: 0 14px; }
    .pmob__bar:empty { display: none; }
    .pmob__list { padding-top: 6px; }
    .pmob__sec { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-mute); margin: 14px 4px 6px; }
    .pmob__row { display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 10px 10px 10px 14px; margin-bottom: 8px; }
    .pmob__row[hidden], .pmob__sec[hidden] { display: none; }
    .pmob__row.is-changed { background: var(--accent-bg-soft); border-color: #efd8a8; }
    .pmob__id { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; background: none; border: 0; padding: 0; text-align: left; font: inherit; color: inherit; }
    .pmob__sku { font: 600 17px/1.25 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
    .pmob__line { font-size: 14px; color: var(--text-soft); max-width: 100%; }
    .pmob__ssku { font-size: 13px; color: var(--text-mute); }
    .pmob__retire { font-size: 12px; color: var(--accent-ink); }
    .pmob__route { font-size: 12px; color: var(--info-ink); }
    .pmob__was { font-size: 12px; color: var(--accent-ink); }
    .pmob__route[hidden], .pmob__was[hidden] { display: none; }
    .pmob__step { display: flex; align-items: center; gap: 4px; flex: none; }
    .pmob__step button { width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface-2); font-size: 22px; line-height: 1; color: var(--text); padding: 0; }
    .pmob .pmob__num { flex: none; width: 58px; min-width: 0; height: 42px; text-align: center; font-size: 19px; font-weight: 700; border: 2px solid transparent; border-radius: 12px; outline: none; padding: 0; }
    .pmob .pmob__num:focus { border-color: var(--text); box-shadow: none; }
    .pmob__save { position: fixed; left: 0; right: 0; bottom: 0; z-index: 15; display: flex; align-items: center; gap: 10px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--border); box-shadow: 0 -4px 16px rgba(0, 0, 0, .06); }
    .pmob__savetxt { flex: 1; font-size: 14px; color: var(--text-soft); }
    .pmob__savetxt strong { color: var(--text); }
    .pmob__undo { background: none; border: 0; font: inherit; font-size: 15px; color: var(--text-soft); padding: 10px 6px; }
    .pmob__undo[hidden] { display: none; }
    .pmob__savebtn { padding: 12px 22px; font-size: 16px; }
    .pmob__dlg { width: min(94vw, 420px); }
    .pmob__dlg-head { display: flex; flex-direction: column; margin-bottom: 12px; }
    .pmob__dlg-head strong { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 18px; }
    .pmob__dlg-body { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 16px; }
    .pmob__dlg-body .onorder__qty { width: 80px; font-size: 16px; }
    .pmob__focus { position: fixed; inset: 0; z-index: 60; background: var(--bg); display: flex; flex-direction: column; }
    .pmob__focus[hidden] { display: none; }
    .pmob__ftop { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; font-size: 14px; color: var(--text-mute); }
    .pmob__ftop button { border: 0; background: none; font: inherit; font-size: 15px; color: var(--text); padding: 4px 0; }
    .pmob__fprog { height: 4px; margin: 0 16px; background: var(--border); border-radius: 2px; overflow: hidden; }
    .pmob__fprog i { display: block; height: 100%; width: 0; background: var(--accent); }
    .pmob__fbody { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 20px; }
    .pmob__fsku { font: 700 34px/1.1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
    .pmob__fline { font-size: 20px; margin-top: 6px; }
    .pmob__fssku { font-size: 16px; color: var(--text-mute); margin-top: 4px; }
    .pmob__fwas { font-size: 14px; color: var(--text-mute); margin-top: 24px; }
    .pmob__fnum { font-size: 64px; font-weight: 700; line-height: 1; min-height: 64px; margin-top: 6px; }
    .pmob__pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 14px 16px calc(14px + env(safe-area-inset-bottom)); }
    .pmob__pad button { height: 58px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface); font: inherit; font-size: 24px; color: var(--text); }
    .pmob__pad .pmob__same { font-size: 15px; background: var(--surface-2); }
    .pmob__pad .pmob__next { grid-column: span 3; background: var(--accent); border: 0; color: #fff; font-size: 18px; font-weight: 600; }
    body.pmob-lock { overflow: hidden; }
}

/* Formulations on a phone (2026-11-03) — the book as cards, a formulation laid
   out for making it, the editor as a list + bottom panel. Screen only, so
   printing still uses the desktop layout. */
.fmob, .fsm, .fem, .fem-add, .fem-sum, .fem-sheet, .fem-dim, .step-mv { display: none; }
@media screen and (max-width: 760px) {
    /* ---- the book */
    body:has(#fmob) .fm-head .page-head__actions, body:has(#fmob) .fm-head .page-head__sub, .fm-desk { display: none !important; }
    body:has(#fmob) .fm-filters { display: none; }
    body.fmob-filters-on .fm-filters { display: flex; margin-bottom: 10px; }
    .fmob { display: block; padding-bottom: 76px; }
    .fmob__top { position: sticky; top: 56px; z-index: 5; margin: 0 -16px 10px; padding: 8px 16px; background: var(--bg); }
    .fmob__find { display: flex; gap: 8px; }
    .fmob__find input[type="search"] { flex: 1; min-width: 0; width: auto; font-size: 16px; }
    .fmob__chips { display: flex; gap: 6px; margin-top: 8px; overflow-x: auto; scrollbar-width: none; }
    .fmob__chips::-webkit-scrollbar { display: none; }
    .fmob__chip { flex: none; padding: 5px 11px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text-soft); font-size: 13px; text-decoration: none; white-space: nowrap; }
    .fmob__chip.is-on { background: var(--text); border-color: var(--text); color: var(--surface); }
    .fmob__sep { flex: none; width: 1px; margin: 3px 2px; background: var(--border); }
    .fmob__list { display: flex; flex-direction: column; gap: 8px; }
    .fmob__card { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 11px 13px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--text); text-decoration: none; }
    .fmob__card.is-muted { opacity: .8; }
    .fmob__main { display: flex; flex-direction: column; min-width: 0; }
    .fmob__kind { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-mute); }
    .fmob__name { font-size: 15.5px; font-weight: 650; line-height: 1.25; }
    .fmob__sub { margin-top: 2px; font-size: 12.5px; color: var(--text-soft); }
    .fmob__pill { align-self: flex-start; margin-top: 5px; }
    .fmob__cost { flex: none; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
    .fmob__cost small { display: block; font-size: 11px; font-weight: 400; color: var(--text-mute); }
    .fmob__none { padding: 12px 0; }
    .fmob__fab { position: fixed; right: 16px; bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 6; display: inline-flex; align-items: center; gap: 6px; padding: 12px 18px; border-radius: 999px; background: var(--accent); color: #fff; font-weight: 700; text-decoration: none; box-shadow: 0 4px 14px rgba(0, 0, 0, .18); }
    .fmob__fab svg { width: 16px; height: 16px; }

    /* ---- one formulation */
    .fsm { display: block; padding-bottom: 84px; }
    .fsm__nav { display: flex; justify-content: space-between; font-size: 13.5px; font-weight: 600; }
    .fsm__nav a { color: var(--accent-ink); text-decoration: none; }
    .fsm__nav span { display: flex; gap: 16px; }
    .fsm__name { margin: 10px 0 2px; font-size: 21px; line-height: 1.2; }
    .fsm__name span { font-weight: 500; color: var(--text-mute); }
    .fsm__meta { margin: 0; font-size: 13px; color: var(--text-soft); }
    .fsm__facts { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; }
    .fsm__facts > div { flex: 1 1 0; min-width: 90px; padding: 7px 9px; border-radius: 10px; background: var(--accent-bg-soft); }
    .fsm__facts b { display: block; font-size: 16px; }
    .fsm__facts span { font-size: 11.5px; color: var(--accent-ink); }
    .fsm .fsm-cost { display: none; }
    .fsm.fsm--costs .fsm-cost { display: revert; }
    .fsm.fsm--costs .fsm__facts .fsm-nocost { display: none; }
    .fsm__tabs { position: sticky; top: 56px; z-index: 5; display: flex; margin: 14px -16px 4px; padding: 0 16px; border-bottom: 1px solid var(--border); background: var(--bg); }
    .fsm__tabs button { flex: 1; padding: 11px 0 10px; border: 0; background: none; color: var(--text-soft); font: inherit; font-size: 14px; font-weight: 600; }
    .fsm__tabs button small { font-weight: 500; color: var(--text-mute); }
    .fsm__tabs button.is-on { color: var(--text); box-shadow: inset 0 -3px 0 var(--accent); }
    .fsm__hint { margin: 8px 0 4px; font-size: 12.5px; color: var(--text-mute); }
    .fsm__phase { margin: 16px 0 4px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-mute); }
    .fsm__ing { display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px 2px; border: 0; border-bottom: 1px solid var(--border); background: none; color: var(--text); font: inherit; text-align: left; }
    .fsm__tick { flex: none; width: 20px; height: 20px; border: 1.6px solid var(--border-strong); border-radius: 5px; }
    .fsm__ing.is-done .fsm__tick { border-color: var(--ok); background: var(--ok); box-shadow: inset 0 0 0 3px var(--surface); }
    .fsm__ingname { flex: 1; min-width: 0; font-size: 15px; }
    .fsm__ingname small { display: block; font-size: 12px; color: var(--text-mute); }
    .fsm__amt { flex: none; text-align: right; font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
    .fsm__amt small { font-weight: 500; color: var(--text-soft); font-size: 13px; }
    .fsm__amt small.fsm-cost { display: none; font-size: 12px; color: var(--text-mute); }
    .fsm.fsm--costs .fsm__amt small.fsm-cost { display: block; }
    .fsm__ing.is-done .fsm__ingname, .fsm__ing.is-done .fsm__amt { color: var(--text-mute); text-decoration: line-through; }
    .fsm__steps { margin: 10px 0 0; padding-left: 24px; font-size: 15.5px; line-height: 1.5; }
    .fsm__steps li { padding: 6px 0 8px; border-bottom: 1px solid var(--border); }
    .fsm__dl { margin-top: 8px; }
    .fsm__notes { margin: 4px 0 0; font-size: 14.5px; }
    .fsm__ver { display: flex; justify-content: space-between; padding: 9px 0; border-bottom: 1px solid var(--border); color: var(--text); text-decoration: none; font-weight: 600; }
    .fsm__ver span { font-weight: 400; color: var(--text-soft); font-size: 13px; }
    .fsm__bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; gap: 8px; padding: 10px 16px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--border); background: var(--surface); }
    .fsm__edit { flex: 1; justify-content: center; }
    .fsm__more { position: relative; }
    .fsm__more summary { list-style: none; }
    .fsm__more summary::-webkit-details-marker { display: none; }
    .fsm__menu { position: absolute; bottom: calc(100% + 8px); left: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); box-shadow: 0 6px 20px rgba(0, 0, 0, .15); white-space: nowrap; }

    /* ---- editing */
    body:has(.fm-form) .fm-head .page-head__actions, .fm-form #addIngredient { display: none; }
    .fm-form .card:has(#fem) .table-wrap, .fm-form .card:has(#fem) .card__body > .field__hint { display: none; }
    .fem-sum { display: inline; font-size: 12.5px; font-weight: 400; color: var(--text-soft); }
    .fm-form [data-fold] .card__head { cursor: pointer; }
    .fm-form [data-fold] .card__head h3::after { content: ' \2304'; color: var(--text-mute); font-weight: 400; }
    .fm-form [data-fold].is-folded .card__head h3::after { content: ' \203A'; }
    .fm-form [data-fold].is-folded > :not(.card__head) { display: none; }
    .fm-form [data-fold].is-folded .card__head { border-bottom: 0; }
    .fm-form [data-fold].is-folded .card__head .btn { display: none; }
    .fem { display: block; margin: 0 -4px; }
    .fem-row { display: flex; align-items: center; gap: 6px; border-top: 1px solid var(--border); }
    .fem-row:first-child { border-top: 0; }
    .fem-mv { display: flex; flex-direction: column; flex: none; }
    .fem-mv button, .step-mv button { padding: 2px 6px; border: 0; background: none; color: var(--text-mute); font-size: 11px; line-height: 1.2; }
    .fem-mv button:disabled, .step-mv button:disabled { opacity: .3; }
    .fem-open { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; padding: 10px 2px; border: 0; background: none; color: var(--text); font: inherit; text-align: left; }
    .fem-nm { flex: 1; min-width: 0; }
    .fem-nm b { display: block; overflow: hidden; font-size: 14.5px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
    .fem-nm small { display: block; font-size: 12px; color: var(--text-mute); }
    .fem-warn { color: var(--danger); }
    .fem-q { flex: none; min-width: 78px; padding: 6px 9px; border: 1px solid var(--border); border-radius: 8px; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
    .fem-q small { font-weight: 500; color: var(--text-soft); }
    .fem-add { display: inline-flex; width: 100%; justify-content: center; margin-top: 8px; }
    .fem-dim:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 60; background: rgba(30, 25, 20, .38); }
    .fem-sheet:not([hidden]) { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 61; max-height: 92vh; overflow-y: auto; padding: 8px 16px calc(14px + env(safe-area-inset-bottom)); border-radius: 18px 18px 0 0; background: var(--surface); box-shadow: 0 -8px 30px rgba(0, 0, 0, .22); }
    body.fem-lock { overflow: hidden; }
    .fem-sheet__grab { width: 40px; height: 4px; margin: 0 auto 8px; border-radius: 4px; background: var(--border); }
    .fem-sheet__head { display: flex; justify-content: space-between; align-items: center; }
    .fem-sheet__head h3 { margin: 0; font-size: 16px; }
    .fem-f { display: block; flex: 1; min-width: 0; margin-top: 10px; }
    .fem-f > span { display: block; margin-bottom: 4px; font-size: 12px; font-weight: 600; color: var(--text-soft); }
    .fem-f > span small { font-weight: 400; color: var(--text-mute); }
    .fem-f input { width: 100%; font-size: 16px; }
    .fem-f--amt { flex: 0 0 96px; }
    .fem-f--amt input { font-size: 20px; font-weight: 700; text-align: center; }
    .fem-two { display: flex; gap: 10px; }
    .fem-units { display: flex; flex-wrap: wrap; gap: 5px; }
    .fem-units button, .fem-units select { padding: 6px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); font: inherit; font-size: 13.5px; }
    .fem-units select { width: auto; padding-right: 22px; }
    .fem-units .is-on { border-color: var(--text); background: var(--text); color: var(--surface); }
    .fem-link { margin: 4px 0 0; min-height: 1em; font-size: 12.5px; color: var(--ok); }
    .fem-link.is-warn { color: var(--danger); }
    .fem-phase { margin-top: 10px; font-size: 13px; color: var(--text-soft); }
    .fem-phase summary { cursor: pointer; }
    .fem-phase input { width: 100%; margin-top: 6px; font-size: 16px; }
    .fem-sheet__foot { display: flex; gap: 8px; margin-top: 16px; }
    .fem-sheet__foot .btn { justify-content: center; }
    .fem-sheet__foot .btn--primary { flex: 1; }
    .fem-del { color: var(--danger); }
    .step-mv { display: flex; flex-direction: column; flex: none; }
    #stepsEditor .drag-handle { display: none; }
    .fm-form .step-text { font-size: 15px; field-sizing: content; min-height: 44px; } /* long steps show in full */
    .fm-form [data-fold="method"] .card__body > .field__hint { display: none; }
    .fm-form ~ .danger-form { margin-bottom: 96px; }
    .fm-form .pform__foot { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; flex-direction: row-reverse; gap: 8px; margin: 0; padding: 10px 16px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--border); background: var(--surface); }
    .fm-form .pform__foot .btn--primary { flex: 1; justify-content: center; }
}

/* Supplier price CAD | USD switch (2026-11-05) */
.price-cur__head { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.price-cur__head .field__label { white-space: nowrap; }
.cur-toggle { display: inline-flex; border: 1px solid var(--border-strong); border-radius: 5px; overflow: hidden; flex: none; }
.cur-toggle label { display: flex; cursor: pointer; margin: 0; position: relative; }
.cur-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.cur-toggle span { display: flex; align-items: center; padding: 1px 6px; font-size: 10.5px; line-height: 1.4; font-weight: 600; letter-spacing: .03em; color: var(--text-mute); background: var(--surface); }
.cur-toggle label + label span { border-left: 1px solid var(--border-strong); }
.cur-toggle input:checked + span { background: var(--accent-bg); color: var(--accent-ink); }
.cur-toggle input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: -2px; }