/* BioComp database: the one stylesheet (decision 040, direction C "in between").
   Tokens first, then the pieces every screen shares, then the order page, then the list colours kept
   from FileMaker's conditional formats. Colour only where it means something: stage, warnings, errors, TEST.
   Class names that carry meaning (.fl, .ed, .recbar, .stages, .badge, .tabs, .tabpanel) are kept, so the shared
   templates restyle here in one place. No build step: plain CSS served by Django's staticfiles. */

/* ---------- tokens ---------- */
:root {
  /* colour */
  --ink: #1d1d1b; --ink-3: #6f6f69; --mut: var(--ink-3);
  --line: #e3e1da; --line-soft: #efede7; --line-strong: #cfccc2;
  --paper: #f6f5f1; --card: #ffffff; --field: #f7f6f2; --chip: #eceae3;
  --accent: #1f5f8b; --accent-bg: #e4edf4; --accent-ink: #24425c; --hover: #eef3f8;
  --red: #b3261e; --red-bg: #fbeae8; --amber: #8a5a00; --amber-bg: #fdf3dc; --amber-line: #e7cf95;
  --green: #2e6b30; --green-bg: #e8f3e6; --test-bg: #fde7c7; --test-ink: #7a4b00;
  /* type scale */
  --fs-xs: 11px; --fs-s: 12.5px; --fs-m: 13.5px; --fs-l: 16px; --fs-xl: 21px;
  --font: -apple-system, "Helvetica Neue", Arial, sans-serif;
  /* spacing */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 28px;
  /* radius */
  --r-s: 4px; --r-m: 6px; --r-l: 8px; --r-pill: 12px;
  --shadow: 0 4px 16px rgba(0, 0, 0, .10);
}

/* ---------- base ---------- */
* { box-sizing: border-box; }
body { margin: 0; font: var(--fs-m)/1.45 var(--font); color: var(--ink); background: var(--paper); }
main.page { padding: var(--s4) var(--s5) 48px; }
a { color: var(--accent); }
h1 { font-size: var(--fs-xl); margin: 0 0 var(--s1); line-height: 1.2; }
h2 { font-size: 15px; margin: 22px 0 var(--s2); color: var(--ink-3); }
h3 { font-size: var(--fs-m); margin: 0 0 var(--s2); }
input, select, textarea { font: inherit; color: var(--ink); padding: 5px 8px; border: 1px solid var(--line-strong); border-radius: var(--r-s); background: #fff; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent-bg); border-color: var(--accent); }
textarea { width: 100%; min-height: 3.2em; }
dl { display: grid; grid-template-columns: max-content 1fr; gap: var(--s1) var(--s4); margin: 0; } dt { color: var(--ink-3); } dd { margin: 0; }
.muted { color: var(--ink-3); } .small { font-size: 12px; } .wrap { overflow-x: auto; } .nowrap { white-space: nowrap; }
.red { color: var(--red); } .amber { color: var(--amber); } .green { color: var(--green); }
.inline { display: inline; } .gap-top { margin-top: var(--s2); } .flush { margin: 0; } p.flush { margin: var(--s1) 0 0; } .flush-b { margin: 0 0 6px; } .grow { flex: 1; min-width: 22em; }
.pre { white-space: pre-wrap; }

/* ---------- buttons ---------- */
button, .button { font: inherit; font-size: var(--fs-m); padding: 5px 12px; border: 1px solid var(--accent); border-radius: var(--r-m); background: var(--accent); color: #fff; cursor: pointer; text-decoration: none; display: inline-block; line-height: 1.35; }
button.plain, .button.plain { background: #fff; color: var(--ink); border-color: var(--line); }
button.plain:hover, .button.plain:hover { border-color: var(--line-strong); background: #fbfaf7; }
button.danger { background: #fff; color: var(--red); border-color: #e2b4b0; }
button.small, .button.small { padding: 2px 9px; font-size: var(--fs-s); }
button.linkish { background: none; border: 0; padding: 0; color: var(--accent); text-decoration: underline; font-size: var(--fs-xs); cursor: pointer; }
.actions { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }
.actions.between { justify-content: space-between; }

/* ---------- top bar ---------- */
header.top { display: flex; flex-wrap: wrap; gap: var(--s1) 11px; align-items: center; padding: 10px var(--s5); background: #fff; border-bottom: 1px solid var(--line); }
header.top a { color: var(--ink); text-decoration: none; font-weight: 600; font-size: 26px; }
header.top a.active, header.top a:hover { color: var(--accent); }
header.top nav.modules { display: flex !important; gap: 4px 28px; align-items: center; flex-wrap: wrap; }
header.top .modules-more summary.modlink { list-style: none; cursor: pointer; font-weight: 600; font-size: 26px; color: var(--ink); }
header.top .modules-more summary.modlink::-webkit-details-marker { display: none; }
header.top .modules-more summary.modlink.active, header.top .modules-more summary.modlink:hover { color: var(--accent); }
header.top .modules-more .menu-body a { display: block; padding: 6px 14px; font-weight: 500; font-size: 18px; }
header.top .right { margin-left: auto; color: var(--ink-3); font-size: 12px; display: flex; gap: var(--s3); align-items: center; }
header.top a.narrow-only { display: none; } header.top nav.modules { display: contents; } header.top .narrow-menu { display: none; }
.qs-top { margin: 0 0 0 auto; position: relative; flex: 1 1 8em; max-width: 18em; } .qs-top input { width: 100%; padding: 4px 10px; font-size: 13px; border-color: var(--line); border-radius: var(--r-m); }
.qs-drop-box { position: absolute; z-index: 30; right: 0; top: 100%; } .qs-drop-box:empty { display: none; }
.qs-drop-box .qs-cols { background: #fff; border: 1px solid var(--line); border-radius: var(--r-m); box-shadow: var(--shadow); padding: var(--s2); width: min(980px, 94vw);
                        display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.qs-cols h3 { font-size: 12px; margin: 0 0 var(--s1); color: var(--ink-3); } .qs-cols ul { list-style: none; margin: 0; padding: 0; max-height: 330px; overflow-y: auto; }
.qs-cols li a { display: block; padding: 3px 6px; border-radius: var(--r-s); text-decoration: none; color: var(--ink); font-size: 12px; font-weight: 400; }
.qs-cols li a:hover, .qs-cols li a.hi { background: var(--hover); }
.frozen { position: sticky; top: 0; z-index: 30; background: var(--paper); }
.banner { padding: 5px var(--s5); font-size: var(--fs-s); border-bottom: 1px solid var(--line); }
.banner.proto { background: #eef3f8; color: var(--accent-ink); } .banner.ro { background: #f3f1ea; color: var(--ink-3); }

/* ---------- messages ---------- */
.msg { padding: var(--s2) var(--s3); border-radius: var(--r-m); margin: 0 0 var(--s3); background: var(--green-bg); color: var(--green); }
.msg.error { background: var(--red-bg); color: var(--red); } .msg.warning { background: var(--amber-bg); color: var(--amber); }
.msg.big { font-size: var(--fs-l); } .msg.in-card { margin: 6px 0; }
.confirm-box, .note-box { border: 1px solid var(--amber-line); background: var(--amber-bg); border-radius: var(--r-m); padding: 10px var(--s3); margin: var(--s2) 0; }
.note-box.card { margin: 0 0 14px; }

/* ---------- record bar ---------- */
.recbar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 var(--s3); padding: 6px 10px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-l); font-size: var(--fs-s); }
.recstrip .recbar { margin: 0; padding: var(--s2) var(--s5); border: 0; border-bottom: 1px solid var(--line); border-radius: 0; }
.recbar .button.small, .recbar button.small { padding: 3px 9px; }
/* the frozen record strip: full-size buttons, to match Print (look note 24) */
.recstrip .recbar { font-size: 14px; gap: 8px; padding: 8px var(--s5); }
.recstrip .recbar .button.small, .recstrip .recbar button.small, .recstrip .recbar summary.button.small { padding: 7px 14px; font-size: 14px; min-height: 36px; }
.recstrip .recbar .count { font-size: 14px; }
.recbar .ico { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.recbar a[data-key] { padding-left: 9px !important; padding-right: 9px !important; display: inline-flex; align-items: center; }
.recbar .count { color: var(--ink-3); font-size: var(--fs-s); margin: 0 6px; }
.recbar .sep { width: 1px; height: 20px; background: var(--line); margin: 0 var(--s1); }
.recbar .spacer { flex: 1; }

/* ---------- menus (details.menu: Print, More, Sort, Export) ---------- */
details.menu { position: relative; display: inline-block; } details.menu > summary { list-style: none; cursor: pointer; }
details.menu > summary::-webkit-details-marker { display: none; }
details.menu > .menu-body { position: absolute; right: 0; z-index: 20; background: #fff; border: 1px solid var(--line); border-radius: var(--r-l); padding: var(--s2); min-width: 260px; box-shadow: var(--shadow); font-size: var(--fs-m); }
details.menu.left > .menu-body { right: auto; left: 0; }
details.menu .menu-body a, details.menu .menu-body span.off { display: block; padding: var(--s1) 6px; border-radius: var(--r-s); text-decoration: none; }
details.menu .menu-body a:hover { background: var(--hover); } details.menu .menu-body span.off { color: var(--ink-3); }
details.menu .menu-body form { margin: 0; } details.menu .menu-body hr { border: 0; border-top: 1px solid var(--line); margin: 6px 0; }
details.menu .menu-body .menu-item { display: block; width: 100%; text-align: left; background: none; border: 0; color: var(--accent); padding: var(--s1) 6px; border-radius: var(--r-s); font-size: var(--fs-m); }
details.menu .menu-body .menu-item:hover { background: var(--hover); } details.menu .menu-body .menu-item.danger { color: var(--red); }
details.menu .menu-body .menu-note { color: var(--ink-3); font-size: 12px; margin: 6px 6px 0; }
details.menu .menu-body.wide { min-width: 340px; } details.menu .menu-body.cols2 { columns: 2; min-width: 420px; }
details.menu .menu-body label.block { display: block; }
details.menu .menu-body .menu-warn { margin: 0 0 6px; } details.menu .menu-body .print-quote { margin: 0 0 var(--s1); }
details.fold > summary { cursor: pointer; color: var(--ink-3); font-size: var(--fs-s); margin-top: 10px; }
details.fold[open] > summary { margin-bottom: var(--s2); }

/* ---------- title line and stages ---------- */
.titleline { display: flex; align-items: baseline; gap: var(--s3); flex-wrap: wrap; }
.titleline h1 { margin: 0; } .titleline h1 .word { font-weight: 400; color: var(--ink-3); font-size: var(--fs-l); }
.titleline .co { font-size: var(--fs-l); font-weight: 600; } .titleline .meta { color: var(--ink-3); }
.titleline .quote-no { color: var(--ink-3); font-size: var(--fs-s); }
.stages { display: flex; flex-wrap: wrap; gap: var(--s1); margin: 10px 0 var(--s3); padding: 0; list-style: none; font-size: 12px; }
.stages li { padding: 3px 10px; border-radius: var(--r-pill); background: var(--chip); color: var(--ink-3); }
.stages li.done { background: var(--accent-bg); color: var(--accent-ink); }
.stages li.now { background: var(--accent); color: #fff; font-weight: 600; }

/* ---------- cards, grids, forms ---------- */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-l); padding: var(--s3) 14px; margin: 0 0 14px; }
.card > h3, .card-title { margin: 0 0 var(--s2); font-size: 12px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .5px; font-weight: 600; }
.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.row { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); align-items: end; } .row label { display: flex; flex-direction: column; font-size: 12px; color: var(--ink-3); gap: 2px; }
.row.center { align-items: center; } .row label.inline-label { flex-direction: row; align-items: center; gap: var(--s1); }
.grid-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--s2) var(--s3); } .grid-form label { display: flex; flex-direction: column; font-size: 12px; color: var(--ink-3); gap: 2px; }
.grid-form label.wide, .grid-form .wide { grid-column: 1 / -1; }
.fgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: var(--s2) 14px; }
.fgrid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fgrid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fcols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 14px; align-items: start; }
.fcol { display: flex; flex-direction: column; gap: var(--s2); }
/* the revision reads as part of the number (93690-2): same size and weight, a field only on hover (Augie, Sep 26) */
.titleline .rev { display: inline-flex; align-items: baseline; gap: 2px; margin-left: calc(-1 * var(--s3)); }
.titleline .rev select { font: inherit; font-size: var(--fs-xl); font-weight: 700; color: inherit; width: auto; min-width: 0; padding: 0 2px; appearance: none; -webkit-appearance: none; background: transparent; }
.titleline .rev button { padding: 0 6px; min-height: 0; line-height: 1.4; color: var(--ink-3); }
.titleline .co { font-size: var(--fs-xl); }
.titleline .inv-no { margin-left: auto; font-size: var(--fs-xl); font-weight: 700; }
.fgrid.narrow { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.fl { display: flex; flex-direction: column; gap: 2px; font-size: 11.5px; color: var(--ink-3); min-width: 0; }
.fl > .ed input[type=text], .fl > .ed select, .fl > .ed input[type=date] { width: 100%; }
.fl.wide { grid-column: 1 / -1; } .fl.wide textarea { width: 100%; min-width: 0; }
.fl .flag-red { align-self: flex-start; }
.flags { display: flex; flex-wrap: wrap; gap: var(--s1) 14px; font-size: 13px; margin-top: 10px; }
.flags label { display: inline-flex; align-items: center; gap: var(--s1); }
.flag-red { color: #fff; background: #d8322a; padding: 1px 6px; border-radius: var(--r-s); }
.pink { background: #ffd8d8 !important; padding: 2px 6px; border-radius: var(--r-s); }

/* in-place fields (apps/common/editing.py): soft grey fills, a border only on hover and focus */
.ed { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; max-width: 100%; }
.ed input[type=text], .ed select, .ed textarea, .ed input[type=date] { max-width: 100%; font-size: var(--fs-m); padding: 4px 7px; border: 1px solid transparent; border-radius: 5px; background: var(--field); }
.ed input[type=text]:hover, .ed select:hover, .ed textarea:hover, .ed input[type=date]:hover { border-color: var(--line); }
.ed input[type=text]:focus, .ed select:focus, .ed textarea:focus, .ed input[type=date]:focus { border-color: var(--accent); background: #fff; outline: 2px solid var(--accent-bg); }
.ed textarea { min-width: 24em; } .ed input.num { text-align: right; }
.ed.ed-err input, .ed.ed-err select, .ed.ed-err textarea { border-color: var(--red); background: var(--red-bg); }
.ed.ed-ok input, .ed.ed-ok select, .ed.ed-ok textarea { border-color: #8fbf8a; }
.ed-note { font-size: var(--fs-xs); line-height: 1.3; } .ed-note.ok { color: var(--green); } .ed-note.err { color: var(--red); }
.ed-note.warn { color: var(--amber); background: var(--amber-bg); padding: 3px 6px; border-radius: var(--r-s); }
.ed .ro { white-space: pre-wrap; }

/* ---------- badges and flags ---------- */
.badge { display: inline-block; padding: 1px var(--s2); border-radius: 10px; font-size: 12px; background: var(--chip); color: var(--ink); font-weight: 600; vertical-align: middle; }
.badge.test { background: var(--test-bg); color: var(--test-ink); } .badge.red { background: var(--red-bg); color: var(--red); }
.badge.amber { background: var(--amber-bg); color: var(--amber); } .badge.green { background: var(--green-bg); color: var(--green); }
.badge.purple { background: #efe0fa; color: #5b2a7e; }
.flag { display: block; padding: 5px var(--s2); border-radius: 5px; font-size: var(--fs-s); margin-bottom: 6px; background: var(--chip); color: var(--ink); }
.flag:last-child { margin-bottom: 0; }
.flag.red { background: var(--red-bg); color: var(--red); } .flag.amber { background: var(--amber-bg); color: var(--amber); }
.flag.green { background: var(--green-bg); color: var(--green); } .flag.purple { background: #efe0fa; color: #5b2a7e; }
.flag.strong { font-weight: 700; }

/* ---------- tabs and panels ---------- */
.tabs { display: flex; flex-wrap: wrap; gap: 2px; border-bottom: 1px solid var(--line); margin: 18px 0 0; }
.tabs a { padding: 7px var(--s3); text-decoration: none; color: var(--ink-3); border: 1px solid transparent; border-bottom: 0; border-radius: var(--r-m) var(--r-m) 0 0; font-size: 13px; }
.tabs a:hover { color: var(--ink); }
.tabs a.on { color: var(--ink); background: var(--card); border-color: var(--line); margin-bottom: -1px; font-weight: 600; }
.tabs a.alert { background: #a40800; color: #fff; }
.tabpanel { display: none; } .tabpanel.on { display: block; }
.tabs ~ .tabpanel.on { background: var(--card); border: 1px solid var(--line); border-top: 0; border-radius: 0 0 var(--r-l) var(--r-l); padding: 6px var(--s3) var(--s3); margin-bottom: 14px; }
.tabpanel .card { box-shadow: none; }

/* ---------- tables ---------- */
table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; padding: 6px var(--s2); border-bottom: 1px solid var(--line-soft); vertical-align: top; }
th { color: var(--ink-3); font-weight: 600; font-size: 11.5px; border-bottom-color: var(--line); background: #fff; position: sticky; top: 0; z-index: 1; }
td.num, th.num { text-align: right; white-space: nowrap; }
td input.num { width: 6.5em; text-align: right; } td input.price { width: 8em; text-align: right; }
th a.sort { color: inherit; text-decoration: none; } th a.sort:hover { color: var(--accent); }
tr.red td { background: var(--red-bg); } tr.amber td { background: var(--amber-bg); }
tr.group td { background: #faf9f5; }
.tablebox { max-height: calc(100vh - 150px); overflow: auto; background: #fff; border: 1px solid var(--line); border-radius: var(--r-l); }
.tablebox table th { box-shadow: inset 0 -1px 0 var(--line); }
td .kind { margin-top: 2px; } td .kind select, td .kind .ro { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .3px; color: var(--ink-3); padding: 1px 4px; }
td .kind .ed select { background: transparent; }
.rule { font-size: var(--fs-xs); }
.lines-box { overflow: auto; max-height: calc(100vh - 110px); }   /* scrolls inside, so the headings stay (sticky) */
.lines-box td, .lines-box th { padding: 5px 4px; }
.lines-box .ed input[type=text] { width: 100%; min-width: 6em; } .lines-box .ed { display: flex; }
.lines-box .ed input.num, .lines-box input.num { width: 4em; min-width: 0; }
.lines-box td.num .ed { justify-content: flex-end; } .lines-box td.num .ed-money input { width: 5.6em; }
.lines-box td .kind select { width: auto; max-width: 9em; }
.lines-box td.name { min-width: 13em; width: 40%; } .lines-box td.serial .ed input[type=text] { width: 7em; min-width: 0; }
.stack-end { display: flex; align-items: flex-end; }

/* ---------- the order page (look round 2, notes 3, 15, 16): full width, top to bottom, every element in a fixed place ---------- */
.orderpage { max-width: 1500px; }
.stageline { display: flex; align-items: center; gap: var(--s3); margin: 10px 0 var(--s3); }
.stageline .stages { margin: 0; } .stageline .spacer { flex: 1; }
/* the order's title line and stage chips ride in the frozen top (Augie, Sep 26) */
.frozen .orderhead { padding: 10px var(--s5) 0; border-bottom: 1px solid var(--line); }
.frozen .orderhead .stageline { margin-bottom: 10px; }
.print-menu > summary.button { font-weight: 600; padding: 6px 18px; font-size: 14px; }
.strip { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--s3); margin: 0 0 var(--s3); }
.strip > div { min-height: 44px; border: 1px solid var(--line); border-radius: var(--r-l); background: var(--card); padding: 7px var(--s3); font-size: var(--fs-s); }
.strip-label { display: block; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .4px; color: var(--ink-3); font-weight: 600; margin-bottom: 2px; }
.strip-label a { text-transform: none; letter-spacing: 0; font-weight: 400; margin-left: 4px; }
.strip-warn .flag { display: inline-block; margin: 2px 4px 2px 0; }
.strip-warn.has { border-color: #e2b4b0; }
.strip-notes.has { background: var(--amber-bg); border-color: var(--amber-line); }
.strip-notes .note-text { white-space: pre-wrap; color: var(--ink); font-size: var(--fs-m); }
.strip-notes .india-line { margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--amber-line); }
.strip-notes .india-line .ed { display: inline-flex; }
.wbline { display: grid; grid-template-columns: minmax(18em, 2fr) minmax(9em, 1fr) minmax(9em, 1fr) minmax(0, 2.2fr); gap: var(--s2) var(--s4); align-items: end; }
.wbline label, .wbline .fl { display: flex; flex-direction: column; gap: 2px; margin: 0; }
.wb-label { font-size: 11.5px; color: var(--ink-3); font-weight: 600; }
.wbline input.big { width: 100%; font-size: 17px; padding: 8px 11px; border: 2px solid var(--accent); border-radius: var(--r-m); background: #fff; font-weight: 600; }
.wbline input.big:disabled { border-color: var(--line); background: var(--field); font-weight: 400; font-size: 13px; }
.wbline span.big { font-size: 17px; font-weight: 600; }
.wbline .wb-co input { width: 100%; }
.wbline .wb-date .ed input[type=date] { width: 100%; }
.wbline .wb-status { align-self: center; font-size: var(--fs-s); }
.wbline .papers { display: block; margin-top: 4px; } .wbline .papers a.button { margin: 2px 2px 0 0; }
.hint-q { display: inline-block; width: 15px; height: 15px; line-height: 15px; text-align: center; border-radius: 50%; background: var(--chip); color: var(--ink-3); font-size: 10px; font-weight: 700; cursor: help; vertical-align: 1px; text-transform: none; letter-spacing: 0; }
.htabs { margin-top: var(--s2); }
.htabs-body { display: grid; margin-bottom: 14px; }   /* the two header tabs share one cell: the taller sets the height */
.htabs-body > .tabpanel { grid-area: 1 / 1; display: block; visibility: hidden; background: var(--card); border: 1px solid var(--line); border-top: 0; border-radius: 0 0 var(--r-l) var(--r-l); padding: var(--s3); }
.htabs-body > .tabpanel.on { visibility: visible; }
.htabs-body .party { margin: 0; }
.tot table.totgrid { width: 100%; table-layout: fixed; }
.tot table.totgrid col.c-lbl { width: 170px; } .tot table.totgrid col.c-q, .tot table.totgrid col.c-i { width: 150px; }
.tot table.totgrid col.c-act { width: 190px; }
.tot table.totgrid td, .tot table.totgrid th { padding: 5px 8px; border-bottom: 1px solid var(--line-soft); position: static; vertical-align: middle; }
.tot table.totgrid th { background: none; }
.tot table.totgrid td.lbl { font-weight: 500; }
.tot table.totgrid td.set { color: var(--ink-3); } .tot table.totgrid td.set > * { margin-right: 12px; }
.tot table.totgrid td.num { text-align: right; } .tot table.totgrid td.num .ed { justify-content: flex-end; } .tot td.num .ed input { width: 8.5em; text-align: right; }
.tot table.totgrid td.act { text-align: left; }
.tot table.totgrid tr.total td { border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); font-size: 15px; padding: 8px; }
.tot table.totgrid tr.pay-first td { padding-top: 14px; }
.tot .sub { margin-left: 10px; } .tot .inline-fl { display: inline-flex; flex-direction: row; align-items: center; gap: 4px; font-size: 11.5px; color: var(--ink-3); }
.tot .inline-fl .ed input[type=text] { width: 9em; }
.tot td.set .ed select { width: 9em; }   /* Shipping's word and the tax pickers line up, same width (Augie, Sep 26) */
.footnote { color: var(--ink-3); font-size: 12px; margin-top: 18px; }
.stack { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--ink-3); }
.stack input { font-size: 15px; }
dialog.confirm-dialog { border: 1px solid var(--line); border-radius: var(--r-l); padding: var(--s4); width: min(560px, 94vw); box-shadow: var(--shadow); }
dialog.confirm-dialog::backdrop { background: rgba(0, 0, 0, .25); }
dialog.confirm-dialog .confirm-box { margin: 0; border: 0; background: none; padding: 0; }
dialog.confirm-dialog h3 { font-size: var(--fs-l); margin: 0 0 var(--s2); }
dialog.confirm-dialog .parts-box { max-height: 40vh; overflow: auto; border: 1px solid var(--line-soft); border-radius: var(--r-s); }
.quote-to-form input[type=email] { width: 100%; }
.ask-card { max-width: 560px; margin: 40px auto; }

/* quick add below the lines */
/* quick add (order, PO, count list; Sep 25, as QuickSearch's "grow"): a slim pill in a fixed place; the results grow
   out of it in a card laid over the page (down, or up with the class .up when the room below is short), placed by
   common/_quick_add.html's script so it stays fully on screen; nothing on the page moves */
.qa { position: relative; margin-top: 12px; max-width: 760px; }
.qa-pill { display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--line-strong); border-radius: 22px;
  padding: 3px 6px 3px 14px; box-shadow: 0 1px 3px rgba(20,30,50,.06); transition: border-color .15s, box-shadow .15s, border-radius .2s; }
.qa-pill:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }
.qa-plus { width: 16px; height: 16px; flex: none; fill: none; stroke: var(--ink-3); stroke-width: 2.4; stroke-linecap: round; }
.qa-pill:focus-within .qa-plus { stroke: var(--accent); }
.qa-pill input[type=search] { flex: 1; min-width: 0; border: 0 !important; background: transparent; outline: none; box-shadow: none !important; font-size: 14px; padding: 6px 2px; }
.qa-qty { display: flex; flex-direction: row; align-items: center; gap: 5px; flex: none; font-size: var(--fs-s); color: var(--ink-3);
  border-left: 1px solid var(--line-soft); padding-left: 8px; margin: 0; }
.qa-qty input { width: 3.6em; padding: 3px 6px; border: 1px solid var(--line); border-radius: 10px; text-align: right; font-size: 13px; background: var(--field); }
.qa.open .qa-pill { border-color: var(--accent); }
/* the card */
.qa-card { position: absolute; z-index: 45; left: 0; top: calc(100% + 6px); width: max(100%, min(880px, calc(100vw - 32px)));
  display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: 18px;
  box-shadow: 0 18px 50px rgba(20,30,50,.22); overflow: hidden; animation: qa-grow .22s cubic-bezier(.2,.8,.2,1); transform-origin: top left; }
.qa.up .qa-card { top: auto; bottom: calc(100% + 6px); transform-origin: bottom left; }
.qa-card:empty { display: none; }
@keyframes qa-grow { from { opacity: 0; clip-path: inset(0 0 100% 0 round 18px); } to { opacity: 1; clip-path: inset(0 0 0 0 round 18px); } }
.qa.up .qa-card { animation-name: qa-grow-up; }
@keyframes qa-grow-up { from { opacity: 0; clip-path: inset(100% 0 0 0 round 18px); } to { opacity: 1; clip-path: inset(0 0 0 0 round 18px); } }
.qa-panel { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.qa-scroll { overflow-y: auto; min-height: 0; flex: 1; padding: 0 8px 6px; }
.qa-note { margin: 8px 10px 2px; padding: 6px 10px; border-radius: 10px; font-size: var(--fs-s); background: var(--red-bg); color: var(--red); }
.qa-note.ok { background: var(--green-bg); color: var(--green); } .qa-note.ask { background: var(--amber-bg); color: var(--amber); }
.qa-switch { display: flex; flex-direction: row; align-items: center; gap: 6px; margin: 8px 18px 0; font-size: var(--fs-s); color: var(--ink-3); cursor: pointer; }
.qa-sec h3 { position: sticky; top: 0; z-index: 1; display: flex; align-items: baseline; gap: 10px; margin: 0; padding: 10px 10px 6px; background: #fff;
  font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.qa-sec h3 .qa-h { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qa-sec h3 .qa-num { letter-spacing: .03em; }
.qa-sec ul { list-style: none; margin: 0; padding: 0; }
.qa-hit { display: flex; align-items: baseline; gap: 10px; padding: 7px 10px; border-radius: 10px; cursor: pointer; font-size: 14px; outline: none; }
.qa-hit:hover, .qa-hit.hi { background: var(--accent-bg); }
.qa-hit.on { background: #fbf6e6; } .qa-hit.on:hover, .qa-hit.on.hi { background: #f4ead0; }
.qa-hit.inactive { color: var(--ink-3); }
.qa-sku { flex: none; width: 9.5em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qa-name { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 6px; }
.qa-name .qa-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qa-tag { flex: none; font-size: 11.5px; line-height: 1.5; padding: 0 7px; border-radius: 9px; background: var(--amber-bg); color: var(--amber); border: 1px solid var(--amber-line); white-space: nowrap; }
.qa-tag.dim { background: var(--chip); color: var(--ink-3); border-color: var(--line); }
.qa-tag.red { background: var(--red-bg); color: var(--red); border-color: var(--red); }
.grow-pick { margin-top: 0; max-width: 520px; } .ab-row .grow-pick { flex: 1; min-width: 220px; }
.qs-start .ab-co .red { font-weight: 600; }
.qa-num { flex: none; width: 6.2em; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qa-num.strong { font-weight: 600; }
.qa-more, .qa-empty { margin: 6px 10px 8px; font-size: var(--fs-s); color: var(--ink-3); }
.qa-foot { flex: none; padding: 7px 18px; border-top: 1px solid var(--line-soft); font-size: 11.5px; color: var(--ink-3); background: #fbfaf7; }
@media (max-width: 700px) { .qa-sku { width: 7em; } .qa-num { width: 4.8em; } .qa-foot { display: none; } }

/* pickers */
.suggest { position: relative; } .suggest ul { position: absolute; z-index: 5; margin: 2px 0 0; padding: 0; list-style: none; background: #fff; border: 1px solid var(--line); border-radius: var(--r-s); max-height: 260px; overflow-y: auto; min-width: 28em; box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.suggest li { padding: var(--s1) var(--s2); cursor: pointer; } .suggest li:hover { background: var(--hover); }
.suggest input[type=search] { width: 100%; }
.party .party-name { font-size: 15px; margin: var(--s1) 0; }
.party .use-address { margin: 6px 0 2px; }

/* documents */
.dropzone { border: 2px dashed var(--line-strong); border-radius: var(--r-m); padding: 14px; text-align: center; color: var(--ink-3); }
.dropzone.over { border-color: var(--accent); background: var(--hover); }
.indent { padding-left: 22px !important; } .sysline td { background: #f3f7ee; }

/* ---------- lists (FileMaker's Sales_Order_List conditional formats: they mean something, so they keep colour) ---------- */
tr.current td { font-weight: 700; background: #f1f6fb; }
table.list tbody tr[data-url] { cursor: pointer; } table.list tbody tr[data-url]:hover td { background: #f6f9fc; }
table.orders tbody tr:hover td { background: #f6f9fc; }
table.list tr.hl td { outline: 1px solid #9bbad3; background: #eaf2f9; } tr.inactive td { color: var(--ink-3); }
tr.findrow td { background: #fffbea; } .dupe-id { color: #fff; background: #d8322a; padding: 0 var(--s1); border-radius: 3px; }
.late { background: #ff2712; color: #fff; } .st-add-ship-date { background: #d6ecc9; } .st-ready { background: #bfe9fb; }
.st-missing-parts { background: #e6c2fb; } .st-ip { background: #dff5fe; } .urgent { color: #d90b00; font-weight: 700; }
.due { font-weight: 700; } .due-fedex { background: #d90b00; color: #fff; font-weight: 700; } .due-2 { background: #ffff66; font-weight: 700; }
.requested { background: #cde7c0; } span.below-low { color: var(--red); font-weight: 700; }
tr.below-low td:first-child { box-shadow: inset 3px 0 0 var(--red); } .cache-mark { color: var(--amber); cursor: help; } .po-unchecked { background: #ffe9d9; }
.part-paid { background: #fdc77a; } .overdue { background: #f4b0ae; }
table.pick tr.current td { background: #a3d979; }
.legend span { display: inline-block; padding: 0 6px; margin: 0 var(--s1) var(--s1) 0; border-radius: 3px; font-size: var(--fs-xs); }
/* list pages: the title and the find/sort box stay in the frozen top (Augie, Sep 28); on a narrow screen the top
   scrolls away instead of filling it */
.frozen .listfreeze { padding: var(--s3) var(--s5) var(--s2); border-bottom: 1px solid var(--line); }
.frozen .listfreeze .card { margin-bottom: 0; }
.frozen .listfreeze .titlebar { min-height: 0; margin: 0 0 var(--s2); } .frozen .listfreeze .listname { font-size: var(--fs-l); margin: 0; } .frozen .listfreeze .titlebar:not(:has(span:not(.spacer))) { justify-content: flex-end; }
@media (max-width: 760px) { .frozen:has(.listfreeze) { position: static; } }
main tr { scroll-margin-top: calc(var(--frozen-h, 0px) + 44px); }
.listhead { display: flex; align-items: baseline; gap: var(--s3); flex-wrap: wrap; margin: 0 0 var(--s2); }
.listhead h1 { margin: 0; } .listhead .count { color: var(--ink-3); }
.toolbar { display: flex; flex-wrap: wrap; gap: 6px var(--s2); align-items: center; margin: 0 0 var(--s3); font-size: var(--fs-s); }
.toolbar .quick { flex: 1; min-width: 22em; display: flex; gap: 6px; margin: 0; }
.toolbar + .toolbar { margin-top: -4px; } .card > .toolbar:last-child { margin-bottom: 0; }
.toolbar .sep { width: 1px; height: 20px; background: var(--line); margin: 0 var(--s1); }
.toolbar form.row { gap: 6px; }
.toolbar .quick input { flex: 1; }
.toolbar .group-label { color: var(--ink-3); font-weight: 600; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .4px; }
.set-total { margin: 0 0 var(--s3); }
.pager { margin-top: var(--s3); }

/* the item card dialog */
.item-card-dialog { width: min(1080px, 96vw); max-height: 90vh; padding: 0; border: 1px solid var(--line); border-radius: var(--r-l); background: var(--paper); }
.item-card-dialog::backdrop { background: rgba(0,0,0,.25); }
#item-card-body { padding: 10px 14px 14px; }

/* ---------- narrow screens and the shop's iPad (HAND-COUNTS-03, 58) ---------- */
@media (max-width: 1100px) {
  .fgrid.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fcols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2) 14px; }
  .wbline { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .strip { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px), (pointer: coarse) {
  header.top a.narrow-only { display: inline; }
  .qs-top input { width: 12em; } .qs-drop-box .qs-cols { grid-template-columns: 1fr; }
  header.top { gap: 2px var(--s1); padding: 6px var(--s3); } header.top a { padding: var(--s2); border-radius: var(--r-s); }
  header.top a.active { background: var(--hover); }
  main.page { padding: var(--s3) var(--s3) 48px; }
  button, .button { min-height: 40px; } input, select { min-height: 40px; font-size: 16px; }
  button.small, .button.small { min-height: 34px; }
}
@media print {
  header.top, .banner, .no-print, .recbar, .recstrip, .tabs { display: none !important; } .tabpanel { display: block !important; border: 0 !important; }
  body { background: #fff; } a { color: inherit; text-decoration: none; } main.page { padding: 0; }
  th { position: static; } .htabs-body > .tabpanel { visibility: visible; grid-area: auto; } .tablebox, .lines-box { max-height: none; overflow: visible; border: 0; }
}

/* quiet row actions: the line's ✕ shows its red only on hover */
.lines-box button.danger, table.orders button.danger, table.list button.danger { color: var(--ink-3); border-color: transparent; background: transparent; }
.lines-box button.danger:hover, table.orders button.danger:hover, table.list button.danger:hover { color: var(--red); border-color: #e2b4b0; background: #fff; }

/* the quotes and orders list: one line a row, long names cut with an ellipsis (the whole text is on the order) */
table.orders td { padding: 4px 5px; white-space: nowrap; max-width: 8em; overflow: hidden; text-overflow: ellipsis; }
table.orders td.co { max-width: 11.75em; }
table.orders th { padding: 6px 5px; white-space: nowrap; }
table.orders .ed select { max-width: 5.5em; } table.orders .ed input[type=date] { width: 8.4em; }
table.orders .ed input.num { width: 4em; } table.orders .ed input[type=text], table.orders .ed select, table.orders .ed input[type=date] { padding: 2px 5px; font-size: var(--fs-s); }
table.orders { font-size: var(--fs-s); }

/* ---------- find mode in the view's own layout (look note 7) ---------- */
.findstrip .recbar { background: #fff8e1; }
.find-flag { background: var(--amber); color: #fff; padding: 2px 10px; border-radius: var(--r-pill); font-size: var(--fs-s); }
.find-reqs { display: inline-flex; gap: 4px; } .find-reqs button.on { border-color: var(--amber); background: var(--amber-bg); font-weight: 600; }
.findform fieldset.find-req { border: 0; margin: 0; padding: 0; min-width: 0; }
.findform .find-req-head { font-weight: 600; font-size: var(--fs-s); color: var(--amber); padding: 0; margin-bottom: var(--s2); display: flex; gap: var(--s4); }
.find-box input { width: 100%; background: #fffdf5; border: 1px dashed var(--amber-line); }
.find-box input:focus { border-style: solid; }
.find-title { display: grid; grid-template-columns: 9em 2fr 1fr 1fr 1fr 6em 7em 8em; gap: var(--s2); align-items: end; }
.find-stage { max-width: 22em; }
.find-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s2); }
.find-line { display: grid; grid-template-columns: 1fr 1fr 3fr 1fr .6fr .6fr .8fr 1fr 1fr; gap: var(--s2); }
.find-layout .strip > div { min-height: 0; }
table.find-list td { max-width: none; overflow: visible; } table.find-list td input { width: 100%; min-width: 5em; padding: 3px 5px; font-size: var(--fs-s); background: #fffdf5; border: 1px dashed var(--amber-line); }
table.ops td { padding: 3px 6px; font-size: 12px; white-space: nowrap; } table.ops td + td { white-space: normal; }

/* QuickSearch floats bottom right on every page; its results grow out of it (Sep 25 mock-up: "grow" and "spot") */
.qs-float { position: fixed !important; right: 20px; bottom: 20px; z-index: 40; margin: 0 !important; max-width: none !important;
  width: min(440px, 90vw); display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line);
  border-radius: 26px; box-shadow: 0 8px 28px rgba(20,30,50,.16); overflow: hidden;
  transition: width .28s cubic-bezier(.2,.8,.2,1), border-radius .28s, box-shadow .28s,; }
.qs-float .qs-row { display: flex; align-items: center; gap: 8px; padding: 8px 10px 8px 16px; }
.qs-float .qs-glass { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--ink-3); stroke-width: 2.2; stroke-linecap: round; }
.qs-float input { flex: 1; border: 0 !important; font-size: 15px !important; padding: 6px 2px !important; background: transparent; outline: none; box-shadow: none !important; }
.qs-float .qs-close { border: 0; background: none; color: var(--ink-3); font-size: 22px; line-height: 1; padding: 0 4px; cursor: pointer; }
.qs-float .qs-open { display: none; }
/* the results panel inside the pill: one column of sections, growing, scrolling inside */
.qs-float .qs-drop-box { position: static !important; transform: none !important; max-height: 0; overflow: hidden; transition: max-height .32s cubic-bezier(.2,.8,.2,1); }
.qs-float.open .qs-drop-box { max-height: 68vh; overflow-y: auto; border-bottom: 1px solid var(--line-soft); }
.qs-float .qs-drop-box .qs-cols { display: block; width: auto; max-height: none; border: 0; box-shadow: none; padding: 6px 8px; overflow: visible; }
.qs-float .qs-cols > div { border: 0; padding: 0; }
.qs-float .qs-cols h3 { position: sticky; top: 0; background: #fff; z-index: 1; margin: 0; padding: 10px 8px 6px; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.qs-float .qs-cols ul { max-height: none; overflow: visible; }
.qs-float .qs-cols li a { font-size: 14px; padding: 7px 10px; border-radius: 10px; }
.qs-float .qs-cols li a:hover, .qs-float .qs-cols li a.hi { background: var(--accent-bg, #e8f0fa); }
.qs-float .qs-cols li.muted { padding: 4px 10px 8px; }
/* the pill unfolds upward and wider, anchored at its corner (Augie chose this, Sep 25) */
.qs-float.qs-grow.open { width: min(720px, 94vw); border-radius: 20px; box-shadow: 0 18px 50px rgba(20,30,50,.22); }
/* shrunk to a round button when it covers something */
.qs-float.collapsed { width: 52px; border: 0; background: none; box-shadow: none; overflow: visible; transition: none; }
.qs-float.collapsed .qs-row, .qs-float.collapsed .qs-drop-box { display: none; }
.qs-float.collapsed .qs-open { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; border: 0;
  background: var(--accent); color: #fff; box-shadow: var(--shadow); cursor: pointer; }
.qs-float .qs-open svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
/* the QuickSearch panel's lists are plain columns, not pickers: the form's .suggest styles must not reach them */
.qs-cols ul, .qs-float .qs-cols ul { position: static; min-width: 0; border: 0; box-shadow: none; background: none; margin: 0; max-height: 58vh; overflow-y: auto; }
.qs-cols li { padding: 0; cursor: default; } .qs-cols li:hover { background: none; }
.qs-cols li a { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qs-cols > div { min-width: 0; border-right: 1px solid var(--line-soft); padding-right: 10px; } .qs-cols > div:last-child { border-right: 0; }

/* ---------- look C on every screen (decision 044): the pieces the order page and the list proved, shared ---------- */
/* messages float under the frozen strip (nothing is pushed down); × closes, "done" ones go by themselves */
.toasts { position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); width: min(760px, 92vw); z-index: 35;
  display: flex; flex-direction: column; gap: 6px; pointer-events: none; }
.toasts:empty { display: none; }
.toasts .msg { pointer-events: auto; margin: 0; box-shadow: var(--shadow); border: 1px solid rgba(0, 0, 0, .06); padding-right: 36px; position: relative; transition: opacity .35s; }
.toasts .msg.gone { opacity: 0; }
.msg-x { position: absolute; right: 6px; top: 5px; background: none; border: 0; color: inherit; font-size: 19px; line-height: 1; padding: 2px 6px; cursor: pointer; opacity: .7; min-height: 0 !important; }
/* a record page: full width to 1500 px, top to bottom: title line (Print on the right), the fixed strip, the key fields
   card in four columns, then tabs */
.recpage { max-width: 1500px; }
.titlebar { display: flex; align-items: center; gap: var(--s2) var(--s3); flex-wrap: wrap; margin: 2px 0 var(--s3); min-height: 38px; }
.titlebar h1 { margin: 0; } .titlebar h1 .word { font-weight: 400; color: var(--ink-3); font-size: var(--fs-l); }
.titlebar h1 .num { font-weight: 400; color: var(--ink-3); }
.titlebar .co { font-size: var(--fs-l); font-weight: 600; } .titlebar .meta { color: var(--ink-3); }
.titlebar .spacer { flex: 1; }
.titlebar .acts { display: flex; gap: var(--s2); align-items: center; flex-wrap: wrap; }
.titlebar .acts form { margin: 0; }
.titlebar .acts > .button, .titlebar .acts > button, .titlebar .acts > form > button, .titlebar .acts > details > summary.button { font-weight: 600; padding: 6px 16px; font-size: 14px; }
.keycard { padding-bottom: 14px; }
.keycard .flags { margin-top: 12px; }
.strip.one { grid-template-columns: minmax(0, 1fr); }
.strip.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* tabs whose panels share one box: the tallest sets the height, so switching tabs moves nothing below */
.tabbox { display: grid; margin-bottom: 14px; }
.tabbox > .tabpanel { grid-area: 1 / 1; display: block; visibility: hidden; min-width: 0; background: var(--card); border: 1px solid var(--line); border-top: 0; border-radius: 0 0 var(--r-l) var(--r-l); padding: var(--s3); }
.tabbox > .tabpanel.on { visibility: visible; }
.tabpanel > .card:last-child, .tabpanel > .card:only-child { margin-bottom: 0; }
.tabpanel h3.sub { margin: 14px 0 6px; font-size: 12px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .5px; }
.tabpanel h3.sub:first-child { margin-top: 2px; }
/* in-place field messages float under their field on every page (they used to push the page, note 3) */
.ed { position: relative; }
.ed > .ed-note { position: absolute; top: 100%; left: 0; z-index: 15; margin-top: 2px; white-space: normal; min-width: 14em; max-width: 30em; box-shadow: var(--shadow); background: #fff; padding: 3px 6px; border-radius: var(--r-s); }
td.num .ed > .ed-note { left: auto; right: 0; }
.ed > .ed-note.warn { background: var(--amber-bg); }
.item-card-dialog .ed > .ed-note { position: static; box-shadow: none; }
/* the lists: one line a row, long text cut with an ellipsis (the whole text is on the record, and on hover) */
table.list { font-size: var(--fs-s); }
table.list th { padding: 6px; white-space: nowrap; }
table.list td { padding: 4px 6px; white-space: nowrap; max-width: 10em; overflow: hidden; text-overflow: ellipsis; }
/* a list fits the window (design guide 5): long text ends in "…", the whole of it on hover and on the record */
table.list td.num { max-width: none; }
table.list th.row-menu, table.list td.row-menu { width: 1%; padding: 2px 4px; text-align: right; }
table.list td.row-menu summary, table.plain-rows td.row-menu summary { padding: 0 8px; line-height: 1.5; font-weight: 700; }
table.list tr.ghost-row td { max-width: none; }
details.menu .menu-body .menu-form { margin: 4px 0; gap: 4px; } details.menu .menu-body .menu-form input[type=date] { width: 10em; }
details.menu .menu-body a.inline-link { display: inline; padding: 0; }
/* fields typed in a list's rows read as plain text until pointed at or clicked (design guide 5: read-only at a glance) */
table.list .ed input[type=text], table.list .ed select, table.list .ed input[type=date] { background: transparent; }
table.list .ed input[type=text]:hover, table.list .ed select:hover, table.list .ed input[type=date]:hover { background: var(--field); }
table.list td:has(.ed), table.orders td:has(.ed), table.list td:has(details.menu) { overflow: visible; }
table.list .ed input[type=text], table.list .ed select, table.list .ed input[type=date] { padding: 2px 5px; font-size: var(--fs-s); }
table.list .ed input.num { width: 5em; }
table.plain-rows td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 22em; }
.listcard { margin-bottom: var(--s3); }
.listcard .toolbar:last-child { margin-bottom: 0; }
/* a dialog form (add a person, add an address...): centred, never pushes the page */
dialog.form-dialog { border: 1px solid var(--line); border-radius: var(--r-l); padding: var(--s4); width: min(760px, 94vw); max-height: 90vh; overflow: auto; box-shadow: var(--shadow); }
dialog.form-dialog::backdrop { background: rgba(0, 0, 0, .25); }
dialog.form-dialog h3 { font-size: var(--fs-l); margin: 0 0 var(--s3); display: flex; align-items: center; gap: var(--s2); }
dialog.form-dialog h3 .spacer { flex: 1; }
.dialog-x { background: none; border: 0; color: var(--ink-3); font-size: 22px; line-height: 1; padding: 0 4px; cursor: pointer; }
/* a footnote line: created and modified by and when */
.recfoot { color: var(--ink-3); font-size: 12px; margin-top: 18px; }
@media print { .tabbox > .tabpanel { visibility: visible; grid-area: auto; } .toasts { display: none; } }
.titlehead { display: flex; align-items: baseline; gap: var(--s1) var(--s3); flex-wrap: wrap; min-width: 0; }
.titlehead h1 { margin: 0; } .titlehead .meta { color: var(--ink-3); } .titlehead .meta a { color: inherit; }
.fgrid.four .span2 { grid-column: span 2; } .fgrid.four .span3 { grid-column: span 3; }
.fl .fl-note { font-weight: 400; } .fl > b.idnum { font-size: var(--fs-m); color: var(--ink); padding: 4px 0; }
.tab-actions { display: flex; align-items: center; gap: var(--s2); margin: 2px 0 var(--s2); }
.tab-actions .spacer { flex: 1; }
.fl .linkish, .fl > button.linkish { align-self: flex-start; }
.keycard .ed textarea { min-width: 0; height: 3.4em; }
.plain-rows td { padding: 4px 8px; vertical-align: middle; } .plain-rows .ed input[type=text], .plain-rows .ed select { padding: 2px 6px; }
dialog.confirm-dialog .pop-x { float: right; margin: -8px -6px 0 0; }
.find-op-row { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 8px; }
.fgrid .span2 { grid-column: span 2; } .fgrid .span4, .fgrid.four .span4 { grid-column: 1 / -1; }
.titlebar h1 .nm { font-weight: 600; }
/* the item's stock card: the figures and levels in one row, the builds and the hand count side by side */
.levels h3 { display: inline; margin: 0; } .levels .levels-when { margin-left: 6px; }
.levels .levels-figs { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); margin-top: 8px; }
.levels .levels-forms { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: var(--s4); margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line-soft); }
.levels .levels-forms:empty { display: none; }
.levels .formula { margin: 6px 0 0; }
.item-card .tabs { margin-top: 12px; } .item-card .card-tabs { margin-bottom: 8px; } .item-card .card-tabs > .tabpanel { max-height: 46vh; overflow: auto; }
.strip-last .last-change form { display: inline; } .strip .flag { display: inline-block; margin: 2px 4px 2px 0; } a.flag { text-decoration: none; }
.strip-warn .flag form { display: inline; }
.plain-rows button.danger { color: var(--ink-3); border-color: transparent; background: transparent; } .plain-rows button.danger:hover { color: var(--red); border-color: #e2b4b0; background: #fff; }
#bom td.vendor { max-width: 14em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.titlebar > span.no-print:last-child, .titlebar > .actions:last-child, .titlebar > form:last-child { margin-left: auto; }
table.counts.mine td.row-menu summary { display: inline-flex; align-items: center; justify-content: center; font-weight: 700; }
.whenbar label { flex-direction: row !important; align-items: center; gap: 6px; }
#po-lines td.num > div.small { max-width: 15em; margin-left: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#po-lines td.num > div.small:hover { white-space: normal; }
#vendor-pick select { max-width: 26em; }
.toolbar label, form.toolbar label { flex-direction: row !important; align-items: center; gap: 6px; }
/* a list of names on the left, the chosen one on the right (Settings' lists and texts): no folds */
.vsplit { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 16px; align-items: start; }
.tabs.vtabs { flex-direction: column; flex-wrap: nowrap; border-bottom: 0; border-right: 1px solid var(--line); margin: 0; gap: 0; max-height: 72vh; overflow: auto; }
.tabs.vtabs a { display: block; border: 0; border-radius: var(--r-m) 0 0 var(--r-m); padding: 5px 10px; font-size: 13px; }
.tabs.vtabs a.on { background: var(--hover); margin: 0; border: 0; }
.tabs.vtabs .vgroup { font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--ink-3); padding: 10px 10px 2px; font-weight: 600; }
.vpanes > .tabpanel.on { display: block; }
.settings-card h2 { margin-top: 0; color: var(--ink); font-size: var(--fs-l); }
/* a page that only asks (change a field on N, remove a component, duplicate an order...): centred, like a dialog */
.ask-page { max-width: 820px; margin: 18px auto; } .ask-page > .card, .ask-page > form.card, .ask-page .replace-confirm { box-shadow: var(--shadow); }
.login-card { max-width: 380px; margin-top: 60px; } .login-card input { width: 100%; }
.doc-view { display: flex; flex-direction: column-reverse; gap: 0; } .doc-view > .card:first-child { min-height: 70vh; }

/* the PO's vendor is the thing to see first after its number (Augie, Sep 25) */
.titlehead .vendor-name { font-size: 22px; font-weight: 700; color: var(--ink); text-decoration: none; margin-left: 4px; }
.titlehead a.vendor-name:hover { color: var(--accent); text-decoration: underline; }
/* supplier and ship to side by side on a PO's Addresses tab: two columns of fields inside each */
.party .fgrid.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.party .party-title { margin: 0 0 8px; font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); }

/* receiving per delivery (decision 046): the bar under the PO's lines, the Receipts tab, the correction form */
.receive-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 8px; padding: 8px 10px; border: 1px solid var(--line-soft);
  border-radius: var(--r-l); background: #fbfaf7; font-size: var(--fs-s); }
.receive-bar label { flex-direction: row; align-items: center; gap: 5px; margin: 0; color: var(--ink-3); }
.receive-bar .rb-note { flex: 1 1 12em; } .receive-bar .rb-note input { flex: 1; min-width: 8em; }
.receive-bar .rb-ticks { display: flex; flex-wrap: wrap; gap: 4px 10px; }
.receive-bar .rb-acts { margin-left: auto; display: flex; gap: 6px; }
table.receipts td { vertical-align: top; } table.receipts tr.undone td { color: var(--ink-3); } table.receipts tr.undone td b { text-decoration: line-through; }
table.receipts .tick-line { display: flex; flex-direction: row; align-items: center; gap: 4px; margin: 0 !important; padding: 1px 0; min-height: 0; white-space: nowrap; }
dialog.confirm-dialog:has(.receipt-correct) { width: min(860px, 96vw); }
.receipt-correct table { width: 100%; } .receipt-correct input.num { width: 5.5em; } .receipt-correct select { width: auto; } .receipt-correct input[name^=z] { width: 9em; } .receipt-correct form { max-height: 60vh; overflow: auto; }

/* a row removed in place (R3-6): greyed, struck through, same height; Undo beside it */
tr.ghost-row td { background: repeating-linear-gradient(135deg, #f4f3ef 0 6px, #efede7 6px 12px); color: var(--ink-3); vertical-align: middle; font-size: var(--fs-s); }
tr.ghost-row .ghost-text { text-decoration: line-through; }
div.ghost-row { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: var(--r-m); color: var(--ink-3); font-size: var(--fs-s);
  background: repeating-linear-gradient(135deg, #f4f3ef 0 6px, #efede7 6px 12px); }
div.ghost-row .ghost-text { text-decoration: line-through; }

/* the address block (R3-3, R3-4): one compact design for orders and POs; the stamped address reads as it prints */
.addr-block { padding: 10px 14px; }
.addr-block .ab-head { display: flex; align-items: baseline; gap: 8px; min-height: 30px; flex-wrap: wrap; }
.addr-block .ab-title { font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); min-width: 5.5em; }
.addr-block .ab-co { flex: 1; min-width: 0; } .addr-block .ab-co[hidden] { display: none; }
.addr-block .ab-co b { font-size: var(--fs-l); }
.addr-block .ab-pick { flex: 1; min-width: 12em; position: relative; } .addr-block .ab-pick[hidden] { display: none; }
.addr-block .ab-pick input { width: 100%; }
.addr-block .ab-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin-top: 6px; }
.addr-block .ab-label { color: var(--ink-3); min-width: 5.5em; }
.addr-block .ab-row select { max-width: 16em; }
.addr-block .ab-use { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; color: var(--ink-3); }
.addr-block .ab-print { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 4px 16px; margin-top: 8px; padding: 8px 10px;
  border: 1px dashed var(--line-strong); border-radius: var(--r-m); background: #fdfcf9; font-size: var(--fs-s); line-height: 1.5; }
.addr-block .ab-details > div { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.addr-block .ab-foot { margin-top: 6px; }
@media (max-width: 700px) { .addr-block .ab-print { grid-template-columns: 1fr; } }
/* every table of lines and every list: cells sit level with the typed boxes, and a row's id links are full size
   (Augie, Sep 25: universal) */
.lines-box td, .tablebox td, table.orders td, table.lines td { vertical-align: middle; }
.lines-box td.small > a, .lines-box td.pid a, .tablebox td.small > a { font-size: 14px; }
.lines-box td.pid a { font-weight: 600; }
/* column headings stay in view as the PAGE scrolls, under the frozen top, and leave with the bottom of their table
   (Augie, Sep 25): the boxes no longer scroll inside themselves; --frozen-h is the frozen top's height (base.html) */
.tablebox, .lines-box { max-height: none; overflow: visible; }
.tablebox table th, .lines-box table th, table.orders th { position: sticky; top: var(--frozen-h, 0px); z-index: 3; background: #fff; }
/* universal: every table's headings stick under the frozen top on page scroll, wherever the table sits (the plain
   .wrap boxes no longer scroll sideways on their own, which would stop the headings sticking) */
main th { position: sticky; top: var(--frozen-h, 0px); z-index: 3; background: #fff; }
.wrap { overflow: visible; }
dialog th, .qa-card th, .tot table.totgrid th { position: static; }

/* the working behind a suggested number (decision 050): what, the figure, where it came from; Parts to order's "why?"
   and the item's Stock card */
table.working { width: auto; margin: 8px 0 0; font-size: var(--fs-s); background: #fbfaf7; border: 1px solid var(--line-soft); border-radius: var(--r-m); }
table.working td { padding: 3px 10px; border-bottom: 1px solid var(--line-soft); vertical-align: top; white-space: normal; max-width: none; overflow: visible; }
table.working tr:last-child td { border-bottom: 0; }
table.working td.w-what { white-space: nowrap; } table.working td.w-fig { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.working td.w-src { color: var(--ink-3); }

/* ---------- shared: chips that filter, and a segmented switch (the dashboard, the BOM report) ---------- */
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 12px; border: 1px solid var(--line); border-radius: var(--r-pill);
  background: var(--card); color: var(--ink); text-decoration: none; font-size: var(--fs-s); white-space: nowrap; }
a.chip:hover { border-color: var(--line-strong); }
.chip .n { font-weight: 700; }
.chip.red { background: var(--red-bg); color: var(--red); border-color: #e2b4b0; }
.chip.amber { background: var(--amber-bg); color: var(--amber); border-color: var(--amber-line); }
.chip.blue { background: var(--accent-bg); color: var(--accent-ink); border-color: #bcd0e0; }
.chip.on { box-shadow: 0 0 0 2px var(--ink-3); }
.chips-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.seg { display: inline-flex; }
.seg a { padding: 3px 9px; border: 1px solid var(--line); text-decoration: none; font-size: 13px; background: #fff; color: var(--ink); }
.seg a:first-child { border-radius: 4px 0 0 4px; } .seg a:last-child { border-radius: 0 4px 4px 0; } .seg a + a { border-left: 0; }
.seg a.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--line-strong); }
.dot.red { background: var(--red); } .dot.amber { background: #d99a1e; } .dot.blue { background: var(--accent); }

/* ---------- the dashboard (decision 050 look pass): one card of tabs, each tab its tools line then its table or cards ---------- */
.dash-shortcuts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.overview { padding-top: 10px; } .overview > .tabs { margin-top: 0; }
.overview .tabs a { font-size: 14px; padding: 8px 14px; }
.overview #tab-body { padding-top: 10px; }
.overview #tab-body > .card:last-child { margin-bottom: 0; }

/* Parts to order (decision 050, the agreed mock-up): one row per part in a card per urgency or vendor */
.pto-card { padding: 0; overflow: hidden; }
.pto-card > h3 { display: flex; align-items: center; gap: 10px; margin: 0; padding: 10px 14px; border-bottom: 1px solid var(--line);
  background: #fbfaf7; text-transform: none; letter-spacing: 0; font-size: var(--fs-m); color: var(--ink); }
.pto-card > h3 .muted { font-weight: 400; }
.pto-card > h3 form { margin: 0 0 0 auto; }
.pto-row { display: grid; grid-template-columns: 14px minmax(160px, 230px) 90px minmax(0, 1fr) 250px 150px; gap: 12px; align-items: start;
  padding: 10px 14px; border-bottom: 1px solid var(--line-soft); }
.pto-row:last-child { border-bottom: 0; }
.pto-row > .dot { margin-top: 6px; }
.pto-sku { font-weight: 700; } .pto-name { color: var(--ink-3); font-size: var(--fs-s); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pto-qty { font-size: 18px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.pto-qty small { display: block; font-size: var(--fs-xs); font-weight: 400; color: var(--ink-3); }
.pto-line { font-size: var(--fs-m); min-width: 0; } .pto-line .pto-ln2 { color: var(--ink-3); font-size: var(--fs-s); margin-top: 2px; }
.pto-line button.linkish { font-size: var(--fs-s); }
.pto-when { font-size: var(--fs-s); } .pto-when .bad { color: var(--red); font-weight: 600; } .pto-when .ok { color: var(--green); }
.pto-act { text-align: right; } .pto-act form { margin: 0; }
.pto-work { grid-column: 2 / -1; } .pto-work[hidden] { display: none; } .pto-work table.working { margin: 0; width: 100%; }
@media (max-width: 1000px) { .pto-row { grid-template-columns: 14px 1fr 80px; } .pto-line, .pto-when, .pto-act { grid-column: 2 / -1; text-align: left; } }

/* Needs attention (decision 050) */
.attention h4.attn-problem { margin: 12px 0 6px; font-size: var(--fs-m); }
.attention h4.attn-problem:first-of-type { margin-top: 2px; }
.attn-table td.c-label { width: 11em; } .attn-table td.c-name { width: 18em; max-width: 18em; }
.attn-table td.attn-what { max-width: 40em; } .attn-table td.c-act { width: 1%; text-align: right; }
.attn-table td.c-act form { display: inline; margin: 0; }

/* ---------- find mode in the record page's own layout (apps/common/findmode.py): the page's fields are empty find
   boxes in their own places; everything else stays where it is, hidden or greyed, so nothing moves ---------- */
body.findmode main { visibility: hidden; }
body.findmode main :is(label, .fl > span:first-child, h2, h3, h4, th, .strip-label, .card-title, legend, .tabs, .tabs a, .party-title,
  .ab-title, .ab-label, .find-ed, .find-ed *, .msg) { visibility: visible; }
body.findmode main :is(label, .fl > span:first-child, h2, h3, h4, th, .strip-label, .tabs a, .party-title) { color: var(--ink-3); }
body.findmode main .find-ed input, body.findmode main .find-ed select { width: 100%; min-width: 5em; background: #fffdf5;
  border: 1px dashed var(--amber-line); border-radius: 5px; padding: 4px 7px; font-size: var(--fs-m); }
body.findmode main .find-ed input:focus, body.findmode main .find-ed select:focus { border-style: solid; border-color: var(--amber); outline: 2px solid var(--amber-bg); }
body.findmode main .find-ed { display: flex; }
body.findmode main .fl > :not(:first-child):not(.find-ed) { visibility: hidden; }
body.findmode main .flags .find-ed { display: inline-flex; width: 5em; }
body.findmode main .find-na { font-size: var(--fs-xs); color: var(--ink-3); font-style: italic; }
body.findmode main .find-ed.find-extra, body.findmode main .find-ed.find-extra * { visibility: hidden !important; }
body.findmode main :is(input, select, textarea, button, .button, summary, a:not(.tabs a), .hint-q):not(.find-in) { visibility: hidden; }
body.findmode .qs-float { display: none; }
body.findmode main .find-more, body.findmode main .find-more h4 { visibility: visible; }
.find-more { margin-top: 14px; border-style: dashed; } .find-more h4.find-more-group { margin: 10px 0 6px; font-size: var(--fs-s); color: var(--ink-3); }
/* ---------- design guide pass (Sep 26): record pages' answer line and grouped key fields; small shared pieces ---------- */
.statusline { margin: -4px 0 var(--s3); font-size: 14px; color: var(--ink); }
.statusline .muted { font-size: var(--fs-m); }
.keygroups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3) 28px; }
.keygroups > div + div { border-left: 1px solid var(--line-soft); padding-left: 28px; }
.keygroups.three { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.2fr) minmax(0, 1fr); }
.keygroups .card-title { margin-bottom: 6px; }
.fgrid .flush-grid { gap: var(--s2) 14px; }
@media (max-width: 900px) { .keygroups, .keygroups.three { grid-template-columns: 1fr; } .keygroups > div + div { border-left: 0; padding-left: 0; } }
.dialog-row { margin: 8px 0 4px; }
.dialog-part { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 8px; }
.grid-form > b.wide { grid-column: 1 / -1; }
label.check-label, .grid-form label.check-label { flex-direction: row; align-items: center; gap: 6px; }
.grid-form .end, .row .end { align-self: end; }
.msg.flush { margin: 0; }
.so-order { color: #009933; font-weight: 600; } .so-quote { color: #1f5fbf; font-weight: 600; }   /* FileMaker's order and quote colours */
.strip.one .strip-label { display: inline; margin-right: 10px; }
.pick-field .pick-name { padding: 4px 0; font-size: var(--fs-m); color: var(--ink); } .pick-field .pick-name[hidden], .pick-field .pick-box[hidden] { display: none; }
.pick-field .pick-box input { width: 100%; }
.strip-notes .ed, .strip-notes .ed textarea { width: 100%; min-width: 0; } .strip-notes .ed textarea { background: transparent; min-height: 2.4em; }
.old-fields { margin: 6px 0; padding: 6px; background: #f7f5ef; border-radius: var(--r-s); }
/* ---------- hand counts: a count list's rows and My counts (Augie's spec, Sep 25; moved here from the template) ---------- */
table.counts td { vertical-align: middle; }
table.counts:not(.mine) tr.st-open td.cnt-cell { background: #fcfbd3; }            /* # Counted, yellow while empty (36) */
table.counts:not(.mine) tr.st-open td.when { background: #fffa83; }                /* Completed On, yellow while empty (52) */
table.counts tr.removed td { background: #f3f1ea; }
table.counts .sku { font-weight: 700; } table.counts .desc { display: block; max-width: 30em; }
table.counts .slot { font-weight: 700; font-size: 15px; }
table.counts input.cnt-in { width: 6.5em; text-align: right; font-size: 16px; padding: 6px 8px; }
table.counts .row-msg { display: block; margin-top: 3px; }
.cnt-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.cnt-actions form { display: inline-flex; gap: 6px; align-items: center; margin: 0; }
.count-status { font-size: 13px; }
.count-status .pbar { display: inline-block; width: 90px; height: 8px; border-radius: 4px; background: var(--chip); overflow: hidden; vertical-align: middle; margin-right: 8px; }
.count-status .pbar i { display: block; height: 100%; background: var(--green); }
/* My counts (look C, Augie's spec): big slot, one box, green when counted, the rest in the row's menu; iPad first */
.mine-strip .recbar { gap: 10px; } .mine-pick select { font-size: 15px; padding: 6px 8px; }
.when-link { font-size: 13px !important; } .when-link.set { color: var(--amber) !important; font-weight: 600; }
#view-menu .menu-body a.on { font-weight: 700; }
.mine-head { display: flex; align-items: center; gap: 8px 18px; flex-wrap: wrap; margin: 2px 0 14px; }
.mine-head h1 { margin: 0; } .mine-head h1 a { color: inherit; text-decoration: none; }
.mine-head .count-status { font-size: 15px; } .mine-head .pbar { width: 240px; height: 12px; border-radius: 6px; }
table.counts.mine { background: #fff; border: 1px solid var(--line); border-radius: var(--r-l); }
table.counts.mine td { padding: 8px 10px; }
table.counts.mine td.slot { font-size: 24px; font-weight: 700; width: 5.5em; white-space: nowrap; }
table.counts.mine td.item .sku { font-size: 16px; margin-right: 8px; } table.counts.mine td.item .nm { font-size: 15px; }
table.counts.mine td.item .sub { display: block; }
table.counts.mine td.expected { font-size: 18px; width: 6em; }
table.counts.mine td.cnt-cell { width: 16em; }
table.counts.mine input.cnt-in { width: 7em; font-size: 20px; padding: 8px 10px; min-height: 46px; }
table.counts.mine tr.st-counted td { background: var(--green-bg); } table.counts.mine tr.st-counted .counted { color: var(--green); font-size: 18px; }
table.counts.mine tr.st-done td { color: var(--ink-3); }
table.counts.mine td.row-menu { width: 3.5em; text-align: right; } table.counts.mine td.row-menu summary { min-height: 40px; min-width: 44px; }
.whenbar { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; }
@media (max-width: 900px), (pointer: coarse) {
  table.counts thead { display: none; }
  table.counts, table.counts tbody, table.counts tr, table.counts td { display: block; width: 100%; }
  table.counts tr { border: 1px solid var(--line); border-radius: 6px; margin: 0 0 10px; padding: 6px 8px; background: var(--card); }
  table.counts td { border: 0; padding: 3px 0; text-align: left !important; }
  table.counts td[data-label]:not([data-label=""])::before { content: attr(data-label) ": "; color: var(--ink-3); font-size: 12px; }
  table.counts td.num, table.counts td.when { display: inline-block; width: auto; margin-right: 18px; }
  table.counts td.cnt-cell { padding: 6px; border-radius: 4px; }
  table.counts input.cnt-in { width: 8em; min-height: 44px; font-size: 20px; }
  table.counts .slot { font-size: 18px; }
  .cnt-actions button { min-height: 44px; padding: 6px 14px; }
  table.counts.mine tr { display: grid; grid-template-columns: 5em 1fr auto; gap: 4px 10px; align-items: center; }
  table.counts.mine td.slot { grid-row: span 2; } table.counts.mine td.item { grid-column: 2 / 4; }
  table.counts.mine td.expected, table.counts.mine td.cnt-cell, table.counts.mine td.row-menu { display: block; width: auto; margin: 0; }
  table.counts:not(.mine) tr { position: relative; } table.counts:not(.mine) td.row-menu { position: absolute; top: 6px; right: 8px; width: auto; padding: 0; }
}
.count-list-seg { display: inline-flex; align-items: center; gap: 6px; }
/* Explore Vendor Items: a part already on the PO it was opened from (FileMaker's yellow); long text cut to fit */
table.vendor-parts tr.on-po td { background: #fdc131; }
table.vendor-parts td.name { max-width: 14em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
table.vendor-parts td.desc { max-width: 9em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
button.chip { cursor: pointer; font: inherit; font-size: var(--fs-s); }
.center-self { align-self: center; } .full-line { width: 100%; margin: 4px 0 0; }
table.vendor-parts th.num { white-space: normal; min-width: 4.5em; } table.vendor-parts th { vertical-align: bottom; }
.toolbar .spacer { flex: 1; }
/* the SO dashboard: chart and orders side by side, the orders scrolling inside their card (their headings stick to it) */
.so-dash { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.so-dash svg.bars { width: 100%; height: 300px; } .so-dash .bar { fill: var(--accent); } .so-dash .axis { stroke: var(--line-strong); }
.so-dash svg text { font-size: 9px; fill: var(--ink-3); }
.so-orders { max-height: 380px; overflow: auto; padding-top: 0; } main .so-orders th { top: 0; }
.so-filters .row + .row { padding-top: 8px; border-top: 1px solid var(--line-soft); }
@media (max-width: 900px) { .so-dash { grid-template-columns: 1fr; } }
/* the pages that make a record (new quote, customer, person, vendor, item, PO) */
.quote-new { display: grid; grid-template-columns: minmax(360px, 1fr) minmax(420px, 1.2fr); gap: 14px; align-items: start; }
.quote-new .pick-scroll { max-height: 62vh; overflow-y: auto; margin-top: 6px; } input.full { width: 100%; }
table.pick tr.pickable { cursor: pointer; } .menu-body.wide-form { min-width: 420px; }
.grid-form .wide, .grid-form p.wide, .grid-form button.wide { grid-column: 1 / -1; }
form.narrow-form { max-width: 820px; } ul.flush-list { margin: 4px 0; }
@media (max-width: 900px) { .quote-new { grid-template-columns: 1fr; } }
main .pick-scroll th { top: 0; }   /* a list scrolling in its own box: its headings stick to the box, not under the frozen top */
/* ---------- reports: the index's cards and the report pages (moved here from their templates) ---------- */
.report-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 14px; }
.report-grid .card { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.report-grid .card h3 { margin: 0; font-size: var(--fs-l); text-transform: none; letter-spacing: 0; color: var(--ink); }
.report-grid .card p { margin: 0; color: var(--ink-3); font-size: var(--fs-s); }
.report-grid .card .go { margin-top: auto; }
table.report thead { display: table-header-group; }
table.report td.days-old { color: var(--red); font-weight: 600; }
.totals td, .totals th { border-bottom: 0; padding: 2px 10px 2px 0; }
.report-bar { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: end; }
@media print { .print-only { display: block !important; }
               table.report { font-size: 10px; } table.report th, table.report td { padding: 2px 4px; }
               table.report tr { break-inside: avoid; } h1 { font-size: 15px; } }
.print-only { display: none; }
table.totals { width: auto; margin-top: 6px; }
table.report tbody.group-start tr:first-child td, table.report tr.group-start td { border-top: 2px solid var(--line); }
table.report td.nowrap, table.report td.co { white-space: nowrap; }
.actions .spacer { flex: 1; }
/* Settings */
.settings-card table td { vertical-align: middle; } .effect:empty { display: none; }
.image-row { margin: 6px 0; } .image-row > b { min-width: 260px; }
img.doc-image { max-height: 48px; max-width: 220px; border: 1px solid var(--line); background: #fff; }
.attn-clear { margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 4px 14px; } .attn-clear:empty { display: none; }
.attn-ok { color: var(--green); }
iframe.doc-frame { width: 100%; height: 75vh; border: 0; } .normal { font-weight: 400; } tr.pickable { cursor: pointer; }
.card.quick-person { background: #fbfdff; } .card.doc-card { min-height: 70vh; }

/* ---------- blind hand counts and stock adjustments (decision 054) ---------- */
.cnt-diff.off { color: #6a5200; background: #fff4b8; padding: 0 5px; border-radius: 4px; font-weight: 700; }
.cnt-diff.same { color: var(--green); }
.cnt-vs { font-size: var(--fs-s); color: var(--ink-3); margin-left: 6px; white-space: nowrap; }
dialog.form-dialog.blind::backdrop { background: rgba(30, 30, 30, .92); }   /* the page's on hand stays out of sight */
.count-panel h3, .adjust-panel h3 { display: flex; align-items: center; gap: var(--s2); }
.count-panel h3 .spacer, .adjust-panel h3 .spacer { flex: 1; }
.count-panel input.cnt-big { width: 8em; font-size: 22px; padding: 8px 10px; min-height: 46px; text-align: right; }
.levels .levels-acts { float: right; }
.count-figs { display: flex; flex-wrap: wrap; gap: var(--s3) 32px; margin: var(--s2) 0; }
.count-figs .fl { display: flex; flex-direction: column; } .count-figs .fl > span { color: var(--ink-3); font-size: var(--fs-s); }
.count-figs b.big { font-size: 26px; }
.adjust-dir label { display: inline-flex; align-items: center; gap: 4px; padding: 5px 14px; border: 1px solid var(--line); background: #fff; cursor: pointer; }
.adjust-dir label:first-child { border-radius: 4px 0 0 4px; } .adjust-dir label:last-child { border-radius: 0 4px 4px 0; border-left: 0; }
.adjust-dir label:has(input:checked) { background: var(--accent); color: #fff; border-color: var(--accent); }
.adjust-dir input { margin: 0; }
table.adjustments tr.undone td { color: var(--ink-3); }
/* order lines: the number is the grip to drag a line (R4-3); mouse or finger */
.lines-box td.lno { width: 1%; }
.lines-box .grip { display: inline-flex; align-items: center; gap: 3px; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; color: var(--ink-3); font-size: var(--fs-xs); padding: 4px 4px 4px 0; }
.lines-box .grip .dots { font-size: 13px; line-height: 1; opacity: .55; }
.lines-box .grip:hover .dots { opacity: 1; color: var(--accent); }
.lines-box tbody.reordering, .lines-box tbody.reordering * { cursor: grabbing; }
.lines-box tr.dragging td { background: var(--accent-bg); }
/* order lines: the SKU swaps the line's part (R4-3); the arrow beside it opens the item */
.lines-box button.sku-swap { background: none; border: 0; padding: 0; font: inherit; font-weight: 600; color: var(--accent); cursor: pointer; text-align: left; }
.lines-box button.sku-swap:hover { text-decoration: underline; }
.lines-box a.to-item { margin-left: 4px; font-size: var(--fs-xs); text-decoration: none; color: var(--ink-3); }
.lines-box a.to-item:hover { color: var(--accent); }
.qa-mode { flex: none; display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-s); padding: 1px 4px 1px 9px; border-radius: 9px; background: var(--amber-bg); color: var(--amber); border: 1px solid var(--amber-line); white-space: nowrap; }
.qa-mode button { background: none; border: 0; padding: 0 3px; color: inherit; cursor: pointer; font-size: var(--fs-xs); }
.qa.replacing .qa-pill { border-color: var(--amber-line); }
.qa-mode[hidden], .qa .qa-qty[hidden] { display: none; }
/* a line's kind: plain text under the SKU, a click opens the picker (R4-3); amber when it is not the item's kind */
.lines-box td .kind .kind-t { display: block; padding: 1px 0; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .3px; color: var(--ink-3); }
.lines-box td .kind .kind-t.differs { color: var(--amber); }
/* a serial-taking line's count hint, "1 of 2" (R4-4a) */
.lines-box td.serial .sn-count { display: block; font-size: var(--fs-xs); color: var(--ink-3); margin-top: 1px; }
.lines-box td.serial .sn-count.over { color: var(--amber); }
.lines-box td.serial .ro { font-size: var(--fs-s); color: var(--ink-3); }

/* ---------- the parts tree page (decision 058, the mock-up of Sep 28): the item in the frozen top with ‹ ›, the tree one
   level at a time or the pick list, the Where used window that stays until ×, Edit with the save bar at the bottom.
   Built from the shared pieces: the record strip, the segmented switch, badges, in-place fields, the quick-add pill,
   the removed-in-place row, cards and menus ---------- */
.pt-head .recbar { flex-wrap: wrap; }
.pt-head .pt-itembar { padding-top: 6px; padding-bottom: 6px; }
.pt-nav { display: inline-flex; gap: 4px; }
.pt-nav button { font-size: 20px; line-height: 1; padding: 4px 12px !important; min-width: 40px; }
.pt-nav button:disabled { opacity: .35; cursor: default; }
.pt-title { margin: 0; font-size: var(--fs-xl); display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; min-width: 0; flex: 1 1 18em; }
.pt-title .pt-nm { font-size: var(--fs-l); font-weight: 400; color: var(--ink-3); }
.pt-head .pt-tools { gap: 8px 10px; padding-top: 6px; padding-bottom: 6px; background: var(--paper); }
.pt-head .pt-tools select { padding: 5px 8px; font-size: var(--fs-m); }
.pt-check { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-m); white-space: nowrap; }
.pt-find { flex: 1 1 14em; min-width: 12em; border-radius: 18px; padding: 6px 12px; }
.seg button { padding: 5px 12px; border: 1px solid var(--line); border-radius: 0; font-size: var(--fs-m); background: #fff; color: var(--ink); }
.seg button:first-child { border-radius: var(--r-s) 0 0 var(--r-s); } .seg button:last-child { border-radius: 0 var(--r-s) var(--r-s) 0; }
.seg button + button { border-left: 0; } .seg button.on { background: var(--accent); color: #fff; border-color: var(--accent); }
button.pt-edit.on { background: var(--amber-bg); color: var(--amber); border-color: var(--amber-line); font-weight: 600; }
.pt-path { padding: 3px var(--s5) 5px; font-size: var(--fs-s); color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  min-height: 24px; border-bottom: 1px solid var(--line); background: var(--paper); }
.pt-page { padding-bottom: 260px; }
.pt-tree { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-l); padding: 4px 0; }
.pt-row { display: flex; align-items: center; gap: var(--s2); padding: 5px var(--s3) 5px calc(var(--s3) + var(--d) * 20px); border-top: 1px solid var(--line-soft);
  position: relative; min-height: 38px; }
.pt-row:first-child { border-top: 0; }
.pt-row::before { content: ""; position: absolute; left: calc(5px + var(--d) * 20px); top: 0; bottom: 0; border-left: 1px solid var(--line-soft); }
.pt-row.asm { background: #f6f9fc; }
.pt-row.grp { background: #faf9f5; cursor: pointer; }
.pt-row.hit { background: #fff7d6; }
.pt-row.chg { background: var(--amber-bg); } .pt-row.add { background: var(--green-bg); }
.pt-row.rm { background: repeating-linear-gradient(135deg, #f4f3ef 0 6px, #efede7 6px 12px); color: var(--ink-3); }
.pt-row.rm .pt-sku, .pt-row.rm .pt-rnm { text-decoration: line-through; color: var(--ink-3); }
.pt-tw { width: 18px; flex: none; text-align: center; color: var(--ink-3); cursor: pointer; user-select: none; }
.pt-q { flex: none; min-width: 3.4em; text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-3); }
.pt-q .ed input { width: 4.6em; text-align: right; }
.pt-t { flex: 1; min-width: 0; }
.pt-sku { font: inherit; font-weight: 600; color: var(--accent); background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
.pt-sku:hover { text-decoration: underline; }
.pt-row:not(.asm) .pt-sku { font-weight: 500; }
.pt-rnm { color: var(--ink-3); }
.pt-row.asm .pt-rnm { color: var(--ink); }
.pt-gl { font-weight: 600; color: var(--ink-3); }
.pt-guess { font-style: italic; font-size: var(--fs-xs); color: var(--ink-3); margin-left: 4px; }
.pt-was { display: block; font-size: var(--fs-s); color: var(--amber); }
.pt-row.add .pt-was { color: var(--green); } .pt-row.rm .pt-was { color: var(--ink-3); text-decoration: none; }
.pt-also { display: block; font-size: var(--fs-s); color: var(--ink-3); }
.pt-cnt { flex: none; font-size: var(--fs-s); color: var(--ink-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pt-more > summary { padding: 2px 8px !important; font-size: 17px; line-height: 1; min-height: 0 !important; }
.pt-addrow { padding: 4px var(--s3) 8px calc(var(--s3) + var(--d) * 20px + 26px); border-top: 1px solid var(--line-soft); }
.pt-addrow .qa { margin-top: 0; max-width: 460px; }
.pt-addrow .qa-pill { padding-top: 1px; padding-bottom: 1px; border-style: dashed; }
.pt-addrow .qa-pill:focus-within { border-style: solid; }
.pt-addrow .qa-card { width: min(640px, calc(100vw - 32px)); }
.pt-empty { padding: 10px var(--s3); color: var(--ink-3); }
.pt-pick td, .pt-pick th { padding: 6px var(--s3); }
.pt-pick th { top: var(--frozen-h, 0px); }
/* the save bar: at the bottom while there are changes; the floating search sits above it */
.pt-dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 41; background: var(--card); border-top: 1px solid var(--line);
  box-shadow: 0 -6px 20px rgba(20, 30, 50, .10); padding-bottom: env(safe-area-inset-bottom, 0px); }
.pt-dock-in { max-width: 1500px; padding: 10px var(--s5) 12px; display: grid; gap: var(--s2); }
.pt-dock-title { font-size: var(--fs-l); }
.pt-eff { max-height: 28vh; overflow: auto; border: 1px solid var(--line-soft); border-radius: var(--r-m); padding: 4px 10px; }
.pt-eff h4 { margin: 8px 0 2px; font-size: var(--fs-m); }
.pt-eff .d { display: flex; justify-content: space-between; gap: 10px; padding: 2px 0; border-bottom: 1px dotted var(--line); }
.pt-eff .d b { white-space: nowrap; font-variant-numeric: tabular-nums; }
.pt-rev { background: var(--field); border-radius: var(--r-l); padding: 10px; } .pt-rev[hidden], .pt-eff[hidden], .pt-dock [hidden] { display: none; }
@keyframes pt-nudge { 0%, 100% { transform: none; } 25% { transform: translateY(-4px); } 75% { transform: translateY(2px); } }
.pt-dock.nudge { animation: pt-nudge .25s 2; }
@media (prefers-reduced-motion: reduce) { .pt-dock.nudge { animation: none; } }
body.pt-docked .qs-float { bottom: calc(var(--pt-dock-h, 0px) + 14px); }
/* the Where used window: stays open until ×; clicking in it moves only the window */
.pt-pop { position: fixed; z-index: 44; right: var(--s4); top: calc(var(--frozen-h, 120px) + 10px); width: min(780px, calc(100vw - 32px));
  max-height: calc(100vh - var(--frozen-h, 120px) - 30px); overflow: auto; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-l); box-shadow: 0 18px 50px rgba(20, 30, 50, .22); }
.pt-pop-head { position: sticky; top: 0; z-index: 1; display: flex; gap: var(--s2); align-items: center; padding: 8px var(--s3); background: var(--card); border-bottom: 1px solid var(--line); }
.pt-pop-head b { flex: 1; }
.pt-pop-cols { display: grid; grid-template-columns: 1fr minmax(210px, 1.1fr) 1fr; gap: var(--s3); padding: var(--s3); align-items: start; }
.pt-li { display: block; width: 100%; text-align: left; padding: 7px 9px; margin: 0 0 6px; border-radius: var(--r-m); background: var(--field);
  border: 1px solid transparent; color: var(--ink); font-size: var(--fs-m); line-height: 1.35; }
.pt-li:hover, .pt-li:focus-visible { border-color: var(--accent); background: #fff; outline: none; }
.pt-li b { color: var(--accent); } .pt-li .nm { display: block; color: var(--ink-3); font-size: var(--fs-s); }
.pt-li .q { color: var(--ink-3); font-size: var(--fs-s); }
.pt-focus { background: var(--accent-bg); border: 2px solid var(--accent); border-radius: var(--r-l); padding: var(--s3); text-align: center; }
.pt-focus .card-title { margin-bottom: 2px; }
.pt-focus-sku { font-size: 22px; font-weight: 700; margin: 2px 0; word-break: break-all; }
.pt-focus .actions { justify-content: center; margin-top: 10px; }
@media (max-width: 900px), (pointer: coarse) {
  .pt-row { min-height: 44px; }
  .pt-head .pt-tools button, .pt-head .pt-tools select { min-height: 40px; }
}
@media (max-width: 700px) {
  .pt-pop-cols { grid-template-columns: 1fr; }
  .pt-pop { left: 8px; right: 8px; width: auto; top: auto; bottom: 8px; max-height: 78vh; }
  .pt-row { padding-left: calc(8px + var(--d) * 12px); flex-wrap: wrap; } .pt-row::before { left: calc(3px + var(--d) * 12px); }
  .pt-rnm { display: block; } .pt-addrow { padding-left: calc(20px + var(--d) * 12px); }
  .pt-path { padding-left: var(--s3); padding-right: var(--s3); }
  .pt-dock-in { padding-left: var(--s3); padding-right: var(--s3); }
  .pt-title { font-size: 18px; }
  /* on a phone the frozen top with the tree's tools would fill the screen: here it scrolls away with the page */
  body:has(.pt-head) .frozen { position: static; }
  .pt-pop { top: auto; }
}

/* ---------- find in place on a list (decision 059): the pinned box shows the find strip at the height it had; the
   list's own table gets a row of boxes as its first row, under its own headings; the rows below dim and stay ---------- */
.listfind { display: none; }
.frozen .listfreeze.finding { background: #fff8e1; }
.listfreeze.finding > :not(.listfind) { display: none !important; }
.listfreeze.finding > .listfind { display: block; }
.listfind-strip .recbar { margin: 0; padding: 0; border: 0; background: transparent; }
table tr.list-find-row td { position: sticky; top: calc(var(--frozen-h, 0px) + var(--list-head-h, 0px)); z-index: 2; background: #fffdf5;
  max-width: none; overflow: visible; box-shadow: inset 0 -1px 0 var(--amber-line); }
tr.list-find-row input, tr.list-find-row select { display: block; width: 0; min-width: 100%; padding: 2px 5px; font-size: var(--fs-s);
  background: #fff; border: 1px dashed var(--amber-line); border-radius: 5px; }
tr.list-find-row :is(input, select):focus { border-style: solid; border-color: var(--amber); outline: 2px solid var(--amber-bg); }
tr.list-find-row .find-na { display: block; width: 0; min-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  font-size: var(--fs-xs); color: var(--ink-3); font-style: italic; }
body.listfinding main table tbody tr:not(.list-find-row), body.listfinding main .pager { opacity: .35; pointer-events: none; }
.qs-inlist { grid-column: 1 / -1; border-bottom: 1px solid var(--line-soft); margin-bottom: 4px; padding-bottom: 4px; }
.qs-inlist li > span { display: block; padding: 7px 10px; font-size: 14px; }
.listfind-hint { margin: var(--s2) 0 0; }
.listfind.tight .listfind-hint { display: none; }
.listfind-strip .recbar { gap: 6px; } .listfind-strip select { max-width: 11em; } .listfind-strip label { white-space: nowrap; }
.listfind-strip input[name=save_as] { width: 11em; }
.listfind-strip label.inline-label { flex-direction: row; align-items: center; gap: var(--s1); }
html:has(.listfreeze) { scrollbar-gutter: stable; }   /* a short list growing a find row never brings in a scrollbar that narrows the table */