/* Cannalitix: the one stylesheet. The look of the first Cannalitix app (owner, 2026-10-06: "its contrast: dark
   sidebar with section headings, white content area, bold dark headings, cards with status tags", using its actual
   colours and styles), with Openventory's big number tiles, alert banner and store picker, and a dark version chosen
   per person. No third-party fonts or frameworks. Phones first: the sidebar opens from a menu button below 900px. */
:root {
  --bg: #f4f6f8;
  --panel: #ffffff;
  --panel-2: #fafbfc;
  --text: #15181c;
  --muted: #69717b;            /* the first app's #737b86, a shade darker so small text stays easy to read */
  --line: #e5e8ec;
  --line-strong: #d2d7df;
  --input-line: #d7dce3;
  --th: #eef2f6;
  --sidebar: #17191d;
  --sidebar-line: #2a2d33;
  --sidebar-text: #c9ced5;
  --sidebar-muted: #989fa8;
  --sidebar-label: #8a919b;
  --sidebar-hover: #24272d;
  --sidebar-current: #2c3037;
  --accent: #2f6fed;
  --accent-soft: #eef3ff;
  --primary: #15181c;
  --primary-text: #ffffff;
  --primary-hover: #2b3038;
  --danger-button: #b42318;
  --good-bg: #ecfdf3; --good: #067647; --good-line: #bfe3ca;
  --warn-bg: #fff7e8; --warn: #a15c00; --warn-line: #f3e4b8;
  --bad-bg: #fff1f0; --bad: #b42318; --bad-line: #f5c2bd;
  --sample-bg: #f6efff; --sample: #6b21a8; --sample-line: #dcc8f7;
  --neutral-bg: #f1f3f5; --neutral: #555e69;
  --avatar: #e7ebf1;
  --hero-from: #ffffff; --hero-to: #f5f7fb; --hero-glow: rgba(61, 92, 255, .13); --hero-line: #dce2ea;
  --banner-bg: #c2410c; --banner-text: #ffffff;
  --shadow: 0 8px 30px rgba(20, 25, 35, .07);
  --shadow-big: 0 18px 60px rgba(20, 25, 35, .09);
  --radius: 14px;
  color-scheme: light;
}
/* Dark: chosen by the person (the switch at the top), or the computer's own setting until they choose */
:root[data-theme="dark"] {
  --bg: #0e1013; --panel: #171a1f; --panel-2: #1c2026; --text: #e8eaed; --muted: #a0a8b3; --line: #2a2f36;
  --line-strong: #3a414b; --input-line: #3d444e; --th: #1f242b; --sidebar: #08090b; --sidebar-line: #1d2026;
  --sidebar-text: #c9ced5; --sidebar-muted: #8b929b; --sidebar-label: #747c86; --sidebar-hover: #17191d;
  --sidebar-current: #20242a; --accent: #7aa2ff; --accent-soft: #1b2440; --primary: #e8eaed; --primary-text: #111317;
  --primary-hover: #ffffff; --danger-button: #b42318;
  --good-bg: #0f2a1d; --good: #6ee7a8; --good-line: #1f5a3c;
  --warn-bg: #2f2410; --warn: #f5c26b; --warn-line: #6b5216;
  --bad-bg: #351616; --bad: #ff9b91; --bad-line: #7a2a24;
  --sample-bg: #251a33; --sample: #d6b4fe; --sample-line: #4b2e6e;
  --neutral-bg: #23272e; --neutral: #b8bfc8; --avatar: #2a2f36;
  --hero-from: #1a1e24; --hero-to: #15181d; --hero-glow: rgba(110, 140, 255, .16); --hero-line: #2a2f36;
  --shadow: 0 8px 30px rgba(0, 0, 0, .35); --shadow-big: 0 18px 60px rgba(0, 0, 0, .45);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0e1013; --panel: #171a1f; --panel-2: #1c2026; --text: #e8eaed; --muted: #a0a8b3; --line: #2a2f36;
    --line-strong: #3a414b; --input-line: #3d444e; --th: #1f242b; --sidebar: #08090b; --sidebar-line: #1d2026;
    --sidebar-text: #c9ced5; --sidebar-muted: #8b929b; --sidebar-label: #747c86; --sidebar-hover: #17191d;
    --sidebar-current: #20242a; --accent: #7aa2ff; --accent-soft: #1b2440; --primary: #e8eaed; --primary-text: #111317;
    --primary-hover: #ffffff; --danger-button: #b42318;
    --good-bg: #0f2a1d; --good: #6ee7a8; --good-line: #1f5a3c;
    --warn-bg: #2f2410; --warn: #f5c26b; --warn-line: #6b5216;
    --bad-bg: #351616; --bad: #ff9b91; --bad-line: #7a2a24;
    --sample-bg: #251a33; --sample: #d6b4fe; --sample-line: #4b2e6e;
    --neutral-bg: #23272e; --neutral: #b8bfc8; --avatar: #2a2f36;
    --hero-from: #1a1e24; --hero-to: #15181d; --hero-glow: rgba(110, 140, 255, .16); --hero-line: #2a2f36;
    --shadow: 0 8px 30px rgba(0, 0, 0, .35); --shadow-big: 0 18px 60px rgba(0, 0, 0, .45);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 15px/1.5 Arial, Helvetica, sans-serif;
}
a { color: var(--accent); text-underline-offset: 2px; }
a:hover { text-decoration: underline; }
h1 { font-size: clamp(1.6rem, 1.15rem + 1.6vw, 2.125rem); line-height: 1.15; letter-spacing: -.03em; font-weight: 800;
     margin: 6px 0 10px; }
h2 { font-size: 1.25rem; line-height: 1.25; letter-spacing: -.02em; font-weight: 800; margin: 0 0 12px; }
h3 { font-size: 1.05rem; margin: 10px 0 7px; }
p { margin: 0 0 .75rem; }
code { font: .85em/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
code.wrap { display: block; white-space: pre-wrap; word-break: break-word; margin-top: .4rem; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: 2px; }

.skip { position: absolute; left: -9999px; }
.skip:focus { left: 8px; top: 8px; z-index: 60; background: var(--panel); padding: 8px 12px; }
.hidden-label, .visually-hidden, .nav-state {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.eyebrow { display: block; font-size: 11px; letter-spacing: .14em; font-weight: 800; color: var(--muted);
           text-transform: uppercase; }

/* The bright strip outside production: never removed */
.env-banner {
  position: relative; z-index: 50; background: var(--banner-bg); color: var(--banner-text); text-align: center;
  font-weight: 800; letter-spacing: .12em; padding: 6px 16px; font-size: 13px; line-height: 20px; height: 32px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ---------- The shell: the dark sidebar and the main area ---------- */
.shell { min-height: 100vh; }
.sidebar {
  background: var(--sidebar); color: #fff; padding: 22px 16px; display: flex; flex-direction: column;
  position: fixed; inset: 0 auto 0 0; z-index: 45; width: min(86vw, 290px); transform: translateX(-102%);
  visibility: hidden;                       /* closed: out of reach of the keyboard too */
  transition: transform .2s ease, visibility 0s linear .2s; overflow-y: auto; overflow-x: hidden;
  overscroll-behavior: contain; scrollbar-width: thin;
}
.nav-state:checked ~ .shell .sidebar { transform: none; visibility: visible; transition: transform .2s ease;
                                       box-shadow: 0 0 60px rgba(0, 0, 0, .45); }
.env-banner ~ .shell .sidebar { top: 32px; }          /* the open menu never covers the TEST ENVIRONMENT strip */
.nav-backdrop { display: none; }
.nav-state:checked ~ .shell .nav-backdrop {
  display: block; position: fixed; inset: 0; z-index: 44; background: rgba(9, 11, 15, .45);
}
.nav-state:focus-visible ~ .shell .menu-button { outline: 3px solid color-mix(in srgb, var(--accent) 55%, transparent); }
/* The owner's logo: CANNA in white on the dark sidebar (logo-light.png), LITIX in its own green */
.brand { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; padding: 8px 8px 22px;
         border-bottom: 1px solid var(--sidebar-line); color: #fff; text-decoration: none; }
.brand:hover { text-decoration: none; }
.brand-logo { display: block; width: 100%; max-width: 206px; height: auto; }
.brand-sub { color: var(--sidebar-muted); font-size: 12px; }
/* On a light page the logo as received; on a dark one its CANNA in white (the person's look, else the computer's) */
.logo-on-dark { display: none !important; }
:root[data-theme="dark"] .logo-on-light { display: none !important; }
:root[data-theme="dark"] .logo-on-dark { display: block !important; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logo-on-light { display: none !important; }
  :root:not([data-theme="light"]) .logo-on-dark { display: block !important; }
}
.sidebar nav { display: grid; gap: 4px; padding-top: 18px; }
.nav-label {
  padding: 14px 12px 5px; font-size: 10px; letter-spacing: .15em; font-weight: 800; color: var(--sidebar-label);
  text-transform: uppercase;
}
.nav-label:first-child { padding-top: 4px; }
.nav-link {
  display: flex; align-items: center; gap: 10px; color: var(--sidebar-text); padding: 9px 10px; border-radius: 8px;
  font-size: 14px; text-decoration: none; min-height: 42px;
}
.nav-link:hover { color: #fff; background: var(--sidebar-hover); text-decoration: none; }
.nav-link[aria-current="page"] { color: #fff; background: var(--sidebar-current); font-weight: 700; }
.nav-icon {
  width: 25px; height: 25px; flex: 0 0 25px; display: grid; place-items: center; border-radius: 7px;
  background: rgba(255, 255, 255, .055); color: #fff; font-size: 11px; font-weight: 800;
}
.nav-link:hover .nav-icon { background: rgba(255, 255, 255, .11); }
.nav-link[aria-current="page"] .nav-icon { background: var(--accent); }
/* The reports folded under "All reports" (owner, 2026-10-09): a click opens the list underneath */
.nav-group { display: grid; gap: 4px; }
.nav-group > summary { cursor: pointer; list-style: none; }
.nav-group > summary::-webkit-details-marker { display: none; }
.nav-caret { margin-left: auto; transition: transform .15s; font-size: 12px; }
.nav-group[open] > summary .nav-caret { transform: rotate(180deg); }
.nav-group > .nav-link { margin-left: 18px; }
.nav-group > summary.nav-link { margin-left: 0; }
/* The menu's groups (owner, 2026-10-16): in Modern a group's icon carries its family's color; a folded group shows
   its links' waiting counts, an open one leaves them to its links */
.nav-group.fam-net, .rg-tile.fam-net, .rg-ri.fam-net { --fam: var(--m-net); }
.nav-group.fam-stock, .rg-tile.fam-stock, .rg-ri.fam-stock { --fam: var(--m-stock); }
.nav-group.fam-deals, .rg-tile.fam-deals, .rg-ri.fam-deals { --fam: var(--m-deals); }
.nav-group.fam-undone, .rg-tile.fam-undone, .rg-ri.fam-undone { --fam: var(--m-undone); }
.nav-group.fam-attn, .rg-tile.fam-attn, .rg-ri.fam-attn { --fam: var(--m-attn); }
.nav-group.fam-none, .rg-tile.fam-none, .rg-ri.fam-none { --fam: var(--m-none); }
:root:not([data-look="classic"]) .nav-group[class*="fam-"] > summary .nav-icon { background: var(--fam); color: #fff; }
.nav-group[open] > summary { color: #fff; }
.nav-group[open] > summary .nav-badge { display: none; }
.nav-badge {
  margin-left: auto; min-width: 22px; padding: 1px 7px; border-radius: 999px; background: #f0a32f; color: #17191d;
  font-size: 11px; font-weight: 800; text-align: center;
}
.sidebar-foot {
  margin-top: auto; padding: 14px 8px 4px; border-top: 1px solid var(--sidebar-line); display: grid; gap: 10px;
  font-size: 12px; color: var(--sidebar-muted);
}
.sidebar-foot strong { display: block; color: #fff; font-size: 13px; }
.sidebar-status { display: flex; gap: 10px; align-items: flex-start; }
.status-dot {
  width: 9px; height: 9px; flex: none; margin-top: 4px; border-radius: 50%; background: #44c776;
  box-shadow: 0 0 0 4px rgba(68, 199, 118, .12);
}
.sidebar-foot form { margin: 0; }
.sidebar-foot .link-button { color: var(--sidebar-text); padding: 6px 0; min-height: 32px; }
.sidebar-foot .link-button:hover { color: #fff; }
.nav-sidebar-space { flex: 1 0 18px; }

.main { min-width: 0; }
.topbar {
  position: sticky; top: 0; z-index: 30; display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px;
  background: var(--panel); border-bottom: 1px solid var(--line); padding: 10px 14px; min-height: 64px;
}
.menu-button {
  display: inline-flex; flex-direction: row; align-items: center; justify-content: center; gap: 8px; min-height: 44px;
  min-width: 44px; font-size: 14px;
  padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 9px; cursor: pointer; font-weight: 700;
  color: var(--text); background: var(--panel); user-select: none;
}
.menu-button svg { width: 20px; height: 20px; }
/* Sorting from the column headings (owner, 2026-10-08): a heading opens its column's menu, a pop-up of the browser's
   own (placed under the heading by ui.js; without the script, in the middle of the screen). Sorts stack, and the line
   above the table shows them in their order, each with an x to take it off. */
th.sortable { padding: 0; }
th.sortable .col-head {
  display: inline-flex; align-items: center; gap: 4px; width: 100%; min-height: 44px; padding: 10px 12px; margin: 0;
  border: 0; border-radius: 0; background: none; font: inherit; font-size: 12px; font-weight: 700; color: inherit;
  text-align: inherit; white-space: nowrap; cursor: pointer;
}
th.sortable.num .col-head { justify-content: flex-end; }
th.sortable .col-head:hover { color: var(--text); background: color-mix(in srgb, var(--accent-soft) 70%, transparent); }
th.sortable .col-head:focus-visible { color: var(--text); outline: 2px solid var(--accent); outline-offset: -2px; }
th.sortable.sorted { color: var(--text); }
.col-mark { display: inline-flex; align-items: center; gap: 3px; }
.col-mark .arrow { font-size: 11px; color: var(--accent); }
.col-mark .col-step {
  display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 8px; background: var(--accent); color: var(--panel); font-size: 10px; font-weight: 800;
}
.col-mark .caret { font-size: 10px; opacity: .55; }
.col-menu {
  margin: auto; padding: 6px; min-width: 230px; max-width: min(340px, calc(100vw - 24px)); max-height: min(75vh, 560px);
  overflow: auto; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--panel); color: var(--text);
  box-shadow: var(--shadow-big); font-size: 14px; font-weight: 400; white-space: normal; text-align: left;
}
.has-script .col-menu { inset: auto; margin: 0; }        /* placed under its heading by ui.js */
.col-menu::backdrop { background: transparent; }
.col-menu-title { margin: 4px 8px 6px; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
                  color: var(--muted); }
.col-menu-note { margin: 0 8px 6px; font-size: 13px; color: var(--muted); }
.col-menu ul { list-style: none; margin: 0; padding: 0; }
.col-menu li a {
  display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 10px; border-radius: 8px; color: var(--text);
  text-decoration: none; font-weight: 600;
}
.col-menu li a:hover, .col-menu li a:focus-visible { background: var(--accent-soft); color: var(--accent); }
.col-menu li a[aria-current] { color: var(--accent); }
.col-menu .tick { display: inline-block; width: 16px; text-align: center; }
.col-pick { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; margin: 6px 4px 2px; padding-top: 8px;
            border-top: 1px solid var(--line); }
.col-pick label { flex: 1 1 190px; font-size: 12px; font-weight: 700; color: var(--muted); }
.col-pick select { width: 100%; min-height: 44px; font-size: 14px; color: var(--text); }
/* "Show only" with several choices (owner, 2026-10-09): a list of tick boxes, applied with Show */
.col-pick-list { flex: 1 1 100%; margin: 0; padding: 0; border: 0; max-height: 45vh; overflow: auto; }
.col-pick-list legend { padding: 0 0 4px; font-size: 12px; font-weight: 700; color: var(--muted); }
.col-pick-list .check { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 6px; border-radius: 8px;
                        font-size: 14px; font-weight: 600; color: var(--text); }
.col-pick-list .check:hover { background: var(--accent-soft); }
.col-pick-all { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; font-weight: 600; }
.col-menu-reset { margin: 6px 4px 2px; padding-top: 4px; border-top: 1px solid var(--line); font-weight: 600; }
.col-menu-reset a { display: flex; align-items: center; min-height: 44px; padding: 0 6px; }
/* A one-store report while "All stores" is chosen asks for a store first (owner, 2026-10-08); the store picker says
   "Loading…" while the page comes */
.store-choices { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 10px 0 0; padding: 0; }
.store-choices .button { min-height: 44px; }
.store-loading { font-size: 12px; font-weight: 600; color: var(--muted); }
.sort-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 8px; font-size: 14px; }
.sort-bar-label { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.sort-bar-hint { color: var(--muted); font-size: 13px; }
.sort-chain { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; list-style: none; margin: 0; padding: 0; }
.sort-chain li { display: inline-flex; align-items: center; gap: 6px; }
.sort-chain .then { color: var(--muted); font-size: 13px; }
.sort-chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 2px 0 10px;
  border: 1px solid var(--line-strong); border-radius: 20px; background: var(--panel); font-weight: 600;
}
.sort-chip .step {
  display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; border-radius: 10px;
  background: var(--accent); color: var(--panel); font-size: 11px; font-weight: 800;
}
.filter-chip { background: var(--accent-soft); border-color: transparent; font-weight: 400; }
.chip-x {
  display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 18px;
  color: var(--muted); text-decoration: none; font-size: 18px; line-height: 1;
}
.chip-x:hover, .chip-x:focus-visible { background: var(--bad-bg); color: var(--bad); }
.sort-bar .sort-reset { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
/* The back button, on every page, always in the same place (owner, 2026-10-08) */
.back-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; min-width: 44px;
  padding: 0 14px 0 10px; border: 1px solid var(--line-strong); border-radius: 9px; font-size: 14px; font-weight: 700;
  color: var(--text); background: var(--panel); text-decoration: none; white-space: nowrap;
}
.back-button:hover { text-decoration: none; border-color: var(--accent); color: var(--accent); }
.back-button svg { width: 18px; height: 18px; }
.back-button.disabled { color: var(--muted); border-color: var(--line); cursor: default; opacity: .7; }
.back-button.disabled:hover { color: var(--muted); border-color: var(--line); }
.topbar-title { display: none; margin-right: auto; line-height: 1.2; }
.topbar-logo { display: block; width: 140px; height: auto; }
.topbar-home { display: block; }
.topbar-title .topbar-sub { display: none; margin-top: 3px; font-size: 12px; color: var(--muted); }
.topbar-tools { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.store-picker { order: 5; flex: 1 1 100%; display: flex; align-items: center; gap: 8px; margin: 0; }
.store-picker label { flex-direction: row; align-items: center; gap: 8px; font-size: 12px; font-weight: 800;
                      letter-spacing: .08em; text-transform: uppercase; color: var(--muted); width: 100%; }
.store-picker select { flex: 1; max-width: none; min-width: 0; font-weight: 700; text-transform: none; letter-spacing: 0;
                       color: var(--text); font-size: 15px; }
.store-picker .store-go { min-height: 44px; }
.user-box { display: flex; gap: 10px; align-items: center; }
.avatar {
  width: 38px; height: 38px; flex: none; border-radius: 50%; background: var(--avatar); color: var(--text);
  display: grid; place-items: center; font-weight: 800;
}
.user-text { display: none; line-height: 1.25; min-width: 0; }
.user-text .who-name, .user-text .who-where { display: block; overflow: hidden; text-overflow: ellipsis;
                                              white-space: nowrap; }
.user-text .who-name { font-weight: 800; max-width: 110px; font-size: 14px; }
.user-text .who-where { display: none; color: var(--muted); font-size: 12px; max-width: 220px; }
.icon-button {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 0;
  border-radius: 10px; border: 1px solid var(--line-strong); background: var(--panel); color: var(--text); cursor: pointer;
}
.icon-button:hover { background: var(--panel-2); border-color: var(--line-strong); color: var(--text); }
.icon-button svg { width: 20px; height: 20px; }
.theme-form, .sign-out { margin: 0; }
.link-button {
  border: 0; background: transparent; color: var(--muted); cursor: pointer; padding: 8px; min-height: 44px; font: inherit;
  font-weight: 700; white-space: nowrap;
}
.link-button:hover { background: transparent; color: var(--text); text-decoration: underline; }
/* the moon shows in light mode (switch to dark), the sun in dark mode */
.theme-icon-sun { display: none; }
:root[data-theme="dark"] .theme-icon-sun { display: inline; }
:root[data-theme="dark"] .theme-icon-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-icon-sun { display: inline; }
  :root:not([data-theme="light"]) .theme-icon-moon { display: none; }
}

/* While the page asks the server whether the session still holds, its data is hidden */
body.checking main { visibility: hidden; }

/* Floats over the page: it must never move the page (a page that moves scrolls itself) */
.idle-warning {
  position: fixed; top: 0; left: 0; right: 0; z-index: 70; padding: 12px 16px; background: var(--warn-bg);
  color: var(--text); border-bottom: 1px solid var(--warn-line); font-weight: 700; box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
}

.toast {
  position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 70; max-width: min(92vw, 520px);
  padding: 12px 16px; border-radius: 10px; background: var(--primary); color: var(--primary-text); font-weight: 700;
  box-shadow: var(--shadow-big);
}

.page { max-width: 1500px; margin: 0 auto; padding: 22px 16px 48px; }
.crumbs { margin: 0 0 4px; font-size: 13px; }
.crumbs a { color: var(--muted); font-weight: 700; text-decoration: none; }
.crumbs a:hover { color: var(--text); }

/* ---------- Blocks ---------- */
.card {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px;
  margin: 0 0 16px;
}
.card.danger { border-color: var(--bad-line); }
.card > h2:first-child, .card > .card-head:first-child { margin-top: 0; }
.card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.card-head h2 { margin: 4px 0 0; }
.card-head a { font-size: 13px; font-weight: 700; }
.lede { font-size: 1.05rem; color: var(--muted); max-width: 760px; line-height: 1.55; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }
.source { color: var(--muted); font-size: .85rem; margin: .75rem 0 0; }
.nowrap { white-space: nowrap; }
.title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap;
             margin: 0 0 18px; }
.page-head h1 { margin-bottom: 4px; }
.page-head p { margin: 0; }
ul.plain { margin: 0; padding-left: 1.2rem; }
ul.plain li { margin: 2px 0; }

/* Status tags (the first app's) */
.tag {
  display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; padding: 4px 9px;
  border-radius: 999px; background: var(--neutral-bg); color: var(--neutral); white-space: nowrap; line-height: 1.3;
  border: 0;
}
.tag.good, .tag.on { background: var(--good-bg); color: var(--good); }
.tag.warn { background: var(--warn-bg); color: var(--warn); }
.tag.bad, .tag.off { background: var(--bad-bg); color: var(--bad); }
.tag.info { background: var(--accent-soft); color: var(--accent); }
/* Sample data (the test site only): made-up figures to preview the layout, marked wherever they show */
.tag.sample { background: var(--sample-bg); color: var(--sample); }

/* Messages */
.notice { border: 1px solid var(--line); border-left-width: 4px; border-radius: 10px; padding: 12px 14px; margin: 0 0 16px;
          background: var(--panel); }
.notice p:last-child { margin-bottom: 0; }
.notice.warn { background: var(--warn-bg); border-color: var(--warn-line); border-left-color: #d9a400; }
.notice.error { background: var(--bad-bg); border-color: var(--bad-line); border-left-color: var(--bad); }
.notice.done { background: var(--good-bg); border-color: var(--good-line); border-left-color: var(--good); }
.notice.sample { background: var(--sample-bg); border-color: var(--sample-line); border-left-color: var(--sample); }

/* The alert banner (from Openventory): what needs attention, at the top of the dashboard */
.alert {
  display: flex; align-items: flex-start; gap: 8px 12px; padding: 13px 16px; border-radius: 12px; margin: 0 0 12px;
  border: 1px solid var(--line); background: var(--panel); flex-wrap: wrap;
}
.alert-icon {
  flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; font-weight: 800;
  color: #fff; background: var(--accent);
}
.alert-body { flex: 1 1 14rem; min-width: 0; }
.alert-body strong { display: block; }
.alert-body p { margin: 2px 0 0; color: var(--muted); font-size: 14px; }
.alert-action { align-self: center; font-weight: 700; white-space: nowrap; }
.alert.warn { background: var(--warn-bg); border-color: var(--warn-line); }
.alert.warn .alert-icon { background: #d9a400; color: #17191d; }
.alert.bad { background: var(--bad-bg); border-color: var(--bad-line); }
.alert.bad .alert-icon { background: var(--danger-button); }
.alert.info { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 30%, transparent); }

/* Buttons: at least 44px tall, for fingers */
.button, button {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 10px 16px;
  border-radius: 9px; border: 1px solid var(--primary); background: var(--primary); color: var(--primary-text);
  font: inherit; font-weight: 700; text-decoration: none; cursor: pointer;
}
.button:hover, button:hover { background: var(--primary-hover); border-color: var(--primary-hover);
                              color: var(--primary-text); text-decoration: none; }
.button.quiet, button.quiet { background: var(--panel); color: var(--text); border-color: var(--line-strong); }
.button.quiet:hover, button.quiet:hover { background: var(--panel-2); color: var(--text); }
.button.danger, button.danger { background: var(--danger-button); border-color: var(--danger-button); color: #fff; }
.button.danger:hover, button.danger:hover { filter: brightness(1.08); color: #fff; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.confirm { margin: 12px 0 0; color: var(--text); }          /* also inside the dark sidebar */
.actions form { margin: 0; }

/* Forms */
form.stack { display: flex; flex-direction: column; gap: 15px; }
label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 700; }
label .muted, label .small { font-weight: 400; }
label.check { flex-direction: row; align-items: center; gap: 10px; font-weight: 400; font-size: 15px; min-height: 44px; }
label.box { display: inline-flex; min-height: 44px; min-width: 44px; align-items: center; justify-content: center; }
input[type="text"], input[type="email"], input[type="password"], input[type="date"], input[type="search"],
input[type="tel"], select, textarea {
  font: inherit; font-weight: 400; width: 100%; max-width: 32rem; min-height: 44px; padding: 10px 12px;
  border: 1px solid var(--input-line); border-radius: 9px; background: var(--panel); color: var(--text);
}
input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; accent-color: var(--accent); flex: none; }
fieldset { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin: 0; min-width: 0; }
fieldset[disabled] { opacity: .45; }
legend { font-weight: 700; font-size: 13px; padding: 0 6px; }
.filters { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin: 0 0 18px; }
.filters label { flex-direction: row; align-items: center; gap: 8px; }
.filters select, .filters input[type="date"], .filters input[type="search"] { width: auto; }
/* Filters inside a report (owner, 2026-10-06): category, brand, a search box, toggles */
.filters select { max-width: 18rem; }
.filters label.search input { min-width: min(14rem, 100%); }
.filters label.toggle { font-weight: 400; font-size: 14px; min-height: 44px; }
.filters.loading { cursor: progress; }
/* A filter that takes several values (owner, 2026-10-09): a list of tick boxes opened from the filter bar */
.multi-choice { position: relative; }
.multi-choice > summary {
  display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; cursor: pointer; list-style: none;
  border: 1px solid var(--input-line); border-radius: 10px; background: var(--panel); font-size: 14px;
}
.multi-choice > summary::-webkit-details-marker { display: none; }
.multi-choice > summary::after { content: "▾"; font-size: 11px; color: var(--muted); }
.multi-label { font-weight: 700; }
.multi-value { max-width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.multi-panel {
  position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; min-width: 300px; max-width: min(420px, calc(100vw - 32px));
  max-height: min(60vh, 460px); overflow: auto; padding: 6px; border: 1px solid var(--line-strong); border-radius: 12px;
  background: var(--panel); box-shadow: var(--shadow-big); display: grid; gap: 2px;
}
.multi-panel .check { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 8px; border-radius: 8px;
                      font-size: 14px; font-weight: 600; }
.multi-panel .check:hover { background: var(--accent-soft); }
.multi-panel .button { margin-top: 6px; }
/* Type to find in a filter list (owner, 2026-10-12; app/static/typeselect.js): a box in front of the list, its choices
   narrowing as one types; the list itself stays in the page (it is what the form sends), out of sight */
.type-select { position: relative; display: inline-flex; flex-direction: column; min-width: 11rem; max-width: 100%; }
.type-select-native { position: absolute !important; left: 0; top: 0; width: 1px !important; min-width: 0 !important; height: 1px !important;
                      margin: 0; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
                      opacity: 0; pointer-events: none; }  /* at its box's left edge: never past the page's side */
input.type-select-box { width: 100%; max-width: 18rem; padding-right: 28px; text-overflow: ellipsis;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
                    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 15px) 50%, calc(100% - 10px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
.type-select-list { position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; min-width: 100%; width: max-content;
  max-width: min(28rem, calc(100vw - 32px)); max-height: min(50vh, 20rem); overflow: auto; margin: 0; padding: 4px;
  list-style: none; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--panel);
  box-shadow: var(--shadow-big); font-size: 14px; font-weight: 400; text-transform: none; letter-spacing: 0; }
.type-select-list[hidden] { display: none; }
.type-select-list li { display: flex; align-items: center; min-height: 40px; padding: 6px 10px; border-radius: 8px;
                       cursor: pointer; color: var(--text); overflow-wrap: anywhere; }
.type-select-list li.active, .type-select-list li:hover { background: var(--accent-soft); }
.type-select-list li[aria-selected="true"] { font-weight: 700; }
.type-select-list li.none { color: var(--muted); cursor: default; background: none; }
.col-menu .type-select { display: flex; }
.col-menu input.type-select-box { max-width: none; }
.col-menu .type-select-list { position: static; width: auto; max-width: none; margin-top: 4px; box-shadow: none; }
.store-picker .type-select { flex: 1; min-width: 0; }
.store-picker input.type-select-box { max-width: none; font-weight: 700; }
input.tick-find { width: 100%; max-width: none; margin: 0 0 6px; }
.tick-find-none { margin: 4px 8px; color: var(--muted); font-size: 14px; }
/* a phone zooms the page into a box whose text is smaller than 16px: these boxes are typed into on phones */
@media (pointer: coarse) { input.type-select-box, input.tick-find { font-size: 16px; } }
.filter-note { margin: 0 0 12px; font-size: 14px; color: var(--muted); }
.filter-note a { font-weight: 700; }
tr.picked td { background: var(--accent-soft); }

/* The password eye: shows or hides what was typed (the script turns it on) */
.password-field { position: relative; display: block; width: 100%; max-width: 32rem; }
.password-field input { padding-right: 56px; max-width: none; }
.password-eye {
  position: absolute; top: 50%; right: 4px; transform: translateY(-50%); min-height: 38px; min-width: 44px; padding: 0 8px;
  border: 0; border-radius: 7px; background: transparent; color: var(--muted);
}
.password-eye:hover { background: var(--accent-soft); color: var(--accent); }
.password-eye svg { width: 22px; height: 22px; }
.password-eye .eye-closed { display: none; }
.password-eye[aria-pressed="true"] .eye-open { display: none; }
.password-eye[aria-pressed="true"] .eye-closed { display: inline; }

/* Tables scroll sideways inside their box on a phone, never the whole page. A long table also scrolls down inside its
   box, so its heading row stays at the top while scrolling (owner, 2026-10-09: "the column heading row stays fixed at
   the top while scrolling"), and a totals row stays at the bottom. */
.table-wrap { overflow: auto; max-height: 78vh; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: 10px; }
.table-wrap thead th { position: sticky; top: 0; z-index: 2; box-shadow: inset 0 -1px 0 var(--line); }
.table-wrap tr.total td { position: sticky; bottom: 0; z-index: 1; box-shadow: inset 0 2px 0 var(--line-strong); }
.card .table-wrap { margin: 0 -1px; }
/* A table whose first column stays in view while the figures scroll sideways (the main page's table by store, owner
   2026-10-12: "Pin the Store column so it stays put while the figures swipe sideways") */
.table-wrap table.pin-first th:first-child, .table-wrap table.pin-first td:first-child {
  position: sticky; left: 0; z-index: 1; background: var(--panel); box-shadow: inset -1px 0 0 var(--line); }
.table-wrap table.pin-first thead th:first-child { z-index: 3; background: var(--th);
  box-shadow: inset -1px 0 0 var(--line), inset 0 -1px 0 var(--line); }
.table-wrap table.pin-first tr.total td:first-child { z-index: 2; background: var(--panel-2);
  box-shadow: inset -1px 0 0 var(--line), inset 0 2px 0 var(--line-strong); }
.table-wrap table.pin-first td.num { white-space: nowrap; }
/* on a wide screen its headings wrap, so the figures set the width and all 13 columns fit (1920 px); narrower screens
   scroll sideways anyway, so the headings stay on one line there */
@media (min-width: 1500px) { .table-wrap table.pin-first thead th { white-space: normal; min-width: 72px; } }
table { border-collapse: collapse; width: 100%; font-size: .93rem; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
tbody tr:last-child td { border-bottom: 0; }
th { background: var(--th); font-size: 12px; font-weight: 700; color: var(--muted); white-space: nowrap; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
tbody tr:hover td { background: color-mix(in srgb, var(--accent-soft) 45%, transparent); }
table.places td, table.places th { padding: 2px 12px; vertical-align: middle; }
table.audit details summary { cursor: pointer; color: var(--muted); }
tr.total td { font-weight: 700; border-top: 2px solid var(--line-strong); background: var(--panel-2); }
td.check { font-size: .85rem; min-width: 18rem; }      /* the day's check reads as two lines, not six */
.ok { color: var(--good); }
.attention { color: var(--bad); font-weight: 700; }
.gain { color: var(--good); font-weight: 700; }

/* Facts (label: value) */
dl.facts { display: grid; grid-template-columns: 1fr; gap: 2px 16px; margin: 0; }
dl.facts dt { color: var(--muted); font-size: .85rem; margin-top: 8px; }
dl.facts dd { margin: 0; }

/* ---------- The dashboard ---------- */
.hero {
  display: flex; align-items: center; justify-content: space-between; gap: 22px; padding: 24px; margin: 0 0 18px;
  border: 1px solid var(--hero-line); border-radius: 18px;
  background: radial-gradient(circle at 92% 12%, var(--hero-glow), transparent 33%),
              linear-gradient(135deg, var(--hero-from) 0%, var(--hero-to) 100%);
  flex-wrap: wrap;
}
.hero h1 { margin: 8px 0 8px; max-width: 780px; }
.hero .lede { margin: 0; }
.hero-badge {
  min-width: 150px; padding: 16px 18px; border: 1px solid var(--hero-line); border-radius: 16px; text-align: center;
  background: color-mix(in srgb, var(--panel) 82%, transparent); box-shadow: 0 12px 30px rgba(25, 34, 48, .06);
}
.hero-badge span, .hero-badge small { display: block; }
.hero-badge span { font-size: 32px; font-weight: 800; letter-spacing: -.03em; }
.hero-badge small { margin-top: 4px; color: var(--muted); }

/* Big number tiles (from Openventory) */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin: 0 0 26px; }
.tile {
  position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 6px; min-height: 140px;
  padding: 18px 20px 16px 22px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  container-type: inline-size;
}
.tile::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 5px; background: var(--tile, var(--accent)); }
/* each big number's color: its metric's (one color per metric, at the end of this file) */
/* "All stores": today's big numbers three to a row on a laptop (six, or five, then fit two rows), all in one row on
   a wide screen; phones keep two to a row (below) */
@media (min-width: 560px) and (max-width: 1499px) { .tiles.today-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.as-of { margin: -14px 0 22px; }
.tile-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.tile-label { color: var(--muted); font-size: 13px; font-weight: 700; }
.tile-icon {
  flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-weight: 800;
  background: color-mix(in srgb, var(--tile, var(--accent)) 14%, transparent); color: var(--tile, var(--accent));
}
.tile-value {
  font-size: 2rem; font-size: clamp(1.3rem, 15cqi, 2.5rem); font-weight: 800; letter-spacing: -.035em; line-height: 1.1;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.tile-value.quiet { font-size: 1.15rem; letter-spacing: 0; font-weight: 700; color: var(--muted); }
.tile-sub { margin-top: auto; color: var(--muted); font-size: 12.5px; display: flex; align-items: center; gap: 8px;
            flex-wrap: wrap; }

.section-title { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; margin: 6px 0 14px;
                 flex-wrap: wrap; }
.section-title h2 { margin: 6px 0 0; }

/* Cards with status tags (the first app's app cards) */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; margin: 0 0 26px;
             padding: 0; list-style: none; }
.app-card {
  min-height: 190px; display: flex; flex-direction: column; justify-content: space-between; gap: 10px; padding: 20px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); color: var(--text);
  text-decoration: none; transition: .18s ease;
}
.app-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--line-strong);
                  text-decoration: none; }
.app-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.app-icon {
  width: 44px; height: 44px; flex: none; border-radius: 10px; background: var(--accent-soft); color: var(--accent);
  display: grid; place-items: center; font-weight: 800; font-size: 14px;
}
.app-card h3 { margin: 4px 0 4px; }
.app-card p { color: var(--muted); line-height: 1.5; font-size: 14px; margin: 0; }
.app-card-foot { border-top: 1px solid var(--line); padding-top: 12px; display: flex; justify-content: space-between;
                 font-size: 13px; gap: 8px; }
.app-card-foot span { color: var(--muted); }

.row-list { display: grid; }
.row-item { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 0;
            border-top: 1px solid var(--line); flex-wrap: wrap; }
.row-item:first-child { border-top: 0; }
.row-item strong, .row-item span.sub { display: block; }
.row-item span.sub { color: var(--muted); font-size: 12px; margin-top: 3px; }
.row-tags { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.columns { display: grid; grid-template-columns: 1fr; gap: 16px; }

/* Report figures: small stat cards (the first app's stats). Each card is at least as wide as its own figure, so a big
   total (a whole year's, every store's) never spills out of it (owner, 2026-10-13), and never wider than the page; the
   cards of a row share its space. The label and the notes under a figure wrap inside the card instead of widening it. */
.figures { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 18px; }
.figure { flex: 1 1 10rem; min-width: fit-content; max-width: 100%; box-sizing: border-box;
          background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.figure .label { color: var(--muted); font-size: 13px; }
.figure .label, .figure > .small { contain: inline-size; }
.figure .value { font-size: 1.45rem; font-weight: 800; letter-spacing: -.02em; margin-top: 4px;
                 font-variant-numeric: tabular-nums; white-space: nowrap; }

.tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 14px; }
.tabs a { padding: 7px 13px; border-radius: 999px; text-decoration: none; border: 1px solid var(--line-strong);
          background: var(--panel); color: var(--text); font-weight: 700; font-size: 13px; }
.tabs a[aria-current="page"] { background: var(--primary); border-color: var(--primary); color: var(--primary-text); }

/* ---------- Administration: employees and locations (the first app's admin pages: the directory, each person's
   access edited in place, the add form beside it) ---------- */
.admin-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; margin: 0 0 16px; }
.admin-split > .card { margin: 0; }
.add-jump { align-self: center; }
.emp-card { border-top: 1px solid var(--line); padding: 16px 0; }
.directory .tabs + .emp-card { border-top: 0; padding-top: 6px; }
.emp-card:last-child { padding-bottom: 0; }
.emp-card.inactive .emp-who { opacity: .7; }
.emp-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px 14px; flex-wrap: wrap; }
.emp-who { display: flex; gap: 12px; align-items: center; min-width: 0; flex: 1 1 15rem; }
.emp-name { min-width: 0; }
.emp-name a { color: var(--text); text-decoration: none; }
.emp-name a:hover { text-decoration: underline; }
.emp-name strong, .emp-name .sub { display: block; }
.emp-name .sub { color: var(--muted); font-size: 12.5px; margin-top: 2px; overflow-wrap: anywhere; }
.emp-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 2px 14px; margin: 10px 0 0;
             font-size: 13.5px; }
.emp-facts dt { color: var(--muted); }
.emp-facts dd { margin: 0; overflow-wrap: anywhere; }
.emp-card .small.attention { margin: 8px 0 0; }
.emp-edit { margin: 8px 0 0; }
.emp-edit summary { cursor: pointer; font-weight: 800; color: var(--accent); font-size: 14px; padding: 8px 0; }
.access-form { margin-top: 6px; padding: 12px; border-radius: 12px; background: var(--panel-2); border: 1px solid var(--line); }
.access-form fieldset { padding: 10px; }
.access-form fieldset.perm { padding: 0; }
.access-form table.places td, .access-form table.places th { padding: 2px 8px; }
.emp-more { margin: 4px 0 0; font-size: 13px; }
.emp-more a { color: var(--muted); font-weight: 700; }
.emp-more a:hover { color: var(--text); }
fieldset.perms { display: flex; flex-direction: column; }
fieldset.perm { border: 0; padding: 0; margin: 0; }
fieldset.perms > p { margin: 4px 0 0; }
/* "Included with Admin" / "Not available to Counter" beside a box of the access forms (owner, 2026-10-15) */
.perm-note { display: inline-block; margin-left: 4px; font-size: 12px; font-weight: 700; color: var(--muted); }
.perm-note[data-kind="included"] { color: var(--good); }
.perm-note:empty { display: none; }
/* the Authenticator code typed in the form itself to confirm a sensitive change */
.code-confirm { padding: 10px 12px; border-radius: 10px; background: var(--warn-bg); border: 1px solid var(--warn-line); }
.code-confirm input { max-width: 10em; font-size: 16px; letter-spacing: .1em; }
.code-confirm p { margin: 4px 0 0; }
.guide summary { cursor: pointer; font-weight: 800; font-size: 1.1rem; }
.guide[open] summary { margin-bottom: 12px; }
.guide-table tbody th { background: none; color: var(--text); font-size: .93rem; font-weight: 700; white-space: normal; }
.loc-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin: 0 0 18px; }
.loc-grid .card { margin: 0; }
.loc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; flex-wrap: wrap;
            margin: 0 0 6px; }
.loc-head h2 { margin: 0; }
.loc-head .sub { display: block; color: var(--muted); font-size: 13px; margin-top: 3px; }
.loc-card.inactive { opacity: .75; }

/* ---------- Sign-in, code and set-up pages (the first app's login card) ---------- */
.login-page { min-height: calc(100vh - 40px); display: grid; place-items: center; padding: 28px 16px; }
.login-card {
  width: min(100%, 540px); background: var(--panel); border: 1px solid var(--line); border-radius: 18px;
  padding: 28px 22px; box-shadow: var(--shadow-big);
}
.login-brand { margin-bottom: 14px; }
.login-logo { display: block; width: min(100%, 300px); height: auto; margin: 4px 0 20px; }
.login-brand h1 { font-size: 1.75rem; margin: 2px 0 0; }
.login-card h2 { font-size: 1.05rem; margin: 22px 0 10px; }
.login-card form.stack { margin-top: 6px; }
.login-help { color: var(--muted); font-size: 12.5px; margin: 14px 0 0; }
.or-line { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 12px; font-weight: 800;
           letter-spacing: .12em; text-transform: uppercase; margin: 22px 0 6px; }
.or-line::before, .or-line::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.choices-list { display: flex; flex-direction: column; gap: 2px; }
.stack-indent { margin-left: 30px; }
svg.qr { display: block; max-width: 100%; height: auto; border-radius: 8px; margin: 4px 0; background: #fff; }
code.secret { word-break: break-all; font-size: .95rem; }
.link-box { border-color: var(--good-line); background: var(--good-bg); }
.link-box input { font-family: ui-monospace, Menlo, Consolas, monospace; max-width: 100%; }
.choices { display: flex; flex-direction: column; gap: 10px; margin: 0 0 16px; }
.button.choice { flex-direction: column; align-items: flex-start; padding: 12px 16px; text-align: left; }
.button.choice span { font-weight: 400; font-size: .85rem; opacity: .9; }
.trust-box { border: 1px solid var(--line); border-radius: 12px; padding: 4px 12px; background: var(--panel-2); }
.trust-box .small { margin: 0 0 8px 30px; }
.login-page .notice { margin-top: 4px; }

/* The set-up page's password rules and live check (app/static/setup.js; owner, 2026-10-15). Without the script the
   rules are a plain list; with it each rule is marked met (a green tick) or not yet (an amber mark) as the person types */
.pw-help { font-size: .9rem; margin: -2px 0 2px; }
.pw-help p { margin: 0 0 8px; }
.pw-allowed { background: var(--good-bg); border: 1px solid var(--good-line); border-radius: 10px; padding: 10px 12px; }
.pw-needs { font-weight: 700; margin-top: 12px !important; }
.pw-checks { margin: 0 0 8px; padding-left: 1.3em; }
.pw-checks li { margin: 6px 0; line-height: 1.4; }
.pw-count { color: var(--muted); white-space: nowrap; }
.pw-state, .pw-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pw-help.is-live .pw-checks { list-style: none; padding-left: 0; }
.pw-help.is-live .pw-checks li { position: relative; padding-left: 28px; }
.pw-help.is-live .pw-checks li::before {
  content: ""; position: absolute; left: 0; top: .05em; width: 19px; height: 19px; box-sizing: border-box;
  border-radius: 50%; border: 2px solid var(--line-strong); font-size: 12px; font-weight: 800; line-height: 15px;
  text-align: center; color: var(--panel);
}
.pw-help.is-live .pw-checks li[data-state="met"]::before { content: "\2713"; background: var(--good); border-color: var(--good); }
.pw-help.is-live .pw-checks li[data-state="unmet"]::before { content: "!"; background: #d9a400; border-color: #d9a400; }
.pw-meter { margin: 0 0 12px; }
.pw-bar { height: 8px; border-radius: 999px; background: var(--line); overflow: hidden; }
.pw-bar span { display: block; height: 100%; width: 0; background: var(--muted); transition: width .15s, background-color .15s; }
.pw-meter[data-state="good"] .pw-bar span { background: var(--good); }
.pw-meter[data-state="warn"] .pw-bar span { background: #d9a400; }
.pw-verdict { margin: 7px 0 0 !important; font-weight: 700; color: var(--muted); }
.pw-meter[data-state="good"] .pw-verdict { color: var(--good); }
.pw-meter[data-state="warn"] .pw-verdict { color: var(--warn); }
.pw-match { margin: -2px 0 0; font-size: .9rem; font-weight: 700; color: var(--muted); }
.pw-match[data-state="good"] { color: var(--good); }
.pw-match[data-state="warn"] { color: var(--warn); }
@media (prefers-reduced-motion: reduce) { .pw-bar span { transition: none; } }

@media (min-width: 560px) {
  .topbar-title { display: block; }
  .topbar-tools { margin-left: 0; }
  .user-text { display: block; }
  /* the details line up under the name, beside the round badge */
  .emp-facts, .emp-edit, .emp-more, .emp-card .small.attention, .emp-card > .notice { margin-left: 50px; }
  .emp-edit.flush { margin-left: 0; }          /* forms on cards without a badge (mailing address, API keys) */
  .access-form { padding: 16px; }
  .access-form fieldset { padding: 12px 14px; }
}
/* Wider screens: the sidebar stays open beside the page */
@media (min-width: 720px) {
  .page { padding: 28px 28px 56px; }
  .hero { padding: 30px; flex-wrap: nowrap; }
  dl.facts { grid-template-columns: 12rem 1fr; }
  dl.facts dt { margin-top: 0; padding: 6px 0; }
  dl.facts dd { padding: 6px 0; }
  .login-card { padding: 32px; }
  .columns { grid-template-columns: 1fr 1fr; }
  .store-picker { order: 0; flex: 0 1 auto; }
  .store-picker label { width: auto; }
  .store-picker select { min-width: 220px; }
  .user-text .who-name { max-width: 220px; }
  .user-text .who-where { display: block; }
}
@media (min-width: 900px) {
  .shell { display: grid; grid-template-columns: 246px minmax(0, 1fr); }
  .sidebar { position: sticky; top: 0; height: 100vh; width: auto; transform: none; transition: none; padding: 24px 18px;
             visibility: visible; }
  .env-banner ~ .shell .sidebar { top: 0; }
  .nav-state:checked ~ .shell .sidebar { box-shadow: none; }
  .nav-state:checked ~ .shell .nav-backdrop, .menu-button, .nav-state { display: none; }
  .topbar { padding: 0 32px; min-height: 72px; flex-wrap: nowrap; }
  .page { padding: 34px 36px 60px; }
  .topbar .topbar-title img.topbar-logo, .topbar .topbar-title .topbar-home { display: none !important; }   /* the sidebar shows the logo here */
}
@media (min-width: 1100px) {
  /* the first app's split: the add form on the left, the directory beside it */
  .admin-split { grid-template-columns: minmax(320px, .8fr) minmax(0, 1.55fr); }
  .admin-split > .add-panel { order: -1; }
  .add-jump { display: none; }
  .loc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1240px) {
  .topbar-title .topbar-sub { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  .sidebar, .app-card { transition: none; }
  .app-card:hover { transform: none; }
}
@media print {
  .sidebar, .topbar, .env-banner, .nav-backdrop { display: none !important; }
  .shell { display: block; }
  body { background: #fff; }
}

/* The owner's gap-list picks (2026-10-07): addresses, notes, the tucked-away company details, the API keys page */
.addr-row { display: flex; gap: 10px; flex-wrap: wrap; }
.addr-row label { flex: 1 1 8rem; }
.addr-row label:first-child { flex: 2 1 12rem; }
fieldset.address { display: flex; flex-direction: column; gap: 12px; }
fieldset.address .notice { margin: 0; }
.notes { white-space: pre-line; }
details.tucked { border: 1px dashed var(--line); border-radius: 10px; padding: 6px 12px; }
details.tucked summary { cursor: pointer; color: var(--muted); font-weight: 700; font-size: 13px; min-height: 44px;
                         display: flex; align-items: center; }
details.tucked[open] { display: flex; flex-direction: column; gap: 12px; padding-bottom: 12px; }
.key-history { margin: 4px 0 0; padding-left: 18px; }
.key-history li { margin: 2px 0; }

/* The owner's batch of 2026-10-07: sortable headings, numbers that lead to their records, product pages, the home
   page arranged by each person */
/* (since 2026-10-08 a sortable heading opens its column's menu: the "Sorting from the column headings" block above) */
a.drill { color: inherit; text-decoration: underline dotted; text-decoration-color: var(--line-strong);
          text-underline-offset: 3px; }
a.drill:hover { color: var(--accent); text-decoration-color: currentColor; }
.tile-value a.drill { text-decoration-thickness: 2px; }
tr.zero td { color: var(--muted); }
dl.facts { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; }
dl.facts dt { color: var(--muted); font-weight: 700; font-size: 13px; }
dl.facts dd { margin: 0; }
@media (max-width: 560px) { dl.facts { grid-template-columns: 1fr; } dl.facts dd { margin-bottom: 6px; } }
form.inline { display: inline; margin: 0; }
.button.small, button.small { padding: 6px 12px; font-size: 13px; }
.arrange-link { display: flex; justify-content: flex-end; margin: 0 0 8px; font-size: 13px; font-weight: 700; }
.arrange-link a { display: inline-flex; align-items: center; min-height: 44px; }
ol.arrange, ul.arrange { list-style: none; margin: 0; padding: 0; }
ol.arrange li, ul.arrange li { display: flex; align-items: center; justify-content: space-between; gap: 10px;
                               flex-wrap: wrap; padding: 8px 0; border-bottom: 1px solid var(--line); }
ol.arrange { counter-reset: tile; }
ol.arrange li .arrange-name::before { counter-increment: tile; content: counter(tile) ". "; color: var(--muted); }
.arrange-actions { display: flex; gap: 6px; flex-wrap: wrap; }

/* Phones (owner, 2026-10-07: "make the tiles smaller and more compact so more fit on the screen, like two per row"):
   the home page's big numbers and report cards two to a row. The colour stripe marks each number, so its icon goes;
   a report card keeps its name, its status tag and where it leads, and its description waits for a wider screen. */
@media (max-width: 559px) {
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0 0 18px; }
  .tile { min-height: 0; gap: 4px; padding: 11px 10px 10px 14px; border-radius: 12px; }
  .tile::before { width: 4px; }
  .tile-icon { display: none; }
  .tile-label { font-size: 12px; line-height: 1.3; }
  .tile-value { font-size: clamp(.9rem, 12.5cqi, 1.6rem); }
  .tile-value.quiet { font-size: .9rem; white-space: normal; }
  .tile-sub { font-size: 11.5px; line-height: 1.3; gap: 2px 6px; }
  .home-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0 0 18px; }
  .home-cards .app-card { min-height: 0; gap: 8px; padding: 12px; border-radius: 12px; }
  .home-cards .app-card-head { flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 6px 8px; }
  .home-cards .app-icon { width: 30px; height: 30px; border-radius: 8px; font-size: 12px; }
  .home-cards .app-card h3 { margin: 0; font-size: 14px; line-height: 1.25; }
  .home-cards .app-card p, .home-cards .app-card-foot span { display: none; }
  .home-cards .app-card-foot { padding-top: 8px; font-size: 12.5px; }
  .home-cards .tag { font-size: 11px; white-space: normal; }
  /* the welcome banner (owner, 2026-10-07: "make the welcome banner smaller on phones"): one short greeting, the role
     line, and the count of facilities beside it */
  .hero { flex-wrap: nowrap; gap: 10px; padding: 12px 14px; margin: 0 0 14px; border-radius: 14px; }
  .hero h1 { font-size: 1.1rem; margin: 3px 0 4px; letter-spacing: -.02em; }
  .hero .lede { font-size: 12.5px; line-height: 1.4; }
  .hero .hero-more { display: none; }
  .hero-badge { min-width: 0; flex: none; padding: 8px 10px; border-radius: 12px; box-shadow: none; }
  .hero-badge span { font-size: 20px; }
  .hero-badge small { margin-top: 2px; font-size: 10.5px; max-width: 5.5rem; }
}

/* A receipt's page (the team's batch of 2026-10-09: a receipt number opens its receipt) */
table.list.compact { width: auto; min-width: min(100%, 420px); }
table.list.compact th[scope="row"] { text-align: left; font-weight: 600; background: none; color: var(--text);
  font-size: inherit; white-space: normal; }
table.list td.indent { padding-left: 28px; color: var(--muted); }
details.items-list summary { cursor: pointer; }
details.items-list ul { text-align: left; margin-top: 4px; }

/* Reorder details grouped (owner, 2026-10-25): Brand, Category, Product (its stores added up on its top line), then its
   stores; each product's block set apart, a warning's lines in red; the brand and category columns only indent */
table.list.rd-grouped tbody.rd-brand th { text-align: left; font-size: 1.05rem; font-weight: 700; background: var(--th);
  border-top: 3px solid var(--line-strong); white-space: normal; color: var(--text); }
table.list.rd-grouped tbody.rd-brand td { background: var(--th); border-top: 3px solid var(--line-strong); font-weight: 700; }
table.list.rd-grouped tbody.rd-cat th { text-align: left; font-weight: 650; background: var(--panel-2); white-space: normal;
  font-size: 14.5px; color: var(--text); }
table.list.rd-grouped tbody.rd-cat td { background: var(--panel-2); font-weight: 600; }
table.list.rd-grouped .rd-sub { display: block; font-size: 12.5px; font-weight: 400; color: var(--muted); }
table.list.rd-grouped tr.rd-prow > * { border-top: 2px solid var(--line-strong); }
table.list.rd-grouped tr.rd-prow th { text-align: left; font-weight: 600; white-space: normal; min-width: 11rem;
  background: var(--panel); color: var(--text); font-size: inherit; letter-spacing: normal; text-transform: none; }
table.list.rd-grouped tbody th { position: static; box-shadow: none; }
table.list.rd-grouped thead th { white-space: normal; vertical-align: bottom; }
table.list.rd-grouped td.rd-total strong { font-size: 1.08em; }
table.list.rd-grouped.rd-every tr.rd-store td { font-size: 14px; }
table.list.rd-grouped tr.rd-red > td:not([aria-hidden]), table.list.rd-grouped tr.rd-red > th { background: var(--bad-bg); }
table.list.rd-grouped td[aria-hidden] { width: 12px; padding-left: 4px; padding-right: 4px; }
table.list.rd-grouped td.rd-total { min-width: 6.5rem; }
/* on a phone the brand and category columns (they only indent) fold away: the sort chips above the table still sort by
   them, and their headers still say each brand and category */
@media (max-width: 700px) {
  table.list.rd-grouped td[aria-hidden] { width: 0; padding: 0; }
  table.list.rd-grouped thead th:nth-child(1), table.list.rd-grouped thead th:nth-child(2) { padding: 0; }
  table.list.rd-grouped thead th:nth-child(1) > *, table.list.rd-grouped thead th:nth-child(2) > * { display: none; }
  table.list.rd-grouped tr.rd-prow th { min-width: 9rem; }
}

/* Receives grouped by delivery (the team's batch of 2026-10-09, item 12): the delivery on top, its items underneath, at
   full size; an item table's own heading row does not stick (only the deliveries' heading does) */
table.list.deliveries tbody.delivery tr.delivery-head td { background: var(--th); border-top: 2px solid var(--line-strong); }
table.list.deliveries tr.delivery-items > td { padding: 0 0 14px 28px; border-bottom: 0; }
table.list.deliveries table.items { width: 100%; margin: 0; }
table.list.deliveries table.items thead th { position: static; background: none; box-shadow: none; padding-top: 8px; }
table.list.deliveries table.items td { font-size: 14px; }

/* Daily sales: the period's tabs and arrows, the tax breakdown inside its figure, the in store vs online groups (the team's
   batch of 2026-10-09, item 1) */
.period-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 16px; }
.period-nav .period-label { font-size: 1.05rem; }
.period-nav form.filters.inline { margin: 0 0 0 auto; padding: 0; border: 0; background: none; }
.button.disabled { opacity: .45; pointer-events: none; }
details.figure > summary { list-style: none; cursor: pointer; display: block; }
details.figure > summary::-webkit-details-marker { display: none; }
details.figure > summary .label, details.figure > summary .value { display: block; }
details.figure > summary .value { text-decoration: underline dotted; text-underline-offset: 4px; }
details.figure[open] { flex-basis: calc(20rem + 12px); }
details.figure .tax-lines { margin-top: 8px; width: 100%; }
.check-line { margin: 0 0 18px; }
.check-line.ok { color: var(--good); }
.check-line.attention { color: var(--warn); }
table.list tr.group-head th { text-align: left; background: var(--th); color: var(--text); font-size: 13px; }
table.list tr.brand-head th { font-size: 14px; border-top: 2px solid var(--line); }
table.list tr.subtotal td { font-weight: 600; border-top: 1px solid var(--line-strong); }
@media (max-width: 560px) { details.figure[open] { flex-basis: 100%; } .period-nav form.filters.inline { margin-left: 0; } }

/* A report's download links (the team's batch of 2026-10-09, item 2) */
.downloads { float: right; display: flex; gap: 6px; align-items: center; margin: 0 0 8px 12px; font-size: 13px; }
.downloads .downloads-label { color: var(--muted); }
.downloads a { padding: 5px 10px; border: 1px solid var(--line-strong); border-radius: 999px; text-decoration: none; }
.downloads a:hover { background: var(--th); }
@media (max-width: 560px) { .downloads { float: none; margin: 0 0 10px; } }

/* The home page arranged in place, like a phone's home screen (the team's batch of 2026-10-09, item 13; ui.js 8) */
.tiles > .tile-slot { display: flex; min-width: 0; }
.tiles > .tile-slot > .tile { flex: 1; min-width: 0; }
.tile-slot { position: relative; }
[data-home-tiles] [data-tile] { -webkit-touch-callout: none; }
.arrange-link { gap: 12px; align-items: center; flex-wrap: wrap; }
/* the edit bar floats at the bottom of the screen, so "Done" is always in reach (the top bar is sticky on phones) */
.home-editing main { padding-bottom: 120px; }
.home-editbar {
  position: fixed; bottom: 14px; left: 50%; transform: translateX(-50%); width: min(760px, calc(100% - 28px));
  z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  flex-wrap: wrap; margin: 0 0 14px; padding: 10px 14px; background: var(--accent-soft); color: var(--text);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); border-radius: 12px; box-shadow: var(--shadow);
  font-size: 13.5px;
}
.home-editbar-buttons { display: flex; gap: 8px; }
.home-editbar-short { display: none; }
@media (max-width: 559px) {
  .home-editbar { padding: 8px 10px; flex-wrap: nowrap; font-size: 12.5px; bottom: 10px; }
  .home-editbar-long { display: none; }
  .home-editbar-short { display: inline; }
}
.home-tray { margin: 0 0 18px; padding: 12px 14px; background: var(--panel); border: 1px dashed var(--line-strong);
             border-radius: 12px; }
.home-tray p { margin: 0 0 8px; }
.home-tray-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.tray-item { display: inline-flex; align-items: center; gap: 8px; padding: 4px 4px 4px 12px; border: 1px solid var(--line);
             border-radius: 999px; background: var(--panel-2); font-size: 13px; font-weight: 700; }
button.tray-add, button.tile-remove, button.tile-move {
  min-height: 0; padding: 0; border-radius: 999px; font-weight: 800; line-height: 1; display: inline-grid;
  place-items: center;
}
button.tray-add { width: 34px; height: 34px; font-size: 20px; background: var(--good); border-color: var(--good);
                  color: var(--panel); }
.tile-controls { display: none; }
.home-editing .tile-controls { display: block; }
button.tile-remove {
  position: absolute; top: -9px; left: -9px; z-index: 3; width: 30px; height: 30px; font-size: 20px;
  background: var(--neutral); border-color: var(--panel); border-width: 2px; color: var(--panel);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
}
button.tile-remove:hover { background: var(--bad); border-color: var(--panel); color: #fff; }
/* room below each tile's own words for its arrows while editing (they never cover a figure) */
.home-editing [data-home-tiles] .tiles > .tile-slot > .tile,
.home-editing [data-home-tiles] .home-cards > .tile-slot > .app-card { padding-bottom: 46px; }
.home-editing [data-home-tiles] .tile-slot.wide > .card { padding-top: 50px; }
.tile-slot.wide button.tile-move { top: 8px; bottom: auto; }
button.tile-move {
  position: absolute; bottom: 6px; z-index: 3; width: 32px; height: 32px; font-size: 18px;
  background: var(--panel); color: var(--text); border-color: var(--line-strong);
}
button.tile-move:hover { background: var(--panel-2); color: var(--text); }
button.tile-move[data-tile-move="-1"] { right: 44px; }
button.tile-move[data-tile-move="1"] { right: 6px; }
.home-editing [data-home-tiles] [data-tile] { touch-action: none; user-select: none; -webkit-user-select: none;
                                              cursor: grab; }
.home-editing [data-home-tiles] a { cursor: grab; }
.home-editing [data-home-tiles] .tiles > .tile-slot,
.home-editing [data-home-tiles] .home-cards > .tile-slot { animation: tile-wiggle .32s ease-in-out infinite alternate; }
.home-editing [data-home-tiles] .tile-slot:nth-child(2n) { animation-delay: -.16s; }
.home-editing [data-home-tiles] .tile-slot.wide { outline: 2px dashed var(--line-strong); outline-offset: 4px;
                                                  border-radius: var(--radius); }
.home-editing [data-home-tiles] .tile-slot.dragging { animation: none; z-index: 5; opacity: .85;
                                                      transform: scale(1.03); box-shadow: var(--shadow-big);
                                                      cursor: grabbing; }
.home-editing .app-card:hover { transform: none; }
@keyframes tile-wiggle { from { transform: rotate(-.6deg); } to { transform: rotate(.6deg); } }
@media (prefers-reduced-motion: reduce) {
  .home-editing [data-home-tiles] .tiles > .tile-slot,
  .home-editing [data-home-tiles] .home-cards > .tile-slot { animation: none; outline: 2px dashed var(--line-strong);
                                                             outline-offset: 3px; border-radius: var(--radius); }
}
/* "Add to home" under a report on the all-reports page */
.report-entry { display: flex; flex-direction: column; gap: 6px; }
.report-entry > .app-card { flex: 1; }
.report-entry .home-add, .report-entry .home-mark { margin: 0; display: flex; justify-content: flex-end; }

/* The vendor credit tool's deal form (the team's batch of 2026-10-09, item 15) */
.deal-form .card { margin: 0 0 16px; }
/* Saved deals (owner, 2026-10-15): a past deal picked at the top of a new deal fills the form; the copy's dates and
   Dutchie deal ID are highlighted to check */
.deal-saved { margin: 0 0 16px; padding: 14px 22px; }
.deal-saved h2 { margin: 0 0 8px; font-size: 17px; }
.deal-saved-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px; }
.deal-saved-form label { flex: 1 1 320px; font-size: 13px; font-weight: 700; }
.deal-saved-form select { display: block; width: 100%; margin-top: 4px; min-height: 38px; font-weight: 400; }
.deal-card input.deal-check { outline: 2px solid var(--warn); outline-offset: 1px; background: var(--warn-bg); }
.deal-same-dates { margin: 0 0 10px; }
.deal-form fieldset { margin: 0 0 12px; }
.deal-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px 16px; }
.pick-box { max-height: 260px; overflow: auto; border: 1px solid var(--line); border-radius: 10px; padding: 4px 10px;
            background: var(--panel-2); }
.pick-box label.check { min-height: 34px; font-size: 14px; }
.deal-form textarea { width: 100%; }

/* Compact, like Vendor Credit Manager v16.25 (owner, 2026-10-10: "Match its compact layout. Layout only."): the deal
   form in one card, three columns; a search-then-tick list for categories, brands and stores; yellow notes */
.deal-card { padding: 20px 22px; }
.deal-card h1 { margin: 0 0 4px; font-size: 26px; }
.deal-sub { margin: 0 0 14px; font-size: 13px; color: var(--accent); }
.deal-h { margin: 18px 0 8px; font-size: 17px; }
.deal-grid3, .deal-grid2 { display: grid; gap: 10px 14px; align-items: start; }
.deal-grid3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.deal-grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.deal-rows { margin-top: 10px; }
.deal-span2 { grid-column: span 2; }
.deal-span2 > fieldset { margin: 0; }
.deal-card label, .pick-label { font-size: 13px; font-weight: 700; }
.deal-card label > input, .deal-card label > select, .deal-card label > textarea { margin-top: 4px; font-weight: 400; }
.deal-card input, .deal-card select { min-height: 38px; }
.pick-hint { display: block; margin-top: 3px; font-size: 11.5px; font-weight: 400; color: var(--muted); }
.deal-note { margin: 10px 0; padding: 10px 14px; border-left: 4px solid var(--warn); border-radius: 6px;
             background: var(--warn-bg); font-size: 13px; }
.deal-notes { display: block; margin-top: 12px; }
.deal-suggest { margin: 4px 0 0; padding-left: 0; list-style: none; max-height: 140px; overflow: auto; }
.pick { position: relative; display: flex; flex-direction: column; }
.pick-search { margin-top: 4px; min-height: 38px; }
.pick-list { max-height: 220px; overflow: auto; margin-top: 4px; padding: 4px 8px; border: 1px solid var(--line);
             border-radius: 8px; background: var(--panel); }
.pick-list label.check { display: flex; align-items: center; gap: 8px; min-height: 32px; font-size: 13.5px;
                         font-weight: 400; }
.pick-list label[hidden] { display: none; }
/* with its script, the list opens under the search box while it is in use, over what follows */
.pick-live .pick-list { display: none; position: absolute; z-index: 30; left: 0; right: 0; top: 64px;
                        box-shadow: var(--shadow-big); }
.pick-live:focus-within .pick-list { display: block; }
.button.go { background: var(--good); border-color: var(--good); color: #fff; }
.button.go:hover { filter: brightness(1.08); color: #fff; }
@media (max-width: 900px) { .deal-grid3, .deal-grid2 { grid-template-columns: minmax(0, 1fr); }
                            .deal-span2 { grid-column: auto; } }

/* The deals page, like v16.25's: months and locations as chips, then the deals and the claims */
.vc-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.vc-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0; }
.vc-chip { display: inline-flex; flex-direction: column; justify-content: center; min-height: 44px; padding: 7px 14px;
           border-radius: 8px; border: 1px solid var(--line-strong); background: var(--panel); color: var(--text);
           text-decoration: none; font-weight: 700; font-size: 14px; }
.vc-chip small { font-weight: 400; font-size: 11px; color: var(--muted); }
.vc-chip:hover { border-color: var(--accent); }
.vc-chip.month[aria-current] { background: #17324d; border-color: #17324d; color: #fff; }
.vc-chip.place[aria-current] { background: var(--accent); border-color: var(--accent); color: #fff; }
.vc-chip[aria-current] small { color: rgba(255, 255, 255, .8); }
.vc-files a { margin-right: 8px; }

/* The inventory audit (CLAUDE.md §10 "Inventory audit tool"): the scanning page, made for a barcode scanner that types
   into the box and presses Enter; big enough to read at arm's length */
.scan-row { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: flex-end; margin-bottom: 12px; }
.scan-how { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; }
.scan-how legend { font-weight: 700; font-size: 13px; color: var(--muted); padding: 0; margin-bottom: 4px; }
.scan-box { display: block; font-weight: 700; }
.scan-box input, .scan-number input { display: block; width: 100%; max-width: 640px; font-size: 1.5rem; padding: 12px 14px;
  min-height: 56px; margin-top: 6px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.scan-number { display: block; font-weight: 700; margin-top: 12px; }
.scan-number[hidden] { display: none; }
.scan-feedback { min-height: 2.4em; margin: 14px 0 6px; padding: 10px 14px; border-radius: 10px; font-size: 1.15rem;
  font-weight: 700; background: var(--panel); border: 1px solid var(--line); }
.scan-feedback:empty { visibility: hidden; }
.scan-feedback.good { background: var(--good-bg); color: var(--good); border-color: transparent; }
.scan-feedback.bad { background: var(--bad-bg); color: var(--bad); border-color: transparent; }
.scan-sync { margin: 0 0 14px; padding: 8px 12px; border-radius: 10px; background: var(--accent-soft); color: var(--accent);
  font-weight: 700; }
.scan-sync.good { background: var(--good-bg); color: var(--good); }
.scan-sync.bad { background: var(--bad-bg); color: var(--bad); }
.scan-list { list-style: none; margin: 0; padding: 0; }
.scan-item { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 8px 0;
  border-bottom: 1px solid var(--line); }
.scan-item .scan-what { flex: 1 1 260px; min-width: 0; overflow-wrap: anywhere; }
.scan-item.removed .scan-what { text-decoration: line-through; color: var(--muted); }
.scan-item.refused { color: var(--bad); }
.scan-item .button { min-height: 44px; }
.chip { display: inline-flex; align-items: center; gap: 4px; margin: 2px 6px 2px 0; padding: 2px 4px 2px 10px;
  border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: 13px; font-weight: 700; }
.chip form.inline { display: inline; }
.chip .chip-x { border: 0; background: transparent; color: inherit; cursor: pointer; }
form.assign { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
form.assign select { flex: 1 1 160px; min-width: 0; max-width: 260px; min-height: 40px; }
form.assign .button { min-height: 40px; }
.scan-item.removing .scan-what { color: var(--muted); }
tr.neg td.num { color: var(--bad); }
td.id { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; overflow-wrap: anywhere; }

/* Each person's own label for their tiles (owner, 2026-10-12: "a per-user icon or letter label on each tile"). Their own
   colors are retired (owner, 2026-10-15: "One color per metric, everywhere"): the colors are below, fixed for all. */
button.tile-style {
  position: absolute; bottom: 6px; left: 6px; z-index: 3; width: 32px; height: 32px; min-height: 0; padding: 0;
  border-radius: 999px; font-size: 17px; line-height: 1; display: inline-grid; place-items: center;
  background: var(--panel); color: var(--text); border-color: var(--line-strong);
}
button.tile-style:hover { background: var(--panel-2); color: var(--text); }
.tile-style-panel {
  position: fixed; left: 50%; bottom: 86px; transform: translateX(-50%); width: min(440px, calc(100% - 28px));
  max-height: calc(100vh - 120px); overflow: auto; z-index: 40; padding: 14px 16px; background: var(--panel);
  border: 1px solid var(--line-strong); border-radius: 14px; box-shadow: var(--shadow-big);
}
.tile-style-panel p { margin: 0 0 10px; font-size: 13.5px; }
/* Each person's own colors for their tiles (owner, 2026-10-12; app/home_tiles.py TONES), shown in the Classic display
   only (owner, 2026-10-15: "In Classic, keep the per-person color picker from the old version"; the effects are at the
   end of this file). The same colors read on a light and a dark page. */
.tone-blue { --tone: #2f6fed; }
.tone-purple { --tone: #7c5cff; }
.tone-green { --tone: #16a34a; }
.tone-teal { --tone: #0ea5b7; }
.tone-amber { --tone: #f0a32f; }
.tone-orange { --tone: #ea6a1a; }
.tone-red { --tone: #e5484d; }
.tone-pink { --tone: #d6409f; }
.tone-brown { --tone: #a07553; }
.tone-gray { --tone: #7b8491; }
.tone-choices { display: none; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; padding: 0; border: 0; }
.tone-choices legend { margin: 0 0 6px; padding: 0; font-size: 12px; font-weight: 800; letter-spacing: .08em;
                       text-transform: uppercase; color: var(--muted); }
.tone-swatch { position: relative; display: inline-grid; place-items: center; cursor: pointer; }
.tone-swatch input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.tone-swatch .swatch { width: 30px; height: 30px; border-radius: 999px; background: var(--tone);
                       border: 2px solid var(--panel); box-shadow: 0 0 0 1px var(--line-strong); }
.tone-swatch input:checked + .swatch, .tone-swatch input:focus-visible + .swatch { box-shadow: 0 0 0 3px var(--text); }
.tone-swatch.std span { padding: 5px 10px; border: 1px solid var(--line-strong); border-radius: 999px; font-size: 13px;
                        font-weight: 700; }
.tone-swatch.std input:checked + span, .tone-swatch.std input:focus-visible + span { box-shadow: 0 0 0 2px var(--text); }
.style-label { flex-direction: row; align-items: center; gap: 8px; margin: 0 0 8px; font-weight: 700; }
.style-label input { width: 4.5em; text-align: center; font-weight: 800; }
.symbol-choices { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
button.symbol { width: 32px; height: 32px; min-height: 0; padding: 0; font-weight: 800; background: var(--panel-2);
                color: var(--text); border-color: var(--line); }
button.symbol.wide { width: auto; padding: 0 10px; font-size: 13px; font-weight: 700; }
.style-error { color: var(--bad); }
.style-actions { margin: 0; text-align: right; }
.style-form { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 0 0; }
.style-form label { flex-direction: row; align-items: center; gap: 6px; font-size: 13px; }
.style-form input[name=label] { width: 3.5em; text-align: center; }

/* an audit's rooms to count (2026-10-12): many rooms, a search box narrows the list */
.room-picker .room-list { display: flex; flex-direction: column; gap: 4px; max-height: 22rem; overflow: auto;
  padding: 8px; border: 1px solid var(--line); border-radius: 8px; }
.room-picker .room-search input { width: 100%; max-width: 28rem; }
.choices.compact { gap: 4px; margin: 0 0 6px; }
.person-access { min-width: 14rem; }
/* What an AI report assumed, with its one-click changes (owner, 2026-10-12) */
.card.assumed { border-left: 4px solid var(--accent); }
.card.assumed h2 { font-size: 1rem; margin: 0 0 6px; }
.card.assumed ul { margin: 0 0 8px; padding-left: 18px; }
.card.assumed .quick { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 0 0; }
a.quick-chip { display: inline-flex; align-items: center; min-height: 32px; padding: 2px 12px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--panel); color: var(--accent); font-size: 13px; font-weight: 700;
  text-decoration: none; }
a.quick-chip:hover, a.quick-chip:focus-visible { background: var(--accent-soft); }
a.quick-chip.on { background: var(--accent); border-color: var(--accent); color: #fff; }
@media (pointer: coarse) { a.quick-chip { min-height: 40px; } }

/* the deal form's vendor source (owner, 2026-10-14) */
.vendor-sources { border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; margin: 8px 0; }
.vendor-sources legend { font-weight: 700; padding: 0 4px; }
.vendor-sources label.vendor-source { display: block; margin: 6px 0; font-weight: 400; }
/* several processors ticked in the list (owner, 2026-10-16: "Drop the "also" step") */
.vendor-sources label.check.vendor-source { display: flex; align-items: flex-start; gap: 8px; min-height: 36px;
                                            font-size: 13.5px; margin: 4px 0; }
.vendor-sources label.check.vendor-source input { flex: none; margin-top: 3px; }
.pick-hint.warn { color: var(--warn); font-weight: 700; }
[data-vendor-match]:empty, [data-saved-match]:empty { display: none; }
/* Saved deals: "Fill in the form" and "Clear form" side by side (owner, 2026-10-16) */
.deal-saved-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px; }
.deal-saved-row .deal-saved-form { flex: 1 1 420px; }
.deal-clear-form { margin: 0; }
/* the reimbursement's columns: the basis with its method's settings, the rate with its notes (owner, 2026-10-16) */
.deal-col { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.deal-col .deal-note { margin: 2px 0 0; }
.deal-method-settings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 10px; }
/* the vendor credit batch of 2026-10-15: the form's boxes (SKUs, exclusions highlighted, the reimbursement, the Dutchie
   deal); the claim table's filters */
.vendor-source-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.deal-box { margin: 18px 0 0; padding: 4px 16px 14px; border: 1px solid var(--line); border-radius: 12px; }
.deal-box > .deal-h { margin-top: 12px; }
.deal-box-excl { border-color: var(--bad-line); background: var(--bad-bg); }
.deal-box-excl > .deal-h { color: var(--bad); }
.deal-free { border: 0; padding: 0; margin: 0; }
.deal-free legend { font-size: 13px; font-weight: 700; padding: 0; }
.deal-free label.check { display: flex; align-items: center; gap: 8px; font-weight: 400; min-height: 32px; }
.sku-typed { display: block; margin-top: 10px; }
.deal-email { display: block; margin-top: 12px; max-width: 420px; }
.deal-notes > textarea, .deal-email > input { display: block; width: 100%; }
.deal-suggest-box { margin-top: 6px; }
.claim-shown { margin: 0 0 8px; }

/* the inventory audit: the way to the results, the laptops holding the close up, "Done scanning" (owner, 2026-10-15:
   "make both buttons CRYSTAL CLEAR and easy to find") */
.button.big { font-size: 17px; padding: 13px 22px; min-height: 52px; }
.button.warn-button { background: #b45f00; border-color: #b45f00; color: #fff; }
.button.warn-button:hover { filter: brightness(1.08); color: #fff; }
.results-way .actions { margin: 6px 0 0; }
.way-out { margin: 14px 0; padding: 14px 18px; border: 2px solid #d9a400; border-radius: 10px;
           background: var(--warn-bg); }
.way-out h3 { margin: 0 0 6px; font-size: 18px; }
.way-out ul, .way-out ol { margin: 6px 0 12px; padding-left: 22px; }
.way-out ol.ways li { margin-bottom: 6px; }
.scan-release { margin: 12px 0; padding: 12px 14px; border: 2px solid var(--good); border-radius: 10px;
                background: var(--good-bg); }
.scan-release .release-button { width: 100%; background: var(--good); border-color: var(--good); color: #fff; }
.scan-release .release-button:hover { filter: brightness(1.08); color: #fff; }
.released-note { font-size: 16px; }
.tile-value.small-value { font-size: 18px; line-height: 1.3; }

/* The Deals tab's "Who pays for this deal?" (owner, 2026-10-15) and the promotion form's days of the week */
.who-pays { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.who-pays-choice { display: flex; flex-direction: column; gap: 6px; padding: 16px; border: 1px solid var(--line);
                   border-radius: 12px; text-decoration: none; color: inherit; min-height: 44px; }
.who-pays-choice:hover, .who-pays-choice:focus-visible { border-color: var(--accent); }
.deal-days { display: flex; flex-wrap: wrap; gap: 4px 14px; border: 0; padding: 0; margin: 0 0 12px; }
.deal-days legend { font-weight: 600; margin-bottom: 4px; }
.deal-days .pick-hint { flex-basis: 100%; }
/* ===== One fixed color per metric, everywhere (owner, 2026-10-15; app/metric_colors.py) =====
   Eight families: related metrics share their family's one color, so no more than eight are ever in play (about the
   most the eye tells apart at a glance). Green, amber and red are never a metric's color: they mean good, needs a look
   and bad, and appear only as a shape with an icon and a word (.status-chip). The metric's name is always printed
   beside its color; text stays in ink. Fixed for everyone: no per-person colors. */
:root {
  --m-net: #2f6fed; --m-gross: #3fa9cf; --m-margin: #c026d3; --m-count: #7347b6; --m-deals: #f066a8;
  --m-cost: #975415; --m-stock: #009085; --m-undone: #5b6578; --m-attn: #f0a32f; --m-none: #8a919b;
  /* each store's own color, only on screens that compare stores (owner, 2026-10-15), by license (metric_colors.py) */
  --store-detroit: #eda100; --store-flint: #e87ba4; --store-monroe: #2a78d6; --store-mtpleasant: #1baf7a;
  --store-newbuffalo: #a347d6; --store-sturgis: #4a3aa7; --store-vassar: #a5612a; --store-cannacapital: #64748b;
}
:root[data-theme="dark"] {
  --m-net: #6b9bff; --m-gross: #47cef6; --m-margin: #d65ae6; --m-count: #9a74e0; --m-deals: #e0679a;
  --m-cost: #c47a35; --m-stock: #3fb5a2; --m-undone: #8a96a8; --m-attn: #f5c26b; --m-none: #8a919b;
  --store-detroit: #f4a949; --store-flint: #c14589; --store-monroe: #6caceb; --store-mtpleasant: #439765;
  --store-newbuffalo: #d186f5; --store-sturgis: #736de7; --store-vassar: #af6316; --store-cannacapital: #94a3b8;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --m-net: #6b9bff; --m-gross: #47cef6; --m-margin: #d65ae6; --m-count: #9a74e0; --m-deals: #e0679a;
    --m-cost: #c47a35; --m-stock: #3fb5a2; --m-undone: #8a96a8; --m-attn: #f5c26b; --m-none: #8a919b;
    --store-detroit: #f4a949; --store-flint: #c14589; --store-monroe: #6caceb; --store-mtpleasant: #439765;
    --store-newbuffalo: #d186f5; --store-sturgis: #736de7; --store-vassar: #af6316; --store-cannacapital: #94a3b8;
  }
}
.m-net { --m: var(--m-net); } .m-gross { --m: var(--m-gross); } .m-margin { --m: var(--m-margin); }
.m-count { --m: var(--m-count); } .m-deals { --m: var(--m-deals); } .m-cost { --m: var(--m-cost); }
.m-stock { --m: var(--m-stock); } .m-undone { --m: var(--m-undone); } .m-attn { --m: var(--m-attn); }
.m-none { --m: var(--m-none); }
.store-detroit { --c: var(--store-detroit); } .store-flint { --c: var(--store-flint); }
.store-monroe { --c: var(--store-monroe); } .store-mtpleasant { --c: var(--store-mtpleasant); }
.store-newbuffalo { --c: var(--store-newbuffalo); } .store-sturgis { --c: var(--store-sturgis); }
.store-vassar { --c: var(--store-vassar); } .store-cannacapital { --c: var(--store-cannacapital); }
.store-none { --c: var(--line-strong); }

/* the big numbers: each in its metric's color, softly tinted */
.tile.sales, .tile.today { --tile: var(--m-net); }
.tile.gross { --tile: var(--m-gross); }
.tile.margin { --tile: var(--m-margin); }
.tile.count { --tile: var(--m-count); }
.tile.voids { --tile: var(--m-undone); }
.tile.stock { --tile: var(--m-stock); }
.tile.flags { --tile: var(--m-attn); }
.tile { background: color-mix(in srgb, var(--tile, var(--accent)) 6%, var(--panel));
        border-color: color-mix(in srgb, var(--tile, var(--accent)) 22%, var(--line)); }
.tile::before { width: 6px; }

/* a table's metric columns: the color on the heading (a bar and a soft tint); the numbers stay in ink */
th.mcol { box-shadow: inset 0 5px 0 var(--m); background: color-mix(in srgb, var(--m) 12%, var(--th)); }

/* a report's figure: a stripe and a soft tint in its metric's color */
.figure[class*=" m-"] { border-left: 6px solid var(--m); background: color-mix(in srgb, var(--m) 6%, var(--panel)); }

/* All reports in Modern (owner, 2026-10-16): one tile per group of the menu, in its family's color, its reports
   listed inside, each with its own figure's color (Classic shows the same groups as headed sections of cards) */
.rg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 18px; margin: 8px 0 26px; }
.rg-tile { display: flex; flex-direction: column; padding: 18px 18px 8px; border-radius: 18px;
           background: color-mix(in srgb, var(--fam) 7%, var(--panel));
           border: 1px solid color-mix(in srgb, var(--fam) 30%, var(--line)); border-top: 8px solid var(--fam); }
.rg-tile h2 { display: flex; align-items: center; gap: 12px; margin: 0 0 4px; font-size: 24px; line-height: 1.2; }
.rg-gi { display: grid; place-items: center; width: 42px; height: 42px; flex: none; border-radius: 12px;
         background: var(--fam); color: #fff; font-size: 20px; font-weight: 900; }
.rg-count { margin-left: auto; padding: 2px 10px; border-radius: 999px; background: var(--panel); color: var(--muted);
            font-size: 14px; font-weight: 700; border: 1px solid var(--line); }
.rg-what { margin: 0 0 10px; color: var(--muted); font-size: 15px; }
.rg-tile ul { list-style: none; margin: 0; padding: 0; }
.rg-tile li { display: flex; align-items: center; gap: 4px;
               border-top: 1px solid color-mix(in srgb, var(--fam) 22%, var(--line)); }
.rg-tile li a { display: flex; flex: 1; min-width: 0; align-items: center; gap: 12px; min-height: 52px; padding: 0 6px;
                color: var(--text); text-decoration: none; font-size: 17px; font-weight: 700; }
.rg-tile li a:hover { background: color-mix(in srgb, var(--fam) 10%, var(--panel)); }
.rg-ri { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 9px;
         background: color-mix(in srgb, var(--fam) 16%, var(--panel)); color: var(--fam); font-weight: 900;
         font-size: 15px; }
.rg-rl { flex: 1; padding: 6px 0; }
/* a report's live number, in one line under its name (app/static/headlines.js fills it) */
.rg-hl { margin-top: 2px; font-size: 13px; font-weight: 400; color: var(--muted); line-height: 1.35; }
.rg-hl[hidden] { display: none; }
.rg-hl p { display: inline; margin: 0; }
.rg-hl .headline-num { margin-right: 4px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }
.rg-hl.attn .headline-num { color: var(--warn); } .rg-hl.bad .headline-num { color: var(--bad); }
.rg-hl .headline-sub, .rg-hl .headline-second { display: none; }
.rg-hl .status-chip { margin-left: 6px; padding: 0 8px 0 2px; gap: 4px; font-size: 11px; vertical-align: 1px; }
.rg-hl .status-chip .status-icon { width: 15px; height: 15px; font-size: 10px; }
.rg-go { color: var(--muted); font-size: 26px; line-height: 1; }
/* + Add to home on a row (on the cards in Classic), or a small house when it is on the person's home page */
.rg-add { margin: 0; }
.rg-add button { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; padding: 0;
                 border: 1px solid color-mix(in srgb, var(--fam) 40%, var(--line)); background: var(--panel);
                 color: var(--fam); font-size: 20px; font-weight: 800; cursor: pointer; }
.rg-add button:hover { background: var(--fam); color: #fff; }
.rg-home { display: grid; place-items: center; width: 36px; height: 36px; color: var(--muted); font-size: 16px; }
.rg-classic { display: none; }
:root[data-look="classic"] .rg-classic { display: block; }
:root[data-look="classic"] .rg-modern { display: none; }
.rg-sec { margin: 28px 0 12px; font-size: 22px; }
.rg-sec:first-of-type { margin-top: 8px; }
.rg-sec span { display: block; margin-top: 2px; font-size: 15px; font-weight: 400; color: var(--muted); }
@media (max-width: 600px) {
  .rg-grid { grid-template-columns: 1fr; gap: 14px; }
  .rg-tile h2 { font-size: 22px; }
}

/* a report's card: its icon in the color of the figure the report is about; plain labels on cards go gray so blue
   only ever means net sales (and links) */
.app-card[class*="fam-"] .app-icon { background: color-mix(in srgb, var(--fam) 15%, transparent); color: var(--fam); }
.app-card.fam-net { --fam: var(--m-net); } .app-card.fam-undone { --fam: var(--m-undone); }
.app-card.fam-stock { --fam: var(--m-stock); } .app-card.fam-deals { --fam: var(--m-deals); }
.app-card.fam-attn { --fam: var(--m-attn); } .app-card.fam-none { --fam: var(--m-none); }
.app-card[class*="fam-"] .tag.info { background: var(--neutral-bg); color: var(--neutral); }

/* good, needs a look, bad: a shape with an icon and a word, never color alone; the icon a filled circle with a white
   symbol, as previewed (owner, 2026-10-15: "Keep the filled color box with white text as you mocked it") */
.status-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 4px; border-radius: 999px;
               font-size: 13px; font-weight: 800; background: var(--panel); }
.status-chip .status-icon { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
                            font-size: 12px; font-weight: 900; color: #fff; }
.status-chip.good { color: var(--good); } .status-chip.good .status-icon { background: #067647; }
.status-chip.attn { color: var(--warn); } .status-chip.attn .status-icon { background: #b97500; }
.status-chip.bad { color: var(--bad); } .status-chip.bad .status-icon { background: #b42318; }
.status-chip.unknown { color: var(--neutral); } .status-chip.unknown .status-icon { background: #555e69; }

/* one live number on a report's card (the all reports page): filled in when the page has loaded */
.app-card .headline { margin: 10px 0 8px; padding: 12px 14px; border-radius: 12px; background: var(--accent-soft);
                      border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent); }
.app-card .headline[hidden] { display: none; }
.app-card .headline-num { margin: 0; font-size: 32px; font-weight: 800; line-height: 1.05; letter-spacing: -.02em;
                          color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.app-card .headline-label { margin: 3px 0 0; font-size: 16px; font-weight: 700; color: var(--text); line-height: 1.3; }
.app-card .headline-sub { margin: 2px 0 0; font-size: 14px; color: var(--muted); line-height: 1.35; }
/* a smaller number under the big one (the Manager override card: voids and returns under the overrides) */
.app-card .headline-second { margin: 8px 0 0; padding-top: 8px; border-top: 1px solid var(--line); font-size: 15px;
                             font-weight: 600; color: var(--text); line-height: 1.35; }
.app-card .headline-second strong { font-size: 22px; font-weight: 800; letter-spacing: -.01em;
                                    font-variant-numeric: tabular-nums; margin-right: 4px; }
.app-card .headline .status-chip { margin-top: 8px; }
/* the number's box in its report's color (never the blue of net sales on another report's card); good, needs a look
   and bad take theirs */
.app-card[class*="fam-"] .headline { background: color-mix(in srgb, var(--fam) 9%, var(--panel));
                                      border-color: color-mix(in srgb, var(--fam) 26%, var(--line)); }
.app-card .headline.attn, .app-card[class*="fam-"] .headline.attn { background: var(--warn-bg); border-color: var(--warn-line); }
.app-card .headline.bad, .app-card[class*="fam-"] .headline.bad { background: var(--bad-bg); border-color: var(--bad-line); }
.app-card .headline.good, .app-card[class*="fam-"] .headline.good { background: var(--good-bg); border-color: var(--good-line); }
.app-card.has-attn { border-top: 6px solid #e0a000; }
.app-card.has-bad { border-top: 6px solid var(--bad); }
.app-card.has-good { border-top: 6px solid var(--good); }
.app-card .headline-note { margin: 0; font-size: 14px; font-weight: 600; color: var(--muted); }

/* stores compared: each store's cell with its own color */
td.store-cell { white-space: nowrap; }
.store-dot { display: inline-block; width: 12px; height: 12px; margin: 0 7px 0 0; border-radius: 50%; background: var(--c);
             vertical-align: -1px; box-shadow: 0 0 0 2px color-mix(in srgb, var(--c) 25%, var(--panel)); }

/* one item at every store: a box per store in its own color, big and readable */
.item-title { margin: 2px 0 4px; font-size: 30px; line-height: 1.2; }
.item-sub { margin: 0 0 18px; color: var(--muted); font-size: 16px; }
.item-summary { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 20px; }
.item-summary > div { flex: 1 1 200px; padding: 14px 18px; background: var(--panel); border: 1px solid var(--line);
                      border-radius: 14px; }
.item-summary strong { display: block; font-size: 30px; font-weight: 800; line-height: 1.1; }
.item-summary span { display: block; margin-top: 4px; color: var(--muted); font-size: 15px; }
.item-summary .item-need { background: var(--warn-bg); border-color: var(--warn-line); }
.item-summary .item-need span { color: var(--text); }
.store-boxes { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; margin: 0 0 18px;
               padding: 0; list-style: none; }
.store-box { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px;
             background: color-mix(in srgb, var(--c) 9%, var(--panel));
             border: 1px solid color-mix(in srgb, var(--c) 38%, var(--line)); border-top: 10px solid var(--c);
             border-radius: 16px; }
.store-box-name { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; font-size: 21px; font-weight: 800; }
.store-box-name .store-dot { width: 18px; height: 18px; margin: 0; }
.store-box-name a { color: var(--text); text-decoration: none; }        /* the name in ink, as previewed */
.store-box-name a:hover, .store-box-name a:focus-visible { text-decoration: underline; }
.store-box-big { margin: 0; font-size: 46px; font-weight: 800; line-height: 1; letter-spacing: -.02em; }
.store-box-big span { font-size: 22px; font-weight: 700; letter-spacing: 0; }
.store-box-when { margin: 2px 0 10px; color: var(--muted); font-size: 16px; }
.store-box-lines { margin: 0 0 12px; display: grid; gap: 6px; }
.store-box-lines > div { display: flex; justify-content: space-between; gap: 10px; padding-top: 6px; font-size: 17px;
                         border-top: 1px solid color-mix(in srgb, var(--c) 25%, var(--line)); }
.store-box-lines dt { color: var(--muted); }
.store-box-lines dd { margin: 0; font-weight: 700; }
.store-box .status-chip { margin-top: auto; align-self: flex-start; font-size: 17px; padding: 7px 14px 7px 8px;
                          border: 1px solid var(--line); }
.store-box .status-chip .status-icon { width: 26px; height: 26px; font-size: 15px; }
.store-box .status-chip.good { background: var(--good-bg); border-color: var(--good-line); }
.store-box .status-chip.attn { background: var(--warn-bg); border-color: var(--warn-line); }
.store-box-note { color: var(--muted); font-size: 16px; margin: 6px 0 0; }
@media (max-width: 560px) {
  .item-title { font-size: 24px; }
  .store-boxes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .store-box { padding: 12px; border-top-width: 8px; }
  .store-box-name { font-size: 18px; gap: 8px; }
  .store-box-name .store-dot { width: 14px; height: 14px; }
  .store-box-big { font-size: 38px; }
  .store-box-big span { font-size: 18px; }
  .store-box-when { font-size: 14px; }
  .store-box-lines > div { font-size: 15px; flex-wrap: wrap; gap: 0 8px; }
  .store-box .status-chip { font-size: 15px; padding: 6px 10px 6px 6px; }
  .item-summary > div { flex: 1 1 100%; padding: 12px 14px; }
  .item-summary strong { font-size: 26px; }
  .app-card .headline-num { font-size: 28px; }
}

/* the all reports page: when its cards' numbers were read */
.headlines-as-of { margin: 6px 0 0; font-weight: 700; }

/* ===== Each person's display (owner, 2026-10-15): Modern or Classic, kept with them (users.look) =====
   The switch: two plain buttons in the top bar, the one in use pressed. */
.look-form { display: inline-flex; align-items: center; gap: 8px; margin: 0; }
.look-name { color: var(--muted); font-size: 13px; font-weight: 700; }
.look-choices { display: inline-flex; overflow: hidden; border: 1px solid var(--line-strong); border-radius: 10px;
                background: var(--panel); }
.look-choice { min-height: 44px; padding: 0 12px; border: 0; border-radius: 0; background: transparent;
               color: var(--muted); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.look-choice[aria-pressed="true"] { background: var(--primary); color: var(--primary-text); }
@media (forced-colors: active) { .look-choice[aria-pressed="true"] { outline: 3px solid CanvasText;
                                                                     outline-offset: -3px; } }
.look-choice:hover:not([aria-pressed="true"]) { background: var(--panel-2); color: var(--text); }
.look-choice:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset: 1px; }
@media (max-width: 559px) { .look-choice { padding: 0 10px; font-size: 13px; }
                            .topbar-tools { flex-wrap: wrap; justify-content: flex-end; row-gap: 6px; } }
@media (max-width: 1499px) { .look-name { display: none; } }
/* Laptops: when the top bar's items (store picker, display, light/dark, the person, sign out) do not fit one row, the
   tools go to a second row on the right instead of the page scrolling sideways (it already did at about 1,024 px) */
@media (min-width: 900px) and (max-width: 1439px) {
  .topbar { flex-wrap: wrap; padding-top: 10px; padding-bottom: 10px; }
  .topbar-tools { margin-left: auto; }
  .user-text { display: none; }          /* the round initial stays, with the person's name on it (its title) */
}

/* Classic: close to the old look, clean and professional, minimal color. One accent (the app's blue) where Modern
   gives each metric its own color; no tints; plain table headings and figures; stores told apart by their names,
   which are always printed. Good, needs a look and bad keep their chips (a word and an icon). The same figures, and
   the same people see them, either way: only the look differs. */
:root[data-look="classic"] .tile { --tile: var(--accent); background: var(--panel); border-color: var(--line); }
:root[data-look="classic"] th.mcol { box-shadow: none; background: var(--th); }
:root[data-look="classic"] .figure[class*=" m-"] { border-left: 1px solid var(--line); background: var(--panel); }
:root[data-look="classic"] .app-card[class*="fam-"] .app-icon { background: var(--accent-soft); color: var(--accent); }
:root[data-look="classic"] .app-card .headline,
:root[data-look="classic"] .app-card .headline.attn,
:root[data-look="classic"] .app-card .headline.bad,
:root[data-look="classic"] .app-card .headline.good { background: var(--panel-2); border-color: var(--line); }
:root[data-look="classic"] .app-card.has-attn,
:root[data-look="classic"] .app-card.has-bad,
:root[data-look="classic"] .app-card.has-good { border-top: 1px solid var(--line); }
:root[data-look="classic"] .store-dot { display: none; }
:root[data-look="classic"] .store-box { background: var(--panel); border: 1px solid var(--line);
                                        border-top: 4px solid var(--line-strong); }
:root[data-look="classic"] .store-box-lines > div { border-top-color: var(--line); }
:root[data-look="classic"] .store-box .status-chip.good,
:root[data-look="classic"] .store-box .status-chip.attn { background: var(--panel); border-color: var(--line); }
:root[data-look="classic"] .item-summary .item-need { background: var(--panel); border-color: var(--line); }

/* Words and controls for one display only: the per-person colors exist in Classic; Modern says why it has none */
.only-classic { display: none; }
:root[data-look="classic"] .only-classic { display: inline; }
:root[data-look="classic"] label.only-classic { display: inline-flex; }
:root[data-look="classic"] .tone-choices { display: flex; }
:root[data-look="classic"] .only-modern { display: none; }

/* Classic: each person's own color on a big number's stripe and icon, and on a report card's edge and icon (owner,
   2026-10-12, kept in Classic on 2026-10-15); a tile without one keeps Classic's single accent */
:root[data-look="classic"] .tile.toned { --tile: var(--tone); }
:root[data-look="classic"] .app-card.toned { box-shadow: inset 4px 0 0 var(--tone); }
:root[data-look="classic"] .app-card.toned:hover { box-shadow: inset 4px 0 0 var(--tone), var(--shadow); }
:root[data-look="classic"] .app-card.toned .app-icon { background: color-mix(in srgb, var(--tone) 16%, transparent);
                                                       color: var(--tone); }

/* ---------- The Modern display: every choice a tile (owner, 2026-10-16: "In Modern, everything is tiles. No
   dropdowns anywhere: menus, filters, toggles, store pickers, date ranges. Every choice is a tile to click. Classic
   keeps the dropdowns"; app/templates/_tiles.html) ---------- */
.tiles-row { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; margin: 0 0 12px; }
.tiles-label { flex: 0 0 100%; margin: 0 0 -2px 2px; font-size: 13px; font-weight: 800; letter-spacing: .08em;
               text-transform: uppercase; color: var(--muted); }
.tchoice { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 16px;
           border-radius: 13px; background: var(--panel); border: 1.5px solid var(--line-strong); color: var(--text);
           font: inherit; font-size: 15px; font-weight: 800; line-height: 1.2; text-decoration: none; cursor: pointer;
           box-shadow: 0 1px 2px rgba(16, 24, 40, .05); }
.tchoice:hover { border-color: var(--text); text-decoration: none; }
.tchoice.on, .tchoice[aria-pressed="true"], .tchoice:has(> input.tinput:checked) {
  background: var(--primary); border-color: var(--primary); color: var(--primary-text); }
.tchoice:focus-visible, .tchoice:has(> input.tinput:focus-visible) {
  outline: 3px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: 2px; }
/* the tile's own button (a radio or a tick box) out of sight; the tile shows it chosen */
.tchoice > input.tinput { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
@supports not selector(:has(*)) {        /* a browser that cannot show the tile chosen shows its button instead */
  .tchoice > input.tinput { position: static; opacity: 1; width: 20px; height: 20px; pointer-events: auto; }
}
.tchoice .cnt { font-size: 12px; font-weight: 700; color: var(--muted); }
.tchoice .tsub { display: block; font-size: 12px; font-weight: 600; color: var(--muted); }
.tchoice.stack { flex-direction: column; align-items: flex-start; justify-content: center; gap: 0; padding: 6px 16px; }
.tchoice.on .cnt, .tchoice.on .tsub, .tchoice[aria-pressed="true"] .cnt,
.tchoice:has(> input.tinput:checked) .cnt { color: inherit; opacity: .8; }
.tchoice .tick { display: inline-grid; place-items: center; flex: none; width: 20px; height: 20px; border-radius: 6px;
                 border: 1.5px solid var(--line-strong); font-size: 13px; color: transparent; }
.tchoice:has(> input.tinput:checked) .tick { background: var(--primary-text); color: var(--primary);
                                             border-color: var(--primary-text); }
.tchoice.loading { opacity: .7; cursor: progress; }

/* the store tiles: the top bar's store list, in Modern a row of tiles under the page's heading */
.store-tiles { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 4px 0 18px; padding: 12px;
               border-radius: 16px; background: var(--panel); border: 1px solid var(--line); }
.store-tiles .tiles-label { flex: 0 0 auto; margin: 0 6px 0 4px; }
.store-tiles-row { display: contents; }
.store-tiles .tchoice { min-height: 44px; padding: 0 14px; }
.store-tiles .tchoice .sdot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--c, var(--line-strong)); }
.store-tiles .tchoice[aria-pressed="true"] .sdot { box-shadow: 0 0 0 2px var(--primary-text); }
.store-tiles .store-loading { flex-basis: 100%; }

/* a filter's tile shows the choice in use; tapped, its tiles open under it, in the page (never a floating menu) */
details.tfilter { position: static; }
.filters details.tfilter[open] { flex-basis: 100%; }
details.tfilter > summary.ftile { display: inline-flex; flex-direction: column; justify-content: center; gap: 0;
  min-height: 54px; min-width: 150px; padding: 6px 34px 6px 16px; border-radius: 13px; background: var(--panel);
  border: 1.5px solid var(--line-strong); color: var(--text); cursor: pointer; list-style: none; position: relative; }
details.tfilter > summary.ftile::-webkit-details-marker { display: none; }
details.tfilter > summary.ftile::after { content: "+"; position: absolute; right: 12px; top: 50%; translate: 0 -50%;
                                         font-size: 20px; font-weight: 800; color: var(--muted); }
details.tfilter[open] > summary.ftile::after { content: "\2013"; }
details.tfilter.set > summary.ftile { background: var(--accent-soft); border-color: var(--accent); }
details.tfilter[open] > summary.ftile { border-color: var(--text); box-shadow: 0 0 0 1px var(--text) inset; }
.ftile .fl { font-size: 12px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.ftile .fv { max-width: 22rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px; font-weight: 800; }
.tpanel { margin: 8px 0 4px; padding: 14px; border-radius: 16px; background: var(--panel); border: 1.5px solid var(--text); }
.tpanel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px;
               max-height: min(62vh, 560px); overflow: auto; padding: 2px; }
.tpanel-grid .tchoice { justify-content: space-between; min-height: 50px; white-space: normal; }
.tpanel-grid > input.tick-find, .tpanel-grid > .tick-find-none, .tpanel-grid > .tpanel-foot { grid-column: 1 / -1; }
.tpanel-grid > input.tick-find { margin: 0 0 2px; min-height: 46px; border-radius: 12px; }
.tpanel-foot { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
/* the Modern multi-choice keeps its class (its tick tiles apply when it closes) but opens in the page */
details.multi-choice.tfilter > summary::after { content: "+"; }
details.multi-choice.tfilter[open] > summary::after { content: "\2013"; }
details.multi-choice.tfilter .multi-panel { position: static; z-index: auto; min-width: 0; max-width: none;
  max-height: min(62vh, 560px); padding: 2px; border: 0; border-radius: 0; box-shadow: none; display: grid; gap: 8px; }
.filters .tiles-row.tfield { flex: 0 1 auto; margin: 0; }
.filters .tiles-row.tfield .tiles-label { flex-basis: 100%; }
/* Modern: a toggle in a filter bar is a tile too (its tick box drawn as the tile's tick) */
:root:not([data-look="classic"]) .filters label.check { position: relative; min-height: 46px; padding: 0 16px 0 12px;
  border-radius: 13px; background: var(--panel); border: 1.5px solid var(--line-strong); font-size: 15px;
  font-weight: 800; cursor: pointer; gap: 10px; }
:root:not([data-look="classic"]) .filters label.check:hover { border-color: var(--text); }
:root:not([data-look="classic"]) .filters label.check:has(> input:checked) { background: var(--primary);
  border-color: var(--primary); color: var(--primary-text); }
:root:not([data-look="classic"]) .filters label.check:has(> input:focus-visible) {
  outline: 3px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: 2px; }
@supports selector(:has(*)) {
  :root:not([data-look="classic"]) .filters label.check > input[type="checkbox"] { appearance: none; -webkit-appearance: none;
    display: inline-grid; place-items: center; width: 20px; height: 20px; margin: 0; border-radius: 6px;
    border: 1.5px solid var(--line-strong); background: var(--panel); }
  :root:not([data-look="classic"]) .filters label.check > input[type="checkbox"]:checked { border-color: var(--primary-text); }
  :root:not([data-look="classic"]) .filters label.check > input[type="checkbox"]:checked::after { content: "\2713";
    font-size: 13px; font-weight: 900; color: var(--primary); }
}

@media (max-width: 600px) {
  .store-tiles { padding: 8px; gap: 6px; }
  .store-tiles .tiles-label { flex-basis: 100%; }
  .store-tiles .tchoice { min-height: 42px; padding: 0 10px; font-size: 14px; }
  .tchoice { min-height: 44px; padding: 0 12px; font-size: 14px; }
  .tpanel { padding: 10px; }
  .tpanel-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  details.tfilter > summary.ftile { min-width: 0; }
  .ftile .fv { max-width: 60vw; }
}

/* a calendar of day tiles (Modern): a period's first tap is its first day, the second its last */
.tpanel-say { margin: 0 0 10px; font-size: 16px; }
.tcal-head { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; }
.tcal-head .tchoice[aria-disabled="true"] { opacity: .45; pointer-events: none; }
.tcal { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.tcal-month { padding: 12px; border-radius: 14px; border: 1px solid var(--line); }
.tcal-month h4 { margin: 0 0 8px; font-size: 16px; text-align: center; }
.tcal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
.tcal-grid .dow { font-size: 12px; font-weight: 800; color: var(--muted); text-align: center; }
.tcal-grid a, .tcal-grid span.day { display: grid; place-items: center; min-height: 40px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--panel); color: var(--text); font-size: 15px; font-weight: 800;
  text-decoration: none; }
.tcal-grid a:hover { border-color: var(--text); text-decoration: none; }
.tcal-grid a.in { background: var(--accent-soft); border-color: var(--accent); }
.tcal-grid a.end { background: var(--primary); border-color: var(--primary); color: var(--primary-text); }
.tcal-grid span.later { background: var(--panel-2); border-style: dashed; color: var(--muted); }
.tcal-grid span.blank { border: 0; background: none; }
.filters .tiles-row.tperiod { flex-basis: 100%; }
.period-nav .filters.inline details.tfilter[open] { flex-basis: 100%; }
@media (max-width: 600px) { .tcal-grid a, .tcal-grid span.day { min-height: 36px; font-size: 14px; } }

/* Modern: a page's tabs (a report's views, Day / Week / Month) are tiles */
:root:not([data-look="classic"]) nav.tabs { display: flex; flex-wrap: wrap; gap: 8px; border-bottom: 0; }
:root:not([data-look="classic"]) nav.tabs a { display: inline-flex; align-items: center; min-height: 46px;
  padding: 0 16px; border-radius: 13px; background: var(--panel); border: 1.5px solid var(--line-strong);
  color: var(--text); font-size: 15px; font-weight: 800; text-decoration: none; margin: 0; }
:root:not([data-look="classic"]) nav.tabs a:hover { border-color: var(--text); }
:root:not([data-look="classic"]) nav.tabs a[aria-current="page"] { background: var(--primary);
  border-color: var(--primary); color: var(--primary-text); }

/* sorting by tiles (Modern): one tile per column above the table; a sorted one shows its place, its order and an x */
.sort-tiles { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; }
.sort-tiles .tiles-label { flex: 0 0 auto; margin: 0 2px 0 0; }
.sort-tiles .tchoice { min-height: 42px; padding: 0 12px; font-size: 14px; }
.sort-tiles .tchoice.static { cursor: default; }
.sort-tiles .tchoice[aria-disabled="true"] { opacity: .45; }
.sort-tiles .tchoice .step { display: inline-grid; place-items: center; min-width: 22px; height: 22px; border-radius: 11px;
                             background: var(--primary-text); color: var(--primary); font-size: 12px; }
.sort-tiles .tchoice .arr { font-size: 13px; font-weight: 700; opacity: .9; }
.tpair { display: inline-flex; }
.tpair > .tchoice:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.tpair > .tchoice.tx { border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: 1px; padding: 0 12px; }
th.sortable-plain .col-mark { margin-left: 4px; }
/* the heading itself sorts, tapped (owner, 2026-10-23: every column heading sorts, Modern too) */
th.sortable-plain .col-link { color: inherit; text-decoration: none; display: inline-block; min-height: 32px;
                              padding: 6px 0; cursor: pointer; }
th.sortable-plain .col-link:hover, th.sortable-plain .col-link:focus-visible { color: var(--accent);
                                                                            text-decoration: underline; }

/* The stock menu (owner, 2026-10-17: "Modern look: tiles, no dropdowns. Make it simple and clean on a phone") */
.menu-head h1 { margin-bottom: 2px; }
.menu-search { display: flex; gap: 8px; margin: 12px 0 8px; }
.menu-search input[type="search"] { flex: 1; min-width: 0; }
.menu-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 14px; }
.menu-tiles { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.menu-tile { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px;
  display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.menu-tile-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.menu-name { font-weight: 700; font-size: 15px; overflow-wrap: anywhere; }
.menu-cat { color: var(--muted); font-size: 12px; white-space: nowrap; }
.menu-meta { margin: 0; color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.menu-figs { display: flex; justify-content: space-between; align-items: flex-end; gap: 8px; margin-top: auto; }
.menu-qty strong, .menu-price strong { font-size: 17px; }
.menu-qty small, .menu-price small { color: var(--muted); }
.menu-price { text-align: right; }
/* tapped through like Reordering (owner, 2026-10-18: "category > brand > size > product"), with the rep's cart on top */
a.menu-tile { color: inherit; text-decoration: none; }
a.menu-tile:hover, a.menu-tile:focus-visible { border-color: var(--accent); }
.menu-level { flex-direction: row; align-items: center; justify-content: space-between; }
.menu-level .menu-meta { margin-left: auto; padding-left: 8px; white-space: nowrap; }
.menu-chev { color: var(--muted); font-size: 20px; padding-left: 8px; }
.menu-crumbs { margin: 4px 0 12px; font-size: 14px; overflow-wrap: anywhere; }
.menu-cartbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px;
  margin: 8px 0; }
.menu-customer { color: inherit; text-decoration: none; overflow-wrap: anywhere; }
.menu-customer small { color: var(--muted); }
.menu-product h2 { margin: 0 0 2px; overflow-wrap: anywhere; }
.menu-batch { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px;
  margin: 10px 0; display: flex; flex-direction: column; gap: 6px; }
.menu-add { display: grid; gap: 8px; margin-top: 4px; }
.menu-add label { display: grid; gap: 2px; font-size: 14px; }
.menu-add input[type="text"] { min-height: 44px; }
.menu-units { border: 0; padding: 0; margin: 0; display: flex; gap: 16px; }
.menu-units label { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; }
.menu-propose { margin: 12px 0; }
.menu-propose form { display: grid; gap: 8px; max-width: 420px; }
.cart-line { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px;
  margin: 10px 0; display: grid; gap: 6px; }
.cart-line form { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; }
.cart-line form label { display: grid; gap: 2px; font-size: 13px; }
.cart-total { display: flex; justify-content: space-between; font-size: 18px; font-weight: 700; margin: 12px 0; }
@media (max-width: 559px) {
  .menu-tiles { grid-template-columns: 1fr; }
  .menu-search input[type="search"] { font-size: 16px; }   /* phones: 16-pixel text, so the page does not zoom in */
  .menu-add input[type="text"], .cart-line input[type="text"], .menu-propose input[type="text"] { font-size: 16px; }
}

/* Reorder details: what a suggested order is, in one line (owner, 2026-10-17) */
.order-note { margin: 4px 0 8px; font-weight: 600; }
.order-setlink { font-weight: 400; margin-left: 6px; }

/* "Select all", "Clear" and a count at the top of a list of tick boxes, and the box in an item table's heading (owner,
   2026-10-18: "add 'Select all' so I can select everything and untick the few I don't want"; app/static/typeselect.js,
   app/static/forms.js). Ticking saves nothing: each page's own button still decides. */
.tick-all { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0 0 6px; }
.tick-all .button { min-height: 36px; margin-top: 0; padding: 6px 12px; font-size: 13.5px; }
@media (pointer: coarse) { .tick-all .button { min-height: 44px; } }
.tick-all-count { flex: 1 1 12rem; min-width: 0; font-size: 13px; font-weight: 600; color: var(--muted); overflow-wrap: anywhere; }
.tick-all-count.warn { color: var(--warn); font-weight: 700; }
.tpanel-grid > .tick-all { grid-column: 1 / -1; }
/* the deal form's lists open under their search box: the row stays at the top of the list while it scrolls */
.pick-list > .tick-all { position: sticky; top: -4px; z-index: 1; margin: -4px -8px 4px; padding: 6px 8px;
                         background: var(--panel); border-bottom: 1px solid var(--line); }
th.tick-head { width: 1%; }
.select-count { display: block; margin-top: 4px; font-weight: 700; }


/* Stock as a lookup (owner, 2026-10-20, evening; app/stock_levels.py): the day, a big search, a trail on every level,
   every location's box (on a phone: a card per store, tapped for its packages and products), the three tiles. */
.stock-day { margin: 6px 0 10px; }
.stock-search { display: flex; gap: 8px; align-items: stretch; margin: 6px 0 14px; max-width: 980px; }
.stock-search input[type="search"] { flex: 1 1 auto; min-width: 0; min-height: 50px; padding: 10px 16px; font-size: 18px;
  border: 2px solid var(--text); border-radius: 12px; background: var(--panel); color: var(--text); }
.stock-search .button { min-height: 50px; margin-top: 0; padding: 0 22px; font-size: 16px; }
.stock-trail { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: 4px 0 12px; font-size: 20px;
  font-weight: 700; }
.stock-trail a { color: var(--accent); }
.stock-trail .sep { color: var(--muted); font-weight: 400; }
.stock-trail .here { overflow-wrap: anywhere; }
.stock-entries { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); margin: 0 0 14px; }
.stock-entry { display: grid; gap: 4px; padding: 16px 18px; border-radius: 14px; background: var(--panel);
  border: 1px solid var(--line); color: var(--text); text-decoration: none; }
.stock-entry:hover { border-color: var(--text); text-decoration: none; }
.stock-entry.on { border: 2px solid var(--text); }
.stock-entry .t { font-size: 18px; font-weight: 700; }
.stock-entry .c { font-size: 24px; font-weight: 900; }
.stock-entry .w { font-size: 14px; color: var(--muted); }
.stock-sort { margin: 6px 0 4px; }
.stock-sort .tchoice { min-height: 36px; padding: 0 12px; font-size: 14px; }
.stock-results h3 { margin: 14px 0 4px; font-size: 16px; }
.stock-results ul { margin: 0 0 6px; padding-left: 20px; }
.stock-results li { margin: 3px 0; }
.stock-about { margin-top: 18px; }
.stock-about p { margin: 4px 0; }
th .store-key { display: inline-flex; align-items: center; gap: 6px; }
th .store-key::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--c, var(--line-strong)); }
.stock-box-cards { display: none; }
.stock-card { border: 1px solid var(--line); border-radius: 12px; background: var(--panel); margin: 0 0 8px;
  box-shadow: inset 4px 0 0 var(--c, var(--line-strong)); }
.stock-card > summary { display: grid; gap: 6px; padding: 10px 12px 10px 16px; cursor: pointer; list-style: none; }
.stock-card > summary::-webkit-details-marker { display: none; }
.stock-card .name { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 16px; }
.stock-card .store-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--c, var(--line-strong)); }
.stock-card .figs, .stock-card .more { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px;
  font-weight: 700; font-variant-numeric: tabular-nums; }
.stock-card .figs small, .stock-card .more small { display: block; font-size: 12px; font-weight: 600; color: var(--muted); }
.stock-card .more { padding: 0 12px 12px 16px; align-items: end; }
.stock-card .more .button { margin-top: 0; min-height: 44px; }
@media (max-width: 559px) {
  .stock-search input[type="search"] { font-size: 16px; }   /* phones: 16-pixel text, so the page does not zoom in */
  .stock-search .button { padding: 0 14px; }
  .stock-trail { font-size: 17px; }
  /* on a phone the box is a card per store: on hand, cost, retail; tapped, its packages and products */
  :root:not([data-look="classic"]) .stock-box .stock-box-table { display: none; }
  :root:not([data-look="classic"]) .stock-box .stock-box-cards { display: block; }
}
/* Stock settings: the deli flower tier list (owner, 2026-10-20) */
.deli-admin .inline-form { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 2px 4px 2px 0; }
.deli-admin .inline-form input:not([type="hidden"]) { min-width: 0; max-width: 16rem; }
.deli-admin .inline-form .button { margin-top: 0; }
.deli-admin .chip-form { margin: 0; }
.deli-admin details.deli-edit { display: inline-block; margin-left: 6px; }
.deli-admin details.deli-edit > summary { cursor: pointer; color: var(--accent); font-size: 14px; }
.deli-admin .deli-add { margin-top: 12px; }
.deli-admin .deli-cats fieldset { display: flex; flex-wrap: wrap; gap: 4px 16px; border: 0; padding: 0; margin: 0; }
.deli-admin h3 { margin: 22px 0 6px; }
/* a deal's tiers (owner, 2026-10-19): one row each under the reimbursement; the form's first button (off screen, never
   tabbed to) keeps Enter saving the deal, as before */
.deal-default-submit { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.deal-tiers { margin-top: 14px; }
.deal-tier-table input { width: 100%; min-width: 70px; }
.deal-tier-table td:first-child input { min-width: 130px; }
.deal-tier-table td:nth-child(3) { min-width: 220px; }
.deal-tier-table td { vertical-align: top; }

/* Custom reports (owner, 2026-10-19): Ask AI and Build it yourself side by side; the builder's steps stacked on a phone
   (owner's answer 6) and its choices in columns on a wider screen */
.custom-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin: 0 0 18px; }
.custom-choice { display: flex; gap: 14px; align-items: flex-start; text-decoration: none; color: var(--text); }
.custom-choice:hover, .custom-choice:focus-visible { border-color: var(--accent); }
.custom-choice strong { display: block; font-size: 1.1rem; margin-bottom: 4px; }
.custom-icon { flex: none; width: 44px; height: 44px; border-radius: 12px; background: var(--accent-soft); color: var(--accent);
  display: grid; place-items: center; font-weight: 700; font-size: 1.3rem; }
.build-step h2 { display: flex; align-items: center; gap: 10px; }
.step-no { width: 28px; height: 28px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: grid;
  place-items: center; font-size: .95rem; flex: none; }
.option-list { display: grid; gap: 6px; }
.option-list.cols { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.option-list.row { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin-bottom: 10px; }
.option-list.inset { margin-left: 28px; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.option-list .check { min-height: 32px; }
.option-list .check.greyed { opacity: .6; }
.build fieldset.plain { border: 0; padding: 0; margin: 10px 0 4px; }
.build fieldset.plain legend { font-weight: 700; margin-bottom: 6px; }
.build-row { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; }
.build-row label { display: grid; gap: 4px; }
.build-row label.grow { flex: 1 1 220px; }
.build-row input[type="number"] { width: 7em; }
.filter-row { margin-bottom: 10px; }
.build-actions { position: sticky; bottom: 0; z-index: 2; }
@media (max-width: 559px) {
  .option-list.cols, .option-list.inset, .option-list.row { grid-template-columns: 1fr; }
  .option-list.inset { margin-left: 18px; }
  .build-row label, .build-row label.grow { flex: 1 1 100%; }
  .build-row select, .build-row input { width: 100%; }
}

/* The AI reports' microphone (owner, 2026-10-20: "Show clearly when it's listening, with a big stop button"): while it
   listens the button is a big red Stop with a pulsing dot (a still dot for people who ask for less motion) */
.mic-button { display: inline-flex; align-items: center; gap: 8px; }
.mic-button .mic-dot { width: 10px; height: 10px; border-radius: 50%; background: currentColor; opacity: .55; flex: none; }
.button.mic-button.mic-on, .button.quiet.mic-button.mic-on { background: #c62828; border-color: #c62828; color: #fff; font-weight: 700; font-size: 1.05rem;
  min-height: 52px; padding: 0 22px; box-shadow: 0 0 0 4px rgba(198, 40, 40, .18); }
.button.mic-button.mic-on .mic-dot { opacity: 1; background: #fff; animation: mic-pulse 1.2s ease-in-out infinite; }
@keyframes mic-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.6); opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .button.mic-button.mic-on .mic-dot { animation: none; } }
.mic-state { flex-basis: 100%; }
@media (max-width: 559px) { .button.mic-button.mic-on { width: 100%; justify-content: center; } }
.access-form input.mic-minutes { width: 6em; }

/* "Share with the team" at the top of every AI, built and saved report (owner, 10/22/2026: "make it obvious") */
.share-top { margin: 4px 0 14px; display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.share-top .share-status { margin: 0; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.share-panel { flex: 1 1 100%; }
.share-panel > summary.share-button { list-style: none; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.share-panel > summary.share-button::-webkit-details-marker { display: none; }
.share-panel > summary.share-button::before { content: "\21AA"; font-weight: 700; }
.share-panel[open] > summary.share-button { opacity: 0.85; }
.share-panel .share-form { margin-top: 10px; max-width: 640px; }
/* ready-made starts of the report builder */
.build-starts .plain-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.build-starts .plain-list li { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }

/* a table's sort tiles and sort line never print (a pick ticket, a vendor's order copy): the rows print in the order
   chosen (every heading sorts: the owner's rule, 2026-10-23) */
@media print { .sort-tiles, .sort-bar { display: none !important; } }

/* Historical (owner, 2026-10-25; app/routers/history.py, app/history_chart.py): each line in its measure's family color
   (app/metric_colors.py), a second or third measure of a family a darker step of it (lighter in dark mode); solid lines
   read on the left scale (dollars), dashed on the right (pieces, grams and counts); hairline grid; 2px lines; points
   with a ring of the card's color; a hollow point is a period not wholly known */
.hl-line, .hl-pt, .hl-key, .hm { --hc: var(--m, var(--m-none)); }
.hl-shade-1 { --hc: color-mix(in oklab, var(--m, var(--m-none)) 72%, #000); }
.hl-shade-2 { --hc: color-mix(in oklab, var(--m, var(--m-none)) 52%, #000); }
:root[data-theme="dark"] .hl-shade-1 { --hc: color-mix(in oklab, var(--m, var(--m-none)) 70%, #fff); }
:root[data-theme="dark"] .hl-shade-2 { --hc: color-mix(in oklab, var(--m, var(--m-none)) 50%, #fff); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hl-shade-1 { --hc: color-mix(in oklab, var(--m, var(--m-none)) 70%, #fff); }
  :root:not([data-theme="light"]) .hl-shade-2 { --hc: color-mix(in oklab, var(--m, var(--m-none)) 50%, #fff); }
}
.history-chart { position: relative; }
.history-chart figure { margin: 0; position: relative; }
.history-chart svg { display: block; width: 100%; height: auto; overflow: visible; touch-action: pan-y; }
.history-chart svg:focus { outline: 2px solid var(--accent); outline-offset: 2px; }
.hc-narrow { display: none; }
@media (max-width: 699px) { .hc-wide { display: none; } .hc-narrow { display: block; } }
.hc-grid line { stroke: var(--line); stroke-width: 1; }
.hc-zero { stroke: var(--line-strong); stroke-width: 1; }
.hc-axis text, .hc-title { fill: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.hc-narrow .hc-axis text, .hc-narrow .hc-title { font-size: 11px; }
.hc-title { font-weight: 700; }
.hl-line { fill: none; stroke: var(--hc); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.hl-line.hl-dash { stroke-dasharray: 7 5; }
.hl-pt { fill: var(--hc); stroke: var(--panel); stroke-width: 2; }
.hl-pt.hl-open { fill: var(--panel); stroke: var(--hc); stroke-width: 2; }
.hc-cross { stroke: var(--line-strong); stroke-width: 1; pointer-events: none; }
.hc-readout { position: absolute; z-index: 5; min-width: 200px; max-width: min(320px, 90vw); padding: 8px 10px;
  background: var(--panel); color: var(--text); border: 1px solid var(--line-strong); border-radius: 8px;
  box-shadow: var(--shadow); pointer-events: none; font-size: 13px; }
.hc-readout .hc-period { margin: 0 0 6px; font-weight: 700; }
.hc-readout ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.hc-readout li { display: grid; grid-template-columns: 18px auto; column-gap: 8px; align-items: center; }
.hc-readout li .hc-name { grid-column: 2; color: var(--muted); font-size: 12px; }
.hl-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.hl-key { display: inline-block; width: 18px; height: 0; border-top: 3px solid var(--hc); vertical-align: middle;
  margin-right: 8px; }
.hl-key.hl-key-dash { border-top-style: dashed; }
.history-period { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; margin: 0 0 10px; }
.history-custom { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; }
.history-custom.set { padding: 4px 8px; border: 1px solid var(--accent); border-radius: 8px; }
.history-measures { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.history-measures legend { font-weight: 700; padding: 0; margin-bottom: 4px; }
.history-measures { display: grid; gap: 8px; width: 100%; }
.history-measures .hm-section { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.history-measures .hm-head { flex: 0 0 9.5rem; font-weight: 700; font-size: 13px; color: var(--muted); }
@media (max-width: 699px) { .history-measures .hm-head { flex-basis: 100%; } }
.history-measures .hm-preset { font-weight: 700; }
.hl-ready { color: var(--text); }
.hl-ready.attention { color: inherit; }
.hc-message { margin: 0 0 10px; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: 8px;
  background: var(--panel); }
.hc-message p { margin: 0; }
.hc-message p + p { margin-top: 6px; }
.hc-sparse { position: relative; }
.hc-message.hc-over { position: absolute; z-index: 4; left: 50%; top: 40%; transform: translate(-50%, -50%);
  max-width: min(560px, 86%); box-shadow: var(--shadow); text-align: center; }
@media (max-width: 699px) {          /* a phone: above the graph, never over its dots */
  .hc-message.hc-over { position: static; transform: none; max-width: none; box-shadow: none; text-align: left; }
}
.hl-pt.hl-solo { stroke-width: 3; }
.hc-solo-label { fill: var(--text); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.history-measures .hm .tchoice { border-left: 4px solid var(--hc); }
.history-measures label.hm .hm-key { display: inline-block; width: 12px; height: 12px; border-radius: 3px;
  background: var(--hc); margin-right: 6px; vertical-align: -1px; }
.history-table td { vertical-align: top; }
.history-button { float: right; margin: 0 0 8px 12px; }
@media print { .hc-readout, .hc-cross { display: none !important; } }