/* Operations console — design system
   Palette: cool paper background, white sheets, ink-blue text, a deep canopy green for
   primary actions, amber for "due soon", red for "overdue". The one memorable element is
   the deadline ring (.due) that empties as a Metrc deadline approaches. */

@font-face { font-family: "Inter"; src: url("../fonts/Inter-Regular.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/Inter-Medium.woff") format("woff"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/Inter-SemiBold.woff") format("woff"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/Inter-Bold.woff") format("woff"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter Display"; src: url("../fonts/InterDisplay-SemiBold.woff") format("woff"); font-weight: 600; font-style: normal; font-display: swap; }

/* hidden means hidden, whatever display a class gives the element (notices, buttons, keypads scripts reveal) */
[hidden] { display: none !important; }

:root {
  --ink: #17212b;
  --ink-2: #4a5866;
  --ink-3: #5c6874;           /* faint text: 4.8:1 or better on white and every tint */
  --paper: #f1f3ef;
  --sheet: #ffffff;
  --sheet-2: #f8f9f7;
  --rule: #dce1da;
  --rule-strong: #c2c9bf;
  --canopy: #0e6b5e;
  --canopy-dark: #0a4f46;
  --canopy-tint: #def0eb;
  --signal: #a8681a;
  --signal-tint: #fbefd9;
  --alert: #b42318;
  --alert-tint: #fdeceb;
  --info: #2b5c9e;
  --info-tint: #e7eef8;
  --muted-tint: #eceeea;
  --focus: #2b5c9e;
  --radius-panel: 10px;
  --radius-input: 7px;
  --shadow-pop: 0 10px 30px rgba(23, 33, 43, 0.14), 0 2px 6px rgba(23, 33, 43, 0.08);
  --sidebar-w: 236px;
  /* the rest of the colours a theme can change (static/css/themes.css, from app/themes.py) */
  --on-accent: #ffffff;          /* text on canopy: primary buttons, the avatar, done marks */
  --on-alert: #ffffff;           /* text on alert: badges, the overdue ring */
  --on-ink: #ffffff;             /* text on ink: messages */
  --signal-ink: #8a5512;         /* "due soon" text on paper and on signal-tint */
  --canopy-line: #bfd9c9;
  --signal-line: #efd5a8;
  --alert-line: #f0c4bf;
  --info-line: #c9d8ee;
  --ring-track: #e2e6df;
  --row-hover: #fafbf9;
  --placeholder: #9aa5ae;
  --focus-ring: rgba(43, 92, 158, 0.18);
  --topbar-bg: rgba(241, 243, 239, 0.92);
  --backdrop: rgba(23, 33, 43, 0.38);
  --flash-good: #0a4f46;
  --flash-warn: #7a4e12;
  --sidebar-bg: var(--sheet-2);
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%234a5866' stroke-width='1.6'/%3E%3C/svg%3E");
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Inter Display", "Inter", sans-serif;
  --font-num: var(--font-body);  /* big numbers: Cure Room sets a serif */
  --display-weight: 600;         /* page titles */
  --display-size: 1.75rem;
  --display-spacing: -0.012em;
  --num-weight: 600;             /* big numbers */
  --num-scale: 1;                /* and their size: Cure Room's serif ones are bigger */
  --leading: 1.5;
  --density: 1;                  /* spacing: 0.68 compact, 1.32 roomy (data-density on <html>) */
  --link: var(--info);           /* links; a theme can set them apart from info notices */
  --good: var(--canopy);         /* done and OK states; a dark theme keeps them green when its accent isn't */
  --good-ink: var(--canopy-dark);
  --good-tint: var(--canopy-tint);
  --good-line: var(--canopy-line);
  --on-good: var(--on-accent);
  /* a colour pair for each part of the business (Greenhouse's and Studio's chips and boxes; dark looks bring their own) */
  --tone-today-bg: #e0f0e5; --tone-today: #2f7d4f;
  --tone-metrc-bg: #fbefd9; --tone-metrc: #8f5a0c;
  --tone-deadlines-bg: #e6edf8; --tone-deadlines: #3a5a8c;
  --tone-inventory-bg: #e4ecfa; --tone-inventory: #2b5aa8;
  --tone-cultivation-bg: #e1f2e6; --tone-cultivation: #23653e;
  --tone-manufacturing-bg: #e9edf3; --tone-manufacturing: #46587a;
  --tone-quality-bg: #ede7fa; --tone-quality: #6243ad;
  --tone-distribution-bg: #fcebdd; --tone-distribution: #a84f16;
  --tone-finance-bg: #f8efd3; --tone-finance: #7f6210;
  --tone-compliance-bg: #f9e5e8; --tone-compliance: #a8364a;
  --tone-reports-bg: #e7ecf1; --tone-reports: #455468;
  --tone-team-bg: #dcf1ee; --tone-team: #1d6f66;
  --tone-settings-bg: #e3e8e2; --tone-settings: #4d5d55;
  font-size: 15px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--font-body);
  font-feature-settings: "cv05" 1, "ss01" 1; line-height: var(--leading);
}
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
/* links in running text are underlined too, so they don't depend on colour alone (WCAG 1.4.1) */
:is(p, dd, label, .help, .notice-body, .flash, .legal-doc, .doc-links, .text-links, .help-guide) a:not(.btn, .chip, .tag-link, .cell-main, .row-link) {
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.15em;
}
img, svg { max-width: 100%; }
h1, h2, h3, h4 { margin: 0; line-height: 1.25; }
h1 { font-family: var(--font-display); font-weight: var(--display-weight); font-size: var(--display-size); letter-spacing: var(--display-spacing); }
h2 { font-size: 1.125rem; font-weight: 600; }
h3 { font-size: 1rem; font-weight: 600; }
p { margin: 0 0 0.75rem; }
small, .small { font-size: 0.8667rem; }
.muted { color: var(--ink-2); }
.faint { color: var(--ink-3); }
.num, td.num, th.num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.nowrap { white-space: nowrap; }
.mono { font-variant-numeric: tabular-nums slashed-zero; font-feature-settings: "zero" 1, "tnum" 1; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
/* hidden on screen, read by screen readers; !important so no layout rule (rows that open from anywhere) can show it */
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important;
  overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; border: 0 !important; }
hr { border: 0; border-top: 1px solid var(--rule); margin: 1.25rem 0; }

/* ---------------------------------------------------------------- app shell */
.app { display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: 100vh; }
.sidebar {
  position: sticky; top: 0; height: 100vh; overflow-y: auto; background: var(--sidebar-bg);
  border-right: 1px solid var(--rule); padding: 18px 12px 24px; display: flex; flex-direction: column;
}
.brand { display: flex; align-items: center; gap: 10px; padding: 2px 8px 16px; color: var(--ink); text-decoration: none; }
.brand:hover { text-decoration: none; }
.brand-mark { width: 30px; height: 30px; flex: none; }
.brand-name { font-weight: 600; font-size: 0.95rem; line-height: 1.2; }
.brand-sub { display: block; font-weight: 400; font-size: 0.8rem; color: var(--ink-3); }
/* Today, Metrc to-do and Deadlines always show; each area under them is a section that folds open (details), the one
   holding the current page open. Top-level rows are medium weight; a section's links sit on a guide line under it. */
.side-nav { display: flex; flex-direction: column; }
.nav-top { margin-bottom: 12px; }
.side-nav > .nav-link, .nav-top > .nav-link { color: var(--ink); font-weight: 500; gap: 10px; }
.nav-label { flex: 1; min-width: 0; }
/* each top-level row has its icon; grey, green when it holds the page you're on */
.nav-icon { flex: none; color: var(--ink-3); }
.nav-link:hover .nav-icon, .nav-section-head:hover .nav-icon { color: var(--ink-2); }
.nav-link.active .nav-icon, .nav-section.is-current > .nav-section-head .nav-icon { color: var(--canopy); }
.nav-section-head {
  display: flex; align-items: center; gap: 10px; padding: calc(6px * var(--density)) 10px; margin: 1px 0; border-radius: 7px;
  color: var(--ink); font-size: 0.9333rem; font-weight: 500; cursor: pointer; list-style: none; user-select: none;
}
.nav-section-head::-webkit-details-marker { display: none; }
.nav-section-head:hover { background: var(--muted-tint); }
.nav-section-name { flex: 1; min-width: 0; }
.nav-chevron { flex: none; color: var(--ink-3); transition: transform 0.15s ease; }
.nav-section[open] > .nav-section-head .nav-chevron { transform: rotate(90deg); }
.nav-section[open] > .nav-section-head .nav-badge { display: none; }      /* its link shows the count */
/* the guide line runs down from the middle of the section's icon; links line up with the section's name */
.nav-section-items { margin: 0 0 8px 17px; padding-left: 8px; border-left: 1px solid var(--rule); }
.nav-section-items .nav-link.active::before { left: -10px; top: 4px; bottom: 4px; border-radius: 3px; }
@supports (interpolate-size: allow-keywords) {
  /* opening slides the links in where the browser can animate to auto height */
  .side-nav { interpolate-size: allow-keywords; }
  .nav-section::details-content { block-size: 0; overflow-y: clip; transition: block-size 0.18s ease, content-visibility 0.18s allow-discrete; }
  .nav-section[open]::details-content { block-size: auto; }
}
.nav-link {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: calc(6px * var(--density)) 10px; margin: 1px 0;
  border-radius: 7px; color: var(--ink-2); font-size: 0.9333rem; text-decoration: none; position: relative;
}
.nav-link:hover { background: var(--muted-tint); color: var(--ink); text-decoration: none; }
.nav-link.active { background: var(--canopy-tint); color: var(--canopy-dark); font-weight: 600; }
.nav-link.active::before { content: ""; position: absolute; left: -12px; top: 6px; bottom: 6px; width: 3px; border-radius: 0 3px 3px 0; background: var(--canopy); }
.nav-badge { min-width: 22px; padding: 0 7px; border-radius: 999px; background: var(--alert); color: var(--on-alert); font-size: 0.75rem; font-weight: 600; line-height: 20px; text-align: center; font-variant-numeric: tabular-nums; }
.nav-badge.is-calm { background: var(--good-tint); color: var(--good-ink); box-shadow: inset 0 0 0 1px var(--good-line); }
.sidebar-foot { margin-top: auto; padding: 16px 10px 0; font-size: 0.8rem; color: var(--ink-3); }

.main { min-width: 0; display: flex; flex-direction: column; }
.topbar {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 14px; padding: 10px 32px;
  background: var(--topbar-bg); backdrop-filter: blur(6px); border-bottom: 1px solid var(--rule);
}
.topbar .menu-toggle { display: none; }
.license-name { font-weight: 500; font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.license-switch { display: flex; align-items: center; gap: 8px; min-width: 0; }
.license-switch label { font-size: 0.8rem; color: var(--ink-3); white-space: nowrap; }
.license-switch select { max-width: 320px; font-weight: 500; }
.search-box { flex: 1; max-width: 520px; position: relative; margin-left: auto; }
.search-box input, .search-box input[type="search"] { width: 100%; padding-left: 34px; }
.search-box svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--ink-3); pointer-events: none; }
.topbar-help { display: inline-flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 8px; color: var(--ink-2); font-size: 0.9rem; font-weight: 500; white-space: nowrap; }
.topbar-help:hover { background: var(--muted-tint); color: var(--ink); text-decoration: none; }
.topbar-help[aria-current] { color: var(--canopy-dark); }
.user-menu { position: relative; z-index: 30; }
.user-menu summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 8px; }
.user-menu summary::-webkit-details-marker { display: none; }
.user-menu summary:hover { background: var(--muted-tint); }
.avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--canopy); color: var(--on-accent); display: grid; place-items: center; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.02em; }
.menu-pop { position: absolute; right: 0; top: calc(100% + 6px); min-width: 220px; background: var(--sheet); border: 1px solid var(--rule); border-radius: 10px; box-shadow: var(--shadow-pop); padding: 6px; }
.menu-pop a, .menu-pop button { display: block; width: 100%; text-align: left; padding: 8px 10px; border-radius: 6px; color: var(--ink); background: none; border: 0; font: inherit; cursor: pointer; }
.menu-pop a:hover, .menu-pop button:hover { background: var(--muted-tint); text-decoration: none; }
.menu-pop .menu-meta { padding: 8px 10px 10px; border-bottom: 1px solid var(--rule); margin-bottom: 4px; font-size: 0.85rem; color: var(--ink-2); }

.content { padding: calc(26px * var(--density)) 32px 64px; max-width: 1280px; width: 100%; }
.content.narrow { max-width: 860px; }

/* ---------------------------------------------------------------- page header */
.crumbs { font-size: 0.8667rem; color: var(--ink-3); margin-bottom: 6px; display: flex; flex-wrap: wrap; gap: 6px; }
.crumbs a { color: var(--ink-2); }
.crumbs span.sep { color: var(--ink-3); }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.page-head .lede { color: var(--ink-2); margin: 6px 0 0; max-width: 72ch; }
.page-head .actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.title-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* ---------------------------------------------------------------- panels & layout */
.panel { background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--radius-panel); }
.panel + .panel, .panel + .grid, .grid + .panel, .section + .section { margin-top: calc(18px * var(--density)); }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: calc(14px * var(--density)) 18px; border-bottom: 1px solid var(--rule); }
.panel-head h2 { font-size: 1rem; }
.panel-head .hint { font-size: 0.85rem; color: var(--ink-3); }
.panel-body { padding: calc(16px * var(--density)) 18px; }
.panel-body > :last-child { margin-bottom: 0; }
.panel-foot { padding: 12px 18px; border-top: 1px solid var(--rule); background: var(--sheet-2); border-radius: 0 0 var(--radius-panel) var(--radius-panel); }
.pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 12px 18px; border-top: 1px solid var(--rule); }
.pager-links { display: flex; align-items: center; gap: 10px; }
.grid { display: grid; gap: calc(18px * var(--density)); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-main { grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); align-items: start; }
.stack > * + * { margin-top: calc(18px * var(--density)); }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.spread { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }

/* ---------------------------------------------------------------- facts (record details) */
.facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px 20px; margin: 0; }
.facts div { min-width: 0; }
.facts dt { font-size: 0.8rem; color: var(--ink-3); margin-bottom: 2px; }
.facts dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
.facts.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ---------------------------------------------------------------- tables */
.table-wrap { overflow-x: auto; }
table.table { width: 100%; border-collapse: collapse; font-size: 0.9333rem; }
.table th { text-align: left; font-weight: 600; font-size: 0.8rem; color: var(--ink-2); padding: calc(10px * var(--density)) 14px; border-bottom: 1px solid var(--rule); background: var(--sheet-2); white-space: nowrap; }
.table td { padding: calc(10px * var(--density)) 14px; border-bottom: 1px solid var(--rule); vertical-align: middle; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover td { background: var(--row-hover); }
.table tr.is-overdue td:first-child { box-shadow: inset 3px 0 0 var(--alert); }
.table tr.is-warn td:first-child { box-shadow: inset 3px 0 0 var(--signal); }
.table .cell-main { font-weight: 500; color: var(--ink); }
.table .cell-sub { display: block; font-size: 0.8rem; color: var(--ink-3); }
.table td.check, .table th.check { width: 36px; padding-right: 0; }
.table tfoot td { font-weight: 600; background: var(--sheet-2); }
.table-compact td, .table-compact th { padding: 7px 10px; }
.panel > .table-wrap:first-child table th:first-child { border-top-left-radius: var(--radius-panel); }
.panel > .table-wrap:first-child table th:last-child { border-top-right-radius: var(--radius-panel); }
.row-link { color: inherit; }
.row-link:hover { text-decoration: none; color: var(--link); }

/* ---------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 8px 14px; min-height: 38px;
  border-radius: var(--radius-input); border: 1px solid var(--rule-strong); background: var(--sheet); color: var(--ink);
  font: inherit; font-weight: 500; font-size: 0.9333rem; cursor: pointer; text-decoration: none; white-space: nowrap; line-height: 1.2;
}
.btn:hover { background: var(--sheet-2); border-color: var(--ink-3); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--canopy); border-color: var(--canopy); color: var(--on-accent); }
.btn-primary:hover { background: var(--canopy-dark); border-color: var(--canopy-dark); color: var(--on-accent); }
.btn-danger { color: var(--alert); border-color: var(--alert-line); }
.btn-danger:hover { background: var(--alert-tint); border-color: var(--alert); }
.btn-danger.solid { background: var(--alert); color: var(--on-alert); border-color: var(--alert); }
.btn-quiet { border-color: transparent; background: transparent; color: var(--link); padding-left: 8px; padding-right: 8px; }
.btn-quiet:hover { background: var(--info-tint); border-color: transparent; }
.btn-sm { min-height: 30px; padding: 4px 10px; font-size: 0.8667rem; }
.btn-lg { min-height: 48px; padding: 12px 22px; font-size: 1rem; }
.btn[disabled], .btn.disabled { opacity: 0.5; pointer-events: none; }
.btn-block { width: 100%; }
.inline-form { display: inline; }

/* ---------------------------------------------------------------- forms */
label { font-weight: 500; font-size: 0.9rem; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], input[type=datetime-local],
input[type=search], input[type=tel], input[type=file], select, textarea {
  width: 100%; padding: 8px 11px; min-height: 38px; border: 1px solid var(--rule-strong); border-radius: var(--radius-input);
  background: var(--sheet); color: var(--ink); font: inherit; font-size: 0.9333rem;
}
textarea { min-height: 88px; resize: vertical; line-height: 1.45; }
select { appearance: none; background-image: var(--select-arrow); background-repeat: no-repeat; background-position: right 10px center; padding-right: 30px; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px var(--focus-ring); }
input[type=checkbox], input[type=radio] { width: 17px; height: 17px; accent-color: var(--canopy); vertical-align: middle; margin: 0; }
input[type=file] { padding: 6px; }
input::placeholder, textarea::placeholder { color: var(--placeholder); }
.form-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: calc(16px * var(--density)) 18px; }
.form-grid > .field { grid-column: span 6; }
.form-grid > .field.half { grid-column: span 3; }
.form-grid > .field.third { grid-column: span 2; }
.form-grid > .form-section { grid-column: span 6; margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--rule); font-weight: 600; }
.form-grid > .check-field { grid-column: span 6; }
.form-grid > .waive-box, .form-grid > .full { grid-column: 1 / -1; }
.form-grid > .half-slot { grid-column: span 3; }
.field { display: flex; flex-direction: column; gap: 5px; }
.field .help { font-size: 0.8333rem; color: var(--ink-3); }
.field .error { font-size: 0.8667rem; color: var(--alert); font-weight: 500; }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--alert); }
.field .req { color: var(--alert); margin-left: 2px; }
.check-field { display: flex; gap: 10px; align-items: flex-start; padding: 2px 0; }
.check-field label { font-weight: 500; }
.check-field .help { display: block; font-weight: 400; }
.input-group { display: flex; }
.input-group > input { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.input-group > select, .input-group > .addon { width: auto; border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: -1px; }
.addon { display: inline-flex; align-items: center; padding: 0 12px; border: 1px solid var(--rule-strong); background: var(--sheet-2); color: var(--ink-2); border-radius: var(--radius-input); font-size: 0.9rem; white-space: nowrap; }
.form-actions { display: flex; gap: 10px; align-items: center; margin-top: 22px; flex-wrap: wrap; }
.form-actions .spacer { flex: 1; }
.form-errors { background: var(--alert-tint); color: var(--alert); border: 1px solid var(--alert-line); border-radius: 8px; padding: 10px 14px; margin-bottom: 16px; font-weight: 500; }
.filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 14px; }
.filters .field { min-width: 150px; }
.filters input[type=search] { min-width: 240px; }
.tag-input { font-feature-settings: "zero" 1, "tnum" 1; letter-spacing: 0.04em; text-transform: uppercase; }
.tag-input.is-valid { border-color: var(--canopy); }
.tag-hint { font-size: 0.8rem; color: var(--ink-3); min-height: 1.1em; }
.tag-hint.ok { color: var(--good); }

/* camera button beside UID boxes: read the Metrc tag from a photo */
.tag-cam { flex: none; min-width: 46px; padding: 0 12px; margin-left: -1px; border-radius: 0; color: var(--ink-2); }
.tag-cam:hover { color: var(--canopy); }
.input-group > .tag-cam:last-child { border-top-right-radius: var(--radius-input); border-bottom-right-radius: var(--radius-input); }
.input-group > .tag-cam + .btn { margin-left: -1px; border-top-left-radius: 0; border-bottom-left-radius: 0; }
.tag-cam.is-busy { opacity: 0.55; cursor: progress; }
.tag-cam-status { display: block; font-size: 0.8rem; margin-top: 3px; color: var(--ink-2); }
.tag-cam-status.ok { color: var(--good); }
.tag-cam-status.bad { color: var(--alert); }
.tag-cam-status[hidden] { display: none; }
.search-box input, .search-box input[type="search"] { padding-right: 46px; }
.search-box .tag-cam-search { position: absolute; right: 3px; top: 50%; transform: translateY(-50%); min-height: 0; height: 32px;
  min-width: 0; padding: 0 9px; border: 0; border-radius: 6px; background: transparent; margin: 0; }
.search-box .tag-cam-status { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 30; padding: 6px 10px;
  background: var(--sheet); border: 1px solid var(--rule); border-radius: 8px; box-shadow: 0 4px 14px rgba(23, 33, 43, 0.12); }
.tag-cam-inline svg { vertical-align: -4px; }
.tag-cam-picker { position: fixed; left: -9999px; top: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.tag-cam.tag-cam-wide { align-self: flex-start; min-width: 0; margin: 0; padding: 0 12px; border-radius: var(--radius-input); color: var(--ink); }
.search-box .tag-cam-search svg { position: static; transform: none; color: inherit; }
.input-group > input[readonly] + .tag-cam, .input-group > input:disabled + .tag-cam { display: none; }

/* scale button beside weight boxes (devices.js: Chrome or Edge on a computer, with a USB scale) */
.scale-btn { flex: none; min-width: 46px; padding: 0 12px; margin-left: -1px; border-radius: 0; color: var(--ink-2); }
.scale-btn:hover { color: var(--canopy); }
.scale-btn[hidden] { display: none; }
.input-group > .scale-btn:last-child { border-top-right-radius: var(--radius-input); border-bottom-right-radius: var(--radius-input); }
.input-group > :is(select, .addon):has(+ .scale-btn:not([hidden])) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.scale-note { display: block; margin-top: 3px; color: var(--ink-2); }
.scale-note.text-bad { color: var(--alert); }
/* entries typed on this device that the server didn't have yet (devices.js, offline forms) */
input.is-restored, textarea.is-restored, select.is-restored { background: var(--signal-tint); border-color: var(--signal); }
/* a count: scanning a whole shelf */
.bulk-scan > summary { cursor: pointer; font-weight: 500; color: var(--link); width: fit-content; }
.bulk-scan-body { margin-top: 10px; max-width: 640px; }
.bulk-scan textarea { text-transform: uppercase; letter-spacing: 0.04em; font-feature-settings: "zero" 1, "tnum" 1; }
.bulk-unknown { margin: 6px 0 0; padding-left: 1.2em; max-height: 9.5em; overflow: auto; }
.table tr.is-scanned td:first-child { box-shadow: inset 3px 0 0 var(--good); }
.install-steps { margin: 6px 0 0; padding-left: 1.3em; }
.install-steps li + li { margin-top: 4px; }
.install-panel h2.h3 { font-size: 1rem; margin: 0 0 4px; }

/* repeater rows */
.rows { display: flex; flex-direction: column; gap: 10px; }
.rows .row-item { display: grid; gap: 10px; align-items: end; padding: 12px; border: 1px dashed var(--rule-strong); border-radius: 9px; background: var(--sheet-2); }

/* ---------------------------------------------------------------- badges, tags, chips */
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; font-size: 0.8rem; font-weight: 600; white-space: nowrap; line-height: 1.5; }
.badge-good { background: var(--good-tint); color: var(--good-ink); }
.badge-warn { background: var(--signal-tint); color: var(--signal-ink); }
.badge-bad { background: var(--alert-tint); color: var(--alert); }
.badge-info { background: var(--info-tint); color: var(--info); }
.badge-neutral { background: var(--muted-tint); color: var(--ink-2); }
.badge-muted { background: transparent; color: var(--ink-3); border: 1px solid var(--rule); }
.tag { font-feature-settings: "zero" 1, "tnum" 1; white-space: nowrap; letter-spacing: 0.02em; }
.tag-head { color: var(--ink-3); font-weight: 400; }
.tag-tail { color: var(--ink); font-weight: 600; }
.tag-link:hover .tag-tail { color: var(--link); }
.tag-link:hover { text-decoration: none; }
.tag-big { font-size: 1.35rem; }
.chip-sm { padding: 1px 8px; font-size: 0.78rem; vertical-align: 1px; }
.inputs-from-steps { border-bottom: 1px solid var(--rule); }
.confirm-input { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px; padding: 10px 12px; border: 1px dashed var(--rule-strong);
  border-radius: 9px; background: var(--sheet-2); }
.confirm-input-what { flex: 1 1 260px; align-self: center; }
.confirm-input-amount { flex: 0 1 220px; }
.confirm-input-amount .field { margin: 0; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border: 1px solid var(--rule); border-radius: 999px; font-size: 0.85rem; background: var(--sheet); color: var(--ink-2); }
.pill-count { display: inline-block; min-width: 20px; padding: 0 6px; border-radius: 999px; background: var(--muted-tint); color: var(--ink-2); font-size: 0.75rem; font-weight: 600; text-align: center; margin-left: 4px; }

/* deadline ring — the signature element */
.due { display: inline-flex; align-items: center; gap: 7px; font-size: 0.85rem; font-weight: 500; white-space: nowrap; }
.due-ring { --deg: 360deg; --c: var(--canopy); width: 16px; height: 16px; border-radius: 50%; flex: none;
  background: conic-gradient(var(--c) var(--deg), var(--ring-track) 0); -webkit-mask: radial-gradient(circle, transparent 4.2px, #000 4.6px); mask: radial-gradient(circle, transparent 4.2px, #000 4.6px); }
.due-ok { color: var(--ink-2); }
.due-soon { color: var(--signal-ink); }
.due-ring.deg-0 { --deg: 0deg; }
.due-ring.deg-15 { --deg: 15deg; }
.due-ring.deg-30 { --deg: 30deg; }
.due-ring.deg-45 { --deg: 45deg; }
.due-ring.deg-60 { --deg: 60deg; }
.due-ring.deg-75 { --deg: 75deg; }
.due-ring.deg-90 { --deg: 90deg; }
.due-ring.deg-105 { --deg: 105deg; }
.due-ring.deg-120 { --deg: 120deg; }
.due-ring.deg-135 { --deg: 135deg; }
.due-ring.deg-150 { --deg: 150deg; }
.due-ring.deg-165 { --deg: 165deg; }
.due-ring.deg-180 { --deg: 180deg; }
.due-ring.deg-195 { --deg: 195deg; }
.due-ring.deg-210 { --deg: 210deg; }
.due-ring.deg-225 { --deg: 225deg; }
.due-ring.deg-240 { --deg: 240deg; }
.due-ring.deg-255 { --deg: 255deg; }
.due-ring.deg-270 { --deg: 270deg; }
.due-ring.deg-285 { --deg: 285deg; }
.due-ring.deg-300 { --deg: 300deg; }
.due-ring.deg-315 { --deg: 315deg; }
.due-ring.deg-330 { --deg: 330deg; }
.due-ring.deg-345 { --deg: 345deg; }
.due-ring.deg-360 { --deg: 360deg; }
.due-soon .due-ring { --c: var(--signal); }
.due-urgent { color: var(--alert); }
.due-urgent .due-ring { --c: var(--alert); }
.due-late { color: var(--alert); font-weight: 600; }
.due-late .due-ring { --c: var(--alert); background: var(--alert); -webkit-mask: none; mask: none; position: relative; }
.due-late .due-ring::after { content: "!"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--on-alert); font-size: 11px; font-weight: 700; }
.due-done { color: var(--good); }
.due-done .due-ring { --c: var(--good); }

/* ---------------------------------------------------------------- tabs */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--rule); margin-bottom: 16px; overflow-x: auto; }
.tabs a { padding: 9px 14px; color: var(--ink-2); font-weight: 500; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.tabs a:hover { color: var(--ink); text-decoration: none; }
.tabs a.active { color: var(--canopy-dark); border-bottom-color: var(--canopy); }

/* ---------------------------------------------------------------- notices */
.notice { display: flex; gap: 12px; padding: 12px 16px; border-radius: 9px; border: 1px solid var(--rule); background: var(--sheet); margin-bottom: 16px; align-items: flex-start; }
.notice .notice-body { flex: 1; }
.notice .notice-title { font-weight: 600; margin-bottom: 2px; }
.notice-info { background: var(--info-tint); border-color: var(--info-line); }
.notice-warn { background: var(--signal-tint); border-color: var(--signal-line); }
.notice-bad { background: var(--alert-tint); border-color: var(--alert-line); }
.notice-good { background: var(--good-tint); border-color: var(--good-line); }
.notice p:last-child { margin-bottom: 0; }

.flash-stack { position: fixed; right: 20px; bottom: 20px; z-index: 100; display: flex; flex-direction: column; gap: 8px; max-width: 420px; }
.flash { padding: 12px 40px 12px 16px; border-radius: 10px; box-shadow: var(--shadow-pop); background: var(--ink); color: var(--on-ink); position: relative; font-size: 0.9333rem; }
.flash-success { background: var(--flash-good); }
.flash-error { background: var(--alert); }
.flash-warning { background: var(--flash-warn); }
.flash button { position: absolute; right: 8px; top: 8px; background: none; border: 0; color: inherit; font-size: 18px; cursor: pointer; opacity: 0.8; }

/* ---------------------------------------------------------------- empty states */
.empty { text-align: center; padding: 42px 24px; color: var(--ink-2); }
.empty h3 { color: var(--ink); margin-bottom: 6px; }
.empty p { max-width: 52ch; margin: 0 auto 14px; }

/* ---------------------------------------------------------------- timeline (history, ledger) */
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { position: relative; padding: 0 0 calc(14px * var(--density)) 22px; }
.timeline li::before { content: ""; position: absolute; left: 5px; top: 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--rule-strong); }
.timeline li::after { content: ""; position: absolute; left: 8px; top: 16px; bottom: 0; width: 1px; background: var(--rule); }
.timeline li:last-child::after { display: none; }
.timeline .t-when { font-size: 0.8rem; color: var(--ink-3); }
.timeline .t-what { font-size: 0.9333rem; }

/* ---------------------------------------------------------------- stat line (dashboard counts) */
.counts { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 0; }
.count-cell { padding: calc(14px * var(--density)) 18px; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); color: var(--ink); text-decoration: none; display: block; position: relative; }
.count-cell:hover { background: var(--sheet-2); text-decoration: none; }
.count-icon { position: absolute; top: 16px; right: 16px; color: var(--ink-3); }   /* the sidebar section it opens */
.count-cell:has(.count-icon) .n { padding-right: 24px; }
.count-cell .n { font-family: var(--font-num); font-size: calc(1.5rem * var(--num-scale)); font-weight: var(--num-weight); font-variant-numeric: tabular-nums; line-height: 1.2; }
.count-cell .l { font-size: 0.85rem; color: var(--ink-2); }
.count-cell.alert .n { color: var(--alert); }
.count-cell.warn .n { color: var(--signal); }

/* attention list */
.attention { list-style: none; margin: 0; padding: 0; }
.attention li { display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: calc(11px * var(--density)) 18px; border-bottom: 1px solid var(--rule); }
.attention li:last-child { border-bottom: 0; }
.attention .a-title { font-weight: 500; }
.attention .a-detail { font-size: 0.8333rem; color: var(--ink-3); }
/* A row that leads somewhere opens from anywhere in it, like the In progress boxes: its title link stretches over the
   row (still one link, so a screen reader hears just the title), and any other button or link in the row sits above
   it and keeps working. The same for the onboarding checklist's steps. */
.attention li, .checklist li { position: relative; }
.attention :is(a.a-title, .a-title > a)::after, .checklist li > div > a:first-child::after { content: ""; position: absolute; inset: 0; }
.attention li:has(:is(a.a-title, .a-title > a)):hover, .checklist li:has(> div > a:first-child):hover { background: var(--sheet-2); }
.attention > li:last-child, .checklist > li:last-child { border-radius: 0 0 9px 9px; }   /* the highlight keeps the panel's corners */
.attention li :is(a, button, input, select, textarea, label, summary):not(.a-title, .a-title > a) { position: relative; z-index: 1; }
.attention :is(a.a-title, .a-title > a):focus-visible, .checklist li > div > a:first-child:focus-visible { outline: none; }
.attention li:has(:is(a.a-title, .a-title > a):focus-visible), .checklist li:has(> div > a:first-child:focus-visible) {
  outline: 2px solid var(--focus); outline-offset: -2px; border-radius: 6px;
}

/* checklist (onboarding, QA) */
.checklist { list-style: none; margin: 0; padding: 0; }
.checklist li { display: flex; gap: 12px; padding: calc(10px * var(--density)) 18px; border-bottom: 1px solid var(--rule); align-items: flex-start; }
.checklist li:last-child { border-bottom: 0; }
.check-dot { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--rule-strong); flex: none; margin-top: 1px; display: grid; place-items: center; }
.check-dot.done { background: var(--good); border-color: var(--good); }
.check-dot.done::after { content: ""; width: 9px; height: 5px; border-left: 2px solid var(--on-good); border-bottom: 2px solid var(--on-good); transform: rotate(-45deg) translate(1px, -1px); }
.checklist a { font-weight: 500; }   /* set apart from the hint under it */
.checklist .done-text { color: var(--ink-3); text-decoration: line-through; }
.progress { height: 6px; border-radius: 999px; background: var(--muted-tint); overflow: hidden; }
.progress > span { display: block; height: 100%; background: var(--canopy); border-radius: 999px; }

/* ---------------------------------------------------------------- dialogs */
dialog { border: 0; padding: 0; border-radius: 12px; box-shadow: var(--shadow-pop); width: min(560px, calc(100vw - 32px)); color: var(--ink); }
dialog::backdrop { background: var(--backdrop); }
.dialog-head { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--rule); }
.dialog-body { padding: 18px 20px; }
.dialog-foot { padding: 14px 20px; border-top: 1px solid var(--rule); display: flex; justify-content: flex-end; gap: 10px; background: var(--sheet-2); border-radius: 0 0 12px 12px; }
.dialog-close { background: none; border: 0; font-size: 22px; line-height: 1; cursor: pointer; color: var(--ink-3); padding: 4px 8px; }
.dialog-wide { width: min(820px, calc(100vw - 32px)); }

/* ---------------------------------------------------------------- copy fields (Metrc instructions) */
.copy-list { display: grid; grid-template-columns: minmax(130px, 220px) minmax(0, 1fr) auto; border: 1px solid var(--rule); border-radius: 9px; overflow: hidden; }
.copy-list > div { padding: 9px 14px; border-bottom: 1px solid var(--rule); }
.copy-list > div:nth-last-child(-n+3) { border-bottom: 0; }
.copy-list .k { color: var(--ink-2); font-size: 0.9rem; background: var(--sheet-2); }
.copy-list .v { font-weight: 500; overflow-wrap: anywhere; font-feature-settings: "zero" 1, "tnum" 1; }
.copy-btn { font-size: 0.8rem; padding: 2px 9px; min-height: 26px; }
ol.steps { margin: 0; padding-left: 20px; }
ol.steps li { margin-bottom: 6px; }

/* ---------------------------------------------------------------- batch record execution */
.step-card { border: 1px solid var(--rule); border-radius: 10px; background: var(--sheet); }
.step-card + .step-card { margin-top: 12px; }
.step-card.is-done { background: var(--sheet-2); }
.step-card.is-active { border-color: var(--canopy); box-shadow: 0 0 0 3px var(--canopy-tint); }
.step-num { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 600; background: var(--muted-tint); color: var(--ink-2); flex: none; font-variant-numeric: tabular-nums; }
.is-done .step-num { background: var(--good); color: var(--on-good); }
.timer { font-variant-numeric: tabular-nums; font-weight: 600; }
.signature { font-family: "Inter Display", "Inter", sans-serif; font-weight: 600; letter-spacing: 0.04em; color: var(--info); }

/* ---------------------------------------------------------------- auth pages */
.auth-wrap { min-height: 100vh; display: grid; place-items: center; padding: 32px 16px; }
.auth-card { width: 100%; max-width: 420px; }
.auth-card.wide { max-width: 860px; }
.auth-brand { display: flex; gap: 10px; align-items: center; margin-bottom: 22px; }

/* ---------------------------------------------------------------- misc */
.kbd { display: inline-block; padding: 0 6px; border: 1px solid var(--rule-strong); border-bottom-width: 2px; border-radius: 5px; font-size: 0.8rem; color: var(--ink-2); background: var(--sheet); }
.divider-label { display: flex; align-items: center; gap: 10px; color: var(--ink-3); font-size: 0.85rem; margin: 18px 0 10px; }
.divider-label::after { content: ""; flex: 1; border-top: 1px solid var(--rule); }
.text-good { color: var(--good); }
.text-bad { color: var(--alert); }
.text-warn { color: var(--signal-ink); }
/* ---------------------------------------------------------------- one-off layout (no inline styles)
   Pages carry these classes instead of style="…" attributes, so the Content-Security-Policy can refuse inline
   styles. Each wins like an inline style did (!important), and sits before the !important helpers below. */
.u-addon-left { border-radius: 7px 0 0 7px !important; margin-right: -1px !important; }
.u-bare { border: 0 !important; padding: 0 !important; margin: 0 !important; }
.u-big-number { font-family: var(--font-num); font-size: calc(1.6rem * var(--num-scale)) !important; font-weight: var(--num-weight) !important; line-height: 1.2; }
.u-block { display: block !important; }
.u-border-0 { border: 0 !important; }
.u-border-alert { border-color: var(--alert) !important; }
.u-border-canopy { border-color: var(--canopy) !important; }
.u-center { text-align: center !important; }
.u-code-lg { font-size: 1.15rem !important; letter-spacing: 0.04em !important; }
.u-flex-1 { flex: 1 !important; }
.u-gap-10 { gap: 10px !important; }
.u-gap-28 { gap: 28px !important; }
.u-gap-6 { gap: 6px !important; }
.u-grid-five { grid-template-columns: 2fr 1fr 1.6fr 1fr auto !important; }
.u-grid-invoice-lines { grid-template-columns: minmax(150px,1.2fr) minmax(200px,2fr) minmax(120px,1fr) 100px 80px 110px 100px auto !important; }
.u-grid-label-value-action { grid-template-columns: 160px 1fr auto !important; }
.u-grid-main-aside { grid-template-columns: 1fr auto !important; }
.u-grid-order-lines { grid-template-columns: minmax(220px,2fr) 120px 130px 120px minmax(140px,1.2fr) auto !important; }
.u-grid-receipt-lines { grid-template-columns: minmax(230px,2fr) minmax(180px,1.6fr) 130px 130px auto !important; }
.u-grid-po-lines { grid-template-columns: minmax(220px,2fr) 120px 130px minmax(160px,1.4fr) auto !important; }
.u-grid-step-inputs { grid-template-columns: minmax(160px,1.6fr) 150px 70px 80px 80px minmax(120px,1.2fr) minmax(110px,1fr) 100px 112px minmax(150px,1.2fr) auto !important; }
.u-grid-wide-lines { grid-template-columns: minmax(200px,2fr) minmax(150px,1.2fr) 90px 120px 110px 120px minmax(120px,1fr) auto !important; }
.u-indent-0 { margin-left: 0px !important; }
.u-indent-1 { margin-left: 14px !important; }
.u-indent-2 { margin-left: 28px !important; }
.u-indent-3 { margin-left: 42px !important; }
.u-indent-4 { margin-left: 56px !important; }
.u-indent-5 { margin-left: 70px !important; }
.u-indent-6 { margin-left: 84px !important; }
.u-indent-7 { margin-left: 98px !important; }
.u-indent-8 { margin-left: 112px !important; }
.u-indent-list { padding-left: 18px !important; }
.u-input-right { border-radius: 0 7px 7px 0 !important; }
.u-items-center { align-items: center !important; }
.u-items-start { align-items: flex-start !important; }
.u-label { font-weight: 500 !important; font-size: 0.9rem !important; margin-bottom: 4px !important; }
.u-mb-10 { margin-bottom: 10px !important; }
.u-minw-170 { min-width: 170px !important; }
.u-minw-320 { min-width: 320px !important; }
.u-mt-6 { margin-top: 6px !important; }
.u-mt-8 { margin-top: 8px !important; }
.u-mt-n10 { margin-top: -10px !important; }
.u-mw-360 { max-width: 360px !important; }
.u-mw-380 { max-width: 380px !important; }
.u-mw-420 { max-width: 420px !important; }
.u-mw-520 { max-width: 520px !important; }
.u-mw-560 { max-width: 560px !important; }
.u-mw-640 { max-width: 640px !important; }
.u-normal { font-weight: 400 !important; }
.u-one-col { grid-template-columns: 1fr !important; }
.u-pad-14-18-0 { padding: 14px 18px 0 !important; }
.u-pb-0 { padding-bottom: 0 !important; }
.u-pb-6 { padding-bottom: 6px !important; }
.u-pct-0 { width: 0% !important; }
.u-pct-10 { width: 10% !important; }
.u-pct-100 { width: 100% !important; }
.u-pct-15 { width: 15% !important; }
.u-pct-20 { width: 20% !important; }
.u-pct-25 { width: 25% !important; }
.u-pct-30 { width: 30% !important; }
.u-pct-35 { width: 35% !important; }
.u-pct-40 { width: 40% !important; }
.u-pct-45 { width: 45% !important; }
.u-pct-5 { width: 5% !important; }
.u-pct-50 { width: 50% !important; }
.u-pct-55 { width: 55% !important; }
.u-pct-60 { width: 60% !important; }
.u-pct-65 { width: 65% !important; }
.u-pct-70 { width: 70% !important; }
.u-pct-75 { width: 75% !important; }
.u-pct-80 { width: 80% !important; }
.u-pct-85 { width: 85% !important; }
.u-pct-90 { width: 90% !important; }
.u-pct-95 { width: 95% !important; }
.u-pointer { cursor: pointer !important; }
.u-pre-line { white-space: pre-line !important; }
.u-pre-wrap { white-space: pre-wrap !important; }
.u-rule-top { border-top: 1px solid var(--rule) !important; }
.u-selected { border-color: var(--canopy) !important; color: var(--canopy-dark) !important; font-weight: 600 !important; }
.u-self-center { align-self: center !important; }
.u-self-end { align-self: end !important; }
.u-self-flex-end { align-self: flex-end !important; }
.u-span-2 { grid-column: span 2 !important; }
.u-span-6 { grid-column: span 6 !important; }
.u-span-all { grid-column: 1/-1 !important; }
.u-tiny { font-size: .6em !important; }
.u-title { font-size: 1.4rem !important; }
.u-title-sm { font-size: 1.35rem !important; }
.u-w-110 { width: 110px !important; }
.u-w-11pct { width: 11% !important; }
.u-w-120 { width: 120px !important; }
.u-w-140 { width: 140px !important; }
.u-w-160 { width: 160px !important; }
.u-w-20pct { width: 20% !important; }
.u-w-220 { width: 220px !important; }
.u-w-22pct { width: 22% !important; }
.u-w-25pct { width: 25% !important; }
.u-w-260 { width: 260px !important; }
.u-w-30 { width: 30px !important; }
.u-w-42pct { width: 42% !important; }
.u-w-60 { width: 60px !important; }
.u-w-80 { width: 80px !important; }
.u-w-90 { width: 90px !important; }
.u-w-auto { width: auto !important; }
.u-w-fluid { width: auto !important; max-width: 100% !important; min-width: 0 !important; }
.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: 8px; }
.mt-2 { margin-top: 16px; }
.mt-3 { margin-top: 24px; }
.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: 8px; }
.mb-2 { margin-bottom: 16px; }
.w-100 { width: 100%; }
.hidden { display: none !important; }
details.disclose > summary { cursor: pointer; color: var(--link); font-weight: 500; }
details.disclose[open] > summary { margin-bottom: 10px; }
details.disclose > summary .preview { color: var(--ink); font-weight: 400; white-space: pre-wrap; }
details.disclose[open] > summary .preview, details.disclose[open] > summary .when-closed, details.disclose:not([open]) > summary .when-open { display: none; }
.legal-ref { font-size: 0.8rem; color: var(--ink-3); white-space: nowrap; }
.qr-box { width: 200px; height: 200px; padding: 8px; background: #fff; border: 1px solid var(--rule); border-radius: 8px; }
.qr-box svg { width: 100%; height: 100%; }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 1100px) {
  .grid-main { grid-template-columns: minmax(0, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .app { grid-template-columns: 1fr; }
  .sidebar { position: fixed; z-index: 60; left: 0; top: 0; bottom: 0; width: 270px; transform: translateX(-100%); transition: transform 0.18s ease; box-shadow: var(--shadow-pop); }
  body.nav-open .sidebar { transform: none; }
  body.nav-open::after { content: ""; position: fixed; inset: 0; background: var(--backdrop); z-index: 50; }
  .topbar .menu-toggle { display: inline-flex; }
  /* one compact row (menu, license, account) over the search box, scrolling away with the page */
  .topbar { position: relative; padding: 8px 12px; gap: 8px 10px; flex-wrap: wrap; }
  .license-switch { flex: 1 1 0; }
  .license-switch select { max-width: none; width: 100%; }
  .license-switch label { display: none; }
  .user-menu { margin-left: auto; }
  .menu-pop { max-width: calc(100vw - 24px); }
  .search-box { order: 3; flex-basis: 100%; max-width: none; }
  /* messages at the top, clear of the sticky sign-off bar at the bottom */
  .flash-stack { top: 10px; bottom: auto; left: 10px; right: 10px; max-width: none; }
  .content { padding: 20px 16px 56px; }
  .grid-2, .grid-3 { grid-template-columns: minmax(0, 1fr); }
  .form-grid > .field.half, .form-grid > .field.third, .form-grid > .half-slot { grid-column: span 6; }
  .attention li { grid-template-columns: 1fr; gap: 4px; }
  .copy-list { grid-template-columns: 1fr auto; }
  .copy-list .k { grid-column: span 2; border-bottom: 0; padding-bottom: 2px; background: none; font-size: 0.8rem; }
  h1 { font-size: calc(var(--display-size) * 0.83); }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ---------------------------------------------------------------- print */
@media print {
  .sidebar, .topbar, .no-print, .flash-stack, .page-head .actions { display: none !important; }
  .app { display: block; }
  body { background: #fff; font-size: 11pt; }
  .content { padding: 0; max-width: none; }
  .panel { border-color: #999; break-inside: avoid; }
  a { color: inherit; }
}

/* pre-departure checks */
.check-dot.warn { border-color: var(--signal); background: var(--signal-tint); }
.check-dot.warn::after { content: "!"; font-size: 12px; font-weight: 700; color: var(--signal); line-height: 1; }
.check-dot.block { border-color: var(--alert); background: var(--alert); }
.check-dot.block::after { content: "×"; font-size: 14px; font-weight: 700; color: var(--on-alert); line-height: 1; }
.decide { display: inline-flex; width: fit-content; align-self: flex-start; border: 1px solid var(--rule-strong); border-radius: 8px; overflow: hidden; }
.decide label { padding: 6px 12px; cursor: pointer; font-weight: 500; font-size: .9rem; }
.decide input { position: absolute; opacity: 0; pointer-events: none; }
.decide label + input + label, .decide input + label + input + label { border-left: 1px solid var(--rule-strong); }
.decide input:checked + label.ok { background: var(--good); color: var(--on-good); }
.decide input:checked + label.no { background: var(--alert); color: var(--on-alert); }
.decide input:focus-visible + label { outline: 2px solid var(--focus, #3b6fd8); outline-offset: -2px; }
.receive-row td { vertical-align: top; }
.receive-row .mini { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; margin-top: 8px; }
.receive-row .mini .field { margin: 0; }
.receive-row.rejected { background: var(--alert-tint); }
.stepper { display: flex; list-style: none; margin: 0 0 16px; padding: 0; gap: 4px; flex-wrap: wrap; }
.stepper li { flex: 1 1 120px; padding: 8px 10px; border-radius: 8px; background: var(--sheet); border: 1px solid var(--rule); font-size: .85rem; color: var(--ink-3); }
.stepper li b { display: block; color: var(--ink-2, inherit); font-weight: 600; font-size: .9rem; }
.stepper li.done { background: var(--good-tint); border-color: var(--good-line); color: var(--good-ink); }
.stepper li.now { border-color: var(--canopy); box-shadow: inset 0 -3px 0 var(--canopy); color: inherit; }
.price-form { display: inline-flex; gap: 4px; align-items: center; }
.price-form input { width: 86px; padding: 4px 6px; text-align: right; }
.table th.num, .table td.num { text-align: right; }
.stack > *, .grid > * { min-width: 0; }
@media (max-width: 860px) {
  .table-stack thead { display: none; }
  .table-stack tr, .table-stack td { display: block; width: 100%; }
  .table-stack td { border-bottom: 0; }
  .table-stack tr { border-bottom: 1px solid var(--rule); padding: 6px 0; }
}
/* product quality plan controls */
details.plan-controls { border: 1px solid var(--canopy-line); background: var(--canopy-tint); border-radius: 8px; padding: 8px 12px; }
details.plan-controls > summary { cursor: pointer; font-weight: 600; color: var(--canopy-dark); font-size: .9rem; }
details.plan-controls[open] > summary { margin-bottom: 8px; }
.plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px 18px; font-size: .88rem; }
.plan-grid p { margin: 0; }
.plan-k { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); margin-bottom: 3px; }
.plan-list { margin: 0; padding-left: 18px; }
.plan-list li + li { margin-top: 3px; }
.plan-fix { background: var(--signal-tint); border-radius: 6px; padding: 6px 10px; }
.plan-matrix td { vertical-align: top; font-size: .86rem; }
.plan-matrix td.step-name { font-weight: 600; white-space: nowrap; }
.plan-matrix .plan-list { padding-left: 16px; }
.plan-step { border: 1px solid var(--rule); border-radius: 10px; background: var(--sheet); margin-bottom: 12px; }
.plan-step > .head { display: flex; justify-content: space-between; gap: 6px 10px; align-items: center; padding: 10px 14px; background: var(--sheet-2); border-radius: 10px; flex-wrap: wrap; cursor: pointer; list-style: none; }
.plan-step > summary.head::-webkit-details-marker { display: none; }
.plan-step > summary.head::after { content: "Show controls ▾"; font-size: .8rem; color: var(--link); font-weight: 500; }
.plan-step[open] > summary.head { border-bottom: 1px solid var(--rule); border-radius: 10px 10px 0 0; }
.plan-step[open] > summary.head::after { content: "Hide ▴"; }
.plan-step .plan-hz { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 2px 16px; }
.plan-step > .body { padding: 12px 14px; }
.training-gap { border-left: 3px solid var(--alert); }
@media (max-width: 860px) {
  .rows .row-item { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .rows .row-item > .field:first-child { grid-column: 1 / -1; }
}
.mini-progress { display: block; width: 120px; max-width: 100%; height: 5px; border-radius: 3px; background: var(--muted-tint); margin-top: 4px; overflow: hidden; }
.mini-progress > span { display: block; height: 100%; background: var(--canopy); }

/* ---------------------------------------------------------------- employees, job types, the time clock */
.chip-active { border-color: var(--canopy); color: var(--canopy-dark); background: var(--canopy-tint); font-weight: 500; }
.chip-bad { border-color: var(--alert); color: var(--alert); background: var(--alert-tint); }
/* time-clock days: each workday is its own group; a flagged day gets a left rule */
.time-days tbody.time-day + tbody.time-day tr:first-child td { border-top: 2px solid var(--rule); }
.time-days tbody.has-flag tr td:first-child { box-shadow: inset 3px 0 0 var(--alert); }
.time-days .time-day-total td { background: var(--sheet-2); padding-top: 6px; padding-bottom: 6px; }
.time-days .time-day-total .chip { margin: 2px 4px 2px 0; }
.clock-out-form fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 6px; }
.clock-out-form legend { font-weight: 600; margin-bottom: 4px; }
a.chip { text-decoration: none; }
a.chip:hover { border-color: var(--ink-3); text-decoration: none; }
.jt-cards { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.jt-card { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border: 1px solid var(--rule); border-radius: 9px; background: var(--sheet); cursor: pointer; }
.jt-card:has(input:checked) { border-color: var(--canopy); background: var(--canopy-tint); box-shadow: 0 0 0 1px var(--canopy) inset; }
.jt-card.is-disabled { opacity: 0.6; cursor: not-allowed; }
.jt-card input { margin-top: 3px; flex: none; }
.jt-card-body { display: grid; gap: 3px; min-width: 0; }
.jt-card-meta { font-size: 0.8rem; color: var(--ink-3); }
.jt-list { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.jt-list .panel { margin: 0; }
.jt-matrix .group-row th { background: var(--sheet-2); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-2); }
.jt-matrix .center, .center { text-align: center; }
.perm-group { border: 1px solid var(--rule); border-radius: 9px; padding: 10px 12px 12px; margin: 0; display: grid; gap: 6px; }
.perm-group legend { font-weight: 600; padding: 0 4px; }
.perm-group legend .help { font-weight: 400; display: block; }
.check-field.perm { font-weight: 400; }
.check-field.perm-view { font-weight: 500; }
.check-field.perm.is-disabled { color: var(--ink-3); }
.clock-panel .panel-body { display: grid; gap: 8px; }
.clock-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.clock-form .clock-note { flex: 1 1 220px; margin: 0; }
.clock-btn { min-width: 160px; }
.menu-pop .menu-clock { border-bottom: 1px solid var(--rule); margin: 0 0 4px; padding-bottom: 4px; }
.menu-pop .menu-clock button { font-weight: 600; color: var(--canopy-dark); }
.waive-box { border: 1px dashed var(--rule-strong); border-radius: 9px; padding: 10px 12px; display: grid; gap: 8px; background: var(--sheet-2); }
.waive-box.has-error { border-color: var(--alert); background: var(--alert-tint); }
.today-clock { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

/* ---------------------------------------------------------------- phones and touch screens */
@media (max-width: 860px), (pointer: coarse) {
  /* 16px keeps phones from zooming in when a box is tapped */
  input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], input[type=datetime-local],
  input[type=search], input[type=tel], select, textarea { font-size: max(16px, 1rem); }
}
@media (pointer: coarse) {
  .btn { min-height: 44px; }
  .btn-sm { min-height: 38px; }
  input[type=checkbox], input[type=radio] { width: 22px; height: 22px; }
  .nav-link, .nav-section-head { min-height: 44px; }
  .menu-pop a, .menu-pop button { padding: 12px; }
  .tabs a { padding: 12px 14px; }
}
@media (max-width: 860px) {
  /* time-clock days as cards: one line per shift */
  .time-days thead { display: none; }
  .time-days, .time-days tbody, .time-days tr { display: block; width: 100%; }
  .time-days tr { display: flex; flex-wrap: wrap; gap: 2px 10px; padding: 8px 12px; border-bottom: 1px solid var(--rule); }
  .time-days td { display: block; padding: 0; border: 0; }
  .time-days td:empty { display: none; }
  .time-days td:nth-child(2)::before { content: "In "; color: var(--ink-3); }
  .time-days td:nth-child(3)::before { content: "Meal "; color: var(--ink-3); }
  .time-days td:nth-child(4)::before { content: "Out "; color: var(--ink-3); }
  .time-days td:nth-child(5) { margin-left: auto; font-weight: 600; }
  .time-days td:nth-child(6) { flex-basis: 100%; }
  .time-days td:nth-child(1) { flex-basis: 100%; }
  .time-days .time-day-total td { flex-basis: 100%; background: none; }
  .time-days .time-day-total { background: var(--sheet-2); }
  .time-days tbody.has-flag tr td:first-child { box-shadow: none; }
  .time-days tbody.has-flag tr { box-shadow: inset 3px 0 0 var(--alert); }
}
@media (max-width: 860px) {
  /* key lists as cards on a phone: the first column as the title, the rest wrapping under it */
  .table-cards thead { display: none; }
  .table-cards, .table-cards tbody, .table-cards tfoot { display: block; width: 100%; }
  .table-cards tr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; padding: 10px 14px; border-bottom: 1px solid var(--rule); }
  .table-cards td { display: block; padding: 0; border: 0; }
  .table-cards td:empty { display: none; }
  .table-cards td:first-child:not(.check), .table-cards td.check + td { flex: 1 1 calc(100% - 44px); }
  .table-cards td.check { flex: 0 0 28px; }
  .table-cards td.num { text-align: left; }
  .table-cards td[data-label]::before { content: attr(data-label) " "; color: var(--ink-3); font-size: 0.8rem; }
  .table-cards tbody tr:hover td { background: none; }
  .table-cards tr.is-overdue, .table-cards tr.is-warn { box-shadow: inset 3px 0 0 var(--alert); }
  .table-cards tr.is-warn { box-shadow: inset 3px 0 0 var(--signal); }
  .table-cards tr.is-overdue td:first-child, .table-cards tr.is-warn td:first-child { box-shadow: none; }
}

/* ---------------------------------------------------------------- recalls */
.recall-clock { display: flex; flex-wrap: wrap; gap: 14px 36px; align-items: flex-end; }
.recall-clock .clock-n { font-family: var(--font-num); font-size: calc(1.7rem * var(--num-scale)); font-weight: var(--num-weight); font-variant-numeric: tabular-nums; line-height: 1.2; }
.recall-clock-verdict { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; flex: 1 1 220px; }
.recall-progress { display: grid; gap: 6px; margin-bottom: 16px; }
.recall-table .row-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.recall-table td.recall-what { min-width: 190px; }
.notice-list { list-style: none; margin: 0; padding: 0; }
.notice-list > li { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto; gap: 8px 16px; align-items: start; padding: calc(12px * var(--density)) 18px; border-bottom: 1px solid var(--rule); }
.notice-list > li:last-child { border-bottom: 0; }
.notice-list.compact > li { padding: 8px 0; }
.notice-list .nl-status .badge { margin-bottom: 2px; }
.notice-list .nl-status .cell-sub { display: block; font-size: 0.8rem; color: var(--ink-3); }
.notice-list .nl-actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.nl-shipments { margin: 4px 0 0; padding-left: 16px; color: var(--ink-2); }
@media (max-width: 720px) {
  .notice-list > li { grid-template-columns: minmax(0, 1fr); }
  .notice-list .nl-actions { justify-content: flex-start; }
}

/* ---------------------------------------------------------------- suggestion lists (input + datalist, see app.js) */
.suggest { position: fixed; z-index: 1000; margin: 0; padding: 4px; overflow-y: auto; overscroll-behavior: contain;
  background: var(--sheet); border: 1px solid var(--rule-strong); border-radius: var(--radius-input, 8px); box-shadow: var(--shadow-pop); }
.suggest-option { padding: 7px 7px; border-radius: 6px; cursor: pointer; color: var(--ink); font-size: 0.9333rem; line-height: 1.35;
  overflow-wrap: anywhere; text-align: left; }
.suggest-option:hover, .suggest-option.active { background: var(--canopy-tint); }
.suggest-option mark { background: none; color: inherit; font-weight: 600; padding: 0; }
@media (max-width: 860px), (pointer: coarse) { .suggest-option { font-size: 16px; padding: 10px 7px; } }

/* time clock kiosks: the setup code panel (people/kiosks.html; the kiosk itself has css/kiosk.css) */
.kiosk-setup-body { display: grid; grid-template-columns: minmax(0, 1fr) 180px; gap: 20px; align-items: center; }
.kiosk-setup-steps { margin: 0 0 10px; padding-left: 20px; }
.kiosk-setup-steps li + li { margin-top: 10px; }
.kiosk-setup-code { display: inline-block; margin-top: 4px; padding: 4px 12px; border-radius: 8px; background: var(--canopy-tint);
  color: var(--canopy-dark); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 1.5rem; letter-spacing: 0.12em; }
.kiosk-qr { width: 180px; }
.kiosk-qr svg { display: block; width: 100%; height: auto; }
@media (max-width: 640px) { .kiosk-setup-body { grid-template-columns: 1fr; } .kiosk-qr { width: 160px; } }
/* operator console: support messages (saaskit/templates/saaskit/console/support.html) */
.support-item { padding: 14px 18px; border-bottom: 1px solid var(--rule); }
.support-item:last-child { border-bottom: 0; }
.support-item header { gap: 8px; }
.support-message { white-space: pre-wrap; overflow-wrap: anywhere; margin: 8px 0; max-width: 80ch; }

/* Help page (app/templates/help.html) */
.help-guide { border-bottom: 1px solid var(--rule); }
.help-guide:last-child { border-bottom: 0; }
.help-guide > summary { cursor: pointer; padding: 13px 18px; font-weight: 600; color: var(--ink); }
.help-guide > summary:hover { background: var(--muted-tint); }
.help-guide[open] > summary { color: var(--canopy-dark); }
.help-guide > :not(summary) { margin: 0 18px 14px; max-width: 70ch; }
.help-guide ol, .help-guide ul { padding-left: 1.3em; }
.help-guide li + li { margin-top: 6px; }

/* QuickBooks files (app/templates/finance/quickbooks*.html) */
.qb-notes, .qb-steps { padding-left: 1.2em; }
.qb-notes li + li, .qb-steps li + li { margin-top: 4px; }
.qb-readme { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 0.8rem; background: var(--muted-tint); padding: 10px 12px; border-radius: 8px; max-height: 420px; overflow: auto; margin: 0; }
.qb-names input[type="text"] { width: 100%; min-width: 180px; }
fieldset.field { border: 0; padding: 0; margin: 0; min-width: 0; }
fieldset.field > legend { padding: 0; margin-bottom: 6px; font-weight: 500; font-size: 0.9rem; }
.filters fieldset.field .row { gap: 6px 14px; min-height: 38px; align-items: center; }
.qb-summary th[scope="row"] { background: none; white-space: normal; font-size: 0.9rem; font-weight: 500; color: var(--ink-2); }
@media (max-width: 860px) {
  .qb-files td.qb-file-done { flex: 1 1 100%; }
  .qb-names td.qb-name-cell { flex: 1 1 100%; }
  .qb-names td.qb-name-cell input[type="text"] { min-width: 0; }
}

/* Finance → 280E workbook (app/templates/finance/tax_280e.html) */
.split-form { border-top: 1px solid var(--rule); }
.split-form > summary { cursor: pointer; padding: 13px 18px; font-weight: 600; color: var(--ink); }
.split-form > summary:hover { background: var(--muted-tint); }
.split-form[open] > summary { color: var(--canopy-dark); }
.split-form > form { padding: 0 18px 16px; }

/* Vendor invoices read from a PDF (app/templates/finance/invoice_*.html) */
.show-group { display: contents; }
.show-group[hidden] { display: none; }
.form-grid > .show-group > .field { grid-column: span 6; }
.form-grid > .show-group > .field.half { grid-column: span 3; }
.form-grid > .show-group > .field.third { grid-column: span 2; }
.form-grid > .field.two-thirds, .form-grid > .show-group > .field.two-thirds { grid-column: span 4; }
.form-grid > .field.sixth, .form-grid > .show-group > .field.sixth { grid-column: span 1; }
.inv-checks { margin: 4px 0 0; padding-left: 1.2em; }
.inv-checks li + li { margin-top: 2px; }
.inv-lines { list-style: none; margin: 0; padding: 0; }
.inv-line { padding: 16px 18px 18px; border-bottom: 1px solid var(--rule); scroll-margin-top: 80px; }
.inv-line:last-child { border-bottom: 0; }
.inv-line.is-warn { box-shadow: inset 3px 0 0 var(--signal); }
.inv-line.has-errors { box-shadow: inset 3px 0 0 var(--alert); }
.inv-line-read { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 2px 12px; align-items: baseline; margin-bottom: 12px; }
.inv-line-n { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.inv-line-desc { font-size: 1rem; overflow-wrap: anywhere; }
.inv-line-chips { display: flex; flex-wrap: wrap; gap: 4px 6px; margin-top: 4px; }
.inv-line-asread { text-align: right; white-space: nowrap; color: var(--ink-2); }
.inv-skip-note { align-self: end; margin: 0; padding-bottom: 9px; }
.inv-cost { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: baseline; padding: 9px 12px; border-radius: 8px; background: var(--sheet-2); border: 1px solid var(--rule); }
.inv-cost strong { font-weight: 600; }
.inv-pkg { color: var(--canopy-dark); }
.inv-stale { display: none; color: var(--signal-ink); }
form.is-stale .inv-stale { display: inline; }
.field.is-unsure input { border-color: var(--signal); }
.inv-options { display: grid; gap: 10px; }
.inv-sum { overflow-wrap: anywhere; }
.inv-pkgs { grid-column: 1 / -1; padding: 10px 12px 12px; border-radius: 8px; border: 1px solid var(--rule); }
.inv-pkgs.has-error { border-color: var(--alert); }
.inv-pkgs .error { color: var(--alert); font-weight: 500; font-size: 0.8667rem; }
.inv-pkgs-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; margin-bottom: 8px; }
.inv-pkgs-head h4 { margin: 0; font-size: .95rem; }
.inv-pkgs .rows { gap: 8px; }
.inv-pkgs .rows .row-item.inv-pkg-row { grid-template-columns: minmax(200px, 2.4fr) minmax(90px, 1fr) minmax(80px, .8fr) auto; gap: 6px 10px;
  align-items: center; padding: 8px 10px; }
.inv-pkg-row input.tag-input { letter-spacing: .02em; }
.inv-pkg-info { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 2px 14px; color: var(--ink-2); overflow-wrap: anywhere; }
.inv-manifest-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 10px; }
.inv-manifest-replace form { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0; }
.inv-manifest-replace input[type=file] { max-width: 100%; }
.inv-manifest-add { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; }
.inv-manifest-add .field { flex: 1 1 320px; margin: 0; }
.inv-pkg-row > .tag-cam-status { grid-column: 1 / -1; }
.inv-manifest-replace summary { cursor: pointer; color: var(--link); font-size: .9rem; }
.inv-manifest-replace[open] summary { margin-bottom: 8px; }
@media (max-width: 860px) {
  .inv-pkgs .rows .row-item.inv-pkg-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto !important; }
  .inv-pkgs .rows .row-item.inv-pkg-row > input.tag-input,
  .inv-pkgs .rows .row-item.inv-pkg-row > .input-group { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
  .form-grid > .show-group > .field.half, .form-grid > .show-group > .field.third, .form-grid > .field.two-thirds,
  .form-grid > .show-group > .field.two-thirds { grid-column: span 6; }
  .form-grid > .field.sixth, .form-grid > .show-group > .field.sixth { grid-column: span 3; }
  .inv-line { padding: 14px 14px 16px; }
  .inv-line-read { grid-template-columns: 22px minmax(0, 1fr); }
  .inv-line-asread { grid-column: 2; text-align: left; white-space: normal; }
}

/* ---------------------------------------------------------------- appearance (Your account and Settings → Appearance)
   Each card previews its look: the swatch carries data-theme, so themes.css's variables apply inside it. */
.appearance-form fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.appearance-form legend { padding: 0; margin-bottom: 8px; font-weight: 500; font-size: 0.9rem; }
.appearance-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 18px 32px; }
.look-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.look-card { position: relative; display: grid; gap: 6px; align-content: start; padding: 10px 10px 12px; border: 1px solid var(--rule);
  border-radius: 10px; background: var(--sheet); cursor: pointer; }
.look-card:hover { border-color: var(--ink-3); }
.look-card:has(input:checked) { border-color: var(--canopy); box-shadow: inset 0 0 0 1px var(--canopy); background: var(--canopy-tint); }
.look-card:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.look-card input { position: absolute; opacity: 0; pointer-events: none; }
.look-card-name { font-weight: 600; line-height: 1.3; }
.look-card-blurb { font-size: 0.8rem; color: var(--ink-2); line-height: 1.4; }
.look-swatches { display: flex; gap: 6px; }
.look-swatch { flex: 1; display: grid; grid-template-columns: 30% 1fr; height: 62px; border-radius: 7px; overflow: hidden;
  background: var(--paper); border: 1px solid var(--rule-strong); color: var(--ink); font-family: var(--font-body); }
.look-swatch .sw-side { background: var(--sidebar-bg); border-right: 1px solid var(--rule); display: grid; align-content: start; gap: 5px; padding: 9px 6px; }
.look-swatch .sw-side::before, .look-swatch .sw-side::after { content: ""; height: 4px; border-radius: 2px; background: var(--sidebar-ink-2, var(--ink-3)); }
.look-swatch .sw-side::before { width: 75%; background: var(--canopy); }
.look-swatch .sw-sheet { position: relative; margin: 7px; padding: 6px; display: grid; gap: 4px; align-content: start; border-radius: calc(var(--radius-panel) / 2);
  background: var(--sheet); border: 1px solid var(--rule); }
.look-swatch .sw-line { height: 4px; width: 80%; border-radius: 2px; background: var(--ink); }
.look-swatch .sw-line + .sw-line { width: 55%; background: var(--ink-3); }
.look-swatch .sw-btn { position: absolute; left: 6px; bottom: 6px; width: 24px; height: 8px; border-radius: 3px; background: var(--canopy); }
.look-swatch .sw-dot { position: absolute; right: 6px; bottom: 6px; width: 9px; height: 9px; border-radius: 50%; background: var(--alert); }
.look-swatch[data-family="rail"] { grid-template-columns: 13% 1fr; }
.look-swatch[data-family="rail"] .sw-side { padding: 9px 3px; }
.look-swatch[data-family="topnav"] { grid-template-columns: 1fr; grid-template-rows: 13px 1fr; }
.look-swatch[data-family="topnav"] .sw-side { border-right: 0; border-bottom: 1px solid var(--rule); padding: 4px 6px; grid-auto-flow: column; justify-content: start; }
.look-swatch[data-family="topnav"] .sw-side::before, .look-swatch[data-family="topnav"] .sw-side::after { width: 16px; }
.look-swatch[data-family="floating"] .sw-side { margin: 5px 0 5px 5px; border: 1px solid var(--rule); border-radius: 6px; }
/* a choice of a few: text size, spacing, night timing */
.seg-field { display: grid; gap: 4px; align-content: start; }
.seg { display: inline-flex; flex-wrap: wrap; width: fit-content; border: 1px solid var(--rule-strong); border-radius: 8px; overflow: hidden; background: var(--sheet); }
.seg label { position: relative; display: inline-flex; align-items: center; min-height: 36px; padding: 6px 14px; cursor: pointer; font-weight: 500;
  font-size: 0.9rem; color: var(--ink-2); }
.seg label + label { border-left: 1px solid var(--rule-strong); }
.seg label:hover { background: var(--sheet-2); color: var(--ink); }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg label:has(input:checked) { background: var(--canopy); color: var(--on-accent); }
.seg label:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: -3px; }
.seg .seg-size-1 { font-size: 0.9rem; }
.seg .seg-size-2 { font-size: 1.05rem; }
.seg .seg-size-3 { font-size: 1.2rem; }
.seg-field .help { font-size: 0.8333rem; color: var(--ink-3); }
@media (pointer: coarse) { .seg label { min-height: 44px; } }
/* show only what applies to the look being picked: no night look for a dark look; night timing only with a night
   look (or a card that brings one); warmth only with Night Shift */
.appearance-form:has(input[name="look"][data-dark="1"]:checked) .night-pick { display: none; }
.appearance-form:has(select[name="night"] option[value="none"]:checked):not(:has(input[name="look"][data-night-preset="cure_room"]:checked, input[name="look"][data-night-preset="night_shift"]:checked)) .mode-pick,
.appearance-form:has(input[name="look"][data-dark="1"]:checked) .mode-pick { display: none; }
.appearance-form:has(input[name="look"]):not(:has(input[name="look"][data-theme-key="night_shift"]:checked, select[name="night"] option[value="night_shift"]:checked)) .warmth-pick { display: none; }

/* ---------------------------------------------------------------- Today: handled, the day's progress, views, focus */
.panel-head-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 6px 10px; }
/* how much of today is handled: a thin bar under the heading */
.day-progress { display: block; width: 100%; height: 4px; border: 0; background: var(--ring-track); color: var(--canopy); appearance: none; }
.day-progress::-webkit-progress-bar { background: var(--ring-track); }
.day-progress::-webkit-progress-value { background: var(--canopy); transition: width 0.3s ease; }
.day-progress::-moz-progress-bar { background: var(--canopy); }
.attention-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px;
  padding: calc(10px * var(--density)) 18px; border-bottom: 1px solid var(--rule); }
/* a few links that each show a view: the one showing is raised */
.seg-links { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: 999px; background: var(--muted-tint); }
.seg-links a { padding: 4px 12px; border-radius: 999px; color: var(--ink-2); font-size: 0.8667rem; font-weight: 500; text-decoration: none; }
.seg-links a:hover { background: var(--sheet-2); color: var(--ink); text-decoration: none; }
.seg-links a[aria-current] { background: var(--sheet); color: var(--ink); font-weight: 600; box-shadow: 0 0 0 1px var(--rule-strong); }
.seg-n { margin-left: 2px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.attention .a-end { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.attention li.is-handled .a-title, .attention li.is-handled .a-title a { color: var(--ink-3); text-decoration: line-through; text-decoration-thickness: 1px; }
.attention-more { margin: 0; padding: 10px 18px 14px; color: var(--ink-2); border-top: 1px solid var(--rule); }
.all-clear { display: flex; align-items: flex-start; gap: 10px; margin: 14px 18px; padding: 12px 14px; border-radius: var(--radius-input);
  background: var(--good-tint); color: var(--good-ink); border: 1px solid var(--good-line); }
.all-clear svg { flex: none; margin-top: 1px; }
/* dim the rest: everything but the row you're on fades back (a toggle on Today, remembered in this browser) */
.attention.is-dimmed > li { transition: opacity 0.15s ease; }
.attention.is-dimmed > li:not(:hover):not(:focus-within) { opacity: 0.45; }
@media (max-width: 860px) {
  .attention .a-end { flex-direction: row; align-items: center; justify-content: space-between; }
}
/* focus mode: one item at a time */
.focus-wrap { max-width: 720px; margin: 0 auto; }
.focus-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.focus-wrap > .day-progress { margin-bottom: 18px; border-radius: 999px; overflow: hidden; }
.focus-card .panel-body { padding: calc(26px * var(--density)) 28px; }
.focus-title { font-size: calc(var(--display-size) * 0.86); line-height: 1.25; }
.focus-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 6px; }
.focus-actions form { margin: 0; }
.focus-actions-center { justify-content: center; padding: 0 18px 24px; }
@media (prefers-reduced-motion: reduce) {
  .attention.is-dimmed > li, .day-progress::-webkit-progress-value { transition: none; }
}
/* the account menu's night look switch (for a look that has one) */
.menu-night { display: grid; gap: 6px; padding: 8px 10px 10px; border-bottom: 1px solid var(--rule); margin-bottom: 4px; }
.menu-night-label { font-size: 0.8rem; color: var(--ink-3); }
.menu-seg { display: flex; border: 1px solid var(--rule-strong); border-radius: 8px; overflow: hidden; }
.menu-pop .menu-seg button { flex: 1 1 auto; width: auto; padding: 5px 8px; border-radius: 0; text-align: center; font-size: 0.8667rem; white-space: nowrap; }
.menu-pop .menu-seg button + button { border-left: 1px solid var(--rule-strong); }
.menu-pop .menu-seg button[aria-pressed="true"] { background: var(--canopy); color: var(--on-accent); font-weight: 600; }

/* ---------------------------------------------------------------- Today in each look's form (main/_attention.html) */
.mark-form { margin: 0; }
.today-wide { display: flex; flex-direction: column; gap: calc(18px * var(--density)); margin-bottom: calc(18px * var(--density)); }
/* a round check (lanes and blocks): filled when handled */
.check-btn { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border-radius: 50%; border: 2px solid var(--rule-strong);
  background: var(--sheet); color: transparent; cursor: pointer; position: relative; z-index: 1; }
.check-btn:hover { border-color: var(--canopy); color: var(--canopy); }
.check-btn[aria-pressed="true"] { background: var(--canopy); border-color: var(--canopy); color: var(--on-accent); }
.check-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
@media (pointer: coarse) { .check-btn { width: 44px; height: 44px; } }

/* greeting (Greenhouse) and "your day" (Studio) */
.today-hero { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 28px; margin-bottom: calc(18px * var(--density));
  padding: calc(22px * var(--density)) 26px; background: var(--sheet); border-radius: var(--radius-panel); }
.today-hero-main { flex: 1 1 340px; min-width: 0; }
.today-hero-meta { margin: 0 0 2px; font-size: 0.9rem; color: var(--ink-3); }
.today-hero-summary { margin: 6px 0 0; color: var(--ink-2); font-size: 1.05rem; max-width: 60ch; }
.today-hero-side { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.hero-stats { display: flex; flex-wrap: wrap; gap: 10px; }
.hero-stat { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 88px; padding: 10px 12px; border-radius: 16px;
  background: var(--sheet-2); color: var(--ink-2); font-size: 0.8667rem; text-decoration: none; }
.hero-stat:hover { text-decoration: none; box-shadow: inset 0 0 0 2px var(--rule-strong); }
.hero-stat-n { font-family: var(--font-num); font-size: calc(1.7rem * var(--num-scale)); font-weight: 800; line-height: 1.1; color: var(--ink); }
.hero-stat-bad { background: var(--alert-tint); }
.hero-stat-bad .hero-stat-n { color: var(--alert); }
.hero-stat-warn { background: var(--signal-tint); }
.hero-stat-warn .hero-stat-n { color: var(--signal-ink); }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.hero-actions .today-clock { margin: 0; }
.today-hero-day h1 { font-size: calc(var(--display-size) * 1.5); line-height: 1.05; }
.today-hero-day .hero-actions { margin-top: 14px; }
.day-ring { position: relative; flex: none; width: 124px; height: 124px; }
.day-ring svg { display: block; }
.day-ring-track, .day-ring-fill { fill: none; stroke-width: 13; }
.day-ring-track { stroke: var(--canopy-tint); }
.day-ring-fill { stroke: var(--canopy); stroke-linecap: round; transition: stroke-dashoffset 0.6s cubic-bezier(0.3, 0.7, 0.2, 1); }
.day-ring-text { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 0.8333rem; color: var(--ink-3); }
.day-ring-n { font-family: var(--font-num); font-size: calc(1.9rem * var(--num-scale)); font-weight: var(--num-weight); line-height: 1; color: var(--ink); }
/* the progress beside Today's title (Focus Flow) */
.page-head-progress { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.page-head-progress .day-progress-wrap { display: grid; gap: 5px; min-width: 190px; font-size: 0.8667rem; color: var(--ink-2); }
.page-head-progress .day-progress { height: 8px; border-radius: 999px; overflow: hidden; }
.page-head-progress .day-progress::-webkit-progress-bar { border-radius: 999px; }
.page-head-progress .day-progress::-webkit-progress-value { border-radius: 999px; }

/* lanes: Focus Flow's Now, Next and Later */
.lanes-head, .blocks-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-bottom: 10px; }
.lanes-head h2, .blocks-head h2 { margin-right: auto; font-size: 1.2rem; }
.lanes-head .attention-tools, .blocks-head .attention-tools { padding: 0; border: 0; }
.lanes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); gap: 16px; align-items: start; }
.lane { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: var(--radius-panel); background: var(--muted-tint); }
.lane-head { display: flex; align-items: center; gap: 8px; padding: 2px 4px; }
.lane-head h3 { font-size: 1rem; }
.lane-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ink-3); }
.lane-now .lane-dot { background: var(--alert); }
.lane-next .lane-dot { background: var(--signal); }
.lane-later .lane-dot { background: var(--canopy); }
.lane-hint { font-size: 0.8667rem; color: var(--ink-2); }
.lane-count { margin-left: auto; padding: 1px 9px; border-radius: 999px; background: var(--sheet); font-size: 0.8333rem; font-weight: 700; color: var(--ink-2); }
.lane-card { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 13px 14px 11px; border-radius: calc(var(--radius-panel) - 4px); background: var(--sheet); }
.lane-card-top { display: flex; align-items: flex-start; gap: 10px; }
.lane-card-title { flex: 1; min-width: 0; font-weight: 600; }
.lane-card-title a { color: var(--ink); }
.lane-card-title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.lane-card:has(.lane-card-title a:hover) { box-shadow: inset 0 0 0 2px var(--canopy-line); }
.lane-card-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 10px; font-size: 0.8333rem; }
.lane-card.is-handled .lane-card-title a { color: var(--ink-3); text-decoration: line-through; }
.lane-card .a-detail { font-size: 0.8333rem; font-weight: 400; color: var(--ink-3); }
.lane-empty { margin: 0; padding: 6px 4px; font-size: 0.8667rem; color: var(--ink-3); }
.lanes.is-dimmed > .lane > .lane-card:not(:hover):not(:focus-within) { opacity: 0.45; }

/* a table: Ledger */
.att-table td { vertical-align: middle; }
.att-table .a-title { font-weight: 600; }
.att-table .a-detail { font-size: 0.8333rem; color: var(--ink-3); }
.att-table .att-act { text-align: right; }
.att-table tr.is-handled .a-title, .att-table tr.is-handled .a-title a { color: var(--ink-3); text-decoration: line-through; }
.th-sort { display: inline-flex; align-items: center; gap: 5px; color: var(--link); font-weight: 700; }
.att-table.is-dimmed tbody tr:not(:hover):not(:focus-within) { opacity: 0.45; }
.kpi-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 1px; overflow: hidden;
  border: 1px solid var(--rule); border-radius: var(--radius-panel); background: var(--rule); }
.kpi { display: flex; flex-direction: column; gap: 1px; padding: 14px 20px 15px; background: var(--sheet); color: var(--ink); text-decoration: none;
  box-shadow: inset 0 3px 0 var(--kpi-bar, var(--rule-strong)); }
.kpi:hover { background: var(--sheet-2); text-decoration: none; }
.kpi-label, .kpi-note { font-size: 0.8667rem; color: var(--ink-2); }
.kpi-label { font-weight: 600; }
.kpi-n { font-family: var(--font-num); font-size: calc(2.1rem * var(--num-scale)); font-weight: var(--num-weight); line-height: 1.15; }
.kpi-bad { --kpi-bar: var(--alert); }
.kpi-bad .kpi-n { color: var(--alert); }
.kpi-warn { --kpi-bar: var(--signal); }
.kpi-warn .kpi-n { color: var(--signal-ink); }
.kpi-info { --kpi-bar: var(--info); }

/* blocks: Studio */
.bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.bento-block { position: relative; grid-column: span 2; display: flex; flex-direction: column; gap: 8px; padding: 16px 18px 16px 20px;
  border-radius: var(--radius-panel); background: var(--blk-bg, var(--sheet)); }
.bento-block:nth-child(-n+2) { grid-column: span 3; }
.bento-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.bento-top .due { padding: 3px 11px 3px 8px; border-radius: 999px; background: var(--sheet); }
.bento-title { font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; line-height: 1.25; }
.bento-block:nth-child(-n+2) .bento-title { font-size: 1.35rem; }
.bento-title a { color: var(--ink); text-decoration-thickness: 2px; }
.bento-title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.bento-block:has(.bento-title a:hover) { box-shadow: inset 0 0 0 2px var(--blk-fg, var(--canopy-line)); }
.bento-block .a-detail { font-size: 0.8667rem; color: var(--ink-2); }
.bento-when { margin-top: auto; padding-top: 4px; font-size: 0.8667rem; font-weight: 600; color: var(--ink-2); }
.bento-block.is-handled { background: var(--sheet-2); }
.bento-block.is-handled .bento-title a { color: var(--ink-3); text-decoration: line-through; }
.bento.is-dimmed > .bento-block:not(:hover):not(:focus-within) { opacity: 0.45; }
.all-clear-big { margin: 0 0 12px; padding: 18px 24px; border-radius: var(--radius-panel); background: var(--canopy); color: var(--on-accent); border: 0; align-items: center; font-size: 1.05rem; }
.tone-metrc { --blk-bg: var(--tone-metrc-bg); --blk-fg: var(--tone-metrc); }
.tone-inventory { --blk-bg: var(--tone-inventory-bg); --blk-fg: var(--tone-inventory); }
.tone-compliance { --blk-bg: var(--tone-compliance-bg); --blk-fg: var(--tone-compliance); }
.tone-manufacturing { --blk-bg: var(--tone-manufacturing-bg); --blk-fg: var(--tone-manufacturing); }
.tone-quality { --blk-bg: var(--tone-quality-bg); --blk-fg: var(--tone-quality); }
.tone-distribution { --blk-bg: var(--tone-distribution-bg); --blk-fg: var(--tone-distribution); }
@media (max-width: 860px) {
  .kpi-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi { padding: 10px 14px 11px; }
  .kpi-n { font-size: calc(1.6rem * var(--num-scale)); }
}
@media (max-width: 760px) {
  .bento { grid-template-columns: minmax(0, 1fr); }
  .bento-block, .bento-block:nth-child(-n+2) { grid-column: auto; }
  .today-hero-day h1 { font-size: calc(var(--display-size) * 1.15); }
}
@media (prefers-reduced-motion: reduce) {
  .day-ring-fill { transition: none; }
}

/* inspection packet: the parts to put in */
.packet-parts { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }

/* purchase orders: receiving supplies, one line per fieldset */
.po-receive { border: 1px solid var(--rule); border-radius: 9px; padding: 10px 14px 12px; margin: 0; }
.po-receive legend { padding: 0 6px; font-weight: 600; }
.po-receive .form-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.po-receive .form-grid > .field, .po-receive .form-grid > .check-field { grid-column: auto; }
@media (max-width: 860px) { .po-receive .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Help: a short how-to video under a guide */
.help-video { margin: 12px 0 4px; }
.help-video video { display: block; width: 100%; aspect-ratio: 16 / 10; height: auto; border-radius: 8px; border: 1px solid var(--rule); background: var(--sheet-2); }
.help-video figcaption { margin-top: 4px; }

/* the visitor log's "On site now" list (compliance/visitors.html) */
.visit-list > li { grid-template-columns: 76px minmax(0, 1fr) auto; }
.visit-since { display: flex; flex-direction: column; font-variant-numeric: tabular-nums; }
.visit-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; align-items: center; }
.visit-escort select { min-height: 32px; padding: 4px 8px; max-width: 200px; }
@media (max-width: 720px) {
  .visit-list > li { grid-template-columns: minmax(0, 1fr); }
  .visit-since { flex-direction: row; gap: 6px; }
  .visit-actions { justify-content: flex-start; }
}

/* the self-inspection checklist and a mock inspection (compliance/self_inspection*.html) */
.si-summary .panel-body { display: grid; gap: 10px; }
.si-ready { font-size: 1.15rem; margin: 0; }
.si-progress { height: 8px; max-width: 420px; }
.si-list > li { grid-template-columns: 140px minmax(0, 1fr) 0; }
.si-badge { white-space: nowrap; }
.si-run { list-style: none; margin: 0; padding: 0; }
.si-run > li { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 10px 20px; align-items: start;
  padding: calc(12px * var(--density)) 18px; border-bottom: 1px solid var(--rule); }
.si-run > li:last-child { border-bottom: 0; }
.si-run-answer { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; }
.si-run-answer input[type=text] { flex: 1 1 100%; min-height: 34px; }
.sticky-actions { position: sticky; bottom: 0; background: var(--paper); padding: 12px 0; margin-top: 0; z-index: 2; }
@media (max-width: 720px) {
  .si-list > li { grid-template-columns: minmax(0, 1fr); }
  .si-run > li { grid-template-columns: minmax(0, 1fr); }
}

/* label checks (manufacturing/labels.html, label_check.html) */
.label-overrides > summary { cursor: pointer; font-weight: 500; color: var(--ink-2); }
.label-text > summary { cursor: pointer; list-style: none; }
.label-text > summary::-webkit-details-marker { display: none; }
.label-text pre { margin: 0; max-height: 420px; overflow: auto; font-family: inherit; }

/* jobs: the board, My jobs, a job, the job form (app/templates/jobs) */
.job-list > li { grid-template-columns: 40px minmax(0, 1fr) auto; }
.job-rank { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font-weight: 600;
  font-variant-numeric: tabular-nums; background: var(--muted-tint); color: var(--ink-2); }
.job-rank-none { background: transparent; }
.job-list > li.is-priority .job-rank { background: var(--canopy); color: var(--on-accent); }
.job-list > li.is-next, .job-list > li.is-on { box-shadow: inset 3px 0 0 var(--canopy); }
.job-list > li.is-on { background: var(--good-tint); }
.job-list > li.is-waiting .a-title, .job-list > li.is-waiting .a-title a { color: var(--ink-3); }
.job-list > li.is-waiting.is-priority .job-rank { background: var(--muted-tint); color: var(--ink-2); }
.job-wait { color: var(--ink-2); }
.job-wait::before { content: "Waiting: "; font-weight: 600; }
.job-working { color: var(--good-ink); }
.job-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 6px; }
.job-actions .btn-sm { min-width: 2.4rem; }
.job-now { border-color: var(--canopy-line); }
.job-now .panel-head { background: var(--good-tint); }
.job-now-title { font-size: 1.1rem; font-weight: 600; }
.job-me.is-on .panel-head, .job-me.is-next .panel-head { background: var(--good-tint); }
.job-subhead { font-size: 0.95rem; font-weight: 600; margin: 16px 0 4px; }
.job-run { padding: 10px 12px; border: 1px solid var(--rule); border-radius: var(--radius-input); background: var(--sheet-2); }
.job-grid { align-items: start; }
.job-grid > .panel + .panel { margin-top: 0; }
.job-note { margin: 0; padding: 10px 18px; font-size: 0.8333rem; color: var(--ink-2); border-bottom: 1px solid var(--rule); background: var(--sheet-2); }
/* things to tick off */
.job-checks { list-style: none; margin: 0; padding: 0; }
.job-checks > li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start;
  padding: calc(10px * var(--density)) 18px; border-bottom: 1px solid var(--rule); }
.job-checks > li:last-child { border-bottom: 0; }
.job-check-box { display: inline-grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 1.5px solid var(--rule-strong);
  border-radius: 7px; background: var(--sheet); color: var(--on-accent); font-weight: 700; cursor: pointer; }
.job-checks > li.is-done .job-check-box { background: var(--canopy); border-color: var(--canopy); }
.job-checks > li.is-done .job-check-text { color: var(--ink-2); text-decoration: line-through; text-decoration-thickness: 1px; }
.job-checks > li.is-done .job-check-text .cell-sub { text-decoration: none; display: block; }
.job-check-text { padding-top: 4px; }
/* the job form */
.choice-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; border: 0; margin: 0; padding: 0; }
.choice-cards > legend { font-weight: 600; padding: 0; margin-bottom: 8px; }
.choice-card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 10px; align-items: start; padding: 12px 14px;
  border: 1px solid var(--rule-strong); border-radius: var(--radius-input); background: var(--sheet); cursor: pointer; font-weight: 400; }
.choice-card > input { margin: 3px 0 0; }
.choice-card > .help { grid-column: 2; }
.choice-card:has(> input:checked) { border-color: var(--canopy); box-shadow: inset 0 0 0 1px var(--canopy); background: var(--good-tint); }
.choice-card:has(> input:disabled) { cursor: not-allowed; color: var(--ink-3); background: var(--sheet-2); }
.choice-card:has(> input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.choice-cards .error { grid-column: 1 / -1; }
.people-pick { border: 1px solid var(--rule); border-radius: var(--radius-input); padding: 10px 14px; max-height: 340px; overflow: auto; }
.people-group { border: 0; margin: 0 0 8px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 2px 14px; }
.people-group > legend { font-size: 0.8333rem; font-weight: 600; color: var(--ink-2); padding: 0; margin: 6px 0 2px; }
.people-group .check-field { font-weight: 400; }
.job-estimate { padding: 10px 14px; border: 1px solid var(--rule); border-radius: var(--radius-input); background: var(--sheet-2); }
.job-priority-pick .check-field + .check-field { margin-top: 2px; }
@media (max-width: 720px) {
  .job-list > li { grid-template-columns: 34px minmax(0, 1fr); }
  .job-actions { grid-column: 2; justify-content: flex-start; }
}

/* the production schedule (manufacturing/schedule.html) */
.sched-list > li { grid-template-columns: 150px minmax(0, 1fr) auto; align-items: start; }
.sched-needs { margin-top: 6px; }
.sched-needs > summary { cursor: pointer; font-size: 0.8333rem; color: var(--link); width: fit-content; }
.sched-needs .table-wrap { margin-top: 6px; }
.sched-day { display: flex; gap: 6px; align-items: center; }
.sched-day input[type=date] { min-height: 32px; padding: 4px 8px; width: auto; }
@media (max-width: 720px) {
  .sched-list > li { grid-template-columns: minmax(0, 1fr); }
}

/* Settings: on a phone, each entry's description goes under its name instead of in a narrow column */
@media (max-width: 720px) {
  .settings-index tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; border-bottom: 1px solid var(--rule); }
  .settings-index tr:last-child { border-bottom: 0; }
  .settings-index td { display: block; width: auto !important; border-bottom: 0 !important; }
  .settings-index td:nth-child(2) { grid-column: 1 / -1; grid-row: 2; padding-top: 0; }
}


/* Late punches: what a manager decides on (people/late_punches.html), and the marks on time sheets */
.late-review { list-style: none; margin: 0; padding: 0; }
.late-item { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 22rem); gap: 14px 28px; padding: 16px 18px; border-top: 1px solid var(--rule); }
.late-item:first-child { border-top: 0; }
.late-problem { margin: 8px 0 0; font-size: 0.9rem; }
.late-decide { display: grid; gap: 10px; align-content: start; margin: 0; }
.late-choices { border: 0; margin: 0; padding: 0; display: grid; gap: 4px; }
.late-at { margin: 0 0 4px 26px; }
.late-why { margin: 0; }
.late-all { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px; }
.late-all .field { flex: 1 1 16rem; margin: 0; }
.time-days .late-mark { color: var(--signal-ink); }
@media (max-width: 720px) {
  .late-item { grid-template-columns: minmax(0, 1fr); padding: 14px 16px; }
  .late-at { margin-left: 0; }
}
/* the time box only when "another time" is picked (browsers without :has() always show it) */
.late-choices:not(:has(input[value=change]:checked)) .late-at { display: none; }

/* The menu on the ordering links: checking what was read from the PDF (distribution/menu_review.html) */
.menu-sum { margin: 0 0 16px; }
.menu-review-all { border: 0; margin: 0; padding: 0; min-width: 0; }
.form-grid > .field.sixth { grid-column: span 1; }
.menu-deal { border: 0; margin: 0; padding: 14px 0; border-top: 1px solid var(--rule); min-width: 0; }
.menu-deal:first-of-type { border-top: 0; padding-top: 4px; }
.menu-deal-on { flex-direction: row; align-items: center; align-self: end; min-height: 40px; }
.menu-deal-new { margin-top: 8px; border-top: 1px solid var(--rule); padding-top: 12px; }
.menu-deal-new > summary { cursor: pointer; font-weight: 600; color: var(--link); }
.mrows { list-style: none; margin: 0; padding: 0; }
.mrow { display: grid; grid-template-columns: 56px minmax(0, 1.3fr) minmax(0, 1.5fr) minmax(13rem, 1fr) auto; gap: 10px 16px;
        align-items: start; padding: 14px 18px; border-top: 1px solid var(--rule); }
.mrow:first-child { border-top: 0; }
.mrow.is-hidden { background: var(--muted-tint); }
.mrow .field { margin: 0 0 8px; gap: 3px; }
.mrow .field label { font-size: 0.8125rem; color: var(--ink-3); }
.mrow-photo img { display: block; width: 56px; height: 78px; object-fit: contain; background: #fff; border-radius: 6px; border: 1px solid var(--rule); }
.mrow-meta { margin: 0; font-size: 0.8125rem; color: var(--ink-3); }
.mrow-problem { margin: 4px 0 0; font-size: 0.8125rem; color: var(--signal-ink); font-weight: 500; }
.mrow-prices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 8px; }
.mrow-prices .num-input { text-align: right; font-variant-numeric: tabular-nums; padding-left: 8px; padding-right: 8px; }
.mrow-flags { display: grid; gap: 8px; padding-top: 22px; white-space: nowrap; }
.mrow-match { margin: 0; font-size: 0.8125rem; font-weight: 600; }
.mrow-match.is-sure, .mrow-match.is-person { color: var(--good-ink); }
.mrow-match.is-check { color: var(--signal-ink); }
.mrow-match.is-none { color: var(--alert); }
.mrow-match.is-hidden { color: var(--ink-3); }
.menu-review-actions { position: sticky; bottom: 0; z-index: 4; padding: 12px 0; background: var(--paper); }
@media (max-width: 980px) {
  .mrow { grid-template-columns: 56px minmax(0, 1fr) minmax(0, 1fr); }
  .mrow-prices { grid-column: 2 / -1; }
  .mrow-flags { grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: 8px 18px; padding-top: 0; }
}
@media (max-width: 720px) {
  .form-grid > .field.sixth { grid-column: span 3; }
  .mrow { grid-template-columns: 48px minmax(0, 1fr); padding: 14px 16px; }
  .mrow-item, .mrow-prices, .mrow-flags { grid-column: 1 / -1; }
  .mrow-photo img { width: 48px; height: 66px; }
}

/* Settings → Going live */
.go-live-progress { display: block; width: 100%; height: 10px; margin: 4px 0 8px; accent-color: var(--good); }

/* The old address's banner (saaskit/moved.py), in the mark's colors whatever the look: it isn't part of any look. */
.moved-banner { background: #232A31; color: #F6F3EE; padding: 10px 16px; font-size: 0.95rem; line-height: 1.4; }
.moved-banner p { margin: 0; max-width: 72rem; }
.moved-banner a { color: #F2B23A; font-weight: 600; text-decoration: underline; }
.moved-banner a:focus-visible { outline: 3px solid #F2B23A; outline-offset: 2px; }
@media print { .moved-banner { display: none; } }