/* 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, .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); }
.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; }
.topbar-title { display: none; margin-right: auto; line-height: 1.2; }
.topbar-logo { display: block; width: 140px; height: auto; }
.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; }
.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 */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: 10px; }
.card .table-wrap { margin: 0 -1px; }
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; }

/* 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)); }
.tile.sales { --tile: #2f6fed; }
.tile.count { --tile: #7c5cff; }
.tile.today { --tile: #16a34a; }
.tile.flags { --tile: #f0a32f; }
.tile.stock { --tile: #0ea5b7; }
.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) */
.figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 12px; margin: 0 0 18px; }
.figure { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.figure .label { color: var(--muted); font-size: 13px; }
.figure .value { font-size: 1.45rem; font-weight: 800; letter-spacing: -.02em; margin-top: 4px;
                 font-variant-numeric: tabular-nums; }

.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; }
.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; }

@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 { 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 */
th.sortable { padding: 0; }
th.sortable a.sort { display: flex; align-items: center; gap: 4px; min-height: 44px; padding: 10px 12px;
                     color: inherit; text-decoration: none; }
th.sortable.num a.sort { justify-content: flex-end; }
th.sortable a.sort:hover { color: var(--text); }
th.sortable a.sort.on { color: var(--text); }
th.sortable .arrow { font-size: 11px; opacity: .45; }
th.sortable a.sort.on .arrow { opacity: 1; color: var(--accent); }
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; }
}