/* AGI portal. Colors and type follow the prototype (prototype/avian-lab.html). */
:root {
  --bg: #F3F5F2; --surface: #FFFFFF; --sunk: #E9EDE8; --ink: #16201C; --muted: #58665F; --line: #D5DCD6;
  --accent: #1B6A56; --accent-ink: #FFFFFF; --accent-soft: #DAECE4;
  --warn: #8F5A00; --warn-soft: #F9EDD3; --bad: #B0261E; --bad-soft: #F7DFDC;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
/* Hidden means hidden everywhere: a class that sets display (grid, flex) would otherwise show it anyway. The Build plates
   waiting list filter seemed to do nothing because of this (Arne, Oct 19, 2026). */
[hidden] { display: none !important; }
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0F1412; --surface: #171D1A; --sunk: #202824; --ink: #E3EAE6; --muted: #98A69F; --line: #2D3833;
    --accent: #5CC2A3; --accent-ink: #0A1410; --accent-soft: #1B3A30;
    --warn: #E4B254; --warn-soft: #382C14; --bad: #F18B83; --bad-soft: #3E1D1B;
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.5 var(--sans); }
a { color: var(--accent); }
h1 { font-size: 28px; line-height: 1.15; margin: 0 0 6px; text-wrap: balance; }
h2 { font-size: 18px; margin: 0 0 8px; }
.muted { color: var(--muted); }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.top { background: var(--surface); border-bottom: 1px solid var(--line); }
.top .in, main { max-width: 1040px; margin: 0 auto; padding-inline: 20px; }
.top .in { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; padding-block: 12px; }
.brand { font-weight: 700; font-size: 17px; }
.brand small { display: block; font-weight: 400; font-size: 12px; color: var(--muted); }
.env { font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 99px; background: var(--warn-soft); color: var(--warn); }
.env.live { background: var(--accent-soft); color: var(--accent); }
.who { margin-left: auto; display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; font-size: 14px; }
.who form { margin: 0; }
main { padding-block: 28px 48px; display: flex; flex-direction: column; gap: 20px; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 18px 20px; }
.btn { font: inherit; font-weight: 600; cursor: pointer; padding: 8px 16px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); text-decoration: none; display: inline-block; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.link { border: 0; background: none; color: var(--accent); padding: 0; font-weight: 500; }
.btn:focus-visible, a:focus-visible, input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 4px; }
input[type=email], input[type=password], input[type=text], input[type=number], input[type=date], input[type=search], input[type=tel], textarea { font: inherit; width: 100%; padding: 9px 11px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); }
input:not([type]) { font: inherit; padding: 6px 9px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); max-width: 100%; }   /* boxes written without type="text" get the same look (review, Oct 19) */
.field { margin-bottom: 14px; }
.signin { max-width: 400px; margin: 6vh auto 0; }
.msg { padding: 10px 12px; border-radius: 8px; font-size: 14px; }
.msg.bad { background: var(--bad-soft); color: var(--bad); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { font-size: 12.5px; padding: 2px 9px; border-radius: 99px; background: var(--accent-soft); color: var(--accent); font-family: var(--mono); }
.phases { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.phases li { display: flex; gap: 12px; align-items: baseline; }
.phases .n { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 13px; background: var(--sunk); color: var(--muted); align-self: center; }
.phases .done .n { background: var(--accent); color: var(--accent-ink); }
.phases .part .n { background: var(--warn-soft); color: var(--warn); }
.tbl { overflow-x: auto; position: relative; }
table { border-collapse: collapse; width: 100%; font-size: 14px; }
th, td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.filters { display: flex; flex-wrap: wrap; gap: 12px 14px; align-items: flex-end; }
.filters .field { flex: 1 1 150px; min-width: 0; }
select { font: inherit; width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); }
.check { display: flex; gap: 6px; align-items: center; font-weight: 500; margin: 0 0 8px; }
.small { font-size: 12.5px; }
.tag { font-size: 11.5px; padding: 1px 7px; border-radius: 99px; background: var(--sunk); color: var(--muted); font-weight: 600; }
.tag.warn { background: var(--warn-soft); color: var(--warn); }
tr.retired td { color: var(--muted); }
.pager { display: flex; gap: 8px; margin: 12px 0 0; }
.nav { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 14px; }
.nav a { text-decoration: none; font-weight: 600; }
details summary { cursor: pointer; color: var(--muted); }
details p, details ul { margin: 6px 0; max-width: 60ch; }
details ul { padding-left: 18px; }
td.num, th.num { text-align: right; }
.picks { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; margin: 0 0 10px; }
.picks b { flex: 0 0 70px; }
.tag.ok { background: var(--accent-soft); color: var(--accent-ink); }

/* customer screens */
.btn.add { background: #dbeafe; border-color: #93c5fd; color: #1e3a8a; }
.formgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 16px; }
.stackform { display: grid; gap: 16px; }
.stackform[hidden] { display: none; }   /* the New customer form stays closed until + New customer is pressed (Oct 17, 2026) */
.cols2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 0; }
.facts dt { color: var(--muted); font-size: 13px; }
.facts dd { margin: 0; }
@media (prefers-color-scheme: dark) { .btn.add { background: #1e3a5f; border-color: #3b6ea8; color: #dbeafe; } }

/* order entry */
.msg.ok { background: var(--accent-soft); color: var(--accent); }
.msg.warn { background: var(--warn-soft, #FBF1DC); color: var(--warn, #8A5A00); }
fieldset.orow { margin: 0; min-width: 0; }
fieldset.orow legend { font-weight: 700; padding: 0 6px; font-size: 14px; }
fieldset.orow.bad { border-color: var(--bad); }
.orow-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 0 12px; }
.pick { display: inline-flex; gap: 4px; align-items: center; font-weight: 500; font-size: 13px; margin: 0; white-space: nowrap; }
textarea { resize: vertical; }
.tag.ok { background: var(--accent-soft); color: var(--accent); }
.tag.bad { background: var(--bad-soft); color: var(--bad); }
.totals { grid-template-columns: max-content max-content; }
.totals dd { text-align: right; }
@media print {
  header.top, .noprint { display: none !important; }
  body, main { background: #fff !important; padding: 0 !important; margin: 0 !important; max-width: none !important; }
  .panel.invoice { border: 0; box-shadow: none; padding: 0; }
  a { color: inherit; text-decoration: none; }
}
.seg { display: flex; flex-wrap: wrap; gap: 4px; }
.segl { padding: 5px 10px; border-radius: 99px; border: 1px solid var(--line); text-decoration: none; color: var(--ink); font-size: 14px; background: var(--surface); }
.segl[aria-current="true"] { background: var(--accent); color: #fff; border-color: var(--accent); }
.segl[aria-current="true"] .muted { color: inherit; opacity: .85; }

/* Messages after an action (phase 4) */
.flash p { margin: 0 0 8px; padding: 10px 14px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.flash p.flash-error { background: var(--bad-soft); color: var(--bad); }
.flash p.flash-warning { background: var(--warn-soft); color: var(--warn); }
.flash p.flash-info { background: var(--sunk); color: var(--ink); font-weight: 400; }
/* Lab waiting lists */
.lab-pick { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.lab-pick input[type=text] { flex: 1 1 160px; min-width: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.print-only { display: none; }
/* 7500 plate map: one color per block of the plate, in plate order */
.platemap-wrap { overflow-x: auto; }
.platemap { border-collapse: separate; border-spacing: 3px; width: 100%; min-width: 640px; table-layout: fixed; }
.platemap th { font-size: 11px; color: var(--muted); font-weight: 600; text-align: center; padding: 0; }
.platemap thead th:first-child, .platemap tbody th { width: 18px; }
.platemap td { height: 44px; border-radius: 8px; border: 1px solid var(--line); text-align: center; vertical-align: middle; font-size: 12px; line-height: 1.15; padding: 2px; overflow: hidden; }
.platemap td small { display: block; font-size: 10px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.platemap td.empty { background: transparent; border-style: dashed; }
.platemap td.ctl { font-weight: 700; border-width: 2px; }
.gc0 { background: color-mix(in srgb, #2E86AB 22%, var(--surface)); }
.gc1 { background: color-mix(in srgb, #E07A5F 24%, var(--surface)); }
.gc2 { background: color-mix(in srgb, #3D9970 22%, var(--surface)); }
.gc3 { background: color-mix(in srgb, #B07CC6 24%, var(--surface)); }
.gc4 { background: color-mix(in srgb, #E0A82E 26%, var(--surface)); }
.gc5 { background: color-mix(in srgb, #5C6BC0 22%, var(--surface)); }
.gc6 { background: color-mix(in srgb, #C2185B 18%, var(--surface)); }
.gc7 { background: color-mix(in srgb, #00897B 22%, var(--surface)); }
.gc8, .gc16 { background: color-mix(in srgb, #2E86AB 12%, var(--surface)); }
.gc9, .gc17 { background: color-mix(in srgb, #E07A5F 12%, var(--surface)); }
.gc10, .gc18 { background: color-mix(in srgb, #3D9970 12%, var(--surface)); }
.gc11, .gc19 { background: color-mix(in srgb, #B07CC6 12%, var(--surface)); }
.gc12, .gc20 { background: color-mix(in srgb, #E0A82E 12%, var(--surface)); }
.gc13, .gc21 { background: color-mix(in srgb, #5C6BC0 12%, var(--surface)); }
.gc14, .gc22 { background: color-mix(in srgb, #C2185B 10%, var(--surface)); }
.gc15, .gc23 { background: color-mix(in srgb, #00897B 12%, var(--surface)); }
@media print {
  .print-only { display: inline; }
  .platemap td { height: 36px; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .panel.tbl { border: 0; box-shadow: none; }
}
.tcap{caption-side:top;text-align:left;font-weight:600;padding:10px 12px 4px}
.tag.call-female { background: #fce7f3; color: #9d174d; }
.tag.call-male { background: #dbeafe; color: #1e40af; }
.tag.call-negative { background: var(--accent-soft); color: var(--accent); }
.tag.call-positive { background: var(--bad-soft); color: var(--bad); }
.tag.call-inconclusive { background: var(--warn-soft); color: var(--warn); }
.bad-text { color: var(--bad); }
table.review tr.sub td { border-top: 0; padding-top: 0; }
table.review tr.held td:first-child { box-shadow: inset 3px 0 0 var(--bad); }
.rv-bar { position: sticky; bottom: 0; }
@media (max-width: 700px) {
  .rv-bar { position: static; }
  table.review, table.review tbody, table.review tr, table.review td { display: block; width: auto; }
  table.review thead { display: none; }
  table.review caption { display: block; }
  /* two columns of cells; the tick box and the well number sit in a 28px margin on the left, so cells never fall into it
     however many there are (review, Nov 5, 2026: the Released list's last cell was squeezed into that column) */
  table.review tr:not(.sub) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px 10px; padding: 10px 0 0 38px; position: relative; border-top: 1px solid var(--line, #ddd); }
  table.review tr:not(.sub) td { border: 0; padding: 0; }
  table.review select { width: 100%; }
  table.review tr.sub td { padding: 6px 0 10px 38px; }
  /* the well number sits under the tick box, in the narrow first column (Nov 4, 2026) */
  table.review tr:not(.sub) td.rvtick { position: absolute; left: 0; top: 10px; width: 28px; }
  table.review tr:not(.sub) td.rvwell { position: absolute; left: 0; top: 38px; width: 28px; text-align: left; padding: 0; }
  table.review tr:not(.sub) td.rvwell:first-child { top: 10px; }
}
.facts dd { overflow-wrap: anywhere; min-width: 0; }

/* pictures kept with a plate or gel (phase 4 step 9) */
.pics { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.pics li { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pics img, .pics .pic-file { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: var(--sunk); border: 1px solid var(--line); border-radius: 6px; display: block; }
.pics .pic-file { display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--muted); font-weight: 600; text-align: center; }
@media (max-width: 640px) {
  .gel-lanes thead { display: none; }
  .gel-lanes tr { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 12px; padding: 8px 0; border-bottom: 1px solid var(--line); }
  .gel-lanes td { border: 0; padding: 2px 4px; min-width: 0; }
  .gel-lanes input, .gel-lanes select { min-width: 0 !important; max-width: 100%; }
  .gel-lanes td[data-l]::before { content: attr(data-l) " "; color: var(--muted); font-size: 11px; display: block; }
}
@media print { .pics { display: none; } }

/* customer portal: order timeline (phase 5 step 2) */
.track { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.track li { border-top: 4px solid var(--line); padding-top: 8px; display: flex; flex-direction: column; gap: 2px; }
.track li.track-done { border-color: var(--accent); }
.track li.track-now { border-color: var(--warn); }
.track li.track-warn { border-color: var(--bad); }
.st-ready { color: var(--accent); font-weight: 600; }
.st-held, .st-rerun { color: var(--warn); font-weight: 600; }
.st-absent { color: var(--bad); }
@media (max-width: 640px) {
  .track { grid-template-columns: 1fr; }
  .birds thead { display: none; }
  .birds tr { display: block; padding: 8px 0; border-bottom: 1px solid var(--line); }
  .birds td { display: block; border: 0; padding: 2px 4px; }
  table.birds, .birds tbody { display: block; width: 100%; min-width: 0; }
  .birds td.num { text-align: left; }
}
.results-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.results-list li > span:first-child { display: inline-block; min-width: 180px; }

/* lab checklist (phase 4 step 10) */
.ck { list-style: none; margin: 0; padding: 0; }
.ck .tag { white-space: nowrap; }
.ck > li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 16px; padding: 10px 0; border-top: 1px solid var(--line); }
.ck > li:first-child { border-top: 0; }
.ck > li.ck-flag { box-shadow: inset 3px 0 0 var(--bad); padding-left: 10px; }
.ck .ck-do { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-end; justify-content: flex-end; }
.ck .ck-do input[name=reading] { width: 110px; }
.ck .ck-do input[name=note] { width: 220px; }
.ck details summary { cursor: pointer; }
.ck-counts { display: flex; gap: 10px; flex-wrap: wrap; margin: 6px 0 12px; }
.ck-counts span { padding: 6px 12px; border-radius: 8px; background: var(--surface); border: 1px solid var(--line); font-size: 14px; }
.ck-counts span.ck-alert { border-color: var(--bad); color: var(--bad); font-weight: 600; }
@media (max-width: 700px) {
  .ck > li { grid-template-columns: 1fr; }
  .ck .ck-do { justify-content: flex-start; }
  .ck .ck-do input[name=note] { width: 100%; }
}
/* Choose samples for a plate (lab, Oct 13, 2026) */
.pickf { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px 14px; }
.pickf label { font-size: 13px; font-weight: 600; display: flex; flex-direction: column; gap: 4px; margin: 0; }
.pickf select, .pickf input { width: 100%; }
table.pickt td, table.pickt th { padding-top: 4px; padding-bottom: 4px; }
table.pickt thead th { position: sticky; top: 0; background: var(--surface); z-index: 1; }
table.pickt td label { font-weight: 600; font-size: inherit; margin: 0; display: inline; cursor: pointer; }
table.pickt tr:has(input:checked) { background: var(--accent-soft); }
.pickbar { position: sticky; bottom: 0; z-index: 2; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; box-shadow: 0 -4px 12px rgba(0,0,0,.06); }
/* Plates in progress (lab, Oct 13, 2026) */
.draftwrap { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.draftwrap > .draftcol:first-child { flex: 999 1 620px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.draftwrap > .draftcol:last-child { flex: 1 1 320px; max-width: 420px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
table.draftt td, table.draftt th { padding-top: 4px; padding-bottom: 4px; vertical-align: middle; }
table.draftt tr.over td { background: var(--bad-soft); }
.moves { display: flex; gap: 6px; align-items: center; flex-wrap: nowrap; }
.moves form { display: flex; gap: 4px; margin: 0; }
.btn.sm { padding: 3px 8px; font-size: 13px; }
.gdot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; background: var(--muted); }
.dmap { display: grid; grid-template-columns: 16px repeat(12, minmax(0, 1fr)); gap: 3px; margin-top: 8px; font-size: 11px; }
.dmap .hd { text-align: center; color: var(--muted); font-weight: 600; }
.dmap .cell { aspect-ratio: 1; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; font-family: var(--mono); font-size: 10px; overflow: hidden; background: var(--surface); }
.dmap .cell.ctl { border-style: dashed; font-weight: 700; }
.g0 { background: #DCEBFA !important; } .g1 { background: #FDE2C4 !important; } .g2 { background: #D9F0DC !important; } .g3 { background: #EADCF7 !important; }
.g4 { background: #FAD9DF !important; } .g5 { background: #D4EFF0 !important; } .g6 { background: #F3EBC4 !important; } .g7 { background: #E2E2E2 !important; }
.gdot.g0, .gdot.g1, .gdot.g2, .gdot.g3, .gdot.g4, .gdot.g5, .gdot.g6, .gdot.g7 { border: 1px solid rgba(0,0,0,.25); }
@media (prefers-color-scheme: dark) { .dmap .cell[class*=" g"] { color: #16201C; } }
/* Fill down on the order forms (Oct 13, 2026) */
/* "↓ Fill" is a faint soft-green pill in the column heading, as in the portal (Arne, Oct 18, 2026) */
.fillbtn { font: inherit; font-size: 12px; font-weight: 700; padding: 1px 9px; margin-left: 4px; border: 1px solid transparent; border-radius: 99px; background: var(--accent-soft); color: var(--accent); opacity: .8; cursor: pointer; }
.fillbtn:hover { opacity: 1; border-color: var(--accent); }
.fillbar { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 50; background: var(--ink); color: var(--surface); padding: 8px 14px; border-radius: 10px; display: flex; gap: 10px; align-items: center; font-size: 14px; box-shadow: 0 6px 20px rgba(0,0,0,.2); max-width: calc(100vw - 32px); }
.fillbar[hidden] { display: none; }

/* ---------- lab daily work: Today, Open work, Resamples, Daily log, Sexing sheet (batch 1, Oct 13, 2026) ---------- */
.btn.danger { background: var(--bad); border-color: var(--bad); color: #fff; }
.btn.link.sm { padding: 2px 4px; }
.labtabs { row-gap: 6px; }
.printonly { display: none; }
@media print { .printonly { display: block; } .tbl { overflow: visible !important; } }
.latebar { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; border-color: var(--bad); padding: 12px 16px; }
.flow { display: flex; flex-wrap: wrap; align-items: stretch; gap: 6px; }
.flow > i { align-self: center; color: var(--muted); font-style: normal; }
.flow > a { flex: 1 1 120px; display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); text-decoration: none; }
.flow > a b { font-size: 22px; line-height: 1.1; }
.flow > a span { font-size: 13px; font-weight: 600; }
.flow > a small { font-size: 12px; color: var(--muted); }
.flow > a.warn { border-color: var(--warn); background: var(--warn-soft); }
.flow > a.accent { border-color: var(--accent); }
.cards3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.stat { display: flex; flex-direction: column; gap: 2px; text-decoration: none; color: var(--ink); padding: 12px 16px; }
.stat b { font-size: 22px; }
.testcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.testcard { display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: var(--ink); padding: 12px 14px; }
.testcard .nums { display: flex; gap: 12px; flex-wrap: wrap; font-size: 13px; }
.testcard .nums b { font-size: 17px; }
.filters label { display: flex; flex-direction: column; gap: 3px; font-size: 13px; color: var(--muted); }
.filters label.grow { flex: 1 1 200px; }
.filters select { font: inherit; padding: 7px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); max-width: 100%; }
.bulkbar { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; padding: 10px 14px; position: sticky; top: 0; z-index: 3; border-color: var(--accent); }
.bulkbar .grp { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.bulkbar select, .popform select { font: inherit; font-size: 13px; padding: 4px 6px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink); max-width: 100%; }
tr.grp td { background: var(--sunk); font-weight: 600; font-size: 13px; }
tr.amended td { background: var(--warn-soft); }
td.acts { white-space: nowrap; }
td.acts > * { display: inline-block; vertical-align: top; }
td.acts details { position: relative; }
td.acts summary { list-style: none; cursor: pointer; }
td.acts summary::-webkit-details-marker { display: none; }
.popform { position: absolute; right: 0; z-index: 4; width: min(340px, 80vw); white-space: normal; display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 6px 20px rgba(0,0,0,.15); }
.popform input { font-size: 13px; padding: 5px 8px; }
.tally { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 10px 14px; font-size: 13px; }
.daynav { display: flex; gap: 4px; align-items: center; }
.daynav input[type=date] { width: auto; }
.dlog td.dcell { white-space: nowrap; }
.dlog a.tag { text-decoration: none; }
.tag.unrel { outline: 1px dashed currentColor; }
.tag.call-noresult { background: var(--sunk); color: var(--ink); }
.tag.call-pend { background: transparent; }
.sxbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 10px 14px; position: sticky; top: 0; z-index: 3; }
.sxpage { margin-top: 10px; }
.sxhead { font-size: 15px; margin: 0 0 4px; }
.sxcols { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; }
.sxcol { border-collapse: collapse; background: var(--surface); border: 1px solid var(--line); font-size: 12.5px; flex: 1 1 280px; }
.sxcol th, .sxcol td { padding: 2px 6px; border-bottom: 1px solid var(--line); text-align: left; }
.sxcol tr.newgrp td { border-top: 2px solid var(--ink); }
.sxin { width: 3.4em !important; padding: 2px 4px !important; text-transform: uppercase; text-align: center; }
.sxin.bad { border-color: var(--bad) !important; background: var(--bad-soft) !important; }
@media print { .sxpage { break-after: page; } .sxcol { font-size: 10px; } .sxin { border: 0 !important; } }
.bulkbar[hidden] { display: none; }
.sheet table { font-size: 13px; }
.sheet td, .sheet th { padding: 5px 7px; }
.sheet .tag { white-space: nowrap; }
.btn[hidden] { display: none !important; }
.filters input[type=date] { width: auto; }
/* sexing sheet print: the workbook's grid and a colored plate map (Arne, Oct 13) */
.sxprint { break-after: page; }
.sxgrid { border-collapse: collapse; width: 100%; font-size: 9.5px; margin: 4px 0 10px; }
.sxgrid th, .sxgrid td { border: 1px solid #888; padding: 1px 4px; text-align: left; white-space: nowrap; }
.sxgrid th { background: #eee; }
.sxgrid td.gap, .sxgrid th.gap { border: 0; width: 6px; padding: 0; background: none; }
.sxgrid td.pos { color: #555; width: 22px; }
.sxgrid td.sex { width: 30px; font-weight: 700; text-align: center; }
.sxmap { max-width: 520px; margin: 6px 0; }
.sxmap .dmap .cell { font-size: 8.5px; }
@media print { .sxmap .dmap .cell { -webkit-print-color-adjust: exact; print-color-adjust: exact; } .gdot { print-color-adjust: exact; -webkit-print-color-adjust: exact; } }
.sxgrid td { height: 15px; }
/* ---------- build plates step by step (batch 2a, Oct 13, 2026) ---------- */
.stepper { display: flex; flex-wrap: wrap; gap: 4px; list-style: none; padding: 0; margin: 6px 0; }
.stepper li { font-size: 13px; }
.stepper li a, .stepper li span { display: inline-block; padding: 4px 10px; border-radius: 99px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); text-decoration: none; }
.stepper li span { color: var(--muted); }
.stepper li.on a { background: var(--accent); color: #fff; border-color: var(--accent); }
.howcards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.howcard { display: flex; flex-direction: column; gap: 6px; }
.howcard h2 { margin: 0; font-size: 18px; }
.howcard p { margin: 0; }
.howcard .btn { align-self: flex-start; margin-top: auto; }
label.radio { display: inline-flex; gap: 6px; align-items: center; font-weight: 400; margin: 0; }
fieldset.plain { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.chip { display: inline-flex; align-items: center; gap: 4px; padding: 1px 4px 1px 8px; border: 1px solid var(--line); border-radius: 99px; font-size: 12.5px; background: var(--sunk); margin: 2px 2px 2px 0; }
.chip .x { border: 0; background: none; cursor: pointer; font-size: 14px; line-height: 1; padding: 0 4px; color: var(--muted); }
.minis { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.mini { padding: 12px; display: flex; flex-direction: column; gap: 6px; }
.mini.on { border-color: var(--accent); }
.dmap.small { gap: 2px; font-size: 8px; } .dmap.small .cell { font-size: 7.5px; }
.sheet8 td { font-size: 11px; min-width: 70px; white-space: nowrap; }
.sheet8 .sheetdrag { display: block; cursor: grab; user-select: none; -webkit-user-select: none; -webkit-user-drag: element; }
.sheet8 .sheetdrag.dragging { opacity: .4; } .sheet8 td.dropto { outline: 2px solid var(--accent); outline-offset: -2px; } .sheet8 td.sheetdrop[title] { background: var(--sunk); }
.draftt td.grip { cursor: grab; color: var(--muted); user-select: none; width: 14px; }
.draftt tr.dragging { opacity: .4; }
.draftt tr.dropto td { border-top: 2px solid var(--accent); }
.pickt tr.cur td { background: var(--accent-soft); } .pickt:focus { outline: 2px solid var(--accent); outline-offset: 2px; }
.panel form select, .panel form input { max-width: 100%; }
.dropzone { border: 2px dashed var(--line); border-radius: 10px; padding: 18px; text-align: center; background: var(--sunk); }
.dropzone.over { border-color: var(--accent); background: var(--accent-soft); }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-left: 3px; vertical-align: middle; border: 1px solid rgba(0,0,0,.3); }
.dot.female { background: #C2185B; } .dot.male { background: #1565C0; } .dot.positive { background: #C0261E; } .dot.negative { background: #1E7B45; } .dot.inconclusive { background: #B26A00; } .dot.noresult { background: #777; }
.platemap td a { color: inherit; text-decoration: none; display: block; }

.legsw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; border: 1px solid rgba(0,0,0,.25); vertical-align: middle; margin: 0 3px 0 6px; }
.undobar { display: flex; gap: 10px; align-items: center; padding: 8px 14px; border-color: var(--accent); }
.dcol.d0 { color: #1f77b4; } .dcol.d1 { color: #c4451f; } .dcol.d2 { color: #2e8b4f; } .dcol.d3 { color: #8e44ad; } .dcol.d4 { color: #b8860b; } .dcol.d5 { color: #138496; } .dcol.d6 { color: #c2408a; } .dcol.d7 { color: #6b7a2a; }
@media (prefers-color-scheme: dark) { .dcol.d0 { color: #6fb3e6; } .dcol.d1 { color: #f08a6a; } .dcol.d2 { color: #6fd29a; } .dcol.d3 { color: #c49be0; } .dcol.d4 { color: #e3c25c; } .dcol.d5 { color: #5fd0e0; } .dcol.d6 { color: #ef8cc2; } .dcol.d7 { color: #b8c86a; } }
table.review select[name^="call-"] { min-width: 120px; }

/* Find bar on every staff page, and count badges on the menu (batch 4, Oct 14, 2026) */
.findbar { position: relative; display: flex; gap: 6px; align-items: center; flex: 1 1 320px; max-width: 520px; margin: 0; }
.findbar input[type=search] { flex: 1; min-width: 0; font-size: 14px; padding: 6px 10px; }
.fblist { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 30; list-style: none; margin: 0; padding: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.12); max-height: 70vh; overflow: auto; }
.fblist li { display: flex; align-items: center; gap: 6px; border-radius: 8px; }
.fblist li > a:first-child { flex: 1; display: grid; grid-template-columns: auto 1fr; column-gap: 8px; padding: 6px 8px; text-decoration: none; color: var(--ink); min-width: 0; }
.fblist li[aria-selected=true], .fblist li:hover { background: var(--sunk); }
.fblist .fbk { grid-row: span 2; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; padding-top: 2px; min-width: 64px; }
.fblist b { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fblist small { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fblist .fbx { font-size: 12px; padding: 4px 8px; white-space: nowrap; }
.fblist .fbmore a { display: block; padding: 6px 8px; font-size: 13px; }
.fbcam { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 31; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 8px; }
.fbcam video { width: 100%; max-height: 50vh; border-radius: 8px; background: #000; }
.navn { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 99px; background: var(--accent); color: var(--accent-ink); font-size: 11px; line-height: 18px; text-align: center; font-weight: 700; }
@media print { .findbar { display: none; } }

/* Placing an order (batch 5, Oct 14, 2026) */
.osteps { list-style: none; display: flex; gap: 6px; padding: 0; margin: 0 0 12px; flex-wrap: wrap; font-size: 14px; }
.osteps li { display: flex; align-items: center; gap: 6px; padding: 4px 12px 4px 4px; border-radius: 99px; border: 1px solid var(--line); color: var(--muted, #666); background: var(--surface); }
.osteps li span { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--line); color: var(--ink); font-weight: 700; font-size: 12px; }
.osteps li[aria-current="step"] { border-color: var(--accent); color: var(--ink); font-weight: 600; }
.osteps li[aria-current="step"] span { background: var(--accent); color: var(--accent-ink, #fff); }
.osteps li.done span { background: var(--accent-soft); color: var(--accent); }
.ostep { margin: 0 0 12px; }
.stephd { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 10px; }
.stephd h2 { margin: 0; font-size: 18px; }
.stepn { flex: 0 0 26px; height: 26px; border-radius: 50%; background: var(--accent); color: var(--accent-ink, #fff); display: grid; place-items: center; font-weight: 700; font-size: 14px; }
.orow-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 10px; }
.orow-tools[hidden], [data-js-only][hidden] { display: none !important; }
.pastebox { margin: 0 0 10px; }
.segl[aria-pressed="true"] { background: var(--accent); color: #fff; border-color: var(--accent); }
button.segl { font: inherit; font-size: 14px; cursor: pointer; }
/* Choose species on the order forms, laid out as the portal's: a grey tray, the chosen button white (Arne, Oct 17, 2026) */
.orow-tools .seg { background: var(--sunk); border-radius: 10px; padding: 3px; gap: 2px; }
.orow-tools .segl { border: 0; background: transparent; border-radius: 8px; color: var(--muted); font-weight: 500; padding: 6px 12px; }
.orow-tools .segl[aria-pressed="true"] { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.12); }
.spnote { margin: 0 0 10px; }
.selbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 10px; }
.orow legend { display: flex; align-items: center; gap: 8px; }
.orow.sel { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.rm { font: inherit; font-size: 12px; font-weight: 600; border: 1px solid var(--line); background: var(--surface); color: var(--bad); border-radius: 99px; padding: 1px 8px; cursor: pointer; }
.sflag { font-size: 13px; color: var(--warn, #8A5A00); background: var(--warn-soft, #FBF1DC); padding: 6px 10px; border-radius: 8px; margin-top: 8px; }
.sflag.okm { color: var(--accent); background: var(--accent-soft); }
.sflag[hidden] { display: none; }
.didyou { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.osplit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); gap: 12px; align-items: start; }
@media (max-width: 760px) { .osplit { grid-template-columns: 1fr; } }
.sumline { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; padding: 2px 0; }
.sumline.total { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 6px; font-weight: 700; }
.sumline.save { color: var(--accent); }
fieldset.plain { border: 0; padding: 0; margin: 0 0 8px; }
.undo { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; background: var(--ink); color: var(--surface); padding: 8px 12px; border-radius: 10px; margin: 0 0 12px; font-size: 14px; }
.orow.gone { display: none; }
.btn:disabled { opacity: .45; cursor: default; }
.stackform > * { min-width: 0; }

/* Order history and results (batch 5, part 2) */
.hsplit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 300px); gap: 12px; align-items: start; }
@media (max-width: 900px) { .hsplit { grid-template-columns: 1fr; } }
.ofilter { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.pbar { height: 6px; border-radius: 99px; background: var(--sunk, #eee); overflow: hidden; margin-top: 6px; max-width: 160px; }
.pbar span { display: block; height: 100%; background: var(--accent); }
.flag { color: var(--warn, #8A5A00); font-weight: 600; margin-top: 2px; }
.flag.bad { color: var(--bad); }
.nrbar { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; background: var(--bad-soft); color: var(--bad); padding: 10px 14px; border-radius: 10px; margin: 12px 0; }
.feed { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 8px; font-size: 14px; }
.feed li { padding-left: 10px; border-left: 3px solid var(--line); }
.feed li.unread { border-left-color: var(--accent); font-weight: 600; }
.feed li.k-noresult { border-left-color: var(--bad); }
.rtable td, .rtable th { white-space: nowrap; }
.sbar { display: flex; height: 14px; border-radius: 4px; overflow: hidden; margin: 6px 0; background: var(--sunk, #eee); }
.sbar span { display: block; height: 100%; }
.sbar .call-female { background: #c2185b; } .sbar .call-male { background: #1565c0; } .sbar .call-negative { background: #2e7d32; }
.sbar .call-positive { background: #c62828; } .sbar .call-inconclusive { background: #ef6c00; } .sbar .call-noresult { background: #757575; }
.certcard { border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; background: var(--surface); }
.certcard dl { display: grid; grid-template-columns: 140px 1fr; gap: 2px 10px; margin: 8px 0; font-size: 14px; }
.certcard dt { color: var(--muted); }
.ractions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 12px; }
.btn.sm { white-space: nowrap; }
.ofilter input[type=search] { width: auto; flex: 1 1 220px; } .ofilter select { width: auto; max-width: 100%; }

/* Customer home, owners and kits (batch 5, part 3) */
.steps3 { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; counter-reset: s; }
.steps3 li { border: 1px solid var(--line); border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; counter-increment: s; }
.steps3 li b::before { content: counter(s) ". "; color: var(--accent); }
.level { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
/* the level badge everywhere, as in the portal (Arne, Oct 17, 2026): light tint of the level color, a border and star in that color, dark text */
.tier { display: inline-flex; gap: 4px; align-items: center; font-weight: 600; color: var(--ink); background: color-mix(in srgb, var(--tc) 14%, transparent); border: 1px solid var(--tc); padding: 1px 10px; border-radius: 99px; font-size: 13px; white-space: nowrap; }
.tier i { color: var(--tc); font-style: normal; }
.loybar { flex: 1 1 140px; max-width: 220px; height: 8px; border-radius: 99px; background: var(--sunk, #eee); overflow: hidden; }
.loybar span { display: block; height: 100%; background: var(--tc); }
.kitbox { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.kitbox > div { border: 1px solid var(--line); border-radius: 10px; padding: 12px; }

/* batch 6: staff Customers list */
/* Customers list like the portal (Arne, Oct 17, 2026): name with a quiet level outline, number under it; contact person
   named; the new, sample, special pricing and not active tags in their own Notes column */
.clist td:nth-child(1) { min-width: 240px; }
.clist td:nth-child(4) { overflow-wrap: anywhere; width: 220px; }
.clist .cname { display: inline-flex; align-items: center; gap: 4px 8px; flex-wrap: wrap; }
.tier.soft { font-size: 11.5px; padding: 0 8px; line-height: 18px; }
.clist .cperson { font-weight: 600; }
.clist .cnotes { display: flex; gap: 4px; flex-wrap: wrap; max-width: 170px; }
.clist .bill { white-space: nowrap; }

/* batch 6: staff account page */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.tile { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); min-width: 0; }
.tile b { font-size: 18px; }
.tile.bad { border-color: var(--bad); }
.callpanel { border-left: 4px solid var(--accent); }
.ccounts { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; }
.ccounts > div { display: flex; flex-direction: column; padding: 8px 10px; border-radius: 8px; background: var(--sunk); }
.ccounts b { font-size: 20px; }
.ccounts span { font-size: 12.5px; color: var(--muted); }
.ccounts .bad { background: var(--bad-soft); } .ccounts .bad b { color: var(--bad); }
.ccounts .warn { background: var(--warn-soft); } .ccounts .warn b { color: var(--warn); }
.corder { padding: 8px 0; border-top: 1px solid var(--line); }
.okt { color: var(--accent); } .warnt { color: var(--warn); } .badt { color: var(--bad); }
.callform { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.callform textarea { width: 100%; }
.pbar.over > span { background: var(--bad); } .pbar.near > span { background: var(--warn); }
span.pbar { display: block; }
.callform select { width: auto; flex: 0 1 auto; }
/* Arne's note on i094: the certificate on screen, laid out like the paper copy */
.paper { background: #fff; color: #111; border: 1px solid var(--line); border-radius: 6px; padding: 18px 20px; margin-top: 10px; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.paper .muted, .paper .facts dt { color: #555; }
.paper-head { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px solid #bbb; padding-bottom: 6px; }
.paper-title { font-size: 1.25rem; margin: 10px 0 6px; }
.paper-tests { margin-top: 10px; }
.paper-tests th { color: #444; }
/* a DNA profile as tiles across the certificate (Nov 4, 2026): alleles on top, a band per allele, the marker below */
.paper-tests tr.ptiles-row td { padding-top: 0; }
.paper-tests tr:has(+ tr.ptiles-row) td { border-bottom: 0; }
/* the Cq bar on the on-screen certificate, as on the PDF (Nov 4, 2026) */
.cqbar { max-width: 340px; margin: 0 0 2px auto; }
.paper-tests tr.cqrow td { padding-top: 0; }
.paper-tests tr:has(+ tr.cqrow) td { border-bottom: 0; }
.cqlab { position: relative; display: flex; justify-content: space-between; white-space: nowrap; font-size: 10px; color: #555; line-height: 1.3; }
.cqlab .cqmid { position: absolute; left: var(--neg); transform: translateX(-50%); }
.cqtrack { position: relative; height: 8px; margin: 7px 0 2px; border-radius: 1px;
  background: linear-gradient(90deg, #1E8E4E 0%, #1E8E4E 30%, #8DB33A 40%, #F2A33A 60%, #E0662B 80%, #C0261E 100%); }
.cqcut { position: absolute; left: var(--neg); top: 0; bottom: 0; width: 1.5px; background: #fff; }
.cqmark { position: absolute; left: var(--at); top: -2px; bottom: -2px; width: 2px; margin-left: -1px; background: #111; }
.cqmark::before { content: ""; position: absolute; left: -4px; top: -6px; border: 5px solid transparent; border-top-color: #111; border-bottom: 0; }
.ptiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 8px 6px; }
.ptile { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.ptile b { font-family: var(--mono, monospace); font-size: 14px; letter-spacing: .04em; }
.ptile .pr-bar { width: 44px; gap: 2px; } .ptile .pr-bar i { border-radius: 1px; }
.ptile small { font-size: 10.5px; color: #555; }
.parentage td.off, .parentage th.off { color: #C0261E; font-weight: 700; }
.parentage th.ok { color: #1E7B45; font-weight: 700; }      /* Not excluded and Confirmed green, Excluded and Not confirmed red (Arne, Oct 27, 2026) */
.parentage tfoot th { border-top: 1px solid #bbb; }
/* the parentage report on the certificate (Arne, Oct 27, 2026): profiles side by side, results in the test table */
.pr-wrap { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.pr-table { width: auto; }
.pr-picture { flex: 1 1 220px; max-width: 300px; } .pr-picture svg { width: 100%; height: auto; }
.pr-table th, .pr-table td { padding: 3px 8px; vertical-align: middle; }
.pr-table thead th { text-align: center; } .pr-table tbody th { text-align: left; font-weight: 600; text-transform: none; letter-spacing: 0; color: inherit; }
.pr-label { display: block; font-weight: 400; font-size: 11px; color: #555; text-transform: none; letter-spacing: 0; }
.pr-table td { text-align: center; }
.pr-box { display: inline-flex; flex-direction: column; gap: 2px; min-width: 52px; border: 1px solid #ccc; padding: 2px 4px 3px; font-size: 12px; }
.pr-box b { font-family: var(--mono, monospace); }
.pr-box.bad { border: 2px solid #C0261E; } .pr-box.bad b { color: #C0261E; }
.pr-bar { display: flex; height: 5px; } .pr-bar i { flex: 1; }
.pr-line { margin: 0 0 4px; line-height: 1.25; }
.pr-line .ok { color: #1E7B45; } .pr-line .off { color: #C0261E; }
.paper-verify { display: flex; gap: 12px; align-items: center; margin-top: 12px; }
.paper-qr svg { width: 84px; height: 84px; display: block; }
.paper-foot { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; border-top: 1px solid #bbb; margin-top: 10px; padding-top: 4px; }
/* customer Tests page (batch 8) */
.tgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.tcard { display: flex; flex-direction: column; gap: 8px; background: var(--surface, #fff); border: 1px solid var(--line); border-radius: 12px; padding: 16px; color: inherit; text-decoration: none; }
.tcard:hover, .tcard:focus-visible { border-color: var(--accent); }
.tcard .tname { font-weight: 600; font-size: 1.05rem; }
.tcard .fam { font-style: italic; color: var(--muted); font-size: 13px; }
.tcard .meta { margin-top: auto; padding-top: 10px; border-top: 1px dashed var(--line); font-size: 13.5px; display: flex; flex-direction: column; gap: 4px; }
.tcard .price, .tprice { font-family: var(--mono, ui-monospace, monospace); font-weight: 500; }
.tsplit { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
.tsplit aside { position: sticky; top: 16px; }
@media (max-width: 800px) { .tsplit { grid-template-columns: 1fr; } .tsplit aside { position: static; } }
.offline-bar { position: sticky; top: 0; z-index: 50; background: var(--warn-soft); color: var(--warn); padding: 10px 16px; font-weight: 600; text-align: center; }

/* Header on one line: grouped menu buttons (Oct 17, 2026, Arne: "more manageable ... one line ... button format") */
.top .in { max-width: 1320px; flex-wrap: nowrap; gap: 10px 14px; padding-block: 8px; }
.top .brand { white-space: nowrap; font-size: 16px; }
.top .brand small { font-size: 11px; }
.menus { display: flex; gap: 4px; align-items: center; flex: 0 0 auto; }
.menu { position: relative; }
.menu > summary, .menu-link, .menus.cust a { list-style: none; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink); font-weight: 600; font-size: 14px; text-decoration: none; cursor: pointer; white-space: nowrap; user-select: none; }
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary::after { content: ""; width: 6px; height: 6px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: translateY(-2px) rotate(45deg); margin-left: 2px; }
.menu[open] > summary::after { transform: translateY(1px) rotate(-135deg); }
.menu > summary:hover, .menu-link:hover, .menus.cust a:hover, .menu[open] > summary { background: var(--sunk); }
.menu > summary:focus-visible, .menu-link:focus-visible, .menus.cust a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.menu.here > summary, .menu-link.here, .menus.cust a.here { border-color: var(--accent); color: var(--accent); }
.drop { position: absolute; top: calc(100% + 6px); left: 0; z-index: 40; min-width: 200px; padding: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 28px rgba(0,0,0,.14); display: flex; flex-direction: column; }
.drop.right { left: auto; right: 0; }
.drop a, .drop button.link { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 6px; text-decoration: none; color: var(--ink); font-weight: 500; font-size: 14px; white-space: nowrap; text-align: left; width: 100%; }
.drop a:hover, .drop a:focus-visible, .drop button.link:hover { background: var(--sunk); }
.drop a.here { color: var(--accent); font-weight: 600; }
.drop form { margin: 0; }
.top .findbar { flex: 1 1 200px; max-width: 420px; min-width: 150px; }
.menu.who { margin-left: auto; flex: 0 0 auto; }
.menu.who > summary { font-weight: 500; }
.menu.who .nm { max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menus.cust { flex: 1 1 auto; flex-wrap: wrap; }
@media (max-width: 1180px) {
  .top .in { flex-wrap: wrap; }
  .top .findbar { order: 9; flex-basis: 100%; max-width: none; }
}
@media (max-width: 760px) {
  .menus { flex: 1 1 100%; order: 5; flex-wrap: wrap; }
  .menu.who { order: 2; }
}
@media (max-width: 560px) {
  .menus { flex-wrap: wrap; }
  .menu > summary, .menu-link, .menus.cust a { padding: 5px 9px; font-size: 13px; }
  .drop { min-width: 180px; }
}

/* Staff new look (Oct 17, 2026, from the staff and lab mockups): staff pages use the width of the office screens,
   Enter an order stands out in orange, the home page shows the day's numbers, and Enter an order walks through steps. */
body.staff .top .in, body.staff main { max-width: 1920px; padding-inline: 32px; }
@media (max-width: 760px) { body.staff .top .in, body.staff main { padding-inline: 16px; } }
:root { --order: #B5540F; --order-ink: #FFFFFF; }
.btn.order { background: var(--order); border-color: var(--order); color: var(--order-ink); font-weight: 700; box-shadow: 0 2px 6px rgba(181, 84, 15, .3); }
.btn.order:hover { filter: brightness(1.07); }
.btn.big { padding: 12px 20px; font-size: 15px; border-radius: 10px; }
.hometop { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: flex-end; justify-content: space-between; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.tile { display: block; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; color: var(--ink); text-decoration: none; }
.tile:hover { border-color: var(--accent); }
.tile .k { font-size: 13px; color: var(--muted); }
.tile .v { font-size: 32px; font-weight: 700; line-height: 1.1; margin-top: 6px; font-variant-numeric: tabular-nums; }
.tile .s { font-size: 13px; color: var(--muted); margin-top: 4px; }
/* the account page's four boxes: label, figure and note stacked, not run together on one line (Arne, Oct 17, 2026) */
.tile.acct { display: flex; flex-direction: column; gap: 3px; padding: 12px 16px; }
.tile.acct > b { font-size: 20px; line-height: 1.2; overflow-wrap: anywhere; }
.tile.warn { background: var(--warn-soft); border-color: transparent; }
.tile.warn .k { color: var(--warn); font-weight: 600; }
.homecols { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.homecols > .main { flex: 999 1 560px; min-width: 0; }
.homecols > aside { flex: 1 1 300px; display: flex; flex-direction: column; gap: 16px; }
.kv { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; }
.recent { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 13px; color: var(--muted); }
.recent b { color: var(--ink); }

/* Enter an order, step by step */
/* Find the customer's account, as the portal's (Arne, Oct 17, 2026): a light green box with a green border, a search icon, big buttons */
.findpanel { display: flex; flex-direction: column; gap: 14px; }
.acctfind { background: color-mix(in srgb, var(--accent-soft) 70%, var(--surface)); border: 2px solid var(--accent); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.acctfind-l { margin: 0; font-weight: 700; font-size: 16px; color: var(--ink); }
.acctfind-l label { font: inherit; margin: 0; }
.acctfind-row { display: flex; gap: 8px; flex-wrap: wrap; margin: 0; }
.acctfind-in { position: relative; flex: 1 1 240px; min-width: 0; }
.acctfind-in svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: var(--accent); pointer-events: none; }
.acctfind-in input { width: 100%; font: inherit; font-size: 16px; padding: 11px 12px 11px 42px; border: 1.5px solid var(--accent); border-radius: 9px; background: var(--surface); color: var(--ink); }
.acctfind-in input:focus { outline: 3px solid color-mix(in srgb, var(--accent) 35%, transparent); outline-offset: 0; }
.acctfind-btn { font-size: 15px; padding: 10px 20px; font-weight: 600; }
.btn.primary.acctfind-btn { background: var(--accent); border-color: var(--accent); color: var(--accent-ink, #fff); }
.btn.primary.acctfind-btn:hover { filter: brightness(1.1); }
.acctfind-new { font-size: 15px; padding: 10px 16px; background: var(--surface); }
.acctfind-help { margin: 0; font-size: 12.5px; color: var(--muted); }
#pick-box:empty { display: none; }
.findpanel .orderfor { background: none; padding: 0; margin: 0; }
.orderfor { display: flex; flex-wrap: wrap; gap: 14px 32px; align-items: flex-start; background: var(--bg); border-radius: 10px; padding: 14px 16px; margin-top: 14px; }
.orderfor .who { flex: 1 1 320px; display: block; margin-left: 0; font-size: inherit; }
.orderfor .who .nm { font-size: 20px; font-weight: 700; }
.orderfor .opts { flex: 2 1 420px; display: flex; flex-wrap: wrap; gap: 10px 14px; }
.orderfor .opts .field { flex: 1 1 200px; margin: 0; }
.orderfor .opts .check { flex: 1 1 100%; }
.stepwrap { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-start; }
.stepwrap > .steps { flex: 999 1 640px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.stepwrap > .review { flex: 1 1 300px; position: sticky; top: 12px; border: 2px solid var(--ink); }
.stephead { display: flex; gap: 12px; align-items: flex-start; margin: 0 0 12px; }
.stephead .n { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--ink); color: var(--surface); display: grid; place-items: center; font-weight: 700; }
.stephead h2 { margin: 2px 0 2px; font-size: 19px; }
.stephead p { margin: 0; font-size: 14px; color: var(--muted); }
.counter { display: inline-flex; align-items: center; gap: 6px; }
.counter button { font: inherit; font-size: 20px; width: 44px; height: 44px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 8px; cursor: pointer; }
.counter input { font: inherit; font-size: 22px; font-weight: 700; width: 92px; height: 44px; text-align: center; border: 2px solid var(--accent); border-radius: 8px; background: var(--surface); color: var(--ink); }
.quickn { display: inline-flex; gap: 6px; }
.quickn button { font: inherit; font-size: 13px; padding: 6px 12px; border: 1px solid var(--line); background: var(--sunk); color: var(--ink); border-radius: 99px; cursor: pointer; }
.applyrow { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 12px; }
.pick.fits { outline: 1px dashed var(--accent); outline-offset: 2px; border-radius: 6px; padding-inline: 4px; }
.pick.fits::after { content: "✓"; color: var(--accent); font-weight: 700; }
.orow .rowsum { display: none; flex-wrap: wrap; gap: 4px 6px; align-items: center; margin-top: 4px; }
.orow.folded .rowsum { display: flex; }
.orow.folded .picks { display: none; }
.rowsum .t { font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 99px; background: var(--accent); color: var(--accent-ink); }
.rowsum .s { font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 99px; border: 1px solid var(--accent); color: var(--accent); }
.rowsum .none { font-size: 13px; color: var(--muted); }
.rowsum .chg { margin-left: auto; }
.ready { padding: 8px 12px; border-radius: 8px; font-size: 14px; font-weight: 600; background: var(--sunk); color: var(--muted); margin: 10px 0 0; }
.ready.ok { background: var(--accent-soft); color: var(--accent); }
/* the waiting hint ("Tick tests in step 2…") in the faint blue used on Receive samples (Arne, Oct 18, 2026) */
p.ready:not(.ok):not(.no) { background: #E8F1FB; color: #2C5A8A; border: 1px solid #C9DCF2; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) p.ready:not(.ok):not(.no) { background: #16263A; color: #A9C8EA; border-color: #2C4560; } }
.ready.no { background: var(--warn-soft); color: var(--warn); }
@media (max-width: 900px) { .stepwrap > .review { position: static; } }

/* Enter an order, closer to the prototype (Arne's screenshots, Oct 17, 2026): each step a card with a green edge,
   green step numbers, and tests and samples as pills that fill in when chosen. The checkbox stays for the keyboard
   and screen readers; only the box itself is hidden. */
.stepwrap .steps > .panel, .stepwrap > .review { border-radius: 14px; }
.stepwrap .steps > .panel { border-left: 5px solid var(--accent); }
.stephead .n { background: var(--accent); color: var(--accent-ink); width: 34px; height: 34px; }
.stephead h2 { font-size: 21px; }
#orderform .picks { gap: 5px; }
#orderform .picks > b { flex: 0 0 auto; min-width: 70px; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
/* step 2 as the portal: plain labels, slimmer chips, so tests and samples each fit on one line on a wide screen (Arne, Oct 17, 2026) */
#orderform [data-bulk] > b { text-transform: none; letter-spacing: 0; font-size: 14px; color: var(--ink); min-width: 130px; }
#orderform .pick { position: relative; padding: 3px 8px; border: 1px solid var(--line); border-radius: 99px; background: var(--surface); cursor: pointer; font-size: 12px; }
#orderform .pick:hover { border-color: var(--accent); }
#orderform .pick input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
#orderform .pick:has(input:checked) { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
#orderform .pick:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
#orderform .pick.fits { outline: 0; border-style: dashed; border-color: var(--accent); padding-inline: 8px; }
#orderform .pick.fits::after { margin-left: 4px; }
#orderform .pick.fits:has(input:checked)::after { color: var(--accent-ink); }
.rcpage .picks { gap: 8px; }
.rcpage .picks > b { flex: 0 0 auto; min-width: 70px; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.rcpage .pick { position: relative; padding: 6px 13px; border: 1px solid var(--line); border-radius: 99px; background: var(--surface); cursor: pointer; font-size: 13.5px; }
.rcpage .pick:hover { border-color: var(--accent); }
.rcpage .pick input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.rcpage .pick:has(input:checked) { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
.rcpage .pick:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.rcpage .pick.fits { outline: 0; border-style: dashed; border-color: var(--accent); padding-inline: 13px; }
.rcpage .pick.fits::after { margin-left: 4px; }
.rcpage .pick.fits:has(input:checked)::after { color: var(--accent-ink); }
#orderform fieldset.plain .check { font-size: 15px; padding: 4px 0; }
#orderform fieldset.plain input[type=radio], #orderform .check input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--accent); }

/* Receive samples and Check in one by one, in the same look as Enter an order (Oct 17, 2026) */
.rcpage { display: flex; flex-direction: column; gap: 18px; }
.rcpage > .panel, .rcpage > section.panel, .rcpage > form > .panel, .rcpage fieldset.orow { border-radius: 14px; border-left: 5px solid var(--accent); }
.rcpage > .findpanel { border: 2px solid var(--accent); border-left-width: 5px; }
.rcpage h2 { font-size: 20px; }
.rcpage .chips .chip { font-family: inherit; font-size: 12.5px; padding: 3px 10px; }
.rcpage .chip.s { background: var(--surface); border: 1px solid var(--accent); }
.rcpage .orow table td, .rcpage .orow table th { vertical-align: middle; }

/* The customer's New order, laid out as in the prototype (Arne's screenshots, Oct 17, 2026) */
.custorder { display: flex; flex-direction: column; gap: 16px; }
.osteps.wide { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; }
.osteps.wide li { border-radius: 10px; padding: 10px 14px; background: var(--sunk); border-color: transparent; }
.osteps.wide li[aria-current="step"] { background: var(--accent-soft); border-color: transparent; }
.osteps.wide li.done { color: var(--ink); }
.osteps.wide.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 560px) { .osteps.wide.four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .osteps.wide li { padding: 8px 10px; font-size: 13px; } }
.custorder .ostep.panel, .custorder .stepcard, .custorder .osplit > .panel { border-radius: 14px; border-left: 5px solid var(--accent); }
.custorder .stepn { flex-basis: 30px; height: 30px; }
.custorder .stephd h2 { font-size: 20px; }
.custorder .seg { background: var(--sunk); border-radius: 10px; padding: 3px; gap: 2px; }
.custorder .segl { border: 0; background: transparent; border-radius: 8px; }
.custorder .segl[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.12); }
.custorder .picks > b { text-transform: none; letter-spacing: 0; font-size: 14px; color: var(--ink); min-width: 140px; }
.custorder [data-bulk="samples"] { padding-bottom: 12px; border-bottom: 1px dashed var(--line); }
.custorder .applyrow .btn:disabled { opacity: .5; }
.pastebox[data-paste-box] { display: none; }
.pastebox[data-paste-box].open { display: block; }
.birdtable { padding: 0; overflow-x: auto; border-radius: 14px; }
.birdtable .bthead, .birdtable .btrow { display: grid; grid-template-columns: 30px 26px repeat(6, minmax(116px, 1fr)) 90px; gap: 10px; align-items: center; min-width: 1030px; }
.birdtable.withowner .bthead, .birdtable.withowner .btrow { grid-template-columns: 30px 26px repeat(7, minmax(116px, 1fr)) 90px; min-width: 1150px; }
.birdtable .bthead { padding: 10px 16px; background: var(--sunk); font-size: 13px; font-weight: 700; color: var(--ink); }
.birdtable .bthead .fillbtn { margin-left: 2px; }
.birdtable fieldset.orow { border: 0; border-top: 1px solid var(--line); padding: 10px 16px 12px; margin: 0; border-radius: 0; background: var(--surface); }
.birdtable fieldset.orow.bad { box-shadow: inset 4px 0 0 var(--bad); }
.birdtable .btrow input[type=text], .birdtable .btrow input[type=date] { width: 100%; box-sizing: border-box; }
.birdtable .btpicks { margin: 8px 0 0 66px; padding-left: 14px; border-left: 2px solid var(--line); min-width: 760px; }
.birdtable .btpicks .picks > b { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); min-width: 70px; }
.birdtable .rowmsg { margin: 0 0 8px; }
.pochip { font-family: var(--mono); font-size: 12px; background: var(--surface); border: 1px solid var(--line); color: var(--ink); }
main:has(.custorder) { max-width: 1440px; }
.custorder, .custorder form, .custorder section, .custorder .birdtable { min-width: 0; max-width: 100%; }
.custorder #orderform .picks { gap: 5px; }
.custorder #orderform .picks > b { text-transform: none; letter-spacing: 0; font-size: 14px; color: var(--ink); min-width: 140px; }
.custorder #orderform .btpicks .picks > b { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); min-width: 70px; }
.custorder #sel-remove:disabled { display: none; }
.custorder .selbar:has(#sel-remove:disabled) { display: none; }
.birdtable { position: relative; }
.custorder .btn.link { white-space: normal; text-align: left; }

/* The customer's Order history, laid out as in the prototype (Oct 17, 2026) */
.updfeed { border-radius: 14px; }
.updfeed summary { cursor: pointer; display: inline; }
.updfeed .updread { display: inline; margin-left: 12px; }
.updcards { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.updcards li { border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; background: var(--surface); }
.updcards li.unread { border-left: 5px solid var(--accent); background: var(--accent-soft); }
.updcards .t { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.histfilter { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.histfilter input[type=search] { flex: 0 1 380px; font: inherit; padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); }
.histfilter select { width: auto; }
.nrbar { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; padding: 12px 16px; border-radius: 10px; background: #ECE6F5; color: #3A2A5C; }
.ordercards { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ordercard { display: flex; gap: 10px; align-items: stretch; }
.ordercard .oc-main { position: relative; flex: 1 1 auto; min-width: 0; display: grid; grid-template-columns: minmax(110px, 160px) minmax(0, 1fr) minmax(180px, 240px); gap: 8px 24px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px; }
.ordercard .oc-main:hover { border-color: var(--accent); }
.ordercard a.stretch { color: var(--ink); text-decoration: none; }
.ordercard a.stretch::after { content: ""; position: absolute; inset: 0; border-radius: 12px; }
.ordercard a.stretch:focus-visible::after { outline: 2px solid var(--accent); outline-offset: 2px; }
.ordercard .oc-state { text-align: right; display: flex; flex-direction: column; gap: 3px; align-items: flex-end; }
.ordercard .chip.code { font-size: 11px; padding: 1px 6px; border-radius: 4px; }
.ordercard .pbar.wide { max-width: none; margin-top: 8px; }
.ordercard .oc-print { display: flex; align-items: center; border-radius: 12px; white-space: nowrap; }
@media (max-width: 760px) {
  .ordercard { flex-direction: column; }
  .ordercard .oc-main { grid-template-columns: 1fr; }
  .ordercard .oc-state { text-align: left; align-items: flex-start; }
}
.updcards { width: 100%; }
.ordercard .oc-print { font-weight: 600; }
.updfeed { position: relative; }
.updfeed ul.updcards { max-width: none; }
.updfeed .updread { position: absolute; right: 20px; top: 15px; margin: 0; }

/* Enter an order, calmer (Arne, Oct 17: "very busy and hard to follow"): smaller pills, the birds as one table with
   Fill in the heading row, and the remove-selected button only when something is selected. Both order forms. */
#orderform .pick { padding: 3px 8px; font-size: 12px; }
#orderform .picks { gap: 5px; }
#orderform .btpicks .picks > b { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); min-width: 70px; }
#sel-remove:disabled { display: none; }
.selbar:has(#sel-remove:disabled) { display: none !important; }
.stepwrap .birdtable { border-left: 1px solid var(--line); }
/* in the bird table, only a problem is shown; the ✓ hints stay in step 2 */
.birdtable .sflag.okm { display: none; }
#orderform .birdtable .pick.fits { border-style: solid; border-color: var(--line); }
#orderform .birdtable .pick.fits:has(input:checked) { border-color: var(--accent); }
#orderform .birdtable .pick.fits::after { content: none; }
.tipcard { position: absolute; z-index: 60; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: 10px; padding: 10px 14px; font-size: 13px; line-height: 1.45; box-shadow: 0 8px 24px rgba(0,0,0,.14); pointer-events: none; }
.tipcard .h { font-weight: 700; color: var(--accent); margin-bottom: 2px; }
.tipcard[hidden] { display: none; }

/* The slate gray of the order mockup, kept for later use (Arne, Oct 17, 2026: a nice color, but not for Review order); a shade darker than the mockup so white text
   on it stays easy to read */
:root { --review: #5E6C66; --review-ink: #FFFFFF; }
.btn.review { background: var(--review); border-color: var(--review); color: var(--review-ink); font-weight: 700; }
.btn.review:hover { filter: brightness(1.1); }

/* The bird you are working on stands out (Arne, Oct 17, 2026): a light green tint and a green edge on the row that has
   the cursor, and a fainter tint under the mouse. Both order forms. */
.birdtable fieldset.orow { transition: background-color .12s; }
.birdtable fieldset.orow:hover { background: color-mix(in srgb, var(--accent-soft) 35%, var(--surface)); }
.birdtable fieldset.orow:focus-within { background: color-mix(in srgb, var(--accent-soft) 70%, var(--surface)); box-shadow: inset 4px 0 0 var(--accent); }
.birdtable fieldset.orow.bad:focus-within { box-shadow: inset 4px 0 0 var(--bad); }

/* Find the customer's account: the whole row opens the account (Oct 17, 2026) */
#pick-results tr.pickrow { position: relative; cursor: pointer; }
#pick-results tr.pickrow:hover td { background: color-mix(in srgb, var(--accent) 7%, transparent); }
#pick-results a.pickname { color: inherit; text-decoration: none; }
#pick-results a.pickname::after { content: ""; position: absolute; inset: 0; }
#pick-results tr.pickrow:hover a.pickname, #pick-results a.pickname:focus-visible { text-decoration: underline; color: var(--accent); }

/* Check in samples, consolidated (Arne, Oct 17, 2026): header and buttons on one row, tube caps and the first number
   in one strip, every bird in one panel with one line per sample */
.rchead { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px 24px; flex-wrap: wrap; }
.rchead h1 { margin: 2px 0 4px; }
.rcbtns { margin: 0; display: flex; gap: 8px; flex-wrap: wrap; }
.rcform { display: flex; flex-direction: column; gap: 14px; }
.rcstrip { display: flex; flex-wrap: wrap; gap: 10px 32px; align-items: center; padding: 12px 18px; }
.rcpage fieldset.rcbird:focus-within { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.rcfirst { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; flex: 1 1 420px; }
.rcfirst label { margin: 0; font-weight: 700; }
.rcfirst input { width: 90px; margin: 0; }
.rcfirst .small { flex: 1 1 240px; }
.rcbirds { padding: 6px 18px 10px; }
.rchint { padding: 6px 0 8px; border-bottom: 1px solid var(--line); }
.rcpage fieldset.rcbird { border: 0; border-left: 0; border-radius: 0; margin: 0; padding: 10px 0; border-bottom: 1px solid var(--line); min-width: 0; }
.rcpage fieldset.rcbird:last-child { border-bottom: 0; }
.rcbird .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.rcbtop { display: flex; align-items: center; gap: 6px 12px; flex-wrap: wrap; margin-bottom: 6px; }
.rcbtop .chips { margin: 0; gap: 4px; }
.rcbopts { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.rcbopts .pick { padding: 4px 11px; font-size: 12.5px; }
.rcsamp { display: grid; grid-template-columns: minmax(150px, 220px) 150px 190px minmax(160px, 1fr); gap: 10px; align-items: center; padding: 3px 0 3px 18px; }
.rcsamp input, .rcsamp select { margin: 0; }
.rcarr { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 600; }
.rcarr input { width: 18px; height: 18px; }
.rcn { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 400; }
.rcn input { width: 64px; }
.rcgo { margin: 0; display: flex; align-items: center; gap: 10px; }
@media (max-width: 700px) {
  .rcsamp { grid-template-columns: 1fr 1fr; padding-left: 0; }
  .rcsamp .rcarr { grid-column: 1 / -1; }
  .rcsamp input[type=text] { grid-column: 1 / -1; }
  .rcbopts { margin-left: 0; }
}

/* Customer Results as in the portal (Arne, Oct 17, 2026): one order at a time in four formats, a search across orders */
.resp { display: flex; flex-direction: column; gap: 14px; }
.resp .narrowq { display: flex; flex-direction: column; gap: 6px; max-width: 760px; }
.resp .narrowq input { margin: 0; }
.resp .narrowsum { display: flex; gap: 8px 12px; align-items: center; flex-wrap: wrap; }
.resp .rorder { display: flex; gap: 14px 24px; flex-wrap: wrap; align-items: flex-end; }
.resp .rbtns { display: flex; gap: 8px; flex-wrap: wrap; flex-basis: 100%; }
.resp .rhead { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.resp .sharebox { display: flex; flex-direction: column; gap: 10px; border-left: 5px solid var(--accent); }
.resp .sharebox .x { font-size: 22px; text-decoration: none; color: var(--muted); }
.rp { display: inline-flex; align-items: center; gap: 5px; padding: 2px 10px; border-radius: 99px; font-size: 13px; font-weight: 600; background: var(--sunk, #EEF0EE); color: var(--ink); white-space: nowrap; }
.rp::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .7; }
.rp.call-female { background: #FBE7F0; color: #9D174D; } .rp.call-male { background: #E3EDFA; color: #1E4E8C; }
.rp.call-negative { background: #E3F2E6; color: #1E6B3A; } .rp.call-positive { background: #FBE4E2; color: #A3241B; }
.rp.call-inconclusive { background: #FDF0DC; color: #8A5300; } .rp.call-noresult { background: #ECE6F5; color: #3A2A5C; }
.rp.wait { background: #EEF0EE; color: #5A6660; font-weight: 500; } .rp.warn { background: #FDF0DC; color: #8A5300; }
.rpills { display: flex; flex-wrap: wrap; gap: 6px 12px; }
.rtable .labdet { margin-top: 3px; font-size: 12px; color: var(--muted); }
.rtable .labdet summary { cursor: pointer; }
.rtable .rnote { margin-top: 4px; padding: 6px 9px; border-radius: 8px; background: #ECE6F5; color: #3A2A5C; font-size: 12.5px; max-width: 46ch; }
.rtable .check.rt { display: flex; gap: 6px; align-items: center; margin: 0; font-weight: 400; white-space: nowrap; }
.rcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.rcard { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.rcard h2 { margin: 0; font-size: 18px; }
.rlegend { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.rlegend i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 5px; background: #888; }
.rlegend i.call-female { background: #c2185b; } .rlegend i.call-male { background: #1565c0; } .rlegend i.call-negative { background: #2e7d32; }
.rlegend i.call-positive { background: #c62828; } .rlegend i.call-inconclusive { background: #ef6c00; } .rlegend i.call-noresult { background: #757575; }
.certs { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; }
.certwrap { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.certwrap .paper { margin: 0; flex: 1; }
.certacts { margin: 0; display: flex; gap: 8px; justify-content: flex-end; }
.resp textarea#csv-out { width: 100%; white-space: pre; overflow: auto; }

/* Customer Collection kits as in the portal (Arne, Oct 17, 2026) */
.kitpage { display: flex; flex-direction: column; gap: 16px; }
.kitgrid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
@media (max-width: 900px) { .kitgrid { grid-template-columns: 1fr; } }
.kitform { display: flex; flex-direction: column; gap: 14px; }
.kittable td { vertical-align: middle; }
.kitship { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 22px; }
@media (max-width: 700px) { .kitship { grid-template-columns: 1fr; } }
.kitaddr { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.kitaddr legend { font-weight: 700; padding: 0; margin-bottom: 6px; }
.kitaddr .field, .kitopts .field { margin: 0; }
.kitrow { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.kitopts { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.kitopts select { width: 100%; }
.kitopts .pochip { cursor: pointer; font: inherit; font-size: 12.5px; }
.kitgo { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 12px; }
.kitaside { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.kitaside h2 { margin: 0; font-size: 18px; }

/* A softer green (Arne, Oct 17, 2026: "less intense and green, more subtle like the blue"). Buttons and selected choices
   take a light green fill with dark green text, like the light-blue New customer button; the remaining dark green is
   grayer. */
:root { --accent: #3A6B5E; --soft-fill: #DDEBE5; --soft-line: #A3C6B8; --soft-ink: #24493F; --soft-hover: #CFE2DA; }
@media (prefers-color-scheme: dark) { :root { --accent: #7CBFAA; --soft-fill: #1E3630; --soft-line: #3E6A5D; --soft-ink: #D3EDE4; --soft-hover: #26443C; } }
/* Less green overall (Arne, Oct 18, 2026: "the app is very green"): a neutral gray page, and main buttons and the picked
   tab in white with a darker outline. Ticked tests and samples keep their light green so ticked and unticked differ. */
:root { --bg: #F4F5F7; --sunk: #ECEEF1; --plain-line: #8A958F; }
@media (prefers-color-scheme: dark) { :root { --bg: #0F1412; --sunk: #202824; --plain-line: #5E6B66; } }
.btn.primary { background: var(--surface); border-color: var(--plain-line); color: var(--ink); }
.btn.primary:hover { background: var(--sunk); filter: none; }
.segl[aria-current="true"], .segl[aria-pressed="true"], .stepper li.on a { background: var(--surface); border-color: var(--plain-line); color: var(--ink); font-weight: 700; }
#orderform .pick:has(input:checked), .rcpage .pick:has(input:checked) { background: var(--soft-fill); border-color: var(--soft-line); color: var(--soft-ink); }
.rowsum .t { background: var(--soft-fill); color: var(--soft-ink); }
#orderform .pick.fits:has(input:checked)::after, .rcpage .pick.fits:has(input:checked)::after { color: var(--soft-ink); }

/* Customer Invoices & POs as in the portal (Arne, Oct 17, 2026) */
.billpage { display: flex; flex-direction: column; gap: 14px; }
.billpage section { display: flex; flex-direction: column; gap: 8px; }
.billpage section > h2 { margin: 4px 0 0; }
.billstmt { margin: 0; }
.billcards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.billcard { display: flex; flex-direction: column; gap: 4px; margin: 0; }
.billcard .lbl { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.billcard b { font-size: 24px; font-weight: 600; }
.billcard.bad { border: 1.5px solid var(--bad); }
.billcard.bad b { color: var(--bad); }
.billfind { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.billfind input[type=search] { flex: 1 1 260px; max-width: 420px; margin: 0; }
.billtable td { vertical-align: middle; }
.billact { text-align: right; white-space: nowrap; }
.billact form { display: inline; margin-left: 6px; }
/* Customer tabs a touch tighter so "Invoices & POs" fits on one row at office screen width */
@media (min-width: 1100px) { .menus.cust a { padding: 6px 10px; } }

/* Today's work, laid out as in the prototype (Oct 17, 2026) */
.eyebrow { font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.tw-head h1 { margin: 2px 0 4px; }
.lede { color: var(--muted); margin: 0 0 6px; max-width: 68ch; }
.tw-late { border: 2px solid var(--bad); background: var(--bad-soft); border-radius: 12px; padding: 10px 14px; justify-content: flex-start; gap: 6px 14px; }
.tw-late b { color: var(--bad); }
.tw-late span { font-size: 13px; flex: 1; }
.tw-flow { gap: 4px; }
.tw-flow > a { border-width: 1.5px; padding: 8px 12px; gap: 0; }
.tw-flow > a b { font-family: var(--mono); }
.tw-flow > a span { font-size: 12.5px; }
.tw-flow > a:hover { border-color: var(--accent); }
.tw-flow > a.warn b { color: var(--warn); }
.tw-flow > a.accent { background: var(--accent-soft); }
.tw-plates { display: flex; gap: 6px; flex-wrap: wrap; }
.tw-plates > a { flex: 1 1 110px; display: flex; flex-direction: column; border: 1.5px solid var(--line); background: var(--surface); border-radius: 10px; padding: 6px 10px; color: var(--ink); text-decoration: none; }
.tw-plates > a:hover { border-color: var(--accent); }
.tw-plates b { font-family: var(--mono); font-size: 19px; line-height: 1.15; }
.tw-plates span { font-size: 12px; font-weight: 600; }
.tw-plates > a.warn b { color: var(--warn); }
.tw-build { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; border-left: 4px solid var(--accent); }
.tw-build h2 { margin: 0; }
.tw-h2 { margin: 16px 0 0; }
.tw-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.tw-card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 12px; color: var(--ink); text-decoration: none; }
.tw-card:hover { border-color: var(--accent); }
.tw-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.tw-name { font-weight: 600; font-size: 17px; line-height: 1.2; }
.tw-counts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.tw-counts div { background: var(--sunk); border-radius: 8px; padding: 8px; }
.tw-counts b { display: block; font-family: var(--mono); font-size: 20px; font-weight: 500; }
.tw-counts span { display: block; font-size: 12px; line-height: 1.3; color: var(--muted); }
.tw-stack { display: flex; flex-direction: column; gap: 10px; }
.tw-warn { color: var(--warn); }
.tw-acts { display: inline-flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }

/* Build plates, laid out as in the prototype (Oct 17, 2026) */
.bw { display: flex; flex-direction: column; gap: 14px; }
.pill { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 99px; white-space: nowrap; }
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill.ok { background: var(--soft-fill, var(--accent-soft)); color: var(--soft-ink, var(--accent)); }
.pill.warn { background: var(--warn-soft); color: var(--warn); }
.bwsteps { display: flex; list-style: none; padding: 0; margin: 4px 0 0; }
.bwsteps li { flex: 1; position: relative; min-width: 0; }
.bwsteps li:not(:last-child)::after { content: ""; position: absolute; top: 15px; left: calc(50% + 20px); right: calc(-50% + 20px); height: 2px; background: var(--line); }
.bwsteps li.done:not(:last-child)::after { background: var(--accent); }
.bwsteps li > a, .bwsteps li > span { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0 4px; color: var(--muted); text-decoration: none; }
.bwsteps li > a:hover .n { border-color: var(--accent); }
.bwsteps .n { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--line); display: grid; place-items: center; font-weight: 700; font-size: 13px; background: var(--surface); position: relative; z-index: 1; }
.bwsteps li.done .n { background: var(--accent); border-color: var(--accent); color: #fff; }
.bwsteps li.cur .n { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.bwsteps li.cur.done .n { color: #fff; }
.bwsteps li.cur > span { color: var(--ink); font-weight: 700; }
.bwsteps .l { font-size: 12.5px; text-align: center; line-height: 1.2; }
@media (max-width: 640px) { .bwsteps li:not(.cur) .l { display: none; } }
.bwhead { display: flex; justify-content: space-between; align-items: center; gap: 12px; background: var(--accent-soft); border-radius: 10px; padding: 10px 14px; }
.bwhead-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bwhead b { font-size: 16px; }
.bwhead .btn { flex: none; }
.bwhow { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.bwhow > form { display: flex; }
.bwhow > form > button, .bwhow-own { flex: 1; text-align: left; border: 1.5px solid var(--line); border-radius: 12px; background: var(--surface); padding: 14px 16px; font: inherit; color: var(--ink); cursor: pointer; display: flex; flex-direction: column; gap: 6px; }
.bwhow-own { cursor: default; }
.bwhow > form > button:hover, .bwhow-own:hover { border-color: var(--accent); }
.bwhow > form > button[aria-pressed="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: var(--surface); }   /* all cards white; the chosen one has a green edge (Arne, Oct 18) */
.bwhow-t { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.bwhow-t b { font-size: 16px; }
.bwhow-k { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
.bwnav { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 12px; }
.bwnav-r { display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-left: auto; }
.bwnav-r form { display: inline; }
.bwbody { display: flex; flex-direction: column; gap: 12px; }
.bkind-h { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 0; }
.bkind { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.bkind button { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 2px 14px; text-align: left; border: 2px solid var(--accent); background: color-mix(in srgb, var(--accent-soft) 45%, var(--surface)); border-radius: 12px; padding: 14px 18px; cursor: pointer; font: inherit; color: var(--ink); }
.bkind button:hover { background: color-mix(in srgb, var(--accent-soft) 80%, var(--surface)); }
.bkind button svg { grid-row: span 2; width: 34px; height: 34px; color: var(--accent); }
.bkind button b { font-size: 18px; }
.bkind button small { grid-column: 2; color: var(--muted); font-size: 12.5px; }
.bkind button .bk-n { grid-row: span 2; grid-column: 3; text-align: right; font-family: var(--mono); font-size: 22px; font-weight: 700; line-height: 1; }
.bkind button .bk-n span { display: block; font-family: inherit; font-size: 11px; font-weight: 500; color: var(--muted); }
.bkind button[aria-selected="true"] { background: var(--accent); color: #fff; box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 38%, transparent); }
.bkind button[aria-selected="true"] svg, .bkind button[aria-selected="true"] small, .bkind button[aria-selected="true"] .bk-n span { color: #fff; opacity: .9; }
.bwtests { display: flex; flex-direction: column; gap: 12px; }
.bwseg { align-self: flex-start; display: inline-flex; gap: 2px; padding: 3px; border-radius: 10px; background: var(--sunk); flex-wrap: wrap; }
.bwseg .segl { border: 0; background: none; border-radius: 8px; padding: 5px 12px; font: inherit; font-size: 14px; color: var(--muted); cursor: pointer; }
.bwseg .segl[aria-current="true"], .bwseg .segl[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.08); border: 0; }
.bwtbl table { width: 100%; }
.bwtbl thead th { background: var(--sunk); }
.bwtbl td { vertical-align: middle; }
.bwctl { border: 2px solid var(--accent); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; }
.bwctl-h { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; padding-bottom: 10px; }
.bwctl-h form { display: inline-flex; }
.bwctl-r { display: grid; grid-template-columns: 160px 1fr; gap: 6px 16px; border-top: 1px solid var(--line); padding: 12px 0; align-items: start; }
.bwctl-c { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.bwctl-sex { display: flex; flex-direction: column; gap: 4px; }
.bwctl-sum { border-top: 1px solid var(--line); padding-top: 10px; }
@media (max-width: 640px) { .bwctl-r { grid-template-columns: 1fr; } }
.bwchips { display: inline-flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.bwchips form { display: inline; }
.ctlchip { display: inline-flex; align-items: center; gap: 2px; font-size: 12px; font-weight: 700; padding: 1px 4px 1px 9px; border-radius: 99px; border: 1px solid #D9A066; background: #FBE7D3; color: #3A2410; }
.ctlchip .x { border: 0; background: none; cursor: pointer; font-size: 14px; line-height: 1; padding: 0 4px; color: inherit; }
@media (prefers-color-scheme: dark) { .ctlchip { background: #3A2A1A; color: #F4DCC2; border-color: #7A5A3A; } }
.bwfixed { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.bwfixed form { display: inline-flex; gap: 6px; align-items: center; }
.bwfixed-add { border: 1px dashed #D9A066; border-radius: 10px; padding: 4px; }
.bwplates-n { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.bwminis { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.bwmini { border: 1px solid var(--line); border-radius: 10px; padding: 10px; display: flex; flex-direction: column; gap: 6px; background: var(--surface); }
.bwmini.on { border-color: var(--accent); }
.bwmini > b { font-size: 15px; }
.bwlegend { display: flex; flex-direction: column; gap: 2px; }
.bwlegend > span { display: flex; gap: 6px; align-items: center; overflow-wrap: anywhere; }
.bwlegend .gdot { flex: none; }
.bwmini-b { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: auto; }
.bwname { display: flex; flex-direction: column; gap: 2px; margin: 0; }
.bwname input { width: 100%; padding: 4px 8px; font-size: 13.5px; font-weight: 600; }
.bwmini-b form { display: inline; }
.bwopen { border: 1px solid var(--accent); border-radius: 10px; padding: 12px; }
.bwbuild { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.btn.primary.bwsure { background: var(--bad); border-color: var(--bad); color: #fff; }
.bwdone-h { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.bwnext { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; }

/* Lab Plates as in the portal (Arne, Oct 17, 2026): stage cards, the plate list, and the picked plate below it */
.plpage { display: flex; flex-direction: column; gap: 14px; }
.plhead { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px 24px; flex-wrap: wrap; }
.plbtns, .plpbtns { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.plmore summary { cursor: pointer; color: var(--muted); }
.pltrack { display: flex; flex-direction: column; gap: 10px; }
.plstages { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
.plstages a { display: flex; flex-direction: column; gap: 1px; padding: 7px 12px; border: 1.5px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); text-decoration: none; }
.plstages a b { font-family: var(--mono); font-size: 19px; line-height: 1.15; }
.plstages a span { font-size: 12px; font-weight: 600; }
.plstages a:hover { border-color: var(--soft-line, var(--accent)); }
.plstages a[aria-current="true"] { border-color: var(--soft-line, var(--accent)); background: var(--soft-fill, var(--accent-soft)); }
.plstages a.warn b { color: var(--warn); }
.plfind { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.plfind input[type=search] { flex: 1 1 260px; margin: 0; }
.plfind label { display: flex; gap: 6px; align-items: center; margin: 0; font-weight: 600; }
.plfind select { width: auto; margin: 0; }
.pltable td { vertical-align: top; }
.pltable tr[data-href] { cursor: pointer; }
.pltable tr[data-href]:hover td { background: color-mix(in srgb, var(--accent) 5%, transparent); }
.pltable tr.on td { background: var(--soft-fill, var(--accent-soft)); }
.pltable .plname { color: var(--ink); text-decoration: none; }
.pltable .plname:hover { text-decoration: underline; }
/* Test-code chip, as in the portal (Oct 19, 2026): gray fill, no outline, a bar in the test's color (lab/today.py test_color) */
.tcode { display: inline-block; font-family: var(--mono); font-size: 11.5px; font-weight: 400; padding: 1px 7px; margin: 0 4px 2px 0; border: 0; border-left: 3px solid var(--tc, #888); border-radius: 5px; background: var(--sunk); color: var(--ink); white-space: nowrap; }
.warnt { color: var(--warn); }
.rp.plrun { background: #E3EDFA; color: #1E4E8C; }
.plpanel { display: flex; flex-direction: column; gap: 12px; scroll-margin-top: 12px; }
.plphead { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px 20px; flex-wrap: wrap; }
.plcolor { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.plsheet-wrap { overflow-x: auto; }
.plsheet { border-collapse: collapse; width: 100%; min-width: 900px; table-layout: fixed; font-family: var(--mono); font-size: 11px; }
.plsheet th { font-family: var(--sans); font-size: 11px; color: var(--muted); font-weight: 600; padding: 3px; background: var(--sunk); border: 1px solid var(--line); }
.plsheet thead th:first-child, .plsheet tbody th { width: 26px; }
.plsheet td { border: 1px solid var(--line); padding: 4px 5px; height: 26px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plsheet { background: var(--surface); } /* the test colors (gc) show in the wells, as in the portal (Oct 18) */
.plsheet td.ctl { font-weight: 600; }
.plfile { display: flex; justify-content: space-between; align-items: center; gap: 10px 18px; flex-wrap: wrap; padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px; }
.plimport { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 0; }
.plimport label { margin: 0; font-weight: 400; }
.plimport input[type=file] { width: auto; margin: 0; }

/* Plates part 2: the plate typed like a spreadsheet, with the waiting list beside it (Arne, Oct 17, 2026) */
.pledit { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 14px; align-items: start; }
@media (max-width: 1100px) { .pledit { grid-template-columns: 1fr; } }
.pleditmain { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.plsheet.edit td { padding: 0; }
.plsheet.edit input { width: 100%; border: 0; border-radius: 0; background: transparent; font: inherit; padding: 4px 5px; margin: 0; height: 26px; min-width: 0; }
.plsheet.edit input:focus { outline: 2px solid var(--accent); outline-offset: -2px; background: var(--surface); }
.plsheet.edit td.chg { box-shadow: inset 0 0 0 2px var(--warn); }
.plsheet.edit td.drop { box-shadow: inset 0 0 0 2px var(--accent); background: var(--soft-fill, var(--accent-soft)); }
.plgridbtns { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.plwait { display: flex; flex-direction: column; gap: 8px; border: 1px solid var(--line); border-radius: 12px; padding: 12px; background: var(--surface); }
.plwaithead { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.plwaitlist { list-style: none; margin: 0; padding: 0; max-height: 440px; overflow: auto; border-top: 1px solid var(--line); }
.plwaitlist li { display: grid; grid-template-columns: 52px 40px 1fr; gap: 2px 8px; align-items: center; padding: 6px 4px; border-bottom: 1px solid var(--line); cursor: grab; }
.plwaitlist li .tcode { grid-column: 2 / -1; justify-self: start; }
.plwaitlist li:hover, .plwaitlist li:focus { background: var(--soft-fill, var(--accent-soft)); outline: none; }

/* Today's work closer to the portal on wide office screens (Arne, Oct 17, 2026): at most four test cards across, with
   bigger numbers, and the stage numbers a little larger */
.tw-cards { grid-template-columns: repeat(auto-fill, minmax(max(270px, calc(25% - 11px)), 1fr)); gap: 14px; }
.tw-card { padding: 18px 18px 16px; }
.tw-name { font-size: 18px; }
.tw-counts div { padding: 10px; }
.tw-counts b { font-size: 26px; line-height: 1.1; }
.tw-counts span { font-size: 12.5px; }
.tw-flow > a b, .tw-plates b { font-size: 24px; line-height: 1.15; }
.tw-flow > a span, .tw-plates span { font-size: 13px; }
.tw-plates > a { padding: 8px 12px; }

/* Shared by the lab pages rebuilt from the portal (Oct 17, 2026) */
.labpage { display: flex; flex-direction: column; gap: 14px; }
.labstack { display: flex; flex-direction: column; gap: 10px; }
.labstack > h2, .labhead h2 { margin: 0; }
.labhead { display: flex; justify-content: space-between; align-items: center; gap: 8px 14px; flex-wrap: wrap; }
.labbtns { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.labinline { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 0; }
.labinline label { margin: 0; font-weight: 400; }
.labinline input { margin: 0; }
.sidc, .sidc label { color: #A0522D; font-weight: 500; margin: 0; }
.geldone summary { cursor: pointer; }
.sxF { color: #C2185B; } .sxM { color: #1565C0; } .sxX { color: #6B4FA0; }
.sxpanel .seg { margin: 0; }
.labflow { display: flex; gap: 4px; align-items: stretch; }
.labflow > div { flex: 1; display: flex; flex-direction: column; border: 1.5px solid var(--line); border-radius: 10px; background: var(--surface); padding: 10px 12px; }
.labflow > div b { font-family: var(--mono); font-size: 22px; line-height: 1.1; }
.labflow > div span { font-weight: 700; font-size: 13.5px; }
.labflow > div small { color: var(--muted); font-size: 12.5px; }
.labflow > i { align-self: center; color: var(--muted); font-style: normal; }
@media (max-width: 700px) { .labflow { flex-direction: column; } .labflow > i { display: none; } }
.imphelp { background: var(--sunk); border-radius: 8px; padding: 10px 12px; line-height: 1.6; }
.impdrop { text-align: center; padding: 18px; border: 2px dashed var(--line); border-radius: 10px; background: transparent; }
.impdrop.over { border-color: var(--accent); background: var(--soft-fill, var(--accent-soft)); }
.labstack[hidden], .labinline[hidden] { display: none; }

/* Review & release as in the portal (Oct 17, 2026): a compact toolbar, the count and Release at the top, attention rows tinted */
.rvtools { display: flex; gap: 8px 10px; align-items: center; flex-wrap: wrap; margin: 4px 0; }
.rvtools .seg { margin: 0; }
.rvq { flex: 1 1 240px; max-width: 360px; margin: 0; }
.rvchips { display: flex; gap: 4px; flex-wrap: wrap; }
.rvcount { display: flex; justify-content: space-between; align-items: center; gap: 8px 14px; flex-wrap: wrap; }
table.review tr.need > td { background: color-mix(in srgb, var(--bad) 7%, var(--surface)); }
/* something to watch (a low method, a method not confirmed): the whole row stands out (Arne, Nov 2, 2026) */
table.review tr.watch > td { background: color-mix(in srgb, var(--warn) 20%, var(--surface)); }
table.review tr.watch:not(.sub) > td:first-child { box-shadow: inset 4px 0 0 var(--warn); }
table.review tr.sub > td { padding-top: 0; padding-bottom: 6px; }
table.review tr.sub details > summary { font-size: 12px; color: var(--muted); }
table.review td { vertical-align: middle; }
.rvmenu { position: relative; }
.rvmenu > summary { cursor: pointer; color: var(--accent); list-style: none; white-space: nowrap; }
.rvmenu > summary::after { content: " ▾"; }
.rvmenu[open] > .rvmenubox { position: absolute; right: 0; z-index: 20; min-width: 210px; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 8px 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.14); }
/* Open work & sheets: one line per test, as in the portal (Oct 17, 2026) */
td.owclip { white-space: nowrap; max-width: 170px; overflow: hidden; text-overflow: ellipsis; }
table.review tr.sub.quiet { display: none; }
/* Daily log controls in one row, as in the portal (Oct 17, 2026) */
.dltools { display: flex; gap: 8px 10px; align-items: center; flex-wrap: wrap; margin: 6px 0; }
.dltools .seg { margin: 0; }
.dltools .daynav { display: inline-flex; gap: 4px; align-items: center; }
.dltally { display: flex; gap: 6px 16px; flex-wrap: wrap; align-items: center; font-size: 13.5px; }
/* Lab checklist as in the portal (Oct 17, 2026) */
.ckcards { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.cktable td { vertical-align: middle; }
.cktable tr.ckbad > td { background: color-mix(in srgb, var(--bad) 8%, var(--surface)); }
.ckdo { text-align: right; white-space: nowrap; }
.ckform { display: inline-flex; gap: 6px; align-items: center; margin: 0; }
.ckread { width: 80px; margin: 0; }
.ckmore .rvmenubox { min-width: 260px; text-align: left; }
/* Species & primers as in the portal (Oct 17, 2026) */
.spfilters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 10px; }
.spfilters select, .spfilters input { width: auto; margin: 0; }
.spfilters .spq { flex: 1 1 260px; min-width: 200px; }
.sptable td { vertical-align: middle; }
.sptable th a.spsort { color: inherit; text-decoration: none; white-space: nowrap; display: inline-flex; align-items: center; gap: 3px; }
.sptable th a.spsort:hover, .sptable th a.spsort:focus-visible { text-decoration: underline; }
.sptable th a.spsort.now { font-weight: 700; }
.spsort-i { font-size: 11px; opacity: .45; }
.spsort.now .spsort-i { opacity: 1; }
/* Customer invoice with its pay box beside it, as in the portal (checklist d007, Oct 17, 2026) */
.invlayout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
.invpay { position: sticky; top: 12px; }
@media (max-width: 900px) { .invlayout { grid-template-columns: minmax(0, 1fr); } .invpay { position: static; order: -1; } }
@media print { .invlayout { display: block; } }
/* Customer bar under the menu on every customer page: level and office (checklist d014, Oct 17, 2026) */
.custbar { border-bottom: 1px solid var(--line); background: var(--surface, #fff); }
.custbar-in { max-width: 1040px; margin: 0 auto; padding: 8px 20px; display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; font-size: 13px; }
.custbar .loybar { flex: 1 1 160px; max-width: 260px; height: 8px; background: var(--line); }
/* the level as in the portal (Arne, Oct 17, 2026): a tinted badge with a colored star, a longer bar, and the count to the next level in full-size text */
.custbar-in { font-size: 14px; padding-block: 10px; gap: 8px 14px; }
.custbar .tier.soft { font-size: 12.5px; font-weight: 600; padding: 2px 10px; line-height: 20px; color: var(--ink); background: color-mix(in srgb, var(--tc) 14%, transparent); border: 1px solid var(--tc); white-space: nowrap; }
.custbar .tier i { color: var(--tc); font-style: normal; }
.custbar .loybar span { border-radius: 99px; min-width: 6px; }
.custbar .custoffice { flex-basis: 100%; color: var(--info, var(--muted)); }
body:has(.custorder) .custbar-in { max-width: 1440px; }
/* Open work: names, Edit results and the detail column (checklist d145 to d152, Oct 17, 2026) */
.owtools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.oweditbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; border-color: var(--warn); }
.oweditbar .grow { flex: 1 1 320px; display: flex; flex-direction: column; gap: 4px; }
.owedit { margin: 0; padding: 3px 6px; font-size: 13px; width: auto; }
.owdetail { min-width: 150px; }
.owedit.changed { outline: 2px solid var(--warn); }
td.owdet { max-width: 220px; }
.oweditbar .grow input { font: inherit; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface, #fff); width: 100%; }
/* The account-created welcome (checklist d041, Oct 17, 2026) */
.panel.welcome { border-color: var(--soft-line); background: color-mix(in srgb, var(--soft-fill) 45%, var(--surface, #fff)); }
.welcomebtns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.rowtools { margin: 10px 0 0; }
/* Bird table headings: every heading on one line with its Fill beside it, and a little lower (Arne, Oct 17, 2026) */
.birdtable .bthead { padding: 16px 16px 12px; }
.birdtable .bthead > span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.birdtable .bthead .fillbtn { margin-left: 0; }
.birdtable.withowner .bthead, .birdtable.withowner .btrow { grid-template-columns: 30px 26px minmax(150px, 1fr) minmax(190px, 1fr) minmax(180px, 1fr) minmax(150px, 1fr) minmax(160px, 1fr) minmax(170px, 1fr) 90px; min-width: 1260px; }
.birdtable .bthead, .birdtable .btrow { grid-template-columns: 30px 26px minmax(150px, 1fr) minmax(190px, 1fr) minmax(180px, 1fr) minmax(160px, 1fr) minmax(170px, 1fr) 90px; min-width: 1100px; }
.panel.birdtable { margin-top: 6px; }
/* The heading row lines up with the bird rows: its padding sits outside its columns, as the rows' does (Arne, Oct 17, 2026) */
.birdtable .bthead { box-sizing: content-box; }
/* the row's color runs the whole width when the table scrolls sideways, not only the part first on screen (Arne, Oct 17, 2026) */
.birdtable fieldset.orow { box-sizing: content-box; min-width: 1100px; }
.birdtable.withowner fieldset.orow { min-width: 1260px; }
/* Apply to all birds, as in the portal: green, one line, a gentle pulse when a choice is added (Arne, Oct 17, 2026) */
.btn.applyall { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 700; font-size: 15px; padding: 10px 18px; border-radius: 10px; white-space: nowrap; }
.btn.applyall:hover:not(:disabled) { filter: brightness(1.08); }
.btn.applyall:disabled { background: var(--soft-fill); border-color: var(--soft-line); color: var(--soft-ink); opacity: .8; cursor: default; }
.btn.applyall.ready { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 25%, transparent); animation: applypulse 1.6s ease-in-out 2; }
@keyframes applypulse { 50% { box-shadow: 0 0 0 9px color-mix(in srgb, var(--accent) 12%, transparent); } }
@media (prefers-reduced-motion: reduce) { .btn.applyall.ready { animation: none; } }
/* Staff / Lab / Settings switch and the tab row under the header, as in the portal (Arne, Oct 17, 2026) */
.wsswitch { display: inline-flex; gap: 2px; padding: 3px; background: var(--sunk); border: 1px solid var(--line); border-radius: 12px; flex: 0 0 auto; }
.wsswitch a { padding: 6px 12px; border-radius: 9px; text-decoration: none; color: var(--muted); font-weight: 600; font-size: 14px; white-space: nowrap; }
.wsswitch a:hover { color: var(--ink); }
.wsswitch a[aria-current="page"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
body.staff .findbar { flex: 1 1 320px; }
.wstabs { margin-bottom: 4px; }
/* a section's own tabs sit on the same line as the main tabs, after a divider (Arne, Oct 17, 2026: "one line rather than 2") */
.wsline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-bottom: 4px; }
.wsline:empty { display: none; }
.wsline > nav { margin: 0 !important; }
.wsline > .subtabs { padding-left: 14px; border-left: 2px solid var(--line); }
@media (max-width: 760px) { .wsswitch { order: 4; } }

/* Plates: by instrument, then month and year, then day (Arne, Oct 17, 2026) */
.pldhead { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin: 0 0 10px; }
.pldhead .seg { margin-left: auto; }
.pldrafts tr.plinst th { padding-top: 14px; font-size: 15px; text-transform: none; letter-spacing: 0; color: var(--ink); border-bottom: 2px solid var(--accent); }
tr.plmonth th { padding: 12px 8px 4px; font-size: 13px; font-weight: 700; text-transform: none; letter-spacing: 0; color: var(--accent); background: none; }
tr.plday td { padding: 4px 8px; font-size: 12.5px; font-weight: 600; color: var(--muted); background: var(--sunk); }
.plkinds { margin: 0 0 10px; }

/* Add account on one screen (Arne, Oct 17, 2026) */
.quickacct .qgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px 14px; align-items: start; }
.quickacct .qf label { display: block; font-size: 13px; font-weight: 600; margin: 0 0 3px; }
.quickacct .qf input:not([type=checkbox]), .quickacct .qf select, .quickacct .qf textarea { width: 100%; box-sizing: border-box; }
.quickacct .qf-street { grid-column: span 2; }
.quickacct .qf-notes { grid-column: 1 / -1; }
.quickacct .qcheck { align-self: center; }
.quickacct .qrowstart { grid-column-start: 1; }
.quickacct .qcheck label.check { display: flex; gap: 8px; align-items: flex-start; margin: 0; font-size: 13.5px; font-weight: 600; }
.quickacct .qcheck label.check input { width: auto; margin: 2px 0 0; flex: none; }
.quickacct .qcheck .small { margin-left: 24px; }
.quickacct .qmore { margin: 14px 0 0; border-top: 1px solid var(--line); padding-top: 10px; }
.quickacct .qmore > summary { font-size: 14px; color: var(--accent); font-weight: 600; cursor: pointer; margin-bottom: 10px; }
.quickacct .qinvite { margin: 14px 0 0; font-size: 14px; }
.quickacct .qf-email, .quickacct .qf-cell { grid-column: span 2; }
@media (max-width: 560px) { .quickacct .qf-street, .quickacct .qf-email, .quickacct .qf-cell { grid-column: auto; } }
.quickacct .qconsent { margin: 2px 0 0 24px; }
.quickacct .qconsent summary { cursor: pointer; color: var(--accent); }
/* "I'm on the phone with them" stands out (Arne, Oct 17, 2026): a solid blue button with the phone in a white circle; green with a pulsing dot during the call */
.btn.callbtn { display: inline-flex; align-items: center; gap: 10px; background: #1D4F80; border-color: #1D4F80; color: #fff; font-weight: 700; font-size: 15px; padding: 9px 18px 9px 9px; border-radius: 99px; box-shadow: 0 2px 6px rgba(29,79,128,.3); }
.btn.callbtn:hover { background: #163f66; border-color: #163f66; color: #fff; filter: none; }
.btn.callbtn .callic { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #fff; color: #1D4F80; font-size: 16px; line-height: 1; }
.btn.callbtn.oncall { background: var(--accent); border-color: var(--accent); box-shadow: 0 2px 6px rgba(0,0,0,.2); }
.btn.callbtn.oncall .callic { color: #2e9d5b; font-size: 13px; animation: callpulse 1.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .btn.callbtn.oncall .callic { animation: none; } }
.quickacct .qlabelrow { display: flex; align-items: baseline; justify-content: flex-start; gap: 14px; margin: 0 0 3px; }
.quickacct .qlabelrow > label { margin: 0; }
.quickacct .qlabelrow .qside { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 500; color: var(--muted); white-space: nowrap; cursor: pointer; }
.quickacct .qlabelrow .qside input { margin: 0; width: auto; }

/* "All in for today" (Oct 18, 2026): one line per kind of animal, marked once its last sample is received and entered */
.daydone { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--warn); border-radius: 10px; padding: 10px 14px; margin: 10px 0; }
.daydone.alldone { border-left-color: var(--accent); background: color-mix(in srgb, var(--accent-soft) 45%, var(--surface)); }
.dd-h { margin-bottom: 6px; }
.dd-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.dd-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 6px 0; border-top: 1px solid var(--line); }
.dd-row:first-child { border-top: 0; }
.dd-name { min-width: 130px; display: inline-flex; align-items: center; gap: 6px; }
.dd-dot { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--warn); display: inline-block; }
.dd-tick { width: 18px; height: 18px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-size: 12px; display: inline-grid; place-items: center; }
.dd-form { margin: 0 0 0 auto; }
@media (max-width: 600px) { .dd-form { margin-left: 0; width: 100%; } .dd-form .btn { width: 100%; white-space: normal; } }
/* the small version under the title on Receive samples, so it stays clear of the Next sample ID box (Arne, Oct 18, 2026) */
.daydone.compact { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; width: fit-content; max-width: 100%; margin: 8px 0 0; padding: 4px 10px; border-width: 1px 1px 1px 3px; border-radius: 8px; font-size: 13.5px; }
.daydone.compact .dd-h { margin: 0; }
.daydone.compact .dd-list { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.daydone.compact .dd-row { border-top: 0; padding: 0; gap: 4px 8px; flex-wrap: nowrap; }
.daydone.compact .dd-name { min-width: 0; }
.daydone.compact .dd-dot { width: 8px; height: 8px; }
.daydone.compact .dd-tick { width: 15px; height: 15px; font-size: 10px; }
.daydone.compact .dd-form { margin: 0; width: auto; }
.daydone.compact .dd-form .btn { padding: 2px 9px; font-size: 12.5px; min-height: 0; width: auto; white-space: nowrap; }
@media (max-width: 600px) { .daydone.compact .dd-row { flex-wrap: wrap; } }
.panel:has(#s3) { scroll-margin-top: 12px; }   /* Apply to all drops down to the birds (Oct 18, 2026) */
/* a second Save at the top of Review the order (Arne, Oct 18, 2026); it saves the same form as the one at the bottom */
.topsave { margin-left: auto; align-self: center; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
@media (max-width: 600px) { .topsave { margin-left: 0; width: 100%; align-items: stretch; } .topsave .small { text-align: center; } }
/* on a laptop the customer details and the top Save stay on one line, so the box does not grow (Arne, Oct 18, 2026) */
@media (min-width: 900px) { .panel.custsave { flex-wrap: nowrap !important; } .panel.custsave > div:not(.topsave) { min-width: 0; overflow-wrap: break-word; } .panel.custsave .topsave { flex: none; } }

/* Help pages and the suggestion box (Oct 18, 2026) */
.helpwrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 380px); gap: 16px; align-items: start; }
@media (max-width: 900px) { .helpwrap { grid-template-columns: 1fr; } }
.helptopics details { border-top: 1px solid var(--line); padding: 10px 0; }
.helptopics details:first-of-type { border-top: 0; }
.helptopics summary { cursor: pointer; font-weight: 700; font-size: 16px; }
.helptopics details[open] summary { color: var(--accent); }
.helptopics details > :not(summary) { margin: 8px 0 0; }
.helptopics li { margin: 3px 0; }
.helpnote { background: #E8F1FB; color: #2C5A8A; border: 1px solid #C9DCF2; border-radius: 8px; padding: 8px 12px; font-size: 14px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .helpnote { background: #16263A; color: #A9C8EA; border-color: #2C4560; } }
.suggestbox textarea { width: 100%; }
.sgkinds { border: 0; padding: 0; margin: 0 0 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.sgkinds legend { margin-bottom: 6px; }
.sglist { list-style: none; margin: 0; padding: 0; }
.sglist li { border-top: 1px solid var(--line); padding: 10px 0; }
.sglist li:first-child { border-top: 0; }
.sgtop { margin-bottom: 4px; }
.sganswer { margin-top: 6px; padding: 6px 10px; border-left: 3px solid var(--accent); background: var(--accent-soft); border-radius: 4px; font-size: 14px; }
.helplink { font-weight: 600; text-decoration: none; padding: 4px 10px; border-radius: 99px; border: 1px solid var(--line); color: var(--ink); background: var(--surface); font-size: 14px; }
.helplink:hover { border-color: var(--accent); color: var(--accent); }
.sgitem { margin-bottom: 10px; }
.sgform { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.sgform select { width: auto; }
.sgform input[type=text] { flex: 1 1 260px; }
/* Build plates: the test switch shows which is picked, and tests left off are grayed (Oct 18, 2026) */
.bwquick { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.bwtbl tr.bwoff td { color: var(--muted); }
.bwtbl tr.bwoff .tag { opacity: .55; }
/* the bird table's column headings on a faint green bar, as in the portal (Arne, Oct 18, 2026) */
.birdtable .bthead { background: color-mix(in srgb, var(--accent-soft) 75%, var(--surface)); border-bottom: 1px solid color-mix(in srgb, var(--accent) 18%, var(--line)); }

/* Long lists scroll inside their own box, so an order with 100 birds does not take over the page; the column headings
   stay in view. Printing shows everything (Arne, Oct 18, 2026) */
.bigscroll { max-height: min(560px, 65vh); overflow: auto; position: relative; }
.bigscroll thead th { position: sticky; top: 0; z-index: 1; background: var(--surface); box-shadow: 0 1px 0 var(--line); }
.birdtable { max-height: min(720px, 75vh); overflow: auto; position: relative; }
.birdtable .bthead { position: sticky; top: 0; z-index: 2; }
.rcbirds .rcbirdlist { max-height: min(720px, 75vh); overflow: auto; position: relative; }
@media print { .bigscroll, .birdtable, .rcbirds .rcbirdlist { max-height: none; overflow: visible; } }
/* both Save buttons on Review the order: full size, light blue like + New customer (Arne, Oct 18, 2026) */
.btn.add.savebtn { font-weight: 700; padding: 10px 20px; font-size: 15px; }
.btn.add.savebtn:hover { filter: brightness(.96); }
/* the search bar on list pages: a shaded green box with a green border, like Receive samples and Enter order (Arne, Oct 18, 2026) */
.panel.listfind { background: color-mix(in srgb, var(--accent-soft) 70%, var(--surface)); border: 2px solid var(--accent); border-radius: 12px; }
.listfind input[type=search] { border: 1.5px solid var(--accent); border-radius: 9px; padding: 10px 13px; font-size: 15.5px; background: var(--surface); }
.listfind input[type=search]:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 30%, transparent); outline-offset: 0; }
/* Set rows in light blue, like + New customer and the Save buttons (Arne, Oct 18, 2026) */
#setrows.btn { background: #dbeafe; border-color: #93c5fd; color: #1e3a8a; font-weight: 700; }
#setrows.btn:hover { filter: brightness(.96); }
@media (prefers-color-scheme: dark) { #setrows.btn { background: #1e3a5f; border-color: #3b6ea8; color: #dbeafe; } }
/* Paste / Load example / Clear all on one line, lined up (Arne, Oct 18, 2026); an opened Paste box takes the whole width */
.rowtools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rowtools > .pastebox { margin: 0; }
.rowtools > .pastebox[open] { flex-basis: 100%; }
.rowtools > .btn, .rowtools > .pastebox > summary { margin: 0; line-height: 1.4; }
/* Review order in light blue, like Set rows and the Save buttons: light blue moves the order on to its next step (Arne, Oct 18, 2026) */
.btn.add.gonext { font-weight: 700; }
.btn.add.gonext:hover { filter: brightness(.96); }

/* One color for the next step (Arne, Oct 18, 2026): every main button (primary, plus the light-blue add/Save/Review/Set rows)
   is a light blue that turns a little darker under the mouse. Find account stays dark green, Remove/cancel red, the
   phone button its own blue, everything secondary plain white. */
/* Oct 18, later: Arne asked for the blue a bit more intense so it stands out from the white and green. */
:root { --go: #CFE0FA; --go-line: #5B8BD6; --go-ink: #15306E; --go-hover: #B3CDF5; --go-hover-line: #3A6FC4; }
@media (prefers-color-scheme: dark) { :root { --go: #24406A; --go-line: #5A86C6; --go-ink: #E4EEFD; --go-hover: #2D4F82; --go-hover-line: #7AA2DC; } }
.btn.primary, .btn.add, #setrows.btn { background: var(--go); border-color: var(--go-line); color: var(--go-ink); filter: none; font-weight: 600; box-shadow: 0 1px 2px rgba(21,48,110,.18); }
.btn.primary:hover, .btn.add:hover, #setrows.btn:hover { background: var(--go-hover); border-color: var(--go-hover-line); filter: none; }
.btn.primary:focus-visible, .btn.add:focus-visible { outline: 2px solid var(--go-hover-line); outline-offset: 2px; }
.btn.primary[disabled], .btn.add[disabled] { background: var(--go); opacity: .55; cursor: not-allowed; }
.btn.add.savebtn:hover, .btn.add.gonext:hover { filter: none; }
.btn.primary.acctfind-btn:hover { background: var(--accent); border-color: var(--accent); filter: brightness(1.1); }
.btn.primary.bwsure:hover { background: var(--bad); border-color: var(--bad); }
/* Sample lookup: the results scroll in their own box with the column headings kept in view, so the search and filters stay on screen (Arne, Oct 18, 2026) */
.lkscroll { max-height: max(360px, calc(100vh - 260px)); overflow: auto; border: 1px solid var(--line); border-radius: 8px; scrollbar-gutter: stable; }
.lkscroll thead th { position: sticky; top: 0; z-index: 1; background: var(--sunk); }
.lkscroll:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Color back, as in the portal (Arne, Oct 18, 2026): the picked tab solid green with white text, the other tabs with a faint
   green edge, and the small number squares and table headings in the portal's gray-green. Main buttons stay light blue. */
:root { --sunk: #E9EDE8; }
@media (prefers-color-scheme: dark) { :root { --sunk: #202824; } }
.labtabs .segl { border: 1.5px solid color-mix(in srgb, var(--accent) 30%, var(--line)); font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.labtabs .segl:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent-soft) 70%, var(--surface)); }
.labtabs .segl[aria-current="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink, #fff); box-shadow: 0 2px 6px color-mix(in srgb, var(--accent) 35%, transparent); }
.labtabs .segl[aria-current="true"] .navn { background: color-mix(in srgb, #fff 25%, transparent); color: #fff; }
/* Tabs a little larger, with a darker green the moment one is clicked (Arne, Oct 18, 2026) */
.labtabs .segl { padding: 7px 14px; font-size: 15px; }
.labtabs .segl:active { background: color-mix(in srgb, var(--accent) 80%, #000); border-color: color-mix(in srgb, var(--accent) 80%, #000); color: #fff; }
.labtabs.subtabs .segl { padding: 6px 12px; font-size: 14px; }
/* Build plates · Controls, as in the portal (Arne, Oct 18, 2026): a darker outline round the questions, and the
   Controls by test table in its own rounded frame that scrolls with the headings kept in view. */
.bwctl { border-color: color-mix(in srgb, var(--accent) 55%, var(--ink)); }
.bwctl .bwtbl { border: 1px solid var(--line); border-radius: 10px; max-height: 360px; overflow: auto; scrollbar-gutter: stable; background: var(--surface); }
.bwctl .bwtbl thead th { position: sticky; top: 0; z-index: 1; background: var(--sunk); }
.bwctl .bwtbl td { padding-top: 12px; padding-bottom: 12px; }

/* Every lab page looks the same (Arne, Oct 18, 2026): every table heading row on the portal's gray-green bar, and every row
   of filter buttons (All tests / SEX open, Common / Latin, plate kinds, review filters…) drawn like the tabs: a faint green
   edge, solid green with white text for the one in use, darker green while pressed. The track-style switches (.bwseg)
   keep their own look. */
main table thead th { background: var(--sunk); color: var(--muted); }
main table thead th:first-child { border-top-left-radius: 6px; }
main table thead th:last-child { border-top-right-radius: 6px; }
:is(.seg:not(.bwseg), .chips) .segl { border: 1.5px solid color-mix(in srgb, var(--accent) 30%, var(--line)); font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.06); background: var(--surface); color: var(--ink); }
:is(.seg:not(.bwseg), .chips) .segl:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent-soft) 70%, var(--surface)); }
:is(.seg:not(.bwseg), .chips) .segl[aria-current="true"], :is(.seg:not(.bwseg), .chips) .segl[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink, #fff); box-shadow: 0 2px 6px color-mix(in srgb, var(--accent) 35%, transparent); }
:is(.seg:not(.bwseg), .chips) .segl[aria-current="true"] .muted, :is(.seg:not(.bwseg), .chips) .segl[aria-pressed="true"] .muted, :is(.seg:not(.bwseg), .chips) .segl[aria-current="true"] b { color: inherit; opacity: .9; }
:is(.seg:not(.bwseg), .chips) .segl:active { background: color-mix(in srgb, var(--accent) 80%, #000); border-color: color-mix(in srgb, var(--accent) 80%, #000); color: #fff; }
.chip-f { border: 1.5px solid color-mix(in srgb, var(--accent) 30%, var(--line)) !important; font-weight: 600; }
.chip-f:hover { border-color: var(--accent) !important; }
.chip-f.on { background: var(--accent) !important; border-color: var(--accent) !important; color: var(--accent-ink, #fff) !important; }

/* Build plates · Controls by test, as in the portal (Arne, Oct 18): a short tag on each control
   (POS, NTC, NEG, Female, Male) with the name after it, in a firmer brown outline; roomier rows;
   a test with no controls is grayed. The full control name stays on the chip's hover text. */
:is(.bwctl, .bwctlcell) .bwchips { gap: 8px; }
:is(.bwctl, .bwctlcell) .ctlchip { font-size: 13px; padding: 3px 4px 3px 11px; gap: 4px; border: 1.5px solid #A95C1B; background: #F5E6D6; color: #2E1B0A; }
:is(.bwctl, .bwctlcell) .ctlchip b { font-weight: 700; }
:is(.bwctl, .bwctlcell) .ctlchip .x { font-size: 16px; color: #6B4A2E; }
:is(.bwctl, .bwctlcell) .ctlchip .x:hover { color: var(--bad, #B3261E); }
:is(.bwctl, .bwctlcell) .ctladd { width: auto; min-width: 150px; padding: 5px 10px; font-size: 13.5px; border-radius: 8px; }
.bwctl .ctlwell { width: 76px; padding: 5px 8px; font-size: 13.5px; text-transform: uppercase; }
.bwctl .bwtbl td { padding-top: 14px; padding-bottom: 14px; vertical-align: middle; }
.bwctl .bwtbl tr.gcoff td:first-child { color: var(--muted); }
@media (prefers-color-scheme: dark) { :is(.bwctl, .bwctlcell) .ctlchip { background: #3A2A1B; color: #F4DCC2; border-color: #E39A5E; } :is(.bwctl, .bwctlcell) .ctlchip .x { color: #E3C7A8; } }
.bwctl .ctladd { max-width: 100%; }
.bwctl .bwfixed-add { flex-wrap: wrap; max-width: 100%; min-width: 0; }
/* Plates · the plate shown under the list, as in the portal (Arne, Oct 18): file box with Show file,
   instrument sample sheet, rack picture, and the "Built, not loaded yet" bar with its two buttons. */
.plfilebtns { display: inline-flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.plsheetlist { border: 1px solid var(--line); border-radius: 10px; padding: 8px 14px; }
.plsheetlist summary { cursor: pointer; }
.plsheetlist .tbl { max-height: 320px; overflow: auto; margin-top: 8px; }
.plrack { display: flex; gap: 6px 10px; align-items: center; flex-wrap: wrap; }
.plstate { display: flex; justify-content: space-between; align-items: center; gap: 10px 16px; flex-wrap: wrap; padding: 12px 16px; border: 1.5px solid #D9A066; background: #FBF1E4; border-radius: 10px; }
.plstate.run { border-color: var(--go-line); background: color-mix(in srgb, var(--go) 45%, var(--surface)); }
.plstatebtns { display: flex; gap: 8px; align-items: flex-start; flex-wrap: wrap; }
.plcancel summary { list-style: none; } .plcancel summary::-webkit-details-marker { display: none; }
.plcancel[open] { flex-basis: 100%; }
.plcancel form { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0 4px; }
.plcancel input { flex: 1 1 200px; width: auto; }
@media (prefers-color-scheme: dark) { .plstate { background: #2E2416; border-color: #7A5A3A; } }

/* Customer home · Recent orders: the same cards as Order history, under their own heading (Arne, Oct 18) */
.homeorders { display: flex; flex-direction: column; gap: 8px; }
.homeorders-h { display: flex; align-items: baseline; gap: 12px; }
.homeorders-h h2 { margin: 0; font-size: 1.05rem; }

/* Build plates · Check & build: the opened plate ends with its build buttons, as in the portal (L-F6, Oct 18) */
.bwopen-b { display: flex; gap: 8px 12px; flex-wrap: wrap; align-items: center; margin-top: 10px; }
.bwopen-build { display: inline-flex; gap: 8px; flex-wrap: wrap; margin-left: auto; }

.bwctlcell .ctladd { min-width: 0; }

/* Build plates · ELISA: how the plate is laid out, and the test order with arrows (L-F4, Oct 18) */
.elisalay { display: flex; gap: 14px; align-items: flex-start; border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; background: var(--surface); }
.elisalay-col { display: flex; flex-direction: column; gap: 3px; flex: none; }
.elisalay .ew { font: 600 11px/1.2 var(--mono, ui-monospace, monospace); padding: 3px 8px; border-radius: 4px; background: var(--sunk); white-space: nowrap; }
.elisalay .ew.p40 { background: #F7E2D6; } .elisalay .ew.t { background: #DCEBE7; } .elisalay .ew.mbp { background: #DCE6F5; }
.elisaord { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.elisaord .eo { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 6px; padding: 2px 4px 2px 8px; background: var(--surface); }
.elisaord button { border: 0; background: none; cursor: pointer; padding: 0 3px; color: var(--accent); font-size: 12px; }
.elisaord button:disabled { color: var(--line); cursor: default; }
@media (max-width: 640px) { .elisalay { flex-direction: column; } }
@media (prefers-color-scheme: dark) { .elisalay .ew.p40 { background: #3A2A1B; } .elisalay .ew.t { background: #1E3530; } .elisalay .ew.mbp { background: #1B2A3F; } }

/* Build your own, inside Build plates (L-F8, Oct 18): the plate's name line under the steps; the waiting list beside the plate */
.draftname { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }

/* On the phone (Arne, Oct 18, 2026): Samples & results next to Enter an order, and a bar on every staff page back to the account */
.btn.results { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 700; }
.btn.results:hover { filter: brightness(1.07); }
.callbar { position: sticky; top: 0; z-index: 20; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin: 0 0 12px;
           padding: 8px 12px; border-radius: 12px; background: #1D4F80; color: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .18); }
.callbar .callic { color: #FF6B6B; animation: callpulse 1.6s ease-in-out infinite; }
.callbar .btn { background: #fff; border-color: #fff; color: #1D4F80; font-weight: 700; }
.callbar .btn.link { background: none; border-color: transparent; color: #fff; text-decoration: underline; }
.callbar .mono { opacity: .8; }
@keyframes callpulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .callbar .callic { animation: none; } }

/* Build your own: the waiting list beside the plate in the prototype's compact form (kept on purpose, Arne Oct 18) */
.wqf { display: flex; gap: 8px; align-items: flex-start; }
.wqfl { flex: none; width: 44px; font-size: 12px; font-weight: 600; color: var(--muted); padding-top: 4px; }
.wqchips { display: flex; flex-wrap: wrap; gap: 5px; min-width: 0; }
.wqchip { font: inherit; font-size: 12px; padding: 2px 8px; border: 1px solid var(--line); border-left: 3px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink); cursor: pointer; }
.wqchip[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.wqbar { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.wq-list { max-height: 62vh; overflow: auto; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.wq-list:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.wqr { display: grid; grid-template-columns: 16px 132px minmax(56px, 112px) minmax(60px, 1fr) 36px 24px; gap: 7px; align-items: center;
       padding: 2px 8px; border-bottom: 1px solid var(--line); font-size: 12.5px; line-height: 1.2; min-height: 28px; cursor: grab; user-select: none; }
.wqr:last-child { border-bottom: 0; }
.wqr:hover { background: var(--sunk); }
.wqr.on { background: var(--accent-soft); }
.wqr.cur { box-shadow: inset 3px 0 0 var(--accent); }
.wqr input[type=checkbox] { margin: 0; }
.wqid { font-family: var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wqt { font-family: var(--mono); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-left: 3px solid var(--tc); background: color-mix(in srgb, var(--tc) 14%, transparent); padding: 1px 6px; border-radius: 4px; }
.wqs { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wqd { font-family: var(--mono); font-size: 11.5px; text-align: right; }
.wqa { border: 1px solid var(--line); background: var(--surface); color: var(--accent); border-radius: 6px; width: 24px; height: 22px; padding: 0; font-weight: 700; cursor: pointer; line-height: 1; }
.wqa:hover { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
@media (max-width: 520px) { .wqr { grid-template-columns: 16px minmax(0, 1fr) minmax(0, 90px) 34px 24px; } .wqs { display: none; } }

/* Build plates · Check & build, as in the portal (Oct 18): small plates as solid colored dots, legends with counts,
   and the opened plate's large wells with sample number, date received and test. */
.dmap .cell small { display: none; }
.dmap.dots { gap: 2px; }
.dmap.dots .cell { color: transparent; font-size: 0; border: 0; background: #E4E9E5; }
.dmap.dots .cell.ctl { background: var(--surface) !important; border: 1.5px solid var(--ink); border-radius: 3px; }
.dmap.dots .cell.g0 { background: #4A8FD6 !important; } .dmap.dots .cell.g1 { background: #E8913A !important; }
.dmap.dots .cell.g2 { background: #3E9B5F !important; } .dmap.dots .cell.g3 { background: #9467C9 !important; }
.dmap.dots .cell.g4 { background: #D9577A !important; } .dmap.dots .cell.g5 { background: #2FA3A6 !important; }
.dmap.dots .cell.g6 { background: #C9A93A !important; } .dmap.dots .cell.g7 { background: #8A8F8B !important; }
.gsq { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; flex: none; }
.gsq.g0 { background: #4A8FD6 !important; } .gsq.g1 { background: #E8913A !important; } .gsq.g2 { background: #3E9B5F !important; } .gsq.g3 { background: #9467C9 !important; }
.gsq.g4 { background: #D9577A !important; } .gsq.g5 { background: #2FA3A6 !important; } .gsq.g6 { background: #C9A93A !important; } .gsq.g7 { background: #8A8F8B !important; }
.bwlegend b { font-variant-numeric: tabular-nums; }
.bwopen-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.bwopen-name { margin: 0; font-size: 1.25rem; }
.bwbigmap { background: var(--sunk); border-radius: 12px; padding: 10px; overflow-x: auto; max-width: 760px; }
.dmap.big { gap: 6px; min-width: 520px; }
.dmap.big .cell { border-width: 2px; line-height: 1.05; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 11px; }
.dmap.big .cell b { font-size: 12px; }
.dmap.big .cell small { display: block; font-size: 8px; opacity: .8; }
.dmap.big .cell.g0 { border-color: #4A8FD6; } .dmap.big .cell.g1 { border-color: #E8913A; } .dmap.big .cell.g2 { border-color: #3E9B5F; } .dmap.big .cell.g3 { border-color: #9467C9; }
.dmap.big .cell.g4 { border-color: #D9577A; } .dmap.big .cell.g5 { border-color: #2FA3A6; } .dmap.big .cell.g6 { border-color: #C9A93A; } .dmap.big .cell.g7 { border-color: #8A8F8B; }
@media (prefers-color-scheme: dark) { .dmap.dots .cell { background: #2A332E; } }

/* Account form (Arne, Oct 18, 2026): the tick boxes sit together under the boxes you type in */
.formgrid.ticks { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.formgrid.ticks:not(:has(.field)) { display: none; }

/* Build your own as the portal's two columns: Your plate, and the waiting table (Arne, Oct 18, 2026) */
.ownwrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }

.owncol { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ownplate, .ownwait { display: flex; flex-direction: column; gap: 12px; padding: 18px; }
.ownhead { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ownhead h2 { margin: 0; font-size: 20px; }
.ownkind { font-size: 13px; padding: 4px 10px; border-radius: 8px; background: var(--sunk); border: 1px solid var(--line); }
.ownset { display: flex; flex-direction: column; gap: 8px; }
.ownname { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ownname label { font-weight: 700; margin: 0; }
.ownname input { width: auto; flex: 0 1 240px; min-width: 0; }
.owncheck { display: flex; gap: 8px; align-items: center; font-weight: 400; margin: 0; }
.ownscan, .ownctl { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.ownscan textarea { flex: 1 1 240px; width: auto; min-width: 0; resize: vertical; height: 42px; min-height: 42px; }
.ownscan input, .ownctl input { width: 70px; }
.ownscan .ownrun { flex: 0 1 170px; width: auto; min-width: 0; }      /* any sample on any panel (Nov 2, 2026) */
.ownctl select { flex: 0 1 auto; min-width: 0; max-width: 100%; }
.ownview { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.owndlist { border: 1px solid var(--line); border-radius: 10px; overflow-x: auto; }
.owndlist .draftt { margin: 0; }
.ownempty td { text-align: center; padding: 26px 12px !important; color: var(--muted); }
.ownempty b { color: var(--ink); }
.ownacts { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ownacts form { display: flex; gap: 8px; flex-wrap: wrap; margin: 0; }
.ownacts-r { margin-left: auto !important; }
.btn.danger-soft { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 40%, var(--line)); }
@media (max-width: 560px) { .ownacts-r { margin-left: 0 !important; } }
@media (max-width: 1000px) {
  .ownwrap { display: flex; flex-direction: column; min-width: 0; max-width: 100%; }
  .ownwrap .panel { min-width: 0; max-width: 100%; box-sizing: border-box; }
  .owncol { display: contents; }
  .ownplate { order: 1; } .ownwait { order: 2; } .ownwrap .owncol > .panel:not(.ownplate):not(.ownwait) { order: 3; }
}

/* The plate agent in two steps, as in the portal (Oct 18, 2026): Describe shows how it was read; Check & build shows the plates */
.agentask, .agentcheck { display: flex; flex-direction: column; gap: 14px; }
.agentex { font-size: 12.5px !important; padding: 3px 10px !important; font-weight: 400 !important; box-shadow: none !important; }
.agentread { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 10px; background: var(--sunk); }
.agentadj { margin: 0; }
.agentsays { margin: 0; padding: 10px 14px; border-radius: 8px; background: var(--accent-soft); color: var(--ink); }
.agentcheck .bwminis { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.agentcheck .bwmini-b { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 0; }
.agentadj fieldset .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.agentadj fieldset label.radio { flex-direction: row; align-items: center; gap: 5px; padding: 3px 10px; border: 1px solid var(--line); border-radius: 99px; background: var(--surface); font-size: 12.5px; font-weight: 500; margin: 0; }
.agentadj fieldset label.radio:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.agentadj fieldset label.radio input { margin: 0; }
/* How to build, as in the portal (Arne, Oct 18, 2026): every card white, a green "Recommended" pill, and "Choose how you want to build" by Next */
.bwhow .pill.ok { background: #DDEFE6; color: #1F6B4F; border: 1px solid #B9DCCB; }
.bwnav-r .small.muted { margin-right: 4px; }
@media (prefers-color-scheme: dark) { .bwhow .pill.ok { background: #1E3630; color: #BFE6D4; border-color: #3E6A5D; } }

/* Plates in progress, shorter (Arne, Oct 18, 2026): empty ones fold away, a Discard on each row, tighter rows */
.plempty { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; padding: 8px 12px; margin: 0 0 10px; border-radius: 8px; background: var(--sunk); }
.plempty form { margin: 0 0 0 auto; }
.pldrafts td, .pldrafts th { padding-top: 5px; padding-bottom: 5px; }
.pldrafts tr.plday td, .pldrafts tr.plmonth th { padding-top: 3px; padding-bottom: 3px; }
.pldrafts .pldel { width: 1%; white-space: nowrap; text-align: right; }
.pldrafts .pldel form { margin: 0; }
.pldrafts .pldel .btn.link { color: var(--bad); }

/* Plates page in the portal's look (Arne, Oct 18, 2026): the plate list first, track-style switches, a calm file card,
   one big Import button; Plates in progress and the other ways to build a plate at the bottom */
.plpanel { gap: 14px; }
.plphead h2 { font-size: 22px; }
.plfile { padding: 16px 20px; border-radius: 12px; background: var(--surface); }
.plfile-t { font-size: 17px; }
.plstate { border: 1px solid var(--line); background: var(--sunk); }
.plstate.run { border: 1px solid var(--line); background: var(--sunk); }
.plimport { gap: 8px 14px; }
.plimport-b { cursor: pointer; padding: 9px 16px; font-size: 15px; }
.plimport input:focus + .plimport-b, .plimport-b:focus { outline: 2px solid var(--accent); outline-offset: 2px; }
.plpage > .pldrafts { margin-top: 6px; }
/* Plate type cards on Tests & samples exactly as in the portal (Arne, Oct 18, 2026, with photos): light green cards with a green
   edge; hovering darkens them a little and they glow; the chosen one is solid dark green with white text */
.bkind button { border: 2px solid var(--accent); background: color-mix(in srgb, var(--accent-soft) 45%, var(--surface)); box-shadow: 0 1px 3px rgba(0,0,0,.08); transition: background .12s, box-shadow .12s; }
.bkind button:hover { background: color-mix(in srgb, var(--accent-soft) 80%, var(--surface)); box-shadow: 0 3px 10px color-mix(in srgb, var(--accent) 22%, transparent); }
.bkind button[aria-selected="true"], .bkind button[aria-selected="true"]:hover { background: #1B6A56; border-color: #1B6A56; color: #fff; box-shadow: 0 4px 14px rgba(27,106,86,.38); }   /* the portal's deeper green */
.bkind button[aria-selected="true"]:hover { background: #155845; }
/* the switch under it (All tests / Sexing only / Pathogen PCR only): gray track, the chosen one white, as in the portal */
.bwquick .bwseg { background: var(--sunk); padding: 3px; border-radius: 9px; }
.bwquick .bwseg .segl { font-size: 13.5px; font-weight: 500; padding: 6px 11px; border-radius: 7px; }
/* the test codes in the table: a small gray tab with the test's color on its left edge, as in the portal */

/* Review, Oct 19, 2026: the sexing sheet fits a phone (each column scrolls in its own box instead of the page going sideways) */
@media (max-width: 600px) { .sxcols { display: block; overflow-x: auto; } .sxcols .sxcol { width: max-content; min-width: 100%; margin-bottom: 10px; } }
/* Review, Oct 19, 2026: in dark mode the chosen tab and filter button use a deeper green so white text stays readable */
@media (prefers-color-scheme: dark) {
  .labtabs .segl[aria-current="true"], :is(.seg:not(.bwseg), .chips) .segl[aria-current="true"], :is(.seg:not(.bwseg), .chips) .segl[aria-pressed="true"], .chip-f.on { background: #2F6B5A !important; border-color: #2F6B5A !important; color: #fff !important; }
}

/* Lab buttons grouped into menus (Arne, Oct 19, 2026): a menu looks like the other Lab buttons, with a small arrow */
.labtabs { align-items: center; }
.labtabs .labmenu > summary.segl { font-weight: 600; padding: 7px 14px; font-size: 15px; border-radius: 99px; gap: 6px; }
.labtabs .labmenu > summary.segl[aria-current="true"] { background: var(--accent); color: #fff; border-color: var(--accent); }
.labtabs .labmenu > summary.segl[aria-current="true"]::after { border-color: #fff; }
.labtabs .labmenu .drop .navn { margin-left: auto; }

/* Sexing controls on a plate: Female pink, Male blue (Arne, Oct 19, 2026). Over the test color of the well. */
:is(td, .cell, .w).ctl.ctl-fem { background: #FCE7F3; color: #9D174D; }
:is(td, .cell, .w).ctl.ctl-mal { background: #DBEAFE; color: #1E40AF; }
:is(td, .cell, .w).ctl.ctl-fem input { color: #9D174D; font-weight: 600; }
:is(td, .cell, .w).ctl.ctl-mal input { color: #1E40AF; font-weight: 600; }
@media (prefers-color-scheme: dark) {
  :is(td, .cell, .w).ctl.ctl-fem { background: #4A1D33; color: #F9A8D4; }
  :is(td, .cell, .w).ctl.ctl-mal { background: #1B2A4A; color: #93C5FD; }
  :is(td, .cell, .w).ctl.ctl-fem input { color: #F9A8D4; }
  :is(td, .cell, .w).ctl.ctl-mal input { color: #93C5FD; }
}

/* Files tab (Arne, Oct 19, 2026): the hybrid mockup. Instrument switch, month calendar and day shelves; one plate's files below. */
.flpage .plhead { align-items: flex-end; }
.flfind { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; flex: 0 1 560px; }
.flsearch { position: relative; display: flex; flex-direction: column; gap: 6px; flex: 1 1 300px; margin: 0; }
.flsearch label { font-size: 13px; font-weight: 500; color: var(--muted); margin: 0; }
.flsearch span { display: flex; gap: 8px; }
.flsearch input { flex: 1; margin: 0; }
.btn.flheld { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 40%, transparent); color: var(--warn); }
.flrow-h { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 12px; margin-bottom: 8px; }
.flrow-h h2, .flrow-h h3 { margin: 0; font-size: 18px; }
.flhits, .flunfiled { margin-bottom: 14px; }
.flhit { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; padding: 8px 0; border-top: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.flun { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; padding: 10px 0; border-top: 1px solid var(--line); }
.flinline { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0; }
.flinline select, .flinline input[type=text] { width: auto; min-width: min(200px, 100%); max-width: 100%; margin: 0; }
.flaside > summary { list-style: none; cursor: pointer; }
.flaside > summary::-webkit-details-marker { display: none; }
.flaside[open] > summary { margin-bottom: 6px; }
.flseg { display: flex; flex-wrap: wrap; gap: 4px; background: var(--sunk); border-radius: 10px; padding: 4px; margin-bottom: 14px; width: fit-content; max-width: 100%; }
.flseg a { display: flex; flex-direction: column; gap: 2px; padding: 9px 18px; border-radius: 8px; font-weight: 500; color: var(--ink); text-decoration: none; }
.flseg a small { font-size: 12px; font-weight: 400; color: var(--muted); }
.flseg a.on { background: var(--surface); box-shadow: 0 1px 2px rgba(22,32,28,.12); }
.flflow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); padding: 12px 16px; margin-bottom: 14px; }
.flflow-t { font-weight: 600; color: var(--ink); }
.flflow b { font-weight: 500; font-size: 12.5px; background: var(--sunk); color: var(--ink); padding: 3px 8px; border-radius: 6px; }
.flwrap { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-start; }
.flcal { flex: 1 1 380px; max-width: 460px; display: flex; flex-direction: column; gap: 12px; }
.flcal-h { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.flcal-h h2 { margin: 0; font-size: 17px; }
.flgrid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.flgrid .dow { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); text-align: center; padding: 4px 0; }
.fld { display: flex; flex-direction: column; gap: 2px; min-height: 54px; padding: 6px 5px; min-width: 0; overflow: hidden; border-radius: 8px; background: var(--bg); color: var(--ink); font-size: 13px; font-weight: 500; text-decoration: none; }
.fld small { font-size: 12px; font-weight: 400; line-height: 1.25; white-space: nowrap; }
.fld small b { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 99px; background: color-mix(in srgb, currentColor 14%, transparent); text-align: center; font-weight: 600; }
.fld.out { background: transparent; color: color-mix(in srgb, var(--muted) 60%, transparent); }
.fld.today { box-shadow: inset 0 0 0 1px var(--line); }
.fld.has { background: var(--accent-soft); }
.fld.has.miss { background: var(--warn-soft); }
.fld.on, .fld.has.on { background: var(--accent); color: var(--accent-ink); }
.fld:is(a):hover { box-shadow: inset 0 0 0 2px var(--accent); }
.fllegend { display: flex; flex-wrap: wrap; gap: 12px; color: var(--muted); }
.fllegend .sw { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -2px; }
.fllegend .sw.has { background: var(--accent-soft); } .fllegend .sw.miss { background: var(--warn-soft); }
.flday { flex: 999 1 600px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.flday-t { font-size: 20px !important; }
.flshelves { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.flshelf { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--surface); }
.flshelf header { padding: 12px 14px; background: var(--sunk); display: flex; flex-direction: column; gap: 2px; }
.flshelf header b { font-size: 14.5px; }
.flsr { display: flex; justify-content: space-between; gap: 10px; padding: 10px 14px; border-top: 1px solid var(--line); align-items: baseline; font-size: 13px; min-width: 0; }
.flsr > :first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.flsr .r { font-size: 12px; color: var(--muted); white-space: nowrap; }
.flsr.sel { background: color-mix(in srgb, var(--accent-soft) 55%, var(--surface)); }
.flsr.miss { background: var(--warn-soft); color: var(--warn); }
.flplates { padding: 0 !important; overflow: hidden; }
.flplates .flrow-h { padding: 14px 16px 6px; }
.flpl { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.6fr) minmax(0, .8fr) minmax(0, 1.2fr); gap: 12px; align-items: center; padding: 12px 16px; border-top: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.flpl:hover { background: var(--bg); }
.flpl.sel, .flpl.sel:hover { background: var(--accent); color: var(--accent-ink); }
.flpl.sel .tcode { background: rgba(255,255,255,.92); color: #16201C; }
.flwarn { color: var(--warn); font-weight: 600; }
.flpl.sel .flwarn { color: inherit; }
.flplate { margin-top: 26px; padding-top: 22px; border-top: 2px solid var(--line); display: flex; flex-direction: column; gap: 16px; scroll-margin-top: 12px; }
.flplate-t { margin: 0; font-size: 24px; }
.flmeta { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; font-size: 14px; color: var(--muted); margin-top: 4px; }
.flbtns { display: flex; flex-wrap: wrap; gap: 8px; }
.flsteps { display: flex; flex-wrap: wrap; gap: 10px; }
.flstep { flex: 1 1 200px; display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 10px; background: var(--sunk); color: var(--muted); }
.flstep b { font-size: 14px; color: var(--ink); }
.flstep span { font-size: 12.5px; }
.flstep.ok { background: var(--accent-soft); color: var(--accent); }
.flstep.ok b { color: inherit; }
.flstep.warn { background: var(--warn-soft); color: var(--warn); }
.flstep.warn b { color: inherit; }
.flcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.flcards.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.flcards h3 { margin: 0 0 4px; font-size: 17px; }
.flfile { display: flex; flex-direction: column; gap: 4px; padding: 10px 0; border-top: 1px solid var(--line); min-width: 0; overflow-wrap: anywhere; }
.flfile-h { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.fltable td { vertical-align: top; }
.fltable tr.flout td:first-child { text-decoration: line-through; color: var(--muted); }
.flact { white-space: nowrap; }
.fladd { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; justify-content: space-between; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.fladd label { margin: 0; font-weight: 400; }
.fladd input[type=file] { width: auto; margin: 0; }
.flsamples { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px 12px; font-size: 13px; }
.flhist { margin: 6px 0 0; padding-left: 18px; line-height: 1.6; color: var(--muted); }
@media (max-width: 900px) {
  .flshelves, .flcards, .flcards.two { grid-template-columns: minmax(0, 1fr); }
  .flcal { max-width: none; }
  .flpl { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (prefers-color-scheme: dark) {
  .flpl.sel .tcode { background: rgba(255,255,255,.85); }
}
/* the "keep with plate" drop-down shrinks to the screen; its longest plate name made the page too wide on a phone (review, Oct 19 night) */
.flun .flinline { flex: 1 1 260px; min-width: 0; max-width: 100%; }
.flun .flinline select { flex: 1 1 200px; min-width: 0; width: 100%; }
/* test sites only: the set-password link after an invite or reset, with a Copy button (Oct 21, 2026) */
.heldlink { background: var(--warn-soft); border-radius: 8px; padding: 10px 12px; margin: 10px 0; font-size: 13.5px; }
.heldlink input { background: var(--surface, #fff); }

/* Lab > Plates > Setup list (Oct 21, 2026): compact, one line per run, like the lab's Excel setup sheet */
.suhead { margin-bottom: 6px; } .suhead .lede { font-size: 14px; }
.suview { display: flex; gap: 4px; border-bottom: 2px solid var(--line); margin: 0 0 12px; }
.suview a { padding: 8px 14px; font-weight: 600; color: var(--muted); text-decoration: none; border-bottom: 3px solid transparent; margin-bottom: -2px; }
.suview a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent); }
.suview b { font-size: 12px; background: var(--sunk, #eee); border-radius: 99px; padding: 1px 7px; margin-left: 4px; }
.susum { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; margin-bottom: 10px; font-size: 13.5px; }
.susum b { font-size: 16px; } .susum .w b { color: var(--warn, #8A5A00); } .susum .susend { margin-left: auto; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.sutools { display: grid; grid-template-columns: auto minmax(280px, 1.4fr) 1fr; gap: 10px; margin-bottom: 10px; align-items: start; }
.suanyhit { border-top: 1px solid var(--line); margin-top: 8px; padding-top: 8px; }
.suany select { max-width: 170px; }
.sutools .panel { padding: 8px 12px; } .sutools summary { cursor: pointer; }
@media (max-width: 900px) { .sutools { grid-template-columns: 1fr; } }
.sulog { margin: 6px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; max-height: 260px; overflow: auto; }
.sutbl { padding: 0; max-height: 75vh; overflow: auto; }
.sutbl table { font-size: 13px; min-width: 900px; width: 100%; }
.sutbl th { position: sticky; top: 0; z-index: 1; padding: 5px 8px; font-size: 11px; }
.sutbl td { padding: 1px 6px; line-height: 1.25; white-space: nowrap; height: 26px; vertical-align: middle; }
.sutbl td form { margin: 0; }
.sutbl tr.sugrp td { background: var(--sunk, #eee); font-weight: 700; font-size: 12px; height: 22px; } .sutbl tr.sugrp span { font-weight: 400; color: var(--muted); }
.sutbl tr:not(.sugrp):hover td { background: var(--accent-soft); }
.sutbl td.susp { max-width: 200px; overflow: hidden; text-overflow: ellipsis; }
.sutbl tr.suwarn td { background: color-mix(in srgb, var(--warn-soft, #FBF1DC) 55%, transparent); }
.suw { max-width: 290px; overflow: hidden; text-overflow: ellipsis; } .suw.w { color: var(--warn, #8A5A00); font-weight: 600; }
.susel { width: auto; min-width: 110px; max-width: 160px; padding: 1px 4px; font-size: 12.5px; font-family: var(--mono, monospace); height: 23px; color: var(--muted); background: transparent; }
.susel.run { color: var(--ink); font-weight: 600; border-color: var(--accent); background: var(--surface); box-shadow: inset 3px 0 0 var(--accent); }
.susel.plain { font-family: inherit; color: var(--ink); max-width: 175px; }
.sunote { width: 96px; padding: 1px 6px; font-size: 12.5px; height: 23px; }
.suact { text-align: right; } .suib { border: 1px solid transparent; background: none; cursor: pointer; color: var(--muted); font-size: 14px; line-height: 1; padding: 2px 5px; border-radius: 5px; }
.suib:hover { border-color: var(--line); color: var(--accent); }
.sutag { display: inline-block; margin-left: 5px; font-size: 10.5px; font-weight: 600; padding: 0 5px; border-radius: 4px; vertical-align: 1px; background: var(--sunk, #eee); color: var(--muted); }
.sutag.re { background: var(--warn-soft, #FBF1DC); color: var(--warn, #8A5A00); } .sutag.two { background: var(--accent-soft); color: var(--accent); }

/* the date received under the sample number on the plate maps (Arne, Oct 21, 2026) */
.dmap:not(.dots) .cell:has(small.dt) { display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.05; }
.dmap:not(.dots) .cell small.dt { display: block; font-size: 8px; opacity: .75; }
.dmap.small:not(.dots) .cell small.dt { font-size: 6.5px; }
.supull { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; }
.supull input[type=date] { padding: 4px 8px; width: auto; }
@media (max-width: 600px) { .dmap:not(.dots) .cell:has(small.dt) b { font-size: 8px; } .dmap:not(.dots) .cell small.dt { font-size: 5.5px; letter-spacing: -.2px; } }
/* Accounting > Daily log (Oct 22, 2026) */
.dlhead { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.dlpick { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.dlpick input[type=date] { width: auto; padding: 4px 8px; }
.dltiles .dltotal { border-width: 2px; }
.dltbl tfoot td { border-top: 2px solid var(--ink); }
.dltbl td.num, .dltbl th.num { text-align: right; white-space: nowrap; }
.dlvoid td { color: var(--muted); }
@media print { .dltbl a { color: inherit; text-decoration: none; } .dltiles .tile { break-inside: avoid; } }
/* Reports > Past results by species or group (Oct 22, 2026) */
.prform { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.prform label { margin: 0; font-size: 13px; }
.prform input, .prform select { width: auto; min-width: 140px; max-width: 100%; }
.prform input[name=species] { min-width: 220px; }
.prbtns { display: flex; gap: 6px; }
.prsum { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.prn { font-size: 22px; }
.prform select[name=test] { max-width: 320px; }
@media (max-width: 600px) { .prform label { flex: 1 1 100%; } .prform input, .prform select, .prform select[name=test] { width: 100%; max-width: 100%; min-width: 0; } }
.zipnote { margin-top: 4px; }
.cancelform { display: grid; gap: 6px; max-width: 520px; margin-top: 8px; }

/* Call list and Communications (Arne, Oct 23, 2026) */
.cltask{display:grid;grid-template-columns:1fr auto;gap:8px 16px;align-items:start;padding:10px 0;border-top:1px solid var(--line)}
.cltask:first-child{border-top:0;padding-top:0}
.clhandle{display:flex;gap:6px;flex-wrap:wrap;align-items:center;justify-content:flex-end;max-width:480px}
.clhandle input[name=outcome]{flex:1 1 220px;min-width:0;width:auto}.clhandle select{width:auto;flex:0 0 auto}
.cladd{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:8px}
.cladd-wide{display:grid;grid-template-columns:minmax(220px,1.2fr) minmax(160px,.8fr) minmax(220px,1.5fr) auto auto;gap:10px;align-items:start}
.cladd-wide label{display:block;margin:0 0 4px}.cladd-wide input,.cladd-wide select{width:100%}
.clwho{position:relative}.clwho-list{position:absolute;z-index:20;left:0;right:0;top:100%;margin:2px 0 0;padding:4px 0;list-style:none;background:var(--surface);border:1px solid var(--line);border-radius:8px;box-shadow:0 6px 18px rgba(0,0,0,.12)}
.clwho-list li{padding:6px 10px;cursor:pointer}.clwho-list li[aria-selected=true],.clwho-list li:hover{background:var(--soft-hover)}
@media (max-width:820px){.cltask{grid-template-columns:1fr}.clhandle{justify-content:flex-start;max-width:none}.cladd-wide{grid-template-columns:1fr}}
.claddbox summary{cursor:pointer}
.claddbox .cladd select{width:auto;flex:0 0 auto}
.cltasks{margin:0 0 10px}
.rcmore{margin-top:6px}.rcmore summary{cursor:pointer;font-weight:600;color:var(--ink);padding:4px 0 4px 18px}.rcmore[open]{background:var(--sunk);border-radius:8px;padding-bottom:4px}.rcmore > p{padding-left:18px}
.addsamp summary{cursor:pointer}.addsampf{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;margin-top:10px}.addsampf label{display:flex;flex-direction:column;gap:4px;margin:0;font-weight:600}.addsampf input,.addsampf select{font-weight:400}.addsampf .grow{flex:1 1 200px}
/* the other sample types show only their tick box until ticked; then how many, condition and note appear */
.rcmore .rcsamp:not(:has(> .rcarr input:checked)) > :not(.rcarr){display:none}
.rcmore .rcsamp:not(:has(> .rcarr input:checked)){padding-top:1px;padding-bottom:1px}
/* street address suggestions (Oct 23, 2026) */
.addrwrap{position:relative}
.addrlist{position:absolute;z-index:30;left:0;right:0;top:100%;margin:2px 0 0;padding:4px 0;list-style:none;background:var(--surface);border:1px solid var(--line);border-radius:8px;box-shadow:0 6px 18px rgba(0,0,0,.14);max-width:min(560px,92vw)}
.addrlist li{padding:7px 10px;cursor:pointer;line-height:1.3}
.addrlist li[aria-selected=true],.addrlist li:hover{background:var(--soft-hover)}
.addrlist li.addrby{cursor:default;text-align:right;padding:2px 10px 0;font-size:11px}.addrlist li.addrby:hover{background:none}
/* checking in an earlier day's mail (Oct 24, 2026) */
.workday.late{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;justify-content:space-between;padding:10px 14px;border:2px solid var(--warn);background:var(--warn-soft);border-radius:10px;margin:0 0 10px}
.workday .wdforms{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.workday .wdforms form{margin:0}
.workday .wdform{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:6px 0 0}.workday .wdform input[type=date]{width:auto}
.workday.offer{margin:4px 0 0}.workday.offer summary{cursor:pointer}

/* Emails to customers: the Write screen (R18, Oct 26, 2026) */
.mailgrid { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; margin: 12px 0 16px; }
.mailside { flex: 1 1 460px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.mailside input:not([type=checkbox]):not([type=radio]):not([type=file]), .mailside select, .mailside textarea { display: block; width: 100%; box-sizing: border-box; margin-top: 4px; }
.mailpreview { flex: 1 1 420px; min-width: 0; position: sticky; top: 12px; }
.mailpreview iframe { width: 100%; height: 78vh; border: 1px solid var(--line); border-radius: 10px; background: #E9EDE8; display: block; margin: 0 auto; }
.blocklist { display: flex; flex-direction: column; gap: 10px; }
.mblock { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; background: var(--surface); }
.mblock-head { display: flex; align-items: center; gap: 6px; }
.mblock-head b { flex: 1; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.mblock-head button { min-width: 36px; min-height: 36px; }
.mblock .row3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.mblock .testpick { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13.5px; }
.addrow { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.vpw{display:flex;gap:8px 12px;flex-wrap:wrap;align-items:baseline;margin:8px 0 0}.vpw details{display:inline}.vpw summary{cursor:pointer}
.rcnum{display:inline-flex;gap:4px;align-items:center;margin:0 8px 0 0}.rcnum input{width:4.6em;padding:4px 6px;font-weight:700}

/* Review: one line per check or payment, and the two save buttons (Arne, Oct 26, 2026) */
.paylines { display: flex; flex-direction: column; gap: 8px; }
.payline { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.payline .field { margin: 0; flex: 0 1 150px; }
.payline .field:nth-child(2) { flex: 0 1 240px; }
.payline .field.wide { flex: 1 1 200px; }
.savebtns { display: flex; gap: 10px; flex-wrap: wrap; }
.payline input.off { background: var(--sunk); color: var(--muted); }
.payline + .payline { border-top: 1px dashed var(--line); padding-top: 8px; }

/* Lab logs (Arne, Oct 26, 2026) */
.logtabs { margin: 12px 0; }
.logfields { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.logfields .field { margin: 0; flex: 0 1 200px; }
.logfields .field.wide { flex: 1 1 220px; }
.loghead { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.loglists { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.loggrid th[scope=row] { white-space: nowrap; font-weight: 600; }
.loggrid td { min-width: 70px; vertical-align: top; }
.logwho { display: block; white-space: nowrap; }
.logcal { table-layout: fixed; min-width: 640px; }
.logcal td { vertical-align: top; height: 76px; font-size: 13px; border: 1px solid var(--line); padding: 4px 6px; }
.logcal td.out { background: var(--sunk); }
.logcal td.now { box-shadow: inset 0 0 0 2px var(--accent, #2f6f5e); }
.logcal .dn { font-weight: 700; margin-bottom: 2px; }
.logcal .pg { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
tr.gone td { text-decoration: line-through; color: var(--muted); }
tr.gone td .small[style] { text-decoration: none; }

/* The account page chips hold the contact, orders and billing details (Arne, Oct 26, 2026) */
.accttiles { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); align-items: start; }
.accttiles .tile.big { grid-column: span 2; }
@media (max-width: 640px) { .accttiles .tile.big { grid-column: auto; } }
.tilefacts { margin: 4px 0 2px; grid-template-columns: max-content 1fr; font-size: 14px; }
.tilefacts dt { font-size: 12px; }
.tileorders { width: 100%; border-collapse: collapse; margin: 4px 0; font-size: 14px; }
.tileorders td { padding: 3px 6px 3px 0; border-top: 1px solid var(--line); white-space: nowrap; }
.tileorders tr:first-child td { border-top: 0; }
#credit.tile .small b { font-size: inherit; }
/* Your birds as a spreadsheet (Arne, Oct 27, 2026, mockup A): one line per bird, the sample and tests typed as codes,
   arrow keys between fields and birds. The tick boxes stay underneath as what is sent, and are shown again without JavaScript. */
[data-grid-only][hidden] { display: none !important; }
.birdtable.gridon .bthead, .birdtable.gridon .btrow { grid-template-columns: 22px 26px minmax(150px, 1.25fr) minmax(130px, 1.1fr) minmax(110px, 1fr) minmax(108px, .85fr) minmax(108px, .85fr) 142px minmax(115px, 1fr) minmax(165px, 1.4fr) 26px; gap: 6px; min-width: 1190px; }
.birdtable.gridon.withowner .bthead, .birdtable.gridon.withowner .btrow { grid-template-columns: 22px 26px minmax(150px, 1.25fr) minmax(130px, 1.1fr) minmax(110px, 1fr) minmax(108px, .85fr) minmax(108px, .85fr) minmax(115px, 1fr) 142px minmax(115px, 1fr) minmax(165px, 1.4fr) 26px; min-width: 1310px; }
.birdtable.gridon .bthead { padding: 8px 12px; font-size: 12.5px; }
.birdtable.gridon .bthead > span { white-space: nowrap; }
.birdtable.gridon .bthead .fillbtn { font-size: 0; padding: 0 6px; margin-left: 3px; }   /* just ↓ in the narrow columns; its label still says Fill down */
.birdtable.gridon .bthead .fillbtn::after { content: "↓"; font-size: 12px; }
.birdtable.gridon fieldset.orow { padding: 3px 12px; }
.birdtable.gridon fieldset.orow:focus-within { background: var(--accent-soft); }
.birdtable.gridon .btrow input[type=text], .birdtable.gridon .btrow input[type=date] { padding-top: 5px; padding-bottom: 5px; }
.birdtable.gridon .btpicks { margin: 0 0 3px 54px; padding: 0; border: 0; min-width: 0; }
.birdtable.gridon .btpicks .picks { display: none; }
.birdtable.gridon .btpicks .sflag { margin-top: 3px; }
.birdtable.gridon .rm { padding: 0; width: 24px; height: 24px; border-radius: 50%; font-size: 0; }
.birdtable.gridon .rm::before { content: "×"; font-size: 15px; line-height: 22px; }
.birdtable .typed.codes { font-family: var(--mono); font-size: 13px; letter-spacing: .02em; }
.birdtable .typed.bad { border-color: var(--bad); color: var(--bad); background: var(--bad-soft); }
.gridhelp { position: sticky; bottom: 0; z-index: 3; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 9px 12px; font-size: 13px; display: grid; gap: 6px; box-shadow: 0 -4px 12px rgba(0, 0, 0, .06); }
.gridhelp:empty { display: none; }
.gridhelp .chips { display: flex; flex-wrap: wrap; gap: 5px; }
.gridhelp .gchip { font: 600 12px var(--sans); border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 999px; padding: 2px 9px; cursor: pointer; }
.gridhelp .gchip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.gridhelp .off { color: var(--bad); font-weight: 600; }
.gridkeys kbd { font: 600 11px var(--mono); background: var(--sunk); border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 4px; padding: 0 4px; color: var(--ink); }
.kitline { white-space: nowrap; }
.kitline b { font-weight: 700; }
/* Time off (Arne, Oct 28, 2026) */
.tohead { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.tosplit { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; align-items: start; }
.toppl { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.toform { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.toform label { display: flex; flex-direction: column; gap: 3px; font-size: 13px; font-weight: 600; flex: 1 1 140px; }
.toform label.wide { flex-basis: 100%; }
.tocalbar { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.tocalnav { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.tocalwrap { overflow-x: auto; }
.tocal { width: 100%; border-collapse: collapse; table-layout: fixed; min-width: 560px; }
.tocal th { font-size: 12px; color: var(--muted); font-weight: 600; text-align: left; padding: 4px 6px; }
.tocal td { border: 1px solid var(--line); vertical-align: top; height: 86px; padding: 4px 5px; background: var(--surface); }
.tocal td.wkend { background: var(--sunk); }
.tocal td.other { opacity: .45; }
.tocal td.today { box-shadow: inset 0 0 0 2px var(--accent); }
.tocal .dnum { font-size: 12px; font-weight: 700; color: var(--muted); margin-bottom: 3px; font-variant-numeric: tabular-nums; }
.tocal td.today .dnum { color: var(--accent); }
.tohol, .toout { font-size: 11.5px; line-height: 1.3; border-radius: 5px; padding: 1px 5px; margin-bottom: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tohol { background: var(--warn-soft); color: var(--warn); font-weight: 700; }
.tohol .off { font-weight: 600; opacity: .8; }
.toout { background: var(--sunk); color: var(--ink); border-left: 3px solid var(--muted); }
.toout.k-vacation, .tokey.k-vacation { border-left-color: var(--accent); }
.toout.k-sick, .tokey.k-sick { border-left-color: var(--bad); }
.toout.k-personal, .tokey.k-personal { border-left-color: #7A5BC0; }
.tokey { display: inline-block; width: 12px; height: 10px; border-radius: 3px; vertical-align: -1px; background: var(--sunk); border-left: 3px solid var(--muted); }
.tokey.hol { background: var(--warn-soft); border-left-color: var(--warn); }
.tohols { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 14px; }
/* the message after a save, floating at the bottom when the page came back to where you were (Arne, Oct 28, 2026) */
.flash.flash-float { position: fixed; left: 50%; bottom: max(16px, env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 50; width: min(560px, calc(100vw - 32px)); box-shadow: 0 8px 28px rgba(0, 0, 0, .18); border-radius: 10px; cursor: pointer; transition: opacity .4s; }
.flash.flash-float p { margin: 0 0 4px; }
.flash.flash-float.flash-gone { opacity: 0; pointer-events: none; }
.rvwatch .suw { max-width: 240px; white-space: normal; } .rvwatch .mono { font-size: 12px; }
/* Review, compact (Arne, Oct 28, 2026: "a lot of unnecessary white space … easier to look at if the samples were more
   condensed"): tighter rows, smaller drop-downs, the lane beside the test instead of under it. Phones keep their layout. */
@media (min-width: 701px) {
  table.review.rvcompact th { padding: 5px 8px; }
  table.review.rvcompact td { padding: 3px 8px; line-height: 1.3; vertical-align: middle; }
  table.review.rvcompact td .small, table.review.rvcompact td.small { font-size: 12px; }
  table.review.rvcompact select { width: auto; max-width: 200px; padding: 2px 6px; font-size: 13px; min-height: 0; height: auto; }
  table.review.rvcompact select[name^="call-"] { min-width: 110px; }
  table.review.rvcompact .nrrsel { margin-top: 2px; }
  table.review.rvcompact tr.sub > td { padding-bottom: 4px; }
  table.review.rvcompact .tcode { padding: 0 5px; }
  table.review.rvcompact .rvwatch div { line-height: 1.25; }
}
.rvlane { font-size: 11px; }
.rvfa { display: inline-flex; gap: 4px; align-items: center; }
/* Review: a Positive stands out (Arne, Oct 28, 2026), with its Ct box beside the call */
table.review tr.pos > td { background: color-mix(in srgb, var(--bad) 12%, var(--surface)); }
table.review tr.pos > td:first-child { box-shadow: inset 4px 0 0 var(--bad); }
table.review tr.pos select[name^="call-"] { border-color: var(--bad); color: var(--bad); font-weight: 700; }
table.review .cqin { width: 76px; margin-left: 4px; padding: 2px 6px; font: 13px var(--mono); }
.rvexp { color: var(--ink); font-weight: 600; }
.pullback { position: relative; display: inline-block; }      /* Retest on the sample's page (Nov 2, 2026) */
@media (min-width: 700px) { .pullback { position: static; } .pullback .popform { position: static; width: min(340px, 100%); margin-top: 6px; box-shadow: none; } }   /* inside the row on a wide screen, not over the table's edge */

/* Help: the keyboard shortcuts (Arne, Nov 4, 2026) */
.helptopics kbd { font: 600 12px var(--mono); background: var(--sunk); border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 4px; padding: 0 5px; color: var(--ink); white-space: nowrap; }
.helptopics h3 { font-size: 14px; margin: 14px 0 6px; }
.helptopics table.keys { border-collapse: collapse; width: 100%; font-size: 14px; }
.helptopics table.keys td { padding: 6px 8px; border-top: 1px solid var(--line); vertical-align: top; }
.helptopics table.keys td:first-child { width: 34%; white-space: nowrap; }
@media (max-width: 600px) { .helptopics table.keys td:first-child { white-space: normal; width: 40%; } }

/* Review: the well's number on its plate (Arne, Nov 4, 2026) */
table.review .rvwell { width: 34px; text-align: right; color: var(--muted); font-size: 12.5px; padding-right: 4px; }