:root {
  --ink: #1d2430;
  --muted: #667085;
  --line: #e3e6ec;
  --bg: #f6f7f9;
  --card: #ffffff;
  --brand: #1f3a5f;
  --brand-2: #2c5282;
  --accent: #c2410c;
  --ok: #15803d;
  --warn-bg: #fff7e6;
  --warn: #9a6700;
  --err: #b42318;
  --err-bg: #fef3f2;
  --radius: 8px;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font: 14px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
}
a { color: var(--brand-2); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- layout */
.app { display: grid; grid-template-columns: 210px 1fr; min-height: 100vh; }
.side { background: var(--brand); color: #fff; padding: 18px 12px;
  position: sticky; top: 0; align-self: start; height: 100vh; overflow-y: auto; }
/* which version this machine is running (Josh 9/22/26): the bottom corner of the rail, quiet until
   somebody needs to read it out on the phone. The rail scrolls, so it sits after the menu rather than
   pinned over it. */
.side { display: flex; flex-direction: column; }
.side .ver { padding: 8px 10px 2px; font-size: 11px; color: rgba(255,255,255,.55);
  font-variant-numeric: tabular-nums; letter-spacing: .2px; }
.side .logo { font-weight: 700; font-size: 16px; letter-spacing: .2px; padding: 0 8px 14px; border-bottom: 1px solid rgba(255,255,255,.15); margin-bottom: 10px; }
.side .logo small { display: block; font-weight: 400; opacity: .7; font-size: 12px; }
.side nav a, .side nav span { display: block; padding: 8px 10px; border-radius: 6px; color: #dbe4f0; }
.side nav a:hover { background: rgba(255,255,255,.08); text-decoration: none; }
.side nav a.on { background: rgba(255,255,255,.16); color: #fff; font-weight: 600; }
.side nav span.soon { opacity: .45; cursor: default; }
.side nav span.soon::after { content: "soon"; float: right; font-size: 10px; text-transform: uppercase; letter-spacing: .5px; margin-top: 3px; }
.side nav .sep { height: 1px; background: rgba(255,255,255,.12); margin: 10px 4px; }
main { padding: 0 28px 60px; min-width: 0; }
/* the page title, its subtitle and its buttons stay on screen with everything else (Josh 9/12/26) */
.headwrap { position: sticky; top: 0; z-index: 7; background: var(--bg); padding: 16px 0 10px;
  box-shadow: 0 1px 0 var(--line); margin-bottom: 12px; }
.headwrap .pagehead { margin-bottom: 0; }
@media (max-width: 900px) { .headwrap { position: static; } }

/* ---------- header row */
.pagehead { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.pagehead h1 { margin: 0; font-size: 22px; }
.pagehead .sub { color: var(--muted); margin-top: 2px; }
.crumbs { color: var(--muted); font-size: 13px; margin-bottom: 4px; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- buttons */
.btn { display: inline-block; border: 1px solid var(--line); background: #fff; color: var(--ink); padding: 7px 14px; border-radius: 6px; font: inherit; cursor: pointer; }
.btn:hover { background: #f0f2f5; text-decoration: none; }
.btn.primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn.primary:hover { background: var(--brand-2); }
.btn.small { padding: 4px 10px; font-size: 13px; }

/* ---------- cards / panels */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; margin-bottom: 16px; }
.card h2 { font-size: 15px; margin: 0 0 12px; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }
/* one column of full-width bars, for the things you open now and then */
.stack { display: flex; flex-direction: column; gap: 10px; }
.stack > .detailsfold > .card, .stack > details > .card, .stack > .card { margin: 0; }
dl.kv { display: grid; grid-template-columns: 150px 1fr; gap: 6px 12px; margin: 0; }
dl.kv dt { color: var(--muted); }
dl.kv dd { margin: 0; }
.addr { white-space: pre-line; }

/* ---------- tables */
/* Josh 9/12/26: the nav, the filter row and the column headers stay on screen while a long list
   scrolls. A scrolling box here would trap the sticky headers inside it, so the table only gets its
   own scrollbar on a narrow screen, where nothing is sticky anyway. */
.tablewrap { overflow: visible; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
@media (max-width: 900px) { .tablewrap { overflow-x: auto; } .side { position: static; height: auto; } }
table.list { width: 100%; border-collapse: collapse; }
table.list th, table.list td { padding: 7px 10px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
table.list th { background: #f3f5f8; font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .3px; color: #475467; position: sticky; top: calc(var(--head, 0px) + var(--filters, 0px)); z-index: 3; box-shadow: inset 0 -1px 0 var(--line); }
table.list tr:hover td { background: #fafbfc; }
table.list td.num, table.list th.num { text-align: right; }
/* ---------- one type scale for the whole program (Josh 9/12/26)
   The standing-orders table is the model, and every list follows it:
     the name            14px, the ordinary text font, as a link
     what it belongs to  12.5px .small .muted — BESIDE the name, never on a line of its own
     column heading      12px uppercase, and it never wraps
     figures             14px, lined up in their column
   So every row is one line deep and every screen has the same rhythm. */
table.list th { white-space: nowrap; }
table.list td.num { font-variant-numeric: tabular-nums; }
table.list tr.sub td { background: #fbfcfd; font-size: 13px; color: #344054; }
table.list tr.sub td:first-child { padding-left: 28px; }
.muted { color: var(--muted); }
.nowrap { white-space: nowrap; }
.tag { display: inline-block; font-size: 11px; padding: 1px 7px; border-radius: 10px; background: #eef2f7; color: #344054; white-space: nowrap; }
.tag.override { background: #fff1e6; color: var(--accent); }
.tag.off { background: #f2f4f7; color: #98a2b3; }
/* VOID IS RED, and says VOID. It was grey and lower case, which is how a voided order gets read as
   a live one on a list of forty (Josh 9/23/26: "VOID should be more obvious. Maybe red or
   something."). */
.tag.void { background: var(--err-bg, #fdecea); color: var(--err, #b42318); font-weight: 700;
            letter-spacing: .04em; border: 1px solid #f2c4bd; }
.tag.po { background: #e8f3ec; color: var(--ok); }

/* ---------- filters */
form.filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 12px;
  position: sticky; top: var(--head, 0px); z-index: 5; background: var(--bg); padding: 8px 0; box-shadow: 0 1px 0 var(--line); }
form.filters input[type=search] { min-width: 260px; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.seg a { padding: 6px 12px; color: var(--ink); background: #fff; }
.seg a.on { background: var(--brand); color: #fff; }
.seg a:hover { text-decoration: none; }

/* ---------- forms */
input[type=text], input[type=search], input[type=email], input[type=number], select, textarea {
  font: inherit; padding: 6px 9px; border: 1px solid #cfd4dc; border-radius: 6px; background: #fff; color: var(--ink); width: 100%;
}
textarea { min-height: 64px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid #b8cbe6; border-color: var(--brand-2); }
form.filters input, form.filters select { width: auto; }
.fields { display: grid; grid-template-columns: repeat(12, 1fr); gap: 12px 14px; }
.f { display: flex; flex-direction: column; gap: 4px; grid-column: span 6; }
.f.w12 { grid-column: span 12; } .f.w8 { grid-column: span 8; } .f.w4 { grid-column: span 4; }
.f.w3 { grid-column: span 3; } .f.w2 { grid-column: span 2; } .f.w1 { grid-column: span 1; }
.f.w5 { grid-column: span 5; } .f.w6 { grid-column: span 6; } .f.w7 { grid-column: span 7; }
.f.w9 { grid-column: span 9; } .f.w10 { grid-column: span 10; }
/* A header that stays on ONE line: no hints stacked under each box pushing it into three rows, and
   nothing allowed to grow taller than the box next to it (Josh 9/23/26: "should all be cleanly on
   one line"). Below phone width the grid rule further down stacks it, as it should. */
.fields.oneline { align-items: end; row-gap: 0; }
.fields.oneline .f .hint { display: none; }
.f label, .f .lbl { font-size: 12px; font-weight: 600; color: #475467; }
.f .hint { font-size: 12px; color: var(--muted); }
.f.err input, .f.err select { border-color: var(--err); background: var(--err-bg); }
/* A date you can TYPE. The text box does the work; the browser's own date box stays beside it, shrunk
   to just its calendar button, so the mouse still works for anyone who prefers it. */
.datewrap { position: relative; display: block; }
form.filters .datewrap, .chips .datewrap { display: inline-block; }
.datetype { width: 100%; }
.datetype.bad { border-color: var(--err); background: var(--err-bg); }
input[type=date].haspicker { width: auto; min-width: 0; padding: 6px 2px; border: 0; background: none;
                             color: transparent; position: absolute; right: 6px; bottom: 6px; }
input[type=date].haspicker::-webkit-datetime-edit { display: none; }
input[type=date].haspicker::-webkit-calendar-picker-indicator { opacity: .55; cursor: pointer; }
.f { position: relative; }
.f .msg { color: var(--err); font-size: 12px; }
.check { display: flex; align-items: center; gap: 8px; }
.check input { width: auto; }
.days { display: flex; gap: 6px; flex-wrap: wrap; }
.days label { display: inline-flex; align-items: center; gap: 4px; border: 1px solid #cfd4dc; border-radius: 6px; padding: 5px 9px; font-weight: 500; cursor: pointer; background: #fff; }
.days input { margin: 0; }
.override-row { display: grid; grid-template-columns: 180px 1fr; gap: 8px; align-items: center; }
.formbar { display: flex; gap: 8px; justify-content: flex-end; position: sticky; bottom: 0; background: linear-gradient(transparent, var(--bg) 30%); padding: 14px 0 4px; }
.errbox { background: var(--err-bg); border: 1px solid #fecdca; color: var(--err); padding: 10px 14px; border-radius: var(--radius); margin-bottom: 14px; }

/* ---------- flash */
.flash { padding: 10px 14px; border-radius: var(--radius); margin-bottom: 14px; background: #ecfdf3; border: 1px solid #abefc6; color: #067647; }
.flash.error { background: var(--err-bg); border-color: #fecdca; color: var(--err); }

/* ---------- history */
.hist { font-size: 13px; }
.hist li { margin-bottom: 6px; }
.hist code { background: #f2f4f7; padding: 0 4px; border-radius: 4px; font-size: 12px; }

/* ---------- products */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin: -4px 0 14px; }
.tabs a { padding: 8px 14px; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs a.on { color: var(--ink); border-bottom-color: var(--brand); font-weight: 600; }
.tabs a:hover { text-decoration: none; color: var(--ink); }
code.code { font: 12.5px/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: #eef2f7; color: #1f3a5f; padding: 2px 6px; border-radius: 4px; white-space: nowrap; }
code.code.big { font-size: 18px; padding: 2px 8px; }
.small { font-size: 12.5px; }
.tag.warn { background: #fff4d6; color: #8a5a00; }
.tag.yes { background: #fde8e4; color: #b42318; }
.warnlink { color: #8a5a00; font-weight: 600; }
.warntext { color: #8a5a00; font-size: 13px; }
.labeltext { display: inline-block; font-weight: 700; letter-spacing: .3px; background: #fff; border: 1.5px solid #1d2430; padding: 4px 10px; border-radius: 4px; font-size: 13px; }
table.list.plain td { border-bottom: 1px solid #f0f2f5; padding: 5px 8px; }
th.al, td.al { text-align: center; width: 44px; padding-left: 2px; padding-right: 2px; font-size: 11px; }
td.al.vy { background: #fde8e4; color: #b42318; font-weight: 700; }
td.al.va { background: #fff1e6; color: #c2410c; }
td.al.vn { background: #e8f3ec; color: #15803d; }
td.al.vq { background: #fff4d6; color: #8a5a00; font-weight: 700; }
.alg { display: grid; gap: 6px; }
.alg-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.alg-name { width: 100px; font-weight: 600; font-size: 13px; }
.pill { display: inline-flex; align-items: center; gap: 5px; border: 1px solid #cfd4dc; border-radius: 16px; padding: 3px 10px; font-size: 12.5px; cursor: pointer; background: #fff; }
.pill input { margin: 0; }
.pill.pY:has(input:checked) { background: #fde8e4; border-color: #f1a99d; }
.pill.pA:has(input:checked) { background: #fff1e6; border-color: #f5c29b; }
.pill.pN:has(input:checked) { background: #e8f3ec; border-color: #9fd3b1; }
.pill.p\?:has(input:checked) { background: #fff4d6; border-color: #f0cf7a; }
.pill.px:has(input:checked) { background: #f2f4f7; }
.previewbox { border-color: #f0cf7a; background: #fffcf2; }
tr.dflt td { background: #f3f8fd; }
.f.w9 { grid-column: span 9; } .f.w6 { grid-column: span 6; }
.boxlabel { width: 100%; max-width: 380px; border: 2px solid #1d2430; border-radius: 6px; padding: 12px 14px; font-family: Arial, sans-serif; background: #fff; }
.boxlabel .bl-top { display: flex; justify-content: space-between; border-bottom: 1px solid #1d2430; padding-bottom: 6px; margin-bottom: 8px; font-size: 13px; }
.boxlabel .bl-cust { font-size: 13px; margin-bottom: 10px; }
.boxlabel .bl-prod { font-size: 20px; font-weight: 700; line-height: 1.2; margin-bottom: 6px; }
.boxlabel .bl-row { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 10px; }
.boxlabel .bl-allergen { border-top: 1px solid #1d2430; padding-top: 6px; font-weight: 700; font-size: 12.5px; }

@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .side { padding: 10px; }
  .side nav { display: flex; flex-wrap: wrap; gap: 4px; }
  .side nav .sep { display: none; }
  main { padding: 16px; }
  .f, .f.w8, .f.w4, .f.w3, .f.w2 { grid-column: span 12; }
}
@media print {
  .side, .actions, form.filters, .formbar { display: none !important; }
  .app { display: block; }
  main { padding: 0; }
}
.tag.base { background: #e8f3ec; color: var(--ok); }

.flash.warn { background: #fff7e6; border-color: #fedf89; color: #8a5a00; }

kbd { font: 11px/1 ui-monospace, Menlo, Consolas, monospace; background: #fff; border: 1px solid #c7ccd4;
      border-bottom-width: 2px; border-radius: 4px; padding: 2px 5px; color: #33415c; }
input.amt:focus { outline: 2px solid var(--accent, #1f3a5f); outline-offset: 0; background: #fffbe8; }
tr:focus-within td { background: #f7f9fc; }

.applybar { padding: 10px 14px; }
.applybar .row1 { display: flex; gap: 10px; align-items: center; }
.applybar .row1 label { font-size: 12px; color: #444; }
.applybar .row2 { margin-top: 7px; }
tr.hit td { background: #fff3bf; transition: background .4s; }
.payref { white-space: nowrap; }
.payref.void { color: #8a8f98; text-decoration: line-through; }

/* the add-product box: its own suggestion list, so one Enter can add the line */
/* ANY type-ahead box, not only one that happens to sit in a .f field. The list under it is
   positioned absolutely, so without this it finds whatever ancestor IS positioned — the page — and
   lands somewhere else entirely. The row-level product picker had no .f around it, which is why the
   list sometimes appeared over at the right of the screen (Josh 9/23/26: "Sometimes the box
   populates below the field, sometimes it populates at the right side of the screen"). */
.finder { position: relative; }
/* The list may be WIDER than the box it hangs under: the box sits in a tight one-line header, but
   "CUSANO'S L #3 DANNY SAMELA JR" has to be readable whole or the office is picking blind
   (Josh 9/23/26). It grows to the right and stops before the edge of the screen. */
.hits { position: absolute; z-index: 30; left: 0; top: 100%; min-width: 100%; width: max-content;
        max-width: min(640px, 70vw); background: #fff; border: 1px solid var(--accent, #1f3a5f);
  border-radius: 3px; max-height: 260px; overflow-y: auto; box-shadow: 0 6px 18px rgba(20,35,55,.18); }
.hits div { padding: 6px 10px; cursor: pointer; display: flex; gap: 12px; align-items: baseline;
            justify-content: space-between; }
.hits div:hover, .hits div.on { background: #eef3f9; }
/* The NAME leads and is what the eye lands on; the number and city follow it, quietly. */
/* the name takes what it needs; the code and city give way first */
.hits .n { font-weight: 600; font-size: 14px; color: var(--ink); white-space: nowrap; flex: 0 0 auto; }
.hits .c { color: #5b6b7d; font-size: 12px; white-space: nowrap; overflow: hidden;
           text-overflow: ellipsis; flex: 1 1 auto; text-align: right; min-width: 0; }
/* a PRODUCT is found by its code, so there the code leads — the same shape, the other way round */
.hits .code { font: 600 13px ui-monospace, Menlo, Consolas, monospace; white-space: nowrap; color: var(--ink); }
.hits[hidden] { display: none; }
.hits .more { padding: 5px 9px; font-size: 11.5px; color: #5b6b7d; border-top: 1px solid #e3e9f0; background: #f7f9fc; }

/* delete, only where nothing points at the record (Josh 9/12/26) */
form.inline { display: inline; }
.btn.danger { border-color: #e0b3ae; color: var(--err); background: #fff; }
.btn.danger:hover { background: var(--err-bg); border-color: var(--err); }
.hint.nodel { align-self: center; font-size: 12px; color: var(--muted); max-width: 340px; }

/* the three order screens sit under Orders and light up with it (Josh 9/12/26) */
/* the .navsub group came out of the rail on 9/12/26 — the three order screens are buttons
   on the Orders screen now. Nothing uses these rules; kept out rather than left behind. */

/* ---------- charges (Josh 9/12/26) */
label.pick { display: inline-flex; align-items: center; gap: 6px; margin-right: 16px; font-size: 13.5px; }
label.pick input { margin: 0; }
label.big { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; }
.pad { padding: 10px 14px; }
.pad p:first-child { margin-top: 0; }
.pad p:last-child { margin-bottom: 0; }
tr.charge td { background: #fbfcfd; }
tr.charge td.what { padding-left: 28px; }
.chargesum { display: flex; justify-content: space-between; gap: 16px; padding: 6px 10px; font-size: 13.5px; }
.chargesum.total { border-top: 2px solid var(--ink); font-size: 15px; font-weight: 600; }

/* ---------- the confirm step (Josh 9/12/26)
   A guarded button turns into the sentence of what it is about to do. Deliberately loud: it is the
   only thing on the screen that looks like this, so it can't be clicked past without reading. */
.askfirst { border: 1px solid var(--warn); background: var(--warn-bg); border-radius: var(--radius);
  padding: 12px 14px; margin: 10px 0 0; max-width: 640px; }
.askfirst p { margin: 0 0 10px; font-size: 14px; color: #6b4d07; }
.askfirst .askrow { display: flex; gap: 8px; }

/* ---------- days outstanding (Josh 9/12/26)
   One big figure, because it is the number you came to the screen for, and a row of bars because
   "is it improving?" is a shape question, not a table question. */
.bignum { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
.bignum .fig { display: flex; align-items: baseline; gap: 8px; }
.bignum .fig strong { font-size: 46px; line-height: 1; font-weight: 700; color: var(--brand); }
.bignum .fig span { font-size: 13px; color: var(--muted); }
.bignum .how { font-size: 13px; color: var(--muted); max-width: 46em; }
.bignum .moves { margin-top: 6px; display: flex; gap: 8px; flex-wrap: wrap; }
.move { font-size: 12px; padding: 2px 9px; border-radius: 10px; background: #eef2f7; color: #344054; }
.move.good { background: #e8f3ec; color: var(--ok); }
.move.bad { background: #fde8e4; color: var(--err); }
.good { color: var(--ok); }
.bad { color: var(--err); }
table.list tr.lit td { background: #f7f9fc; font-weight: 600; }

.bars { display: flex; align-items: flex-end; gap: 10px; height: 190px; padding-top: 6px; }
.bars .bar { flex: 1; display: flex; flex-direction: column; justify-content: flex-end;
  align-items: center; height: 100%; }
.bars .bar .col { width: 100%; max-width: 54px; background: var(--brand-2); border-radius: 3px 3px 0 0;
  min-height: 2px; opacity: .85; }
.bars .bar.now .col { background: var(--accent); opacity: 1; }
.bars .bar .v { font-size: 12px; font-weight: 600; margin-top: 4px; }
.bars .bar .k { font-size: 11px; color: var(--muted); white-space: nowrap; }
.bars .bar:hover .col { opacity: 1; }

/* ---------- the keyboard (Josh 9/12/26)
   A numbered menu his people can type from, a strip along the bottom that says what the numbers are
   on this screen, and the ? overlay. */
.side .menulink { display: block; padding: 8px 10px; border-radius: 6px; color: #dbe4f0;
  border: 1px solid rgba(255,255,255,.22); margin-bottom: 10px; font-weight: 600; }
.side .menulink::after { content: "menu"; float: right; font: 10px/1.6 ui-monospace, Menlo, monospace;
  opacity: .6; letter-spacing: .5px; }
.side .menulink:hover { background: rgba(255,255,255,.08); text-decoration: none; }
.side .menulink.on { background: rgba(255,255,255,.16); color: #fff; }

.menucard { max-width: 760px; }
ol.bigmenu { list-style: none; margin: 0; padding: 0; }
ol.bigmenu li + li { border-top: 1px solid var(--line); }
ol.bigmenu a { display: flex; align-items: baseline; gap: 14px; padding: 11px 8px; color: var(--ink);
  border-radius: 6px; }
ol.bigmenu a:hover { background: #f0f4f9; text-decoration: none; }
ol.bigmenu .num { font: 700 17px/1 ui-monospace, Menlo, Consolas, monospace; color: var(--brand-2);
  min-width: 26px; text-align: right; }
ol.bigmenu .what strong { font-size: 15px; }

.keybar { position: fixed; left: 210px; right: 0; bottom: 0; z-index: 40; display: flex; gap: 4px;
  align-items: center; flex-wrap: wrap; background: #fff; border-top: 1px solid var(--line);
  padding: 5px 12px; font-size: 12px; color: var(--muted); box-shadow: 0 -1px 6px rgba(0,0,0,.04); }
.keybar .k { padding: 1px 7px; border-right: 1px solid var(--line); white-space: nowrap; }
.keybar .k:last-of-type { border-right: 0; }
.keybar .k b { font: 700 11px/1 ui-monospace, Menlo, Consolas, monospace; color: var(--brand-2);
  background: #eef3f9; border: 1px solid #d6e0ec; border-radius: 3px; padding: 2px 4px; margin-right: 4px; }
.keybar .k.dim { opacity: .6; }
.keybar .buf { margin-left: auto; font-weight: 600; color: var(--brand-2); padding-right: 6px; }
.keybar .buf.bad { color: var(--err); }
@media (max-width: 900px) { .keybar { left: 0; } }
@media print { .keybar, .side .menulink { display: none; } }

.keyhelp { position: fixed; inset: 0; z-index: 60; background: rgba(20,28,38,.45);
  display: flex; align-items: center; justify-content: center; padding: 24px; }
.keyhelp .box { background: #fff; border-radius: var(--radius); padding: 18px 20px; max-width: 560px;
  width: 100%; max-height: 80vh; overflow: auto; box-shadow: 0 12px 40px rgba(0,0,0,.25); }
.keyhelp h2 { margin: 0 0 10px; font-size: 16px; }
.keyhelp table { border-collapse: collapse; width: 100%; }
.keyhelp th { text-align: left; width: 92px; padding: 5px 10px 5px 0; vertical-align: top;
  font: 600 12px/1.5 ui-monospace, Menlo, Consolas, monospace; color: var(--brand-2); }
.keyhelp td { padding: 5px 0; border-bottom: 1px solid var(--line); }

/* ---------- box scanning (Josh 9/12/26) — an extra, so all of this only appears when it is on */
/* The barcode is drawn as stripes, not an image: nothing to install, and it prints from any browser. */
.bc { display: inline-flex; align-items: stretch; background: #fff; }
.bc i { display: block; height: 100%; }
.bc i.b { background: #000; }
.bc i.s { background: #fff; }
.boxcode { display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.boxcode .txt { font: 600 8px/1 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .04em; }

.scanbox { width: 100%; font: 600 26px/1.2 ui-monospace, Menlo, Consolas, monospace; padding: 12px 14px;
  border: 2px solid var(--brand); border-radius: var(--radius); letter-spacing: .04em; }
.scanbox:focus { outline: 3px solid #bcd3ee; }
.scansaid { display: flex; gap: 14px; align-items: center; padding: 14px 16px; border-radius: var(--radius);
  margin-bottom: 14px; border: 1px solid var(--line); }
.scansaid .mark { font: 700 30px/1 ui-monospace, Menlo, Consolas, monospace; width: 44px; text-align: center; }
.scansaid .what strong { font-size: 19px; }
.scansaid .what .sub { color: var(--muted); font-size: 13px; margin-top: 2px; }
.scansaid.ok { background: #eaf6ee; border-color: #a9d8bb; }
.scansaid.ok .mark { color: var(--ok); }
.scansaid.again { background: #f2f5f9; }
.scansaid.again .mark { color: var(--muted); }
.scansaid.wrong, .scansaid.no { background: var(--err-bg); border-color: #e0b3ae; }
.scansaid.wrong .mark, .scansaid.no .mark { color: var(--err); }
tr.rowbad td { background: var(--err-bg); }

/* ---------- who is signed in (Josh 9/12/26) */
.side .whoami { margin-top: auto; padding: 10px; border-top: 1px solid rgba(255,255,255,.14);
  font-size: 12px; color: #a8bdd6; }
.side .whoami .nm { color: #fff; font-weight: 600; font-size: 13px; }
.side .whoami .rl { margin-bottom: 6px; opacity: .8; }
.side .whoami a { display: inline; padding: 0; color: #cfe0f5; }
body.plain { background: var(--bg); display: flex; min-height: 100vh; align-items: center; justify-content: center; padding: 24px; }
.signin { width: 100%; max-width: 380px; }
.signin.wide { max-width: 520px; }
.signin .mark { font-weight: 700; font-size: 22px; color: var(--brand); margin-bottom: 14px; text-align: center; }
.signin .mark small { display: block; font-weight: 400; font-size: 12px; color: var(--muted);
  text-transform: uppercase; letter-spacing: .09em; margin-top: 2px; }
.signin .card { padding: 22px; }
.signin h1 { font-size: 19px; margin: 0 0 4px; }
.signin .f { margin-bottom: 12px; }
.signin input { width: 100%; }
td.okcell { color: var(--ok); font-weight: 600; }
td.viewcell { color: var(--muted); }
td.nocell { color: #c0c6cf; }

/* ---------- a row of controls inside a card (Run together, the board) */
.rowbar { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; margin: 12px 0; }
.rowbar label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
.rowbar select, .rowbar input { width: auto; min-width: 190px; }
.inline-form { display: inline-flex; gap: 6px; align-items: flex-end; flex-wrap: wrap; }
.inline-form select, .inline-form input { width: auto; }

/* ---------- the board (Josh 9/13/26)
   Every route running that night as one lane, a truck moving left to right, a grey mark where that
   route usually is by now, and a clock that scrubs back through a night already run. */
.bdmeasure { display: flex; border: 1px solid var(--line); border-radius: 7px; overflow: hidden;
  width: fit-content; max-width: 100%; }
.bdm { padding: 7px 14px; font-size: 13px; font-weight: 600; color: var(--ink); background: #fff;
  border-right: 1px solid var(--line); }
.bdm:last-child { border-right: 0; }
.bdm:hover { text-decoration: none; background: #f0f2f5; }
.bdm.on { background: var(--brand); color: #fff; }
.bdwhy { font-size: 13px; color: var(--muted); }

.bdclockrow { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin-bottom: 18px; }
.bdclock { font-size: 28px; font-weight: 700; font-variant-numeric: tabular-nums;
  letter-spacing: -.5px; min-width: 112px; }
.bdscrub { flex: 1 1 260px; min-width: 200px; }
.bdscrub input { width: 100%; margin: 0; }
.bdends { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted);
  font-variant-numeric: tabular-nums; margin-top: 2px; }

.bdlane { display: grid; grid-template-columns: 168px 1fr 186px; gap: 14px; align-items: center;
  padding: 11px 0; border-top: 1px solid var(--line); }
.bdlane:first-child { border-top: 0; }
.bdwho b { display: block; font-size: 15px; line-height: 1.2; }
.bdwho span { font-size: 12.5px; color: var(--muted); }
.bdtrack { position: relative; height: 30px; background: #eef1f5; border-radius: 15px; }
.bdfill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 15px; background: var(--brand);
  transition: width .28s ease; }
.bdpip { position: absolute; top: 50%; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px;
  border-radius: 50%; background: rgba(255,255,255,.72); }
.bdpip.prob { background: var(--err); width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; }
.bdtruck { position: absolute; top: 50%; transform: translate(-50%, -50%); font-size: 17px;
  transition: left .28s ease; filter: drop-shadow(0 1px 2px rgba(0,0,0,.35)); }
.bdghost { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--muted);
  opacity: .55; transition: left .28s ease; }
.bdghost::after { content: 'usual'; position: absolute; top: -14px; left: 50%;
  transform: translateX(-50%); font-size: 10px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted); }
.bdfin { position: absolute; right: 0; top: -3px; bottom: -3px; width: 3px; background: var(--line); }
.bdnum { text-align: right; font-size: 13px; font-variant-numeric: tabular-nums; line-height: 1.35; }
.bdnum b { font-size: 15px; }
.bdnum .none { font-size: 12.5px; color: var(--muted); }
.bdnum .ahead { color: var(--ok); font-weight: 600; }
.bdnum .behind { color: #a8641a; font-weight: 600; }

/* a combined truck is one lane that opens to show each route inside it (Josh 9/14/26) */
.bdopen { background: none; border: 0; padding: 0; font: inherit; color: var(--brand-2);
  cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.bdinner { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 6px;
  margin: 4px 0 2px 168px; padding-left: 14px; border-left: 2px solid var(--line); }
.bdirow { display: grid; grid-template-columns: 74px 1fr 92px; gap: 10px; align-items: center;
  font-size: 12.5px; }
.bdicode { font-weight: 700; }
.bditrack { height: 10px; background: #eef1f5; border-radius: 5px; overflow: hidden; }
.bditrack i { display: block; height: 100%; background: var(--brand); border-radius: 5px; }
.bdinum { text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }

.bdtrace svg { width: 100%; max-width: 100%; height: auto; aspect-ratio: 1000 / 230; display: block; }
.bdkey { display: flex; gap: 16px; flex-wrap: wrap; font-size: 13px; margin-top: 8px; }
.bdkey span { display: flex; align-items: center; gap: 6px; }
.bdkey i { width: 14px; height: 3px; border-radius: 2px; display: inline-block; }

@media (max-width: 700px) {
  .bdlane { grid-template-columns: 1fr; gap: 6px; }
  .bdnum { text-align: left; }
  .bdghost::after { display: none; }
  .bdinner { margin-left: 0; }
}

/* the caller's own words, beside the line they were keyed into (Josh 9/17/26) */
.said-from { font: 12.5px/1.4 ui-monospace, Menlo, Consolas, monospace; color: var(--muted); }

/* F9 / New phone note, top of the rail on every screen (Josh 9/21/26) */
.side .phonebtn { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin: 0 0 10px; padding: 9px 10px; border-radius: 6px; background: var(--accent); color: #fff;
  font-weight: 600; }
.side .phonebtn:hover { filter: brightness(1.08); text-decoration: none; }
.side .phonebtn kbd { font: 600 11px/1 ui-monospace, Menlo, Consolas, monospace; padding: 3px 5px;
  border-radius: 4px; background: rgba(255,255,255,.22); color: #fff; }
/* the way back to what they were doing when the phone rang */
.callback { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 12px;
  padding: 9px 12px; border-radius: 6px; background: #fff4e5; border: 1px solid #f3c58f; color: #5c3a0a; }
.callback a { font-weight: 600; color: var(--accent); }
.callback .x { margin-left: auto; border: 0; background: none; font-size: 18px; line-height: 1;
  color: #8a5a00; cursor: pointer; padding: 0 4px; }
/* on an order made from a phone note: only Confirm keeps it (Josh 9/21/26) */
.fromnotebar { margin: 0 0 12px; padding: 9px 12px; border-radius: 6px; background: #eef4fb;
  border: 1px solid #c5d6ea; color: #1f3a5f; }
.fromnotebar a { font-weight: 600; margin-left: 6px; }
/* Notes waiting, under New phone note on every screen (Josh 9/21/26) */
.side .waitbtn { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin: -4px 0 10px; padding: 7px 10px; border-radius: 6px; color: #dbe4f0;
  border: 1px solid rgba(255,255,255,.18); font-size: 14px; }
.side .waitbtn:hover { background: rgba(255,255,255,.08); text-decoration: none; }
.side .waitbtn.on { background: rgba(255,255,255,.16); color: #fff; font-weight: 600; }
.side .waitbtn .n { min-width: 22px; text-align: center; padding: 1px 7px; border-radius: 10px;
  background: rgba(255,255,255,.14); font: 600 12px/1.5 ui-monospace, Menlo, Consolas, monospace; }
.side .waitbtn.some .n { background: #f59e0b; color: #1f2937; }

/* Cusano's sheets: confidence, and the side-by-side check (Josh 9/21/26) */
.conf { display: inline-block; font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 3px; white-space: nowrap; border: 1px solid transparent; }
.conf.c-learned { color: var(--ok); border-color: #b7dcc3; background: #fff; }
.conf.c-sure { color: #fff; background: var(--ok); }
.conf.c-check { color: #7a4d00; background: #ffe7a8; }
.conf.c-cant { color: #fff; background: var(--err); }
.bad { color: var(--err); }
.checkbar { background: var(--warn-bg); border: 1px solid #f3d9a4; border-radius: var(--radius); padding: 8px 12px; margin: 0 0 12px; font-size: 13px; }
.checkbar.done { background: #e8f3ec; border-color: #b7dcc3; }
.checksplit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.sheetpane { position: sticky; top: 10px; }
.sheetbar { display: flex; justify-content: space-between; gap: 8px; color: var(--muted); padding: 0 2px 4px; }
.sheetpages { height: calc(100vh - 60px); overflow-y: auto; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.sheetpages img { display: block; width: 100%; height: auto; border-bottom: 1px solid var(--line); }
.invpane { display: flex; flex-direction: column; gap: 10px; }
.inv { background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--line); border-radius: var(--radius); padding: 8px 10px; }
.inv.w-new { border-left-color: var(--ok); }
.inv.w-changed { border-left-color: #e0a100; }
.inv.w-nothingready { border-left-color: var(--err); }
.inv.w-same { opacity: .75; }
.inv.ticked { background: #f4faf6; }
.inv.gone { border-left-color: var(--err); background: var(--err-bg); }
.inv.gone h3 { margin: 0 0 4px; font-size: 14px; }
.invhead { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 4px; }
.invhead .tick { display: flex; gap: 6px; align-items: center; font-size: 14px; cursor: pointer; }
.invhead .tick input { width: 18px; height: 18px; }
.invhead .route { font-size: 13px; flex: 1 1 200px; }
.inv .cnote { background: #fffbea; padding: 3px 6px; border-radius: 4px; margin: 2px 0 4px; }
.inv table.tight td, .inv table.tight th { padding: 3px 6px; }
.inv tr.problem td { background: var(--err-bg); }
.inv .diff { margin-top: 4px; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.rowform { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0; }
@media (max-width: 900px) { .checksplit { grid-template-columns: 1fr; } .sheetpane { position: static; } .sheetpages { height: 60vh; } }

/* Cusano's notes: read on the check screen, dealt with on the order (Josh 9/21/26) */
.inv .cnote { border: 1px solid #f3d9a4; background: #fffbea; border-radius: 6px; padding: 6px 8px; margin: 4px 0 6px; }
.inv .cnote.fresh { border-color: #e0a100; box-shadow: 0 0 0 1px #e0a100 inset; }
.cnhead { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 12px; }
.cntext { font-size: 13.5px; margin: 3px 0; white-space: pre-wrap; }
.cnwas { color: var(--muted); text-decoration: line-through; }
.cnote .tick { display: flex; gap: 6px; align-items: flex-start; margin-top: 4px; }
.cnote .tick input { width: 16px; height: 16px; margin-top: 1px; }
a.tag.yes { text-decoration: none; }
.cusnotebar { border: 1px solid #e0a100; background: #fffbea; border-radius: var(--radius); padding: 10px 12px; margin: 0 0 12px; }
.cusnotebar.done { border-color: #b7dcc3; background: #f4faf6; }
.cusnotebar .cntext { font-size: 15px; }
.cusnotebar form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }

/* changing the product on a line where it sits (Josh 9/21/26) */
.btn.tiny { padding: 1px 7px; font-size: 11px; line-height: 1.5; margin-left: 4px; }
tr.ln .iname { cursor: text; }
tr.ln:hover .iname { text-decoration: underline dotted #98a2b3; }
tr.ln .chg { opacity: .35; }
tr.ln:hover .chg, tr.ln .chg:focus { opacity: 1; }
tr.ln.editing td { background: #eef3f9; }
.rowfinder { position: relative; }
.rowfinder input { width: 100%; max-width: 360px; font: 600 13px ui-monospace, Menlo, Consolas, monospace; }
.rowhint { margin-top: 3px; }
tr.ln.justchanged td { animation: justchanged 2.4s ease-out; }
@keyframes justchanged { from { background: #fff4d6; } to { background: transparent; } }
@media (prefers-reduced-motion: reduce) { tr.ln.justchanged td { animation: none; } }

/* 9/22/26 preview: items first, one Print menu */
.summaryline { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: baseline; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 8px 14px; margin: 0 0 12px; font-size: 13.5px; }
.summaryline a#editdetails { margin-left: auto; }
.detailsfold { margin: 0 0 16px; }
.detailsfold > summary { cursor: pointer; color: var(--brand); font-size: 13px; padding: 6px 2px; }
.detailsfold[open] > summary { margin-bottom: 8px; }
.printmenu { position: relative; display: inline-block; }
.printmenu > summary { list-style: none; cursor: pointer; }
.printmenu > summary::-webkit-details-marker { display: none; }
.printmenu .menu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 40; min-width: 210px; background: #fff;
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 6px 18px rgba(16,24,40,.12); padding: 4px 0; }
.printmenu .menu a { display: flex; justify-content: space-between; gap: 12px; padding: 7px 12px; color: var(--ink); text-decoration: none; font-size: 13.5px; }
.printmenu .menu a:hover { background: #eef3f9; }
.printmenu .menu .k { font: 600 11px ui-monospace, Menlo, monospace; color: var(--muted); border: 1px solid var(--line); border-radius: 3px; padding: 0 4px; }

/* Find — one box that finds anything (Josh 9/22/26) */
.side .findbtn { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin: -4px 0 10px; padding: 7px 10px; border-radius: 6px; color: #dbe4f0;
  border: 1px solid rgba(255,255,255,.18); font-size: 14px; }
.side .findbtn:hover { background: rgba(255,255,255,.08); text-decoration: none; }
.side .findbtn.on { background: rgba(255,255,255,.16); color: #fff; font-weight: 600; }
.side .findbtn kbd { font: 600 11px/1 ui-monospace, Menlo, Consolas, monospace; padding: 3px 5px;
  border-radius: 4px; background: rgba(255,255,255,.14); color: #fff; }
.findbox { position: fixed; inset: 0; z-index: 200; background: rgba(16,24,40,.35); display: flex; justify-content: center; align-items: flex-start; padding: 12vh 16px 0; }
.findbox[hidden] { display: none; }
.findpanel { width: min(640px, 100%); background: #fff; border-radius: 10px; box-shadow: 0 18px 50px rgba(16,24,40,.3); overflow: hidden; }
.findpanel input { width: 100%; border: 0; border-bottom: 1px solid var(--line); padding: 14px 16px; font-size: 17px; outline: none; }
.findlist { max-height: 52vh; overflow-y: auto; }
.findlist a { display: flex; gap: 12px; align-items: baseline; padding: 8px 16px; color: var(--ink); text-decoration: none; }
.findlist a.on, .findlist a:hover { background: #eef3f9; }
.findlist .fl { font-weight: 600; white-space: nowrap; }
.findlist .fs { color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.findkind { padding: 8px 16px 2px; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.findnone { padding: 14px 16px; color: var(--muted); }
.findhelp { padding: 7px 16px; font-size: 11.5px; color: var(--muted); border-top: 1px solid var(--line); background: #f7f9fc; }

/* where the order stands — Draft → Confirmed → Invoiced → Paid (Josh 9/22/26) */
.statusstrip { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 12px; margin: 0 0 12px; }
.statusstrip .steps { display: flex; list-style: none; margin: 0; padding: 0; gap: 0; }
.statusstrip .steps li { display: flex; align-items: center; gap: 6px; padding: 3px 12px 3px 6px; font-size: 13px; color: var(--muted); position: relative; }
.statusstrip .steps li + li::before { content: ""; width: 18px; height: 1px; background: var(--line); margin-right: 8px; }
.statusstrip .dot { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%;
  border: 1px solid var(--line); font: 600 11px/1 ui-monospace, Menlo, monospace; background: #fff; }
.statusstrip li.done { color: var(--ok); }
.statusstrip li.done .dot { background: #e8f3ec; border-color: #b7dcc3; color: var(--ok); }
.statusstrip li.now { color: var(--ink); font-weight: 700; }
.statusstrip li.now .dot { background: var(--brand); border-color: var(--brand); color: #fff; }
.statusstrip .stnow { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; flex: 1 1 360px; font-size: 13.5px; }
.statusstrip .reopen { display: inline-flex; gap: 6px; margin-left: auto; }
.statusstrip .reopen input { min-width: 190px; }
.statusstrip.void { background: var(--err-bg); border-color: #f2c4bd; }
.statusstrip.void .steps { opacity: .45; }

/* the main button stays in view (Josh 9/22/26) */
.actionbar { position: sticky; bottom: 34px; z-index: 30; display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center;
  justify-content: flex-end; margin: 12px 0 0; padding: 9px 14px; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: 0 -4px 16px rgba(16,24,40,.08); }
.actionbar .abwhat { color: var(--muted); font-size: 13px; margin-right: auto; }
.actionbar .abtotal { font-size: 14px; }
.actionbar .abtotal b { font-size: 18px; margin-left: 4px; }
.actionbar form { margin: 0; }
.actionbar kbd { font: 600 10.5px/1 ui-monospace, Menlo, monospace; padding: 2px 4px; border-radius: 3px; background: rgba(255,255,255,.2); color: #fff; margin-left: 6px; }

/* a message beside what you just did (Josh 9/22/26) */
.nearmsg { margin: 6px 0 10px; }
.nearmsg .flash { margin: 0 0 6px; }
tr.nearrow td { background: transparent !important; padding-top: 0; border-top: 0; }
/* filter chips (Josh 9/22/26) */
.chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 12px; }
.chip { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 4px 11px; font-size: 13px; cursor: pointer; color: var(--ink); }
.chip b { font-variant-numeric: tabular-nums; margin-left: 3px; }
.chip.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.chip.bad:not(.on) b { color: var(--err); }
.inv[hidden] { display: none; }
.actionbar.done { border-color: #b7dcc3; background: #f4faf6; }

/* one line of explanation, the rest behind ? (Josh 9/22/26) */
.clampwrap { display: flex; gap: 6px; align-items: flex-start; }
.clampwrap > .clamp { flex: 1 1 auto; min-width: 0; margin-top: 0; }
.clamp:not(.open) { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.morehelp { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--line); background: #fff;
  color: var(--brand); font: 700 12px/1 system-ui, sans-serif; cursor: pointer; padding: 0; margin-top: 1px; }
.morehelp:hover, .morehelp:focus-visible { border-color: var(--brand); }

/* audit 9/22/26: silent failures made loud — no backup, clock job stopped, test passwords */
.safetybar{background:#fdecea;border:1px solid #e0a39c;color:#7a1f16;border-radius:6px;padding:8px 12px;margin:0 0 10px;font-size:13px}
.safetybar a{color:#7a1f16;text-decoration:underline;margin-left:6px}
.inv.readprob{border-color:#e0a39c;background:#fdf3f1}
.inv.readprob ul{margin:4px 0 8px 18px;padding:0}
.inv.shrink{border:1px solid #e0a39c;background:#fdecea;padding:10px 12px;border-radius:6px}
.inv.gone label.tick{display:inline-flex;gap:6px;align-items:center}

/* F8 with nothing after it (Josh 9/22/26): "This is the most recent order." — said where it's seen */
.keytoast { position: fixed; left: 50%; bottom: 56px; transform: translateX(-50%); z-index: 60;
  background: var(--ink, #222); color: var(--bg, #fff); padding: 10px 18px; border-radius: 6px;
  font-weight: 600; box-shadow: 0 4px 16px rgba(0,0,0,.25); }
.keytoast[hidden] { display: none; }

/* ---------- the demo's layout, brought over (Josh 9/23/26: "match the layout of the demo as closely
   as you can overall … I like the shape of the buttons in the real one, but the demo was very solid
   for its layout and usability"). The buttons stay as they are here; what comes over is the SHAPE of
   a card — a quiet heading on a rule, then one row of fields across the screen, then a line of
   explanation underneath — in place of the tall stacked boxes. */
.card.thin { padding: 0; }
.card.thin > h2 { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted);
  font-weight: 600; margin: 0; padding: 9px 14px; border-bottom: 1px solid var(--line); }
.card.thin > h2 .muted { text-transform: none; letter-spacing: 0; }
.card.thin > div { padding: 12px 14px; }
.card.thin > div > form + .note, .card.thin > div > .note:last-child { margin-bottom: 0; }
.note { color: var(--muted); font-size: 12px; margin: 10px 0 0; }

/* The one-press ✕ that takes a line off, in place of tick-a-box-then-find-the-button */
.btn.tiny.rmline { margin: 0; padding: 1px 8px; font-size: 13px; line-height: 1.4; color: var(--muted); }
.btn.tiny.rmline:hover { color: var(--err); border-color: #e0b3ae; background: var(--err-bg); }

/* What just happened, under the Add box (Josh 9/23/26: "it gave feedback in green like
   'added 1 dz bagels'") */
.addmsg:empty { display: none; }
.addmsg { margin: -4px 0 10px; }
.addmsg .nearmsg { margin: 0; }
.addmsg .flash { margin: 0 0 6px; }
.addmsg .flash:last-child { margin-bottom: 0; }

/* Void and Abandon are in plain view and red-edged — a destructive action folded away is the one
   people hunt for in a hurry (Josh 9/23/26: "VOID should be more obvious. Maybe red or something.") */
.card.dangercard { border-color: #e0b3ae; border-left: 4px solid var(--err); }
.card.dangercard form.oneline { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 0; }
.card.dangercard .dangertitle { color: var(--err); }
.card.dangercard input[type=text] { min-width: 280px; flex: 1 1 280px; }

/* Off the screen but still on the keyboard: a control that nobody should have to find, which a
   person driving by Tab can still reach (Josh 9/23/26 on the Orders search button). */
.offscreen { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.offscreen:focus { position: static; width: auto; height: auto; clip: auto; clip-path: none; }

/* ---------- A LIST SCROLLS INSIDE ITS OWN BOX (Josh 9/23/26)
   "When scrolling through all of the invoices in AR, that box should be the size of the screen and
   the invoices should scroll within that box. You should be able to see the TOP and BOTTOM of the
   software screen at all times. It should be like this for any area of the software."

   So every list is framed to what is left of the screen below the header, and scrolls in there. The
   column headings stay put at the top of the frame — sticky works inside a scrolling box, it just
   sticks to the box instead of the page — and the page itself stops running away underneath you.

   A short list never notices: max-height and overflow:auto only do anything once the rows outgrow
   the frame. `.tablewrap.free` opts a list out, and printing undoes all of it, or a printed list
   would come out cut off at one screenful. */
.tablewrap { max-height: calc(100vh - var(--head, 0px) - var(--filters, 0px) - var(--footbar, 0px) - 96px);
  min-height: 0; overflow-y: auto; overflow-x: auto; overscroll-behavior: contain; }
.tablewrap table.list th { top: 0; }
.tablewrap.free { max-height: none; overflow: visible; }
.tablewrap.free table.list th { top: calc(var(--head, 0px) + var(--filters, 0px)); }
@media (max-width: 900px) { .tablewrap { max-height: none; } }
@media print { .tablewrap { max-height: none !important; overflow: visible !important; } }

/* Two equal panels side by side — what they said and what the system wrote down, the way the demo
   has them (Josh 9/23/26). grid2's auto-fit let the two drift to different widths on a wide screen. */
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 1000px) { .two { grid-template-columns: minmax(0, 1fr); } }