/* Returns Desk - one self-contained stylesheet. No web fonts, no CDNs: every
   asset is served by our own server, so pages load the same from Houston and
   from mainland China. Colours: explicit tokens (no color-mix) so older
   Chinese browsers (360 / WeChat / WeCom built-ins) render them too.

   Colour families (tone-*), used consistently everywhere:
     blue   = seller's move / checks      orange = warehouse team
     violet = manager / quotes / transfer teal   = inventory update
     green  = done / keep & store         red    = problem / overdue / destroy
     amber  = due today / special work    gray   = draft / hold / neutral   */

:root {
  color-scheme: light;
  --page: #f4f4f1;
  --surface: #fdfdfc;
  --surface-2: #f1f0ec;
  --surface-3: #e9e8e3;
  --ink: #0f0f0e;
  --ink-2: #4c4b48;
  --muted: #6c6a65;
  --grid: #e3e2db;
  --axis: #c9c7bd;
  --border: rgba(15, 15, 14, 0.10);
  --shadow: 0 1px 2px rgba(20, 20, 18, 0.06), 0 2px 8px rgba(20, 20, 18, 0.04);
  --shadow-lg: 0 8px 28px rgba(20, 20, 18, 0.14);
  --accent: #1c5cab;
  --accent-ink: #ffffff;
  --accent-soft: #e8f1fc;
  --row-hover: rgba(28, 92, 171, 0.075);  /* rows that open a page, under the mouse */
  --focus: #2a78d6;

  --blue: #2a78d6;   --blue-bg: #e9f2fd;   --blue-border: #b6d2f6;   --blue-ink: #174f93;
  --orange: #eb6834; --orange-bg: #fdefe8; --orange-border: #f6c2a9; --orange-ink: #a2401a;
  --violet: #6250d6; --violet-bg: #efedfc; --violet-border: #c7c0f3; --violet-ink: #4535a8;
  --teal: #1baf7a;   --teal-bg: #e5f6ef;   --teal-border: #a9e0c9;   --teal-ink: #0d6e4b;
  --green: #0ca30c;  --green-bg: #e8f5e8;  --green-border: #ade0ad;  --green-ink: #0b6b0b;
  --red: #d03b3b;    --red-bg: #fcecec;    --red-border: #f1b3b3;    --red-ink: #a32828;
  --amber: #eda100;  --amber-bg: #fdf5e1;  --amber-border: #f2d382;  --amber-ink: #7d5300;
  --gray: #898781;   --gray-bg: #f0efeb;   --gray-border: #d8d6cd;   --gray-ink: #4c4b48;

  --seg-closed: #008300; --seg-seller: #2a78d6; --seg-warehouse: #eb6834; --seg-manager: #6250d6;
  --avatar-ring: rgba(0, 0, 0, 0.18);
  --radius: 12px;
  --radius-sm: 9px;
  --tabbar-h: 64px;
  --font: system-ui, -apple-system, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", "Noto Sans", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --page: #0e0e0d; --surface: #1a1a19; --surface-2: #232321; --surface-3: #2c2c29;
    --ink: #f0efec; --ink-2: #cfcdc4; --muted: #9c9a91; --grid: #2c2c2a; --axis: #45453f;
    --border: rgba(255, 255, 255, 0.10);
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.55);
    --accent: #3987e5; --accent-ink: #0b0b0b; --accent-soft: #16273d; --focus: #6da7ec; --row-hover: rgba(57, 135, 229, 0.15);
    --blue: #3987e5;   --blue-bg: #14253b;   --blue-border: #23508a;   --blue-ink: #8fbdf2;
    --orange: #e0662f; --orange-bg: #34200f; --orange-border: #84401f; --orange-ink: #f4a47e;
    --violet: #9085e9; --violet-bg: #231f3f; --violet-border: #4d43a0; --violet-ink: #bdb5f5;
    --teal: #22b07f;   --teal-bg: #10291f;   --teal-border: #1d6b4e;   --teal-ink: #6fd6ae;
    --green: #2cb52c;  --green-bg: #112611;  --green-border: #22682a;  --green-ink: #7bd47b;
    --red: #e66767;    --red-bg: #361616;    --red-border: #873131;    --red-ink: #f6a3a3;
    --amber: #e0a312;  --amber-bg: #332710;  --amber-border: #7d5d0a;  --amber-ink: #f3cb6a;
    --gray: #8d8b84;   --gray-bg: #242422;   --gray-border: #43423e;   --gray-ink: #cfcdc4;
    --seg-closed: #2cb52c; --seg-seller: #3987e5; --seg-warehouse: #d95926; --seg-manager: #9085e9;
    --avatar-ring: rgba(255, 255, 255, 0.3);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #0e0e0d; --surface: #1a1a19; --surface-2: #232321; --surface-3: #2c2c29;
  --ink: #f0efec; --ink-2: #cfcdc4; --muted: #9c9a91; --grid: #2c2c2a; --axis: #45453f;
  --border: rgba(255, 255, 255, 0.10);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.55);
  --accent: #3987e5; --accent-ink: #0b0b0b; --accent-soft: #16273d; --focus: #6da7ec; --row-hover: rgba(57, 135, 229, 0.15);
  --blue: #3987e5;   --blue-bg: #14253b;   --blue-border: #23508a;   --blue-ink: #8fbdf2;
  --orange: #e0662f; --orange-bg: #34200f; --orange-border: #84401f; --orange-ink: #f4a47e;
  --violet: #9085e9; --violet-bg: #231f3f; --violet-border: #4d43a0; --violet-ink: #bdb5f5;
  --teal: #22b07f;   --teal-bg: #10291f;   --teal-border: #1d6b4e;   --teal-ink: #6fd6ae;
  --green: #2cb52c;  --green-bg: #112611;  --green-border: #22682a;  --green-ink: #7bd47b;
  --red: #e66767;    --red-bg: #361616;    --red-border: #873131;    --red-ink: #f6a3a3;
  --amber: #e0a312;  --amber-bg: #332710;  --amber-border: #7d5d0a;  --amber-ink: #f3cb6a;
  --gray: #8d8b84;   --gray-bg: #242422;   --gray-border: #43423e;   --gray-ink: #cfcdc4;
  --seg-closed: #2cb52c; --seg-seller: #3987e5; --seg-warehouse: #d95926; --seg-manager: #9085e9;
  --avatar-ring: rgba(255, 255, 255, 0.3);
}

/* tone-* sets four variables that components read (--t, --t-bg, --t-border, --t-ink) */
.tone-blue   { --t: var(--blue);   --t-bg: var(--blue-bg);   --t-border: var(--blue-border);   --t-ink: var(--blue-ink); }
.tone-orange { --t: var(--orange); --t-bg: var(--orange-bg); --t-border: var(--orange-border); --t-ink: var(--orange-ink); }
.tone-violet { --t: var(--violet); --t-bg: var(--violet-bg); --t-border: var(--violet-border); --t-ink: var(--violet-ink); }
.tone-teal   { --t: var(--teal);   --t-bg: var(--teal-bg);   --t-border: var(--teal-border);   --t-ink: var(--teal-ink); }
.tone-green  { --t: var(--green);  --t-bg: var(--green-bg);  --t-border: var(--green-border);  --t-ink: var(--green-ink); }
.tone-red    { --t: var(--red);    --t-bg: var(--red-bg);    --t-border: var(--red-border);    --t-ink: var(--red-ink); }
.tone-amber  { --t: var(--amber);  --t-bg: var(--amber-bg);  --t-border: var(--amber-border);  --t-ink: var(--amber-ink); }
.tone-gray   { --t: var(--gray);   --t-bg: var(--gray-bg);   --t-border: var(--gray-border);   --t-ink: var(--gray-ink); }

/* ---- Base ---------------------------------------------------------------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--page); color: var(--ink); font: 15px/1.5 var(--font); }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 1.5rem; margin: 0 0 4px; line-height: 1.25; letter-spacing: -0.01em; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
h2 { font-size: 1.05rem; margin: 0 0 10px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
h2.inline { display: inline-flex; margin: 0; }
h3 { font-size: 0.98rem; margin: 8px 0; }
p { margin: 0 0 10px; }
img { max-width: 100%; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.mono { font-family: var(--mono); font-size: 0.92em; overflow-wrap: anywhere; }
.upper { text-transform: uppercase; }
.upper::placeholder { text-transform: none; }
.muted { color: var(--muted); }
.small { font-size: 0.85rem; }
.nowrap { white-space: nowrap; }
.inline { display: inline; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.lead { font-size: 1.05rem; color: var(--ink-2); }

/* ---- Layout -------------------------------------------------------------- */
.container { max-width: 1240px; margin: 0 auto; padding: 18px 18px 28px; }
.container.narrow { max-width: 600px; }
.container.wide { max-width: 1440px; }   /* table-heavy pages (batch) use more of a big screen */
.row { display: flex; gap: 8px; align-items: center; }
.row.wrap, .wrap { flex-wrap: wrap; }
.row-between, .section-head { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.grow { flex: 1; }
.stack > * + * { margin-top: 10px; }
.grid-2, .grid-main { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 900px) {
  .grid-2 { grid-template-columns: 1fr 1fr; }
  .grid-main { grid-template-columns: minmax(0, 1fr) 360px; }
}
.page-head { margin: 4px 0 16px; }
.crumbs { font-size: 0.85rem; color: var(--muted); margin-bottom: 4px; }
.section { margin-bottom: 18px; }
/* Headings, one clear level per job: page section (accent bar) > card title > group band > row text */
.section-title { display: flex; align-items: center; gap: 10px; font-size: 1.22rem; font-weight: 800; color: var(--ink); margin: 0 0 10px; }
.section-title::before { content: ""; flex: none; width: 5px; height: 1.05em; border-radius: 3px; background: var(--accent); }
.subhead { font-size: 0.9rem; font-weight: 650; color: var(--ink-2); margin: 0 0 6px; }
.card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 12px; }
.card-head h2 { margin: 0; }
.card-tools, .toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; }
.toolbar { justify-content: space-between; margin-bottom: 14px; }
.card-tools .legend, .toolbar .legend, .toolbar .filters { margin: 0; }
.group-head { display: flex; align-items: center; gap: 8px; margin: 16px 0 2px; padding: 6px 12px; border-radius: var(--radius-sm);
  background: var(--t-bg); border-left: 4px solid var(--t); color: var(--t-ink); font-weight: 750; }
.group-head:first-child { margin-top: 0; }

/* ---- Top bar ------------------------------------------------------------- */
.topbar { position: sticky; top: 0; z-index: 20; display: flex; gap: 10px 16px; align-items: center;
  padding: 8px 18px; background: var(--surface); border-bottom: 1px solid var(--border); box-shadow: var(--shadow); }
.brand { display: flex; flex-direction: column; line-height: 1.2; color: var(--ink); white-space: nowrap; }
.brand:hover { text-decoration: none; }
.brand-org { font-size: 0.74rem; font-weight: 600; color: var(--muted); }
.brand-product { font-size: 1.02rem; font-weight: 750; }
.nav { display: flex; flex-wrap: wrap; gap: 2px; flex: 1; }
.nav a { color: var(--ink-2); padding: 6px 10px; border-radius: 8px; }
.nav a:hover { background: var(--surface-2); text-decoration: none; }
.scanbox { position: relative; display: flex; gap: 4px; align-items: center; }
.scanbox input { width: 210px; margin: 0; padding-left: 30px; border-radius: 999px; background: var(--surface-2); border-color: transparent; }
.scanbox-icon { position: absolute; left: 11px; color: var(--muted); pointer-events: none; z-index: 1; }
.me { display: flex; gap: 8px; align-items: center; font-size: 0.9rem; }
.me form { margin: 0; }
.me-name { font-weight: 600; }
.langswitch { display: inline-flex; border: 1px solid var(--axis); border-radius: 999px; overflow: hidden; }
.lang-btn { font: inherit; font-size: 0.8rem; padding: 4px 10px; border: 0; background: transparent; color: var(--ink-2); cursor: pointer; min-height: 30px; }
.lang-btn + .lang-btn { border-left: 1px solid var(--axis); }
.lang-btn.active { background: var(--accent); color: var(--accent-ink); font-weight: 700; }
.theme-toggle { border-radius: 999px; }
.theme-icon-dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-icon-dark { display: inline; }
  :root:not([data-theme="light"]) .theme-icon-light { display: none; }
}
:root[data-theme="dark"] .theme-icon-dark { display: inline; }
:root[data-theme="dark"] .theme-icon-light { display: none; }

/* ---- Bottom tab bar (phones) --------------------------------------------- */
.tabbar { display: none; }
.phone-only { display: none; }
@media (max-width: 720px) {
  body { font-size: 16px; }
  .container { padding: 12px 12px 20px; }
  .has-tabbar .container { padding-bottom: calc(var(--tabbar-h) + 24px + env(safe-area-inset-bottom)); }
  .topbar { padding: 8px 12px; gap: 8px; }
  .brand, .nav, .desktop-only { display: none !important; }
  .phone-only { display: block; }
  .scanbox { flex: 1; }
  .scanbox input { width: 100%; min-height: 40px; }
  .tabbar { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    height: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
    background: var(--surface); border-top: 1px solid var(--border); box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.06); }
  .tabbar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--muted); font-size: 0.72rem; text-decoration: none; }
  .tabbar a.active { color: var(--accent); font-weight: 700; }
  .tab-icon { font-size: 1.3rem; line-height: 1; }
  .tab-scan .tab-icon { display: grid; place-items: center; width: 46px; height: 46px; margin-top: -18px; border-radius: 50%;
    background: linear-gradient(135deg, #2a78d6, #1c5cab); color: #fff; font-size: 1.4rem; box-shadow: 0 4px 12px rgba(28, 92, 171, 0.45); }
  .no-tabbar .tabbar { display: none; }
  .no-tabbar .container { padding-bottom: 12px; }
  h1 { font-size: 1.3rem; }
}

/* ---- Cards --------------------------------------------------------------- */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; margin-bottom: 16px; box-shadow: var(--shadow); }
[class*="card-tone-"] { border-top: 4px solid var(--t, var(--axis)); }
.card-tone-blue { --t: var(--blue); } .card-tone-orange { --t: var(--orange); } .card-tone-violet { --t: var(--violet); }
.card-tone-teal { --t: var(--teal); } .card-tone-green { --t: var(--green); } .card-tone-red { --t: var(--red); }
.card-tone-amber { --t: var(--amber); } .card-tone-gray { --t: var(--gray); }
.card-tone-red.card-strong { background: var(--red-bg); border-color: var(--red-border); border-top-color: var(--red); }
.card-tone-violet.card-strong { background: var(--violet-bg); border-color: var(--violet-border); border-top-color: var(--violet); }
details.card > summary { cursor: pointer; list-style: none; }
details.card > summary::-webkit-details-marker { display: none; }
details.card > summary h2::after { content: "▾"; color: var(--muted); font-size: 0.85em; }
details.card:not([open]) > summary h2::after { content: "▸"; }
.count { display: inline-block; min-width: 24px; padding: 0 8px; border-radius: 999px; background: var(--surface-3); color: var(--ink-2); font-size: 0.8rem; text-align: center; font-weight: 700; line-height: 1.7; }
.empty-state { list-style: none; display: flex; gap: 10px; align-items: center; padding: 18px; color: var(--muted); background: var(--surface-2); border-radius: var(--radius-sm); }

/* ---- Forms --------------------------------------------------------------- */
label { display: block; font-size: 0.9rem; color: var(--ink-2); }
input, select, textarea { font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--axis); border-radius: var(--radius-sm); padding: 9px 11px; min-height: 42px; width: 100%; margin-top: 4px; }
input:focus, select:focus, textarea:focus { border-color: var(--focus); outline: 2px solid var(--accent-soft); }
input[type="checkbox"], input[type="radio"] { width: 18px; height: 18px; min-height: 0; margin: 0; accent-color: var(--accent); }
label.check { display: flex; gap: 8px; align-items: center; color: var(--ink); }
.row label { margin: 0; }
.row input, .row select { margin-top: 0; }
fieldset { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; margin: 0 0 10px; }
legend { font-size: 0.85rem; color: var(--muted); padding: 0 4px; }
.grid-form { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); align-items: end; }
.form-line { margin: 12px 0; }
.big-input { font-size: 1.25rem; min-height: 52px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font: inherit; font-weight: 650; min-height: 42px; padding: 8px 16px; white-space: nowrap;
  border-radius: var(--radius-sm); border: 1px solid var(--axis); background: var(--surface); color: var(--ink); cursor: pointer; text-decoration: none; box-shadow: var(--shadow); }
.btn:hover { background: var(--surface-2); text-decoration: none; }
.btn:disabled { opacity: 0.55; cursor: progress; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { background: var(--accent); filter: brightness(1.08); }
.btn-danger { border-color: var(--red-border); color: var(--red-ink); background: var(--red-bg); }
.btn-small { min-height: 34px; padding: 4px 12px; font-size: 0.85rem; font-weight: 600; box-shadow: none; }
.btn-block { width: 100%; }
.btn-camera { font-size: 1.3rem; min-width: 52px; }
.icon-btn { display: inline-grid; place-items: center; min-width: 40px; min-height: 40px; border: 1px solid var(--axis); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); font-size: 1.05rem; cursor: pointer; }
.linklike { background: none; border: 0; padding: 0; color: var(--accent); font: inherit; cursor: pointer; }
form.inline { display: inline; }
.segmented { display: flex; gap: 0; border: 1px solid var(--axis); border-radius: var(--radius-sm); overflow: hidden; }
.segmented button { flex: 1; font: inherit; padding: 10px 8px; border: 0; background: var(--surface); color: var(--ink-2); cursor: pointer; min-height: 46px; }
.segmented button + button { border-left: 1px solid var(--axis); }
.segmented button.active { background: var(--accent); color: var(--accent-ink); font-weight: 700; }
.list-links { display: grid; margin-bottom: 12px; }
.list-links a { display: flex; gap: 10px; align-items: center; padding: 12px 4px; border-bottom: 1px solid var(--grid); color: var(--ink); }
.list-links .chev { margin-left: auto; color: var(--muted); }

/* "?" buttons: explanations stay hidden until asked for */
.help-q { position: relative; display: inline-grid; place-items: center; flex: none; width: 22px; height: 22px; padding: 0; vertical-align: middle;
  border: 1px solid var(--axis); border-radius: 50%; background: var(--surface); color: var(--muted); font: 700 0.75rem/1 var(--font); cursor: pointer; }
.help-q::after { content: ""; position: absolute; inset: -9px; }
.help-q:hover, .help-q[aria-expanded="true"] { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.help-text { margin: 0 0 12px; padding: 8px 12px; border-radius: var(--radius-sm); background: var(--surface-2); color: var(--ink-2); font-size: 0.88rem; }
.js .help-text:not(.open) { display: none; }   /* without JavaScript the text simply stays visible */
html:not(.js) .help-q { display: none; }
.label-line { display: flex; align-items: center; gap: 6px; font-size: 0.9rem; color: var(--ink-2); }

/* ---- Messages ------------------------------------------------------------ */
.messages { margin-bottom: 12px; }
.evidence .messages { margin-bottom: 8px; }   /* moved into the slot that was just used (app.js) */
.msg { padding: 10px 14px; border-radius: var(--radius-sm); margin-bottom: 8px; border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow); }
.msg-success { border-left: 5px solid var(--green); background: var(--green-bg); }
.msg-warning { border-left: 5px solid var(--amber); background: var(--amber-bg); }
.msg-error { border-left: 5px solid var(--red); background: var(--red-bg); }

/* ---- Chips, tags, badges --------------------------------------------------- */
.chip, .tag { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 999px; font-size: 0.85rem; white-space: nowrap; line-height: 1.6;
  background: var(--t-bg, var(--surface-2)); border: 1px solid var(--t-border, var(--border)); color: var(--ink); }
.chip-icon { color: var(--t, var(--muted)); font-weight: 800; }
.chip-owner .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--t, var(--muted)); }
.tag { font-weight: 600; border-radius: 8px; padding: 2px 9px; }
.tag-icon { font-size: 1em; }
.tag-sm { font-size: 0.78rem; padding: 0 7px; }
.tag-link { color: var(--ink); text-decoration: none; }
.tag-link:hover { text-decoration: none; filter: brightness(0.97); }
.tag-link.active { box-shadow: 0 0 0 2px var(--t, var(--accent)); }
.tag-count { margin-left: 2px; padding: 0 7px; border-radius: 999px; background: var(--surface); color: var(--t-ink, var(--ink)); }
.chip-link { color: var(--ink-2); }
.chip-link.active { background: var(--accent-soft); border-color: var(--accent); color: var(--ink); }
.chip-btn { cursor: pointer; font: inherit; margin-top: 6px; }
.chips, .filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
form.filters { align-items: center; gap: 8px 10px; }
form.filters input:not([type=checkbox]), form.filters select { width: auto; margin: 0; flex: 0 1 190px; min-width: 0; }
form.filters input[name=q] { flex: 1 1 260px; }
.scroll-x { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--muted); flex: none; }
.dot.party-seller { background: var(--blue); }
.dot.party-warehouse { background: var(--orange); }
.badge { display: inline-block; padding: 0 8px; border-radius: 6px; background: var(--t-bg, var(--surface-2)); border: 1px solid var(--t-border, transparent); color: var(--t-ink, var(--ink-2)); font-size: 0.78rem; font-weight: 650; white-space: nowrap; }
.badge.warn { background: var(--amber-bg); border-color: var(--amber-border); color: var(--amber-ink); }
.badge.muted { color: var(--muted); }
.num-pill { display: inline-block; padding: 0 8px; border-radius: 999px; font-weight: 700; font-variant-numeric: tabular-nums; background: var(--t-bg, var(--surface-2)); color: var(--t-ink, var(--ink-2)); border: 1px solid var(--t-border, var(--border)); }
.seg-closed-text { background: var(--green-bg); color: var(--green-ink); border: 1px solid var(--green-border); }
.status-critical { color: var(--red-ink); font-weight: 700; }
.status-good { color: var(--green-ink); font-weight: 700; }

/* due / waiting: status colours always with an icon and words */
.due { display: inline-flex; align-items: center; gap: 5px; font-size: 0.84rem; white-space: nowrap; border-radius: 999px; padding: 1px 9px; font-weight: 600; }
.due-icon { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; font-size: 11px; font-weight: 900; }
.due-overdue { background: var(--red); color: #fff; }
.due-overdue .due-icon { background: #fff; color: var(--red); }
.due-today { background: var(--amber-bg); color: var(--amber-ink); border: 1px solid var(--amber-border); }
.due-today .due-icon { background: var(--amber); color: #fff; }
.due-ok { color: var(--muted); font-weight: 500; padding-left: 0; }
.due-waiting { color: var(--muted); font-weight: 500; padding-left: 0; }
.due-waiting.w-mid { color: var(--amber-ink); background: var(--amber-bg); padding-left: 9px; }
.due-waiting.w-long { color: var(--orange-ink); background: var(--orange-bg); border: 1px solid var(--orange-border); padding-left: 9px; font-weight: 700; }

/* ---- Tables -------------------------------------------------------------- */
.table-wrap { overflow-x: auto; margin: 0 -4px; padding: 0 4px; }
.table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.table th { text-align: left; font-weight: 650; color: var(--muted); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.02em; border-bottom: 1px solid var(--axis); padding: 6px 8px; white-space: nowrap; }
.lang-zh .table th { text-transform: none; font-size: 0.82rem; }
.table td { border-bottom: 1px solid var(--border); padding: 9px 8px; vertical-align: top; }
/* A row that opens a page (data-href, app.js): the whole row is the link, tinted under the
   mouse with a bar on its left edge and a "›" at the end. The tint keeps a red overdue row red. */
.table tbody tr:hover td { background-image: linear-gradient(var(--row-hover), var(--row-hover)); }
.table tr[data-href] { cursor: pointer; }
.table tr[data-href]:hover td:first-child { box-shadow: inset 4px 0 0 var(--accent); }
.table tr.row-overdue[data-href]:hover td:first-child { box-shadow: inset 4px 0 0 var(--red); }
.table td.c-go { width: 1rem; padding-left: 0; color: var(--muted); font-size: 1.2rem; line-height: 1; vertical-align: middle; }
.table tr[data-href]:hover td.c-go { color: var(--accent); }
.table.compact td, .table.compact th { padding: 5px 6px; }
.sort-link { display: inline-flex; align-items: center; gap: 4px; color: inherit; white-space: nowrap; }
.sort-link:hover { color: var(--ink); text-decoration: none; }
.sort-link.active { color: var(--accent); }
.sort-ind { font-size: 0.8em; opacity: 0.45; }
.sort-link.active .sort-ind { opacity: 1; }
.table tr.row-overdue td { background: var(--red-bg); }
.table tr.row-overdue td:first-child { box-shadow: inset 4px 0 0 var(--red); }
.table td.thumbs { white-space: nowrap; min-width: 120px; }
.table td.thumbs img { width: 34px; height: 34px; max-width: none; object-fit: cover; border-radius: 7px; margin-right: 3px; vertical-align: middle; border: 1px solid var(--border); }
.table td.mono { white-space: nowrap; overflow-wrap: normal; }
.table.trilingual td { width: 33%; }
.instr-cell { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; }
/* Batch table on computers (the card versions below come later in the file, so they win on narrow screens) */
.batch-items td.b-track, .batch-items td.b-sku { white-space: nowrap; }   /* code and its flag stay on one line */
.batch-items .due-wd { display: none; }   /* dense table: "10月20日 (+2)" */
.batch-items td.b-instr { min-width: 11rem; }
.table.batch-items td, .table.batch-items th { padding-left: 6px; padding-right: 6px; }
.table.batch-items th { white-space: normal; }   /* long English headings wrap instead of widening the table */
.table td.thumbs.b-photos { min-width: 0; }
.more-photos { font-size: 0.8rem; color: var(--muted); vertical-align: middle; }
.batch-items td.b-by { color: var(--muted); white-space: nowrap; }
/* When the table is wider than the screen, app.js drops the least needed columns, one level at a
   time, until it fits: who gave the instruction (also on the item page and in the workflow chart),
   then the next owner (the status chip's colour and wording still say whose turn it is), then the photo. */
.table.drop-1 .b-by, .table.drop-2 .b-owner, .table.drop-3 .b-photos { display: none; }
/* Lists on phones: each row becomes a compact card instead of many squeezed columns. */
@media (max-width: 719px) {
  .item-list thead { display: none; }
  .item-list, .item-list tbody { display: block; }
  .item-list tr { display: grid; align-items: center; gap: 4px 10px; padding: 10px 8px; border-bottom: 1px solid var(--border); }
  .item-list td, .table.item-list tr.row-overdue td { display: block; padding: 0; border: 0; background: none; box-shadow: none; min-width: 0; }
  .item-list tr.row-overdue { background: var(--red-bg); box-shadow: inset 4px 0 0 var(--red); }
  /* item lists: ref .. deadline / tracking .. SKU / status .. next step by */
  .item-list tr { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "ref due" "track sku" "status owner"; }
  .item-list .c-ref { grid-area: ref; } .item-list .c-due { grid-area: due; justify-self: end; }
  .item-list .c-track { grid-area: track; font-size: 0.85rem; overflow-wrap: anywhere; } .item-list .c-sku { grid-area: sku; justify-self: end; font-size: 0.85rem; }
  .item-list .c-status { grid-area: status; } .item-list .c-owner { grid-area: owner; justify-self: end; }
  .table.item-list tr td.c-go { display: none; }   /* the whole card is the link */
  .item-list tr[data-href]:active { background-image: linear-gradient(var(--row-hover), var(--row-hover)); }
}
/* The batch table has more columns, so it becomes cards below 1200 px (tablets too): tick box on the
   left, then number .. deadline / tracking .. SKU / photo / instruction .. given by / status .. owner -
   the key value on the left, its partner right-aligned on the same line. */
@media (max-width: 1199px) {
  .batch-items thead { display: none; }
  .batch-items, .batch-items tbody { display: block; }
  .batch-items tr { display: grid; align-items: center; gap: 4px 10px; padding: 10px 8px; border-bottom: 1px solid var(--border); }
  .batch-items td, .table.batch-items tr.row-overdue td, .table.batch-items td { display: block; padding: 0; border: 0; background: none; box-shadow: none; min-width: 0; }
  .batch-items tr.row-overdue { background: var(--red-bg); box-shadow: inset 4px 0 0 var(--red); }
  .batch-items tr { grid-template-columns: auto minmax(min-content, 1fr) auto; grid-template-areas: "check ref due" "check track sku" "check photos photos" "check instr by" "check status owner"; }
  .batch-items .b-check { grid-area: check; align-self: start; padding-top: 2px; min-width: 22px; } .batch-items .b-ref { grid-area: ref; }
  .batch-items .b-due { grid-area: due; justify-self: end; }
  .batch-items td.b-track { grid-area: track; font-size: 0.85rem; }   /* never broken mid-number; a long SKU wraps instead */
  .batch-items td.b-sku { grid-area: sku; justify-self: end; text-align: right; font-size: 0.85rem; white-space: normal; overflow-wrap: anywhere; }
  .batch-items .b-photos { grid-area: photos; } .batch-items td.b-instr { grid-area: instr; min-width: 0; } .batch-items .b-by { grid-area: by; justify-self: end; }
  .batch-items .b-status { grid-area: status; } .batch-items .b-owner { grid-area: owner; justify-self: end; }
  .table.batch-items tr td.b-photos:empty, .table.batch-items tr td.b-instr:empty, .table.batch-items tr td.b-by:empty, .table.batch-items tr td.c-go { display: none; }
  .batch-items tr[data-href]:active { background-image: linear-gradient(var(--row-hover), var(--row-hover)); }
}
}
}
.table td.col-instr { min-width: 210px; }

/* ---- KPI tiles ----------------------------------------------------------- */
/* Tiles keep a modest width; the spare room goes between them. */
.kpis { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px 24px; margin-bottom: 18px; }
.kpis > .tile { flex: 1 1 260px; max-width: 300px; }
@media (max-width: 1150px) { .kpis:not(.kpis-3) > .tile { flex-basis: calc(50% - 12px); max-width: none; } }  /* 4 tiles: 2 x 2, never 3 + 1 */
/* Tile: icon and label on one line, a short note under them, the number large on the right. */
.tile { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "icon label value" "sub sub value";
  align-items: center; gap: 4px 10px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px 14px 18px; box-shadow: var(--shadow); color: var(--ink); overflow: hidden; }
a.tile:hover { text-decoration: none; box-shadow: var(--shadow-lg); }
.tile::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--t, var(--axis)); }
.tile-icon { grid-area: icon; display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: var(--t-bg, var(--surface-2)); font-size: 1.05rem; }
.tile-label { grid-area: label; font-size: 1.05rem; font-weight: 650; line-height: 1.3; }
.tile-value { grid-area: value; font-size: 2.6rem; font-weight: 750; line-height: 1; text-align: right; font-variant-numeric: tabular-nums; padding-left: 4px; }
.tile-sub { grid-area: sub; font-size: 0.84rem; color: var(--muted); }
.tile-alert { background: var(--red-bg); border-color: var(--red-border); }
.tile-alert::before { background: var(--red); width: 6px; }

/* ---- Batch progress: stacked bar ---------------------------------------- */
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 0.85rem; color: var(--ink-2); margin-bottom: 8px; }
.legend-item { display: inline-flex; align-items: center; gap: 6px; }
.swatch { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
.seg-closed { background: var(--seg-closed); } .seg-seller { background: var(--seg-seller); }
.seg-warehouse { background: var(--seg-warehouse); } .seg-manager { background: var(--seg-manager); }
/* "pbar", not "stack": .stack is the vertical-spacing helper used by forms */
.pbar { display: flex; gap: 2px; height: 12px; border-radius: 999px; overflow: hidden; background: var(--surface-3); min-width: 120px; }
.pbar-lg { height: 14px; flex: 1; min-width: 220px; max-width: 520px; }
.pbar-seg { display: block; height: 100%; min-width: 4px; }
.batchlist { list-style: none; padding: 0; margin: 0; }
/* One batch per row, each value in its own column so the bars line up:
   label | date (send-by chip while registering, else received) | bar | counts | ›
   The whole row is the link: tinted under the mouse, with a bar on its left edge. */
.batch-row { display: grid; grid-template-columns: 8rem 12rem minmax(140px, 1fr) 9.5rem 1rem; gap: 16px; align-items: center; padding: 12px 10px; border-bottom: 1px solid var(--border); color: var(--ink); }
.batchlist.multi .batch-row { grid-template-columns: 8rem 3.5rem 12rem minmax(140px, 1fr) 9.5rem 1rem; }
.batch-head { display: contents; }
.batch-label { font-size: 1.02rem; font-weight: 750; min-width: 0; }
.batch-seller, .batch-date { font-size: 0.85rem; color: var(--muted); white-space: nowrap; }
.batch-row:hover { background-image: linear-gradient(var(--row-hover), var(--row-hover)); box-shadow: inset 4px 0 0 var(--accent); text-decoration: none; }
.batch-row:hover .chev { color: var(--accent); }
.batch-counts { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 480px) { .due-wd { display: none; } }   /* narrow phones: "Oct 15 (+5)", not "Oct 15 (Thu) (+5)" */
.due-soon { background: var(--orange-bg); color: var(--orange-ink); border: 1px solid var(--orange-border); }
.due-soon .due-icon { background: var(--orange); color: #fff; }
.batch-summary { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin-top: 8px; min-width: min(100%, 560px); }
/* Phones: label left and date right on the first line, then the bar and the counts. */
@media (max-width: 720px) {
  .batch-row, .batchlist.multi .batch-row { grid-template-columns: minmax(0, 1fr) 8.5rem; grid-template-areas: "head head" "bar counts"; gap: 8px 12px; }
  .batch-head { display: flex; align-items: center; gap: 10px; grid-area: head; min-width: 0; }
  .batch-date { margin-left: auto; }
  .batch-row .pbar { grid-area: bar; }
  .batch-row .batch-counts { grid-area: counts; }
  .batch-row .chev { display: none; }
  .batch-row:active { background-image: linear-gradient(var(--row-hover), var(--row-hover)); }
}

/* ---- Charts -------------------------------------------------------------- */
.key-line { display: inline-block; width: 16px; height: 2px; border-radius: 1px; }
.key-line.party-seller { background: var(--seg-seller); }
.key-line.party-warehouse { background: var(--seg-warehouse); }
.chart { position: relative; margin: 0; }
.linechart { width: 100%; height: auto; display: block; overflow: visible; }
.linechart .grid { stroke: var(--grid); stroke-width: 1; }
.linechart .axis { fill: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.linechart .line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.linechart .line.party-seller { stroke: var(--seg-seller); }
.linechart .line.party-warehouse { stroke: var(--seg-warehouse); }
.linechart .mark { stroke: var(--surface); stroke-width: 2; }
.linechart .mark.party-seller { fill: var(--seg-seller); }
.linechart .mark.party-warehouse { fill: var(--seg-warehouse); }
.linechart .endlabel { fill: var(--ink-2); font-size: 11.5px; }
.linechart .crosshair { stroke: var(--axis); stroke-width: 1; }
.tooltip { position: absolute; pointer-events: none; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; font-size: 0.82rem; box-shadow: var(--shadow-lg); min-width: 150px; }
.tooltip .tt-row { display: flex; align-items: center; gap: 6px; }
.tooltip .tt-row strong { font-size: 0.95rem; }
.tableview { margin-top: 8px; font-size: 0.85rem; }
.hbars { display: grid; gap: 8px; }
.hbar-row { display: grid; grid-template-columns: 110px 1fr 40px; gap: 8px; align-items: center; font-size: 0.88rem; }
.hbar-track { display: block; height: 20px; }
.hbar { display: block; height: 20px; min-width: 2px; background: var(--seg-seller); border-radius: 0 4px 4px 0; }
.hbar-value { font-variant-numeric: tabular-nums; color: var(--ink-2); }

/* Two sizes of each SVG chart; the narrow one takes over in a narrow card so the
   axis text is not scaled down to a few pixels. Without container queries
   (older browsers) the wide chart always shows. */
.chart-card { container-type: inline-size; }
.chart-narrow { display: none; }
@container (max-width: 519px) { .chart-wide { display: none; } .chart-narrow { display: block; } }

/* ---- Manager dashboard: sections and period filter --------------------- */
.section-head { margin: 22px 0 10px; }
.card > .section-head:first-child { margin-top: 0; }
.section-head .section-title { margin: 0; }
.page-head + .section-head { margin-top: 6px; }
.stats { margin-top: 40px; scroll-margin-top: 64px; }
.period-bar { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; }
.period-bar .filters { margin: 0; }
.range-form { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.range-form label { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 0.85rem; }
.range-form input[type="date"] { width: auto; min-width: 0; min-height: 36px; margin: 0; padding: 4px 8px; }
.range-text { color: var(--muted); font-size: 0.88rem; margin: 8px 0 12px; }
.more { margin: 10px 0 0; }
@media (max-width: 719px) {
  .range-form { display: grid; grid-template-columns: 1fr 1fr auto; align-items: end; width: 100%; }
  .range-form .chip { grid-column: 1 / -1; justify-self: start; }
  .range-form label { flex-direction: column; align-items: stretch; gap: 2px; font-size: 0.78rem; }
  .range-form input[type="date"] { width: 100%; }
}

/* ---- Workflow chart (item / batch) -------------------------------------------
   Wide screens: one lane per party (seller / warehouse / manager), the viewer's
   own lane on the right. Phones: a chat - own side right, others left.
   People: their party's colour family in one of four shades (same person, same
   shade everywhere). Planned steps are dashed. */
.p-blue-0 { --p: #215aa2; --p-ink: #fff; }      .p-blue-1 { --p: #003574; --p-ink: #fff; }
.p-blue-2 { --p: #4881cc; --p-ink: #0e0e0d; }   .p-blue-3 { --p: #93c1fe; --p-ink: #0e0e0d; }
.p-orange-0 { --p: #8f410e; --p-ink: #fff; }    .p-orange-1 { --p: #5c2602; --p-ink: #fff; }
.p-orange-2 { --p: #c55f1d; --p-ink: #0e0e0d; } .p-orange-3 { --p: #fda578; --p-ink: #0e0e0d; }
.p-violet-0 { --p: #6c4299; --p-ink: #fff; }    .p-violet-1 { --p: #491b71; --p-ink: #fff; }
.p-violet-2 { --p: #9368c3; --p-ink: #0e0e0d; } .p-violet-3 { --p: #ceaafd; --p-ink: #0e0e0d; }
.flow-chart { --lanes: 2; }
.flow-head { display: grid; grid-template-columns: repeat(var(--lanes), minmax(0, 1fr)); }
.flow-lane-head { display: flex; align-items: center; gap: 6px; padding: 6px 10px; font-size: 0.82rem; font-weight: 700; color: var(--t-ink); background: var(--t-bg); border-bottom: 2px solid var(--t); }
.flow-lane-head:first-child { border-top-left-radius: var(--radius-sm); }
.flow-lane-head:last-child { border-top-right-radius: var(--radius-sm); }
.flow-lane-head .dot { background: var(--t); }
.flow-lane-head .you { font-weight: 500; color: var(--muted); }
.flow { list-style: none; margin: 0 0 10px; padding: 10px 0; display: grid; gap: 8px; position: relative; isolation: isolate; border-radius: 0 0 var(--radius-sm) var(--radius-sm); }
.flow::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--surface); opacity: 0.55; border-radius: inherit; }
.lanes-2 .flow { background: linear-gradient(to right, var(--lane-1) 0 50%, var(--lane-2) 50% 100%); }
.lanes-3 .flow { background: linear-gradient(to right, var(--lane-1) 0 33.333%, var(--lane-2) 33.333% 66.667%, var(--lane-3) 66.667% 100%); }
.flow-row { display: grid; grid-template-columns: repeat(var(--lanes), minmax(0, 1fr)); }
.flow-row > .bubble { grid-column: var(--col); margin: 0 8px; }
.flow-row.span-all > .bubble { grid-column: 1 / -1; justify-self: center; max-width: 90%; }
.bubble { position: relative; min-width: 0; background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--p, var(--t)); border-radius: 10px; padding: 7px 10px 8px; box-shadow: var(--shadow); }
.who { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 0.84rem; line-height: 1.35; }
.avatar { display: inline-grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--p); color: var(--p-ink); font-size: 0.72rem; font-weight: 800; box-shadow: inset 0 0 0 1px var(--avatar-ring); }
.who-name { font-weight: 700; }
.who-role { display: none; font-size: 0.74rem; padding: 0 6px; border-radius: 999px; color: var(--t-ink); background: var(--t-bg); border: 1px solid var(--t-border); }
.who time { margin-left: auto; color: var(--muted); font-size: 0.78rem; white-space: nowrap; }
.what { display: flex; gap: 6px; margin-top: 4px; font-size: 0.92rem; overflow-wrap: anywhere; }
.step-icon { flex: none; }
.notes { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 4px; font-size: 0.78rem; }
.note-muted { color: var(--muted); }
.note-ok { color: var(--green-ink); font-weight: 700; }
.note-bad { color: var(--red-ink); font-weight: 700; }
.note-due { color: var(--amber-ink); font-weight: 650; }
.note-code { padding: 0 7px; border-radius: 999px; background: var(--t-bg); border: 1px solid var(--t-border); }
.note-ref { font-family: var(--mono); }
.flow-system > .bubble { background: var(--t-bg); border: 1px solid var(--t-border); box-shadow: none; }
.flow-system .who, .flow-system .what { justify-content: center; }
.flow-system .who time { margin-left: 0; }
.flow-plan > .bubble { background: transparent; border: 1.5px dashed var(--t); box-shadow: none; }
.flow-plan .what { color: var(--ink-2); }
.flow-plan > .bubble.later { opacity: 0.6; border-color: var(--axis); }
.plan-label { font-weight: 800; color: var(--t-ink); }
.flow-deadlines { margin-top: 4px; }
@media (max-width: 719px) {
  .flow-head { display: none; }
  .flow, .lanes-2 .flow, .lanes-3 .flow { background: none; padding: 2px 0; }
  .flow::before { display: none; }
  .flow-row { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
  .flow-row.span-all { align-items: center; }
  .flow-row > .bubble { margin: 0; max-width: 88%; }
  .flow-row > .bubble.own { align-self: flex-end; background: var(--t-bg); border-left-width: 1px; border-right: 4px solid var(--p, var(--t)); }
  .flow-plan > .bubble.own { background: transparent; border: 1.5px dashed var(--t); }
  .flow-plan > .bubble.own.later { border-color: var(--axis); }
  .who-role { display: inline-block; }
}

/* ---- Lists ---------------------------------------------------------------- */
ul.plain, ol.timeline, ul.qlist, ul.comments, ul.tasklist, ul.soplist { list-style: none; padding: 0; margin: 0; }
ul.plain li, ul.qlist li, ul.soplist li { padding: 8px 0; border-bottom: 1px solid var(--grid); }
ol.timeline li { position: relative; padding: 5px 0 5px 16px; border-left: 2px solid var(--grid); font-size: 0.88rem; }
ol.timeline li::before { content: ""; position: absolute; left: -5px; top: 11px; width: 8px; height: 8px; border-radius: 50%; background: var(--axis); }
ol.timeline time { color: var(--muted); font-size: 0.8rem; margin-right: 6px; }

/* ---- Task cards (phone-first) -------------------------------------------- */
.tasklist .task { display: flex; gap: 8px; align-items: stretch; background: var(--surface); border: 1px solid var(--border); border-left: 6px solid var(--t, var(--axis));
  border-radius: var(--radius); margin-bottom: 10px; box-shadow: var(--shadow); overflow: hidden; }
.tasklist .task.is-overdue { background: var(--red-bg); border-color: var(--red-border); border-left-color: var(--red); }
.task-check { display: grid; place-items: center; flex: none; width: 36px; padding-left: 12px; }   /* also an empty one, so every row lines up */
.task-check input { width: 24px; height: 24px; }
/* Phones: the item on the left and the action (icon + short name) on the right; below, the
   deadline on the left and who started it on the right. The tracking no. and the full instruction
   are on the task page. */
.task-link { display: grid; grid-template-columns: minmax(0, 1fr) 14px; gap: 8px 10px; align-items: center; padding: 12px 12px 12px 14px; color: var(--ink); flex: 1; min-width: 0; }
.task-line { grid-column: 1; display: flex; align-items: center; justify-content: space-between; gap: 4px 12px; min-width: 0; }
.task-line + .task-track + .task-line { flex-wrap: wrap; }
.task-link:hover, .task-link:active { text-decoration: none; background-image: linear-gradient(var(--row-hover), var(--row-hover)); }
.tasklist .task:hover { border-top-color: var(--accent); border-right-color: var(--accent); border-bottom-color: var(--accent); }
.tasklist .task:hover .chev { color: var(--accent); }
.task-ref { flex: none; white-space: nowrap; font-size: 1.05rem; font-weight: 750; }
.task-act { display: inline-flex; align-items: center; justify-content: flex-end; gap: 8px; min-width: 0; font-weight: 700; text-align: right; }
.task-icon { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 8px; background: var(--t-bg, var(--surface-2)); font-size: 1.05rem; }
.task-what, .task-track { display: none; }
.task-label { font-size: 0.98rem; }
.task-due { min-width: 0; }
.task-who { margin-left: auto; display: flex; gap: 6px; align-items: center; font-size: 0.82rem; }
.task-who:empty { display: none; }
.task-link .chev { grid-column: 2; grid-row: 1 / span 2; }
.addon-mini { font-size: 0.95rem; }
.chev { color: var(--muted); font-size: 1.4rem; flex: none; }
@media (min-width: 900px) {
  /* Wide screens: one line per task, each value in its own column so they line up:
     item | what to do | tracking no. | deadline | started by | › */
  .tasklist .task { margin-bottom: 6px; box-shadow: none; border-left-width: 4px; }
  .task-link { grid-template-columns: 7.5rem minmax(0, 1fr) 11rem 15rem 7rem 1rem; grid-template-areas: "ref act track due who chev"; gap: 0 16px; padding: 8px 12px 8px 14px; }
  .task-line { display: contents; }
  .task-ref { grid-area: ref; } .task-act { grid-area: act; justify-content: flex-start; text-align: left; } .task-due { grid-area: due; } .task-who { grid-area: who; margin-left: 0; }
  .task-link .chev { grid-area: chev; }
  .task-ref { font-size: 0.98rem; }
  .task-act { justify-self: stretch; gap: 12px; }
  .task-icon { width: 34px; height: 34px; border-radius: 9px; font-size: 1.1rem; }
  .task-what { display: block; min-width: 0; font-size: 0.98rem; line-height: 1.3; }
  .task-label { display: none; }
  .task-track { display: block; grid-area: track; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 0.85rem; color: var(--ink-2); }
}

/* ---- Worker home ----------------------------------------------------------- */
.hero-scan { background: linear-gradient(135deg, var(--blue-bg), var(--surface)); border: 1px solid var(--blue-border); border-radius: var(--radius); padding: 16px; margin-bottom: 16px; box-shadow: var(--shadow); }
.hero-label { font-weight: 700; color: var(--ink); margin-bottom: 8px; }
.scan-row { display: flex; gap: 8px; }
.scan-row input { margin: 0; font-size: 1.25rem; min-height: 54px; font-family: var(--mono); min-width: 0; }
.scan-row .btn { min-height: 54px; }
@media (max-width: 720px) {
  .kpis { gap: 8px; }
  .kpis > .tile, .kpis:not(.kpis-3) > .tile { flex: 1 1 260px; max-width: none; }
  .tile { padding: 10px 14px 10px 16px; }
  .tile-value { font-size: 2.2rem; }
}

/* ---- Comments / free text ----------------------------------------------- */
.comments .comment { padding: 10px 0; border-bottom: 1px solid var(--grid); }
.comment.open-question { box-shadow: inset 4px 0 0 var(--amber); padding-left: 12px; background: var(--amber-bg); border-radius: 6px; }
.comment-head { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.ftext { white-space: normal; }
details.orig { display: inline; }
details.orig summary { display: inline; cursor: pointer; color: var(--muted); font-size: 0.78rem; list-style: none; }
details.orig summary::before { content: "⇄ "; }
details.orig[open] span[lang] { display: block; margin-top: 4px; padding: 6px 8px; background: var(--surface-2); border-radius: 6px; color: var(--ink-2); }
.ambig { display: block; color: var(--amber-ink); font-size: 0.85rem; margin-top: 4px; }
.preview { margin: 6px 0 10px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--blue-bg); border: 1px solid var(--blue-border); font-size: 0.9rem; }
.preview dt { font-weight: 700; color: var(--blue-ink); font-size: 0.78rem; margin-top: 6px; }
.preview dd { margin: 0; }

/* ---- Instruction card & picker -------------------------------------------- */
.icard { border-left: 5px solid var(--t, var(--accent)); background: var(--t-bg, transparent); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; padding: 10px 12px; margin-bottom: 8px; }
.icard-head { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; }
.icard-summary { font-size: 1.15rem; font-weight: 750; line-height: 1.35; }
.icard.compact { padding: 6px 10px; }
.icard.compact .icard-summary { font-size: 0.98rem; }
.icard-lines { margin: 6px 0; padding-left: 18px; }
.icard-lines .addon { font-weight: 650; list-style: none; margin-left: -18px; }
.icard-free { margin-top: 8px; }
.icard-free > .muted { display: block; }
.icard-free.note { background: var(--surface); border: 1px dashed var(--axis); border-radius: 8px; padding: 6px 8px; }
.instruction-hero .icard-summary { font-size: 1.35rem; }
.filelink { display: inline-block; margin: 4px 10px 0 0; font-weight: 600; }
.iform .code-group { margin-bottom: 10px; }
.code-group-label { font-size: 0.78rem; color: var(--muted); margin-bottom: 4px; font-weight: 650; }
.code-options { display: flex; flex-wrap: wrap; gap: 6px; }
.code-option { display: inline-flex; }
.code-option input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.code-option > span { display: inline-flex; align-items: center; gap: 6px; padding: 9px 13px; border: 1px solid var(--t-border, var(--axis)); border-radius: var(--radius-sm); cursor: pointer; color: var(--ink); background: var(--surface); font-weight: 600; }
.code-option > span:hover { background: var(--t-bg, var(--surface-2)); }
.code-option input:checked + span { background: var(--t, var(--accent)); border-color: var(--t, var(--accent)); color: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18); }
.code-option input:checked + span .badge { background: rgba(255, 255, 255, 0.25); color: #fff; border-color: transparent; }
.code-option input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
.opt-icon { font-size: 1.05em; }
.params .param { margin-bottom: 10px; }
fieldset.checks { display: grid; gap: 6px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
fieldset.addons .addon { margin-bottom: 8px; }
.addon-params { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin: 6px 0 0 26px; }
.quote-form { border-top: 1px solid var(--grid); padding-top: 10px; margin-top: 10px; }

/* ---- Findings ------------------------------------------------------------ */
.findings { border-collapse: collapse; margin: 6px 0; }
.findings th { text-align: left; font-weight: 500; padding: 5px 14px 5px 0; color: var(--ink-2); }
.findings td { padding: 5px 0; }
.ans { font-weight: 750; padding: 1px 10px; border-radius: 6px; background: var(--surface-3); }
.ans-yes { background: var(--blue-bg); color: var(--blue-ink); }
.ans-no { background: var(--gray-bg); color: var(--gray-ink); }
.ans-unsure { background: var(--amber-bg); color: var(--amber-ink); }

/* ---- Photos ------------------------------------------------------------- */
.gallery { display: flex; flex-wrap: wrap; gap: 8px; }
.gallery img { width: 120px; height: 120px; object-fit: cover; border-radius: 10px; border: 1px solid var(--border); }
.gallery.small img { width: 76px; height: 76px; }
.gallery figure { margin: 0; }
.gallery figcaption { font-size: 0.75rem; color: var(--muted); max-width: 120px; }
.filetile { display: inline-grid; place-items: center; width: 76px; height: 76px; border-radius: 10px; background: var(--surface-2); font-size: 0.75rem; color: var(--muted); }
/* Video without a picture (frame could not be read): round play mark + "Video" */
.filetile.video { align-content: center; gap: 4px; color: var(--ink-2); }
.filetile .play { position: relative; width: 30px; height: 30px; border-radius: 50%; background: var(--ink-2); }
.filetile .play::before { content: ""; position: absolute; left: 11px; top: 8px; border-left: 12px solid var(--surface); border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
.table td.thumbs .filetile { width: 34px; height: 34px; gap: 0; border-radius: 7px; font-size: 0; vertical-align: middle; margin-right: 3px; }
.table td.thumbs .filetile .play { width: 20px; height: 20px; }
.table td.thumbs .filetile .play::before { left: 7px; top: 5px; border-left-width: 8px; border-top-width: 5px; border-bottom-width: 5px; }
/* x on a photo or video of an open task */
.thumb-wrap { position: relative; }
.thumb-del { position: absolute; top: 4px; right: 4px; display: grid; place-items: center; width: 26px; height: 26px; padding: 0; margin: 0;
  border: 1.5px solid rgb(255 255 255 / 0.9); border-radius: 50%; background: rgb(0 0 0 / 0.62); color: #fff; font-size: 17px; font-weight: 700; line-height: 1; cursor: pointer; }
.thumb-del::after { content: ""; position: absolute; inset: -9px; }   /* finger-sized tap area */
.thumb-del:hover { background: var(--red); }
.thumb-del:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
html:not(.js) .thumb-del[data-remove] { display: none; }   /* the task page one needs the script that saves the form first */
.thumb-del-form { display: contents; }   /* item page: a small form per file, the x still sits on the picture */
.slot-group { margin-bottom: 10px; }
.slot-label { font-size: 0.8rem; color: var(--muted); margin-bottom: 4px; }
dl.facts { display: grid; grid-template-columns: auto 1fr; gap: 5px 12px; margin: 0 0 10px; }
dl.facts dt { color: var(--muted); font-size: 0.85rem; }
dl.facts dd { margin: 0; font-weight: 600; }
/* who / when under a card: a small label column and a value column, never a run-on line */
dl.facts.meta { gap: 2px 12px; margin: 8px 0; font-size: 0.85rem; }
dl.facts.meta dt { font-size: 0.82rem; }
dl.facts.meta dd { font-weight: 500; color: var(--ink-2); }
.photo-inputs { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); margin-top: 8px; }
/* Camera button: big tap target that opens the phone camera */
.camera-btn { position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 56px; padding: 10px 14px; margin-top: 8px;
  border: 2px dashed var(--blue-border); border-radius: var(--radius-sm); background: var(--blue-bg); color: var(--blue-ink); font-weight: 700; cursor: pointer; text-align: center; }
.camera-btn input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; margin: 0; }
.camera-btn.required { border-color: var(--orange-border); background: var(--orange-bg); color: var(--orange-ink); }
.camera-btn.has-files { border-style: solid; border-color: var(--green-border); background: var(--green-bg); color: var(--green-ink); }
.camera-btn .picked:not(:empty) { margin-left: 4px; padding: 0 8px; border-radius: 999px; background: var(--surface); }
.upload-status { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 8px; }
.upload-status progress { flex: 1 1 100%; width: 100%; height: 8px; accent-color: var(--blue); }

/* ---- Task page (phone-first) --------------------------------------------- */
.task-head { margin: 0 0 14px; }
.task-head-row { display: flex; gap: 12px; align-items: center; }
.task-head-icon { display: grid; place-items: center; flex: none; width: 56px; height: 56px; border-radius: 14px; background: var(--t-bg); border: 1px solid var(--t-border); font-size: 1.8rem; }
.task-head-main { min-width: 0; }
.tracking-big { font-size: 1.45rem; font-weight: 750; letter-spacing: 0.01em; }
.steps { list-style: none; padding: 0; margin: 0; }
.steps li { margin-bottom: 8px; }
.step-card { position: relative; display: flex; gap: 12px; align-items: flex-start; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); cursor: pointer; color: var(--ink); font-size: 1rem; }
.step-card input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.step-box { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; border: 2px solid var(--axis); background: var(--surface); font-weight: 900; color: transparent; }
.step-box.info { border-style: dashed; color: var(--muted); font-size: 0.9rem; }
.step-card input:checked ~ .step-box { background: var(--green); border-color: var(--green); color: #fff; }
.step-card input:checked ~ .step-box::before { content: "✓"; }
.step-card.is-done { background: var(--green-bg); border-color: var(--green-border); }
.step-card input:focus-visible ~ .step-box { outline: 2px solid var(--focus); outline-offset: 2px; }
.step-card.info { cursor: default; background: transparent; border-style: dashed; color: var(--ink-2); }
.evidence { border: 1px solid var(--orange-border); background: var(--orange-bg); border-radius: var(--radius-sm); padding: 12px; margin-bottom: 10px; scroll-margin-top: 70px; }
.evidence.complete { border-color: var(--green-border); background: var(--green-bg); }
.evidence-head { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.evidence .camera-btn { background: var(--surface); }
/* Camera shortcuts only on touch screens; "choose" opens the phone's own picker (gallery, files, camera). */
.camera-row { display: flex; flex-wrap: wrap; gap: 8px; }
.camera-row .camera-btn { flex: 1 1 140px; padding-left: 8px; padding-right: 8px; }
/* "Desktop version" at the end of every phone page. While it is on, the way back floats,
   drawn large because the phone shows the 1200 px page at about a third of its size. */
.layout-switch { display: none; }
@media (max-width: 720px) {
  .layout-switch { display: block; margin: 28px 0 0; text-align: center; font-size: 0.85rem; }
  .layout-switch .linklike { color: var(--muted); padding: 8px 12px; }
}
.layout-switch.back-to-phone { display: block; position: fixed; right: 24px; bottom: 24px; z-index: 40; margin: 0; }
.layout-switch.back-to-phone .btn { font-size: 2.4rem; padding: 0.45em 0.9em; border-radius: 999px; box-shadow: 0 6px 24px rgb(0 0 0 / 0.28); }
.desktop-layout .container { padding-bottom: 160px; }
/* Registration form: big camera button per photo, small "choose" beside it; one "choose" button on computers */
.slot-pick { display: flex; gap: 6px; }
.slot-pick .camera-btn { flex: 1 1 auto; margin-top: 0; }
.slot-pick .choose-short { display: none; }
@media (pointer: coarse) {
  .slot-pick .choose-btn { flex: 0 0 auto; padding: 10px 12px; }
  .slot-pick .choose-short { display: inline; }
  .slot-pick .choose-full, .slot-pick .choose-btn .picked { display: none; }   /* the count shows on the camera button */
}
.slot-pick.has-files .camera-btn { border-style: solid; border-color: var(--green-border); background: var(--green-bg); color: var(--green-ink); }
.record-btn { display: none; }
@media (pointer: coarse) { .record-btn { display: flex; } }
.ev-count { font-weight: 800; color: var(--orange-ink); }
.evidence.complete .ev-count { color: var(--green-ink); }
.question { margin-bottom: 12px; border: 0; padding: 0; }
.question legend { font-size: 0.98rem; color: var(--ink); font-weight: 650; padding: 0; margin-bottom: 6px; }
.seg { display: flex; gap: 6px; }
.seg label { flex: 1; display: flex; }
.seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.seg span { flex: 1; padding: 11px 8px; border: 1px solid var(--axis); border-radius: var(--radius-sm); cursor: pointer; color: var(--ink); text-align: center; font-weight: 650; background: var(--surface); }
.seg input:checked + span { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.seg input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
.actionbar { position: sticky; bottom: 0; z-index: 15; margin: 12px -12px 0; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--border); box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.08); }
.progress-line { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; font-size: 0.88rem; }
.pl-item { padding: 2px 10px; border-radius: 999px; background: var(--orange-bg); color: var(--orange-ink); border: 1px solid var(--orange-border); }
.pl-item.done { background: var(--green-bg); color: var(--green-ink); border-color: var(--green-border); }
.pl-item.done::after { content: " ✓"; }
.actionbar-buttons { display: grid; grid-template-columns: 1fr 1.6fr; gap: 8px; }
.actionbar .btn { min-height: 52px; font-size: 1.02rem; }
.actionbar.ready .btn-finish { background: var(--green); border-color: var(--green); color: #fff; }
.task-form .card { scroll-margin-top: 70px; }
@media (min-width: 721px) { .actionbar { margin: 12px 0 0; border: 1px solid var(--border); border-radius: var(--radius); } }
.history-entry { border-top: 1px solid var(--grid); padding: 10px 0; }
.history-entry.status-cancelled, .history-entry.status-rejected { opacity: 0.55; }
.problem summary h2 { color: var(--red-ink); }
.bulkbar { position: sticky; bottom: calc(var(--tabbar-h) + 8px); z-index: 10; box-shadow: var(--shadow-lg); }
@media (min-width: 721px) { .bulkbar { bottom: 8px; } }

/* ---- Login ---------------------------------------------------------------- */
.login { margin-top: 10vh; }
.login h1 { font-size: 1.35rem; margin-bottom: 14px; }
.langs { margin-top: 12px; text-align: center; font-size: 0.9rem; }
.scan-dialog { border: 0; border-radius: 14px; padding: 12px; background: var(--surface); color: var(--ink); width: min(480px, 92vw); }
.scan-dialog video { width: 100%; border-radius: 10px; background: #000; margin-bottom: 8px; }

@media print {
  .topbar, .tabbar, .no-print, .actionbar, form { display: none !important; }
  body { background: #fff; color: #000; }
  .card { border: 0; box-shadow: none; }
}
@media (forced-colors: active) {
  .dot, .key-line, .due-icon, .swatch, .seg, .pbar-seg, .avatar { forced-color-adjust: none; }
}
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; }
}