/* ===========================================================================
   ALDEVIAN Laboratories sample portal
   Mineral blue and porcelain. Archivo headings, sans body, generous space.
   Mineral blue carries the brand; white carries the work.
   =========================================================================== */

:root{
  /* height of the sticky site bar — the QC log's column headings pin
     themselves just below it, so the two never overlap */
  --topbar-h:64px;

  /* the green */
  --g-deep:#10343C;     /* darkest, footer + deep panels */
  --g:#143C46;          /* the brand green: bars, buttons, hero */
  --g-mid:#245763;      /* hover, secondary                   */
  --g-soft:#37626C;     /* muted green text on white          */
  --g-pale:#EBF0F0;     /* sage panel fill                    */
  --g-paler:#F5F7F6;    /* page tint                          */
  --g-line:#D7E1E2;     /* hairlines                          */

  --white:#FFFFFF;
  --ink:#202D32;
  --ink-2:#52666C;
  --ink-3:#5B7076;
  --rule:#E2E7E8;

  /* status — used only where a sample needs attention */
  --ok:#2F5F6B;    --ok-bg:#E6F0F2;   --ok-line:#BFD4D9;
  --warn:#8A5A11;  --warn-bg:#FBF2DF; --warn-line:#E8D5AB;
  --stop:#9B2C22;  --stop-bg:#FAE9E6; --stop-line:#E9C5BE;
  --info:#1F5C6B;  --info-bg:#E6F1F4; --info-line:#C2DCE3;

  --r-sm:4px; --r-md:6px; --r-lg:10px; --r-xl:16px;
  --lift:0 1px 2px rgba(16,44,66,.05), 0 12px 32px -20px rgba(16,44,66,.35);
  --lift-2:0 2px 6px rgba(16,44,66,.07), 0 26px 56px -28px rgba(16,44,66,.45);
  --wrap:1180px;

  --serif:Lora,Georgia,"Times New Roman",serif;
  --sans:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

html{-webkit-text-size-adjust:100%;background:var(--white)}
body{
  margin:0;min-height:100vh;
  background:var(--g-paler);
  color:var(--ink);
  font-family:var(--sans);
  font-size:15px;line-height:1.6;
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{margin:0;color:var(--ink);font-family:var(--serif);font-weight:500;
  line-height:1.2;letter-spacing:-.005em}
p{margin:0 0 .9em}
a{color:var(--g-soft);text-decoration-thickness:1px;text-underline-offset:2px}
a:hover{color:var(--g)}
:focus-visible{outline:2px solid var(--g-soft);outline-offset:2px;border-radius:3px}

svg.ico{flex:none;vertical-align:-.15em}

/* --------------------------------------------------------------- top bar */

.topbar{
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding:.85rem clamp(1rem,4vw,2.5rem);
  background:var(--g);
  position:sticky;top:0;z-index:60;
}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:var(--white)}
.brand:hover{color:var(--white)}
.brand-text{display:flex;flex-direction:column;line-height:1.25}
.brand-text b{font-family:var(--serif);font-weight:600;font-size:17px;
  letter-spacing:-.01em;color:var(--white)}
.brand-text i{font-style:normal;font-size:11px;color:rgba(255,255,255,.62);
  letter-spacing:.07em;text-transform:uppercase;font-weight:500}
.topnav{display:flex;gap:.2rem;flex-wrap:wrap}
.topnav a{
  padding:.45rem .9rem;border-radius:var(--r-md);
  color:rgba(255,255,255,.82);text-decoration:none;font-size:14px;font-weight:500;
  transition:background .15s ease,color .15s ease;
}
.topnav a:hover{background:rgba(255,255,255,.12);color:var(--white)}
.topnav a.here{background:var(--white);color:var(--g);font-weight:600}

/* ---------------------------------------------------------------- layout */

main{width:min(var(--wrap),100% - 3rem);margin:0 auto;padding:clamp(1.75rem,4vw,2.75rem) 0 3rem}
.prose{max-width:64ch}
.stack>*+*{margin-top:1rem}
.spacer{flex:1}
.bleed{width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}

/* ------------------------------------------------------------- typography */

.display{font-family:var(--serif);font-weight:500;
  font-size:clamp(2.2rem,5vw,3.3rem);line-height:1.1;letter-spacing:-.015em}
.lede{font-size:16.5px;color:var(--ink-2);max-width:54ch;line-height:1.65}
.h2{font-size:22px}
.h3{font-size:16.5px}
.meta{font-size:13px;color:var(--ink-3)}
.mono{letter-spacing:.03em;font-weight:600}
.grad-text{color:inherit}

/* small caps label, as on the reference sign-in */
.cap-label{font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  font-weight:600;color:var(--ink-2)}

/* ---------------------------------------------------------------- panels */

.panel{
  position:relative;
  background:var(--white);
  border:1px solid var(--rule);
  border-radius:var(--r-xl);
  padding:clamp(1.3rem,3vw,2.1rem);
  box-shadow:var(--lift);
}
.panel+.panel,details.panel+details.panel,.panel+details.panel{margin-top:1.25rem}
.panel-head{
  display:flex;align-items:flex-start;gap:.9rem;
  margin-bottom:1.4rem;padding-bottom:1.05rem;
  border-bottom:1px solid var(--rule);
}
.ico-badge{
  width:40px;height:40px;flex:none;border-radius:var(--r-lg);
  display:grid;place-items:center;color:var(--g);
  background:var(--g-pale);
}
.panel-head p{margin:.3rem 0 0;color:var(--ink-2);font-size:14px;max-width:60ch}

/* ------------------------------------------------------------------ hero */
/* Split band: deep green on the left, content on the right, as in the brief. */

.hero{
  position:relative;overflow:hidden;
  background:var(--g);
  color:var(--white);
  margin-bottom:2rem;
  border-radius:0 0 var(--r-xl) var(--r-xl);
}
.hero::after{                      /* faint concentric arcs, lower right */
  content:"";position:absolute;right:-140px;bottom:-240px;
  width:520px;height:520px;border-radius:50%;
  border:52px solid rgba(255,255,255,.035);
  pointer-events:none;
}
.hero-inner{
  position:relative;z-index:1;
  width:min(var(--wrap),100% - 3rem);margin:0 auto;
  padding:clamp(2.5rem,6vw,4.25rem) 0;
  display:grid;gap:clamp(1.75rem,4vw,3.5rem);
  grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  align-items:center;
}
.hero .display{color:var(--white)}
.hero .lede{color:rgba(255,255,255,.72);max-width:40ch}
.hero-eyebrow{
  display:inline-flex;align-items:center;gap:.45rem;
  font-size:11px;letter-spacing:.09em;text-transform:uppercase;font-weight:600;
  color:rgba(255,255,255,.72);margin-bottom:1.25rem;
}
.hero .actions{margin-top:1.9rem}

.hero-media{
  position:relative;border-radius:var(--r-lg);overflow:hidden;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.14);
  min-height:280px;
}
.hero-media img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:.22;filter:grayscale(.45);
}
.hero-media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(165deg,rgba(23,63,95,.5),rgba(16,44,66,.8));
}
.trace{position:absolute;left:0;right:0;bottom:30px;height:62%;width:100%;z-index:2}
.trace-line{stroke-dasharray:1400;stroke-dashoffset:1400;animation:draw 2.1s .3s ease-out forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.hero-caption{
  position:absolute;left:0;right:0;bottom:0;z-index:3;
  padding:.6rem 1.1rem;font-size:11px;letter-spacing:.04em;
  color:rgba(255,255,255,.6);
}
.hero-tag{
  position:absolute;top:1rem;left:1.1rem;z-index:3;
  font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;
  color:var(--g);background:var(--white);padding:.25rem .7rem;border-radius:100px;
}

.hero-stats{
  position:relative;z-index:1;
  width:min(var(--wrap),100% - 3rem);margin:0 auto;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  border-top:1px solid rgba(255,255,255,.16);
}
.hero-stats div{padding:1.15rem 1.25rem 1.45rem;border-right:1px solid rgba(255,255,255,.11)}
.hero-stats div:first-child{padding-left:0}
.hero-stats div:last-child{border-right:0}
.hero-stats b{display:block;font-family:var(--serif);font-weight:500;font-size:21px;
  color:var(--white);line-height:1.25}
.hero-stats span{font-size:12.5px;color:rgba(255,255,255,.62)}

/* --------------------------------------------------------- entry (index) */

.doors{display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fit,minmax(270px,1fr))}
.door{
  position:relative;overflow:hidden;
  display:block;text-decoration:none;color:inherit;
  background:var(--white);border:1px solid var(--rule);border-radius:var(--r-xl);
  padding:1.7rem;box-shadow:var(--lift);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.door:hover{transform:translateY(-3px);box-shadow:var(--lift-2);border-color:var(--g-soft)}
.door-ico{
  width:46px;height:46px;border-radius:var(--r-lg);display:grid;place-items:center;
  color:var(--g);background:var(--g-pale);margin-bottom:1.15rem;
}
.door .h2{color:var(--ink)}
.door p{color:var(--ink-2);font-size:14px;margin:.45rem 0 0}
.door-cue{display:inline-block;margin-top:1.2rem;font-size:14px;font-weight:600;color:var(--g-soft)}
.door:hover .door-cue{color:var(--g)}
/* staff door inverts: deep green card */
.door.admin{background:var(--g);border-color:var(--g)}
.door.admin .h2{color:var(--white)}
.door.admin p{color:rgba(255,255,255,.72)}
.door.admin .door-cue{color:var(--white)}
.door.admin .door-ico{background:rgba(255,255,255,.13);color:var(--white)}
.door.admin:hover{background:var(--g-mid);border-color:var(--g-mid)}

.steps{display:grid;gap:1.6rem;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));counter-reset:s}
.stepcard{position:relative;padding-left:3.3rem}
.stepcard::before{
  counter-increment:s;content:counter(s);
  position:absolute;left:0;top:-3px;
  width:36px;height:36px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--serif);font-size:16px;font-weight:500;
  color:var(--white);background:var(--g);
}
.stepcard h3{font-size:16.5px;margin-bottom:.35rem}
.stepcard p{font-size:14px;color:var(--ink-2);margin:0}

/* ----------------------------------------------------------------- forms */

fieldset{border:0;margin:0;padding:0}
.grid{display:grid;gap:1.1rem}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}

label.field{display:block}
.field>span{display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  font-weight:600;color:var(--ink-2);margin-bottom:.4rem}
.field .req{color:var(--stop);letter-spacing:0}
.field .hint{display:block;font-weight:400;color:var(--ink-3);font-size:11.5px;
  margin-top:.2rem;letter-spacing:0;text-transform:none}

input[type=text],input[type=email],input[type=tel],input[type=date],
input[type=number],input[type=password],input[type=search],select,textarea{
  width:100%;font:inherit;font-size:14.5px;color:var(--ink);
  background:var(--white);
  border:1px solid var(--g-line);border-radius:var(--r-md);
  padding:.6rem .75rem;
  transition:border-color .14s ease,box-shadow .14s ease;
}
textarea{min-height:104px;resize:vertical;line-height:1.55}
input:hover,select:hover,textarea:hover{border-color:var(--g-soft)}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--g);box-shadow:0 0 0 3px rgba(23,63,95,.13);
}
input::placeholder,textarea::placeholder{color:#A9B4B7}
select{appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--g-soft) 50%),linear-gradient(135deg,var(--g-soft) 50%,transparent 50%);
  background-position:calc(100% - 15px) 54%,calc(100% - 10px) 54%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:2rem}
input[type=checkbox]{
  appearance:none;-webkit-appearance:none;
  width:17px;height:17px;margin:0;cursor:pointer;flex:none;
  border:1.5px solid var(--g-line);border-radius:var(--r-sm);background:var(--white);
  display:inline-grid;place-content:center;vertical-align:middle;
  transition:background .12s ease,border-color .12s ease;
}
input[type=checkbox]:hover{border-color:var(--g-soft)}
input[type=checkbox]:checked{background:var(--g);border-color:var(--g)}
input[type=checkbox]:checked::after{
  content:"";width:9px;height:5px;
  border-left:2px solid var(--white);border-bottom:2px solid var(--white);
  transform:rotate(-45deg) translateY(-1px);
}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
  font:inherit;font-weight:600;font-size:14px;
  padding:.68rem 1.4rem;border-radius:var(--r-md);
  border:1px solid transparent;cursor:pointer;text-decoration:none;
  transition:background .14s ease,border-color .14s ease,color .14s ease;
}
.btn-primary{background:var(--g);color:var(--white)}
.btn-primary:hover{background:var(--g-mid);color:var(--white)}
.btn-ghost{background:var(--white);border-color:var(--g-line);color:var(--g)}
.btn-ghost:hover{border-color:var(--g);background:var(--g-pale)}
.btn-quiet{background:transparent;color:var(--ink-2);padding:.5rem .75rem}
.btn-quiet:hover{background:var(--g-pale);color:var(--g)}
.btn-sm{padding:.4rem .9rem;font-size:13px}
.actions{display:flex;gap:.65rem;flex-wrap:wrap;align-items:center}

/* buttons sitting on a deep green panel */
.on-dark .btn-primary{background:var(--white);color:var(--g)}
.on-dark .btn-primary:hover{background:var(--g-pale);color:var(--g)}
.on-dark .btn-ghost{background:transparent;border-color:rgba(255,255,255,.35);color:var(--white)}
.on-dark .btn-ghost:hover{background:rgba(255,255,255,.12);border-color:var(--white);color:var(--white)}
.on-dark .btn-quiet{color:rgba(255,255,255,.75)}
.on-dark .btn-quiet:hover{background:rgba(255,255,255,.12);color:var(--white)}

/* -------------------------------------------------------- samples editor */

.tablewrap{overflow-x:auto;margin:0 -.4rem;padding:0 .4rem}
.samples{width:100%;border-collapse:collapse;font-size:13.5px}
.samples th{
  text-align:left;font-weight:600;font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--g);
  padding:.6rem .5rem;border-bottom:1px solid var(--g-line);vertical-align:bottom;
}
.samples th .price{display:block;font-weight:500;color:var(--ink-3);font-size:11px;
  letter-spacing:0;text-transform:none}
.samples td{padding:.5rem .35rem;border-bottom:1px solid var(--rule);vertical-align:middle}
.samples tbody tr:hover{background:var(--g-paler)}
.samples input[type=text],.samples input[type=number],.samples select{padding:.45rem .6rem;font-size:13.5px}
.samples input[type=number]{-moz-appearance:textfield}
.samples input[type=number]::-webkit-outer-spin-button,
.samples input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.samples .col-n{width:34px;color:var(--g-soft);text-align:center;font-weight:600}
.samples .col-check{width:62px;text-align:center}
.samples .col-amt{min-width:86px}
.samples .col-total{width:88px;text-align:right;font-weight:600}
.samples .col-x{width:34px;text-align:center}
.rowdel{
  border:0;background:transparent;color:var(--ink-3);cursor:pointer;
  font-size:18px;line-height:1;padding:.25rem .45rem;border-radius:var(--r-sm);
}
.rowdel:hover{background:var(--stop-bg);color:var(--stop)}

/* ---------------------------------------------------------------- totals */

.totals{
  margin-top:1.5rem;padding:1.25rem 1.4rem;border-radius:var(--r-lg);
  background:var(--g-pale);border:1px solid var(--g-line);
  display:flex;justify-content:space-between;align-items:flex-end;gap:1.5rem;flex-wrap:wrap;
}
.totals-lines{display:flex;gap:1.6rem;flex-wrap:wrap;font-size:12.5px;color:var(--ink-2)}
.totals-lines b{display:block;color:var(--g);font-weight:600;font-size:15.5px;font-family:var(--sans)}
.grand{text-align:right}
.grand small{display:block;font-size:11px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-2);font-weight:600}
.grand strong{font-family:var(--serif);font-weight:500;font-size:34px;
  letter-spacing:-.015em;color:var(--g)}

.pricing{width:100%;border-collapse:collapse;font-size:14.5px;max-width:520px}
.pricing td{padding:.65rem 0;border-bottom:1px solid var(--rule);color:var(--ink-2)}
.pricing td:first-child .cell{display:flex;align-items:center;gap:.7rem}
.pricing .ico{color:var(--g-soft)}
.pricing td:last-child{text-align:right;font-weight:600;color:var(--ink);white-space:nowrap}
.pricing tr:last-child td{border-bottom:0}
.pricing .sub{color:var(--ink-3);font-size:12px}

/* ------------------------------------------------------------ ALD reveal */

.reveal{
  position:relative;overflow:hidden;
  background:var(--g);color:var(--white);border-radius:var(--r-xl);
  padding:clamp(2rem,5vw,3.25rem);
}
.reveal::after{
  content:"";position:absolute;right:-130px;bottom:-230px;
  width:480px;height:480px;border-radius:50%;
  border:48px solid rgba(255,255,255,.04);pointer-events:none;
}
.reveal>*{position:relative;z-index:1}
.reveal .reveal-kicker{
  display:inline-flex;align-items:center;gap:.45rem;
  font-size:11px;letter-spacing:.09em;text-transform:uppercase;font-weight:600;
  color:rgba(255,255,255,.68);margin:0 0 1rem;
}
.reveal .code{
  font-family:var(--serif);font-weight:500;
  font-size:clamp(2.8rem,9vw,4.75rem);line-height:1;letter-spacing:.005em;
  margin:0;color:var(--white);
}
.reveal p{color:rgba(255,255,255,.75);max-width:52ch;margin:1.1rem 0 0;font-size:15px}
.reveal .actions{margin-top:1.9rem}

/* ------------------------------------------------------------------ rail */

.rail{list-style:none;display:flex;margin:0;padding:1.8rem 0 .3rem}
.rail .step{flex:1;position:relative;text-align:center;min-width:0;padding-top:1.3rem}
.rail .step::before{content:"";position:absolute;top:6px;left:0;right:0;height:2px;background:var(--g-line)}
.rail .step:first-child::before{left:50%}
.rail .step:last-child::before{right:50%}
.rail .node{
  position:absolute;top:1px;left:50%;transform:translateX(-50%);
  width:13px;height:13px;border-radius:50%;background:var(--white);
  border:2px solid var(--g-line);
}
.rail .step-label{display:block;font-size:11px;line-height:1.35;color:var(--ink-3);
  padding:0 .2rem;font-weight:500}
.rail .done::before{background:var(--g-soft)}
.rail .done .node{background:var(--g-soft);border-color:var(--g-soft)}
.rail .done .step-label{color:var(--ink-2)}
.rail .now::before{background:linear-gradient(90deg,var(--g-soft) 50%,var(--g-line) 50%)}
.rail .now .node{
  top:-2px;width:19px;height:19px;background:var(--g);border:4px solid var(--white);
  box-shadow:0 0 0 2px var(--g);
}
.rail .now .step-label{color:var(--g);font-weight:600}
.rail-paused .node{opacity:.6}
.rail-flag{
  margin-top:1.2rem;font-size:14px;padding:.7rem 1rem;border-radius:var(--r-md);
  background:var(--warn-bg);color:var(--warn);border:1px solid var(--warn-line);
}
.rail-flag.tone-stop{background:var(--stop-bg);color:var(--stop);border-color:var(--stop-line)}

/* rail on the deep green tracking header */
.on-dark .rail .step::before{background:rgba(255,255,255,.22)}
.on-dark .rail .node{background:var(--g);border-color:rgba(255,255,255,.35)}
.on-dark .rail .step-label{color:rgba(255,255,255,.6)}
.on-dark .rail .done::before,.on-dark .rail .done .node{background:var(--white);border-color:var(--white)}
.on-dark .rail .done .step-label{color:rgba(255,255,255,.82)}
.on-dark .rail .now::before{background:linear-gradient(90deg,var(--white) 50%,rgba(255,255,255,.22) 50%)}
.on-dark .rail .now .node{background:var(--white);border-color:var(--g);box-shadow:0 0 0 2px var(--white)}
.on-dark .rail .now .step-label{color:var(--white);font-weight:600}
.on-dark .rail-flag{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.3);color:var(--white)}
.on-dark .rail-flag a{color:var(--white)}

/* ---------------------------------------------------------------- badges */

.badge{
  display:inline-flex;align-items:center;gap:.3rem;
  font-size:11px;font-weight:600;line-height:1.45;
  padding:.24rem .65rem;border-radius:100px;white-space:nowrap;
  background:var(--g-pale);color:var(--g);border:1px solid var(--g-line);
}
.badge.tone-work,.badge.tone-warn{background:var(--warn-bg);color:var(--warn);border-color:var(--warn-line)}
.badge.tone-good{background:var(--g);color:var(--white);border-color:var(--g)}
.badge.tone-stop{background:var(--stop-bg);color:var(--stop);border-color:var(--stop-line)}
.badge-lg{font-size:13px;padding:.4rem .95rem}
.on-dark .badge{background:rgba(255,255,255,.15);color:var(--white);border-color:rgba(255,255,255,.3)}
.on-dark .badge.tone-good{background:var(--white);color:var(--g);border-color:var(--white)}
.on-dark .badge.tone-work{background:rgba(232,213,171,.22);color:#F0DCB4;border-color:rgba(232,213,171,.45)}

.chip{
  display:inline-block;font-size:11px;font-weight:500;padding:.16rem .55rem;border-radius:var(--r-sm);
  background:var(--g-pale);color:var(--g);margin:0 .22rem .22rem 0;border:1px solid var(--g-line);
}
.chip.exp{background:var(--warn-bg);color:var(--warn);border-color:var(--warn-line)}
.on-dark .chip{background:rgba(255,255,255,.14);color:var(--white);border-color:rgba(255,255,255,.28)}

/* -------------------------------------------------------------- notices */

.notice{
  display:flex;gap:.7rem;align-items:flex-start;
  padding:.85rem 1.1rem;border-radius:var(--r-md);font-size:14px;
  border:1px solid var(--rule);background:var(--white);margin-bottom:1.25rem;
}
.notice .ico{margin-top:.15rem;flex:none}
.notice.ok{background:var(--ok-bg);border-color:var(--ok-line);color:var(--ok)}
.notice.bad{background:var(--stop-bg);border-color:var(--stop-line);color:var(--stop)}
.notice.warn{background:var(--warn-bg);border-color:var(--warn-line);color:var(--warn)}
.notice strong{color:inherit}
.notice p:last-child{margin-bottom:0}
.notice ul{margin:.4rem 0 0;padding-left:1.1rem}

/* --------------------------------------------------------- lookup / login */
/* Split screen: green story panel, white form panel — the reference layout. */

/* auth pages run edge to edge, with no page padding around them */
body.auth main{padding:0;width:100%;max-width:none}
.split{
  display:grid;grid-template-columns:1fr 1fr;min-height:calc(100vh - 66px);
  width:100%;
}
.split-art{
  position:relative;overflow:hidden;
  background:var(--g);color:var(--white);
  padding:clamp(2rem,5vw,4rem);
  display:flex;flex-direction:column;justify-content:center;
}
.split-art::after{
  content:"";position:absolute;right:-90px;bottom:-250px;
  width:520px;height:520px;border-radius:50%;
  border:56px solid rgba(255,255,255,.04);pointer-events:none;
}
.split-art>*{position:relative;z-index:1;max-width:19ch}
.split-art p{max-width:34ch}
.split-art .display{color:var(--white);font-size:clamp(1.9rem,3.2vw,2.7rem);line-height:1.14}
.split-art p{color:rgba(255,255,255,.66);font-size:14.5px;margin-top:1.1rem;line-height:1.65}
.split-form{
  background:var(--white);
  padding:clamp(2rem,5vw,4rem);
  display:flex;flex-direction:column;justify-content:center;
}
.split-form .inner{width:min(360px,100%);margin:0 auto}
.split-form h1{font-size:30px;margin-bottom:.35rem}
.split-form .sub{color:var(--ink-2);font-size:14.5px;margin-bottom:1.9rem}
.split-form .btn{width:100%}

/* the older centred card, still used by the tracking lookup on small screens */
.slab{max-width:460px;margin:clamp(.5rem,4vh,2.5rem) auto}
.slab .panel{padding:2rem}
.slab-ico{
  width:52px;height:52px;border-radius:var(--r-lg);display:grid;place-items:center;
  color:var(--white);background:var(--g);margin-bottom:1.25rem;
}

/* -------------------------------------------------------- tracking cards */

.track-head{
  position:relative;overflow:hidden;
  background:var(--g);color:var(--white);
  border-radius:var(--r-xl);padding:clamp(1.7rem,4vw,2.5rem);
  margin-bottom:1.25rem;
}
.track-head::after{
  content:"";position:absolute;right:-120px;bottom:-240px;
  width:490px;height:490px;border-radius:50%;
  border:50px solid rgba(255,255,255,.04);pointer-events:none;
}
.track-head>*{position:relative;z-index:1}
.track-head .code{font-family:var(--serif);font-weight:500;
  font-size:clamp(2.1rem,6vw,3.1rem);line-height:1.05;margin:0;color:var(--white)}
.track-head .kicker{font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  color:rgba(255,255,255,.62);margin:0 0 .35rem;font-weight:600}

.sub-summary{
  display:grid;gap:1.1rem 2rem;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  margin-top:1.6rem;padding-top:1.4rem;border-top:1px solid rgba(255,255,255,.18);
}
.sub-summary div span{display:block;font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:rgba(255,255,255,.58);margin-bottom:.25rem;font-weight:600}
.sub-summary div b{font-weight:600;font-size:15.5px;color:var(--white)}

.sample-card{
  border:1px solid var(--rule);border-left:3px solid var(--g);
  border-radius:var(--r-lg);padding:1.25rem 1.4rem;background:var(--white);
}
.sample-card+.sample-card{margin-top:.9rem}
.sample-card.is-work,.sample-card.is-warn{border-left-color:var(--warn)}
.sample-card.is-stop{border-left-color:var(--stop)}
.sample-card-top{display:flex;justify-content:space-between;gap:1rem;align-items:flex-start;flex-wrap:wrap}
.sample-card h3{font-size:17px}
.sample-card .meta{margin-top:.2rem}
.result-grid{
  display:grid;gap:.9rem 1.5rem;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));
  margin-top:1.1rem;padding:1rem 1.15rem;border-radius:var(--r-md);
  background:var(--g-pale);
}
.result-grid span{display:block;font-size:11px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-2);font-weight:600;margin-bottom:.15rem}
.result-grid b{font-weight:600;color:var(--g);font-size:16px}

.timeline{list-style:none;margin:0;padding:0;font-size:13.5px;color:var(--ink-2)}
.timeline li{padding:.6rem 0 .6rem 1.2rem;border-left:2px solid var(--rule);position:relative}
.timeline li::before{
  content:"";position:absolute;left:-5px;top:1.1rem;width:8px;height:8px;
  border-radius:50%;background:var(--g-line);border:2px solid var(--white);
}
.timeline li:first-child{border-left-color:var(--g-soft)}
.timeline li:first-child::before{background:var(--g)}
.timeline time{display:block;color:var(--ink-3);font-size:11.5px}

/* ===========================================================================
   QC LOG — green bar, white body, editable grid, sticky save
   =========================================================================== */

.qc-bar{
  background:var(--g);color:var(--white);
  padding:1.35rem clamp(1rem,4vw,2rem);
  border-radius:var(--r-xl) var(--r-xl) 0 0;
  display:flex;justify-content:space-between;align-items:center;gap:1.5rem;flex-wrap:wrap;
}
.qc-bar h1{font-family:var(--serif);color:var(--white);font-size:clamp(1.7rem,3.6vw,2.2rem);
  font-weight:500;line-height:1.15}
.qc-bar .sub{font-size:13.5px;color:rgba(255,255,255,.68);margin:.2rem 0 0}
.qc-shell{
  background:var(--white);border:1px solid var(--rule);border-top:0;
  border-radius:0 0 var(--r-xl) var(--r-xl);
  padding:clamp(1rem,3vw,1.6rem);
  box-shadow:var(--lift);margin-bottom:1.5rem;
}

.toolbar{display:flex;gap:.7rem;align-items:flex-end;flex-wrap:wrap;margin-bottom:1.1rem}
.toolbar .field{margin:0}
.toolbar .grow{flex:1;min-width:200px}

.stats{display:grid;gap:.7rem;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));margin-bottom:1.2rem}
.stat{background:var(--g-paler);border:1px solid var(--rule);border-radius:var(--r-lg);padding:.85rem 1rem}
.stat b{display:block;font-family:var(--serif);font-weight:500;font-size:27px;
  line-height:1.15;color:var(--g)}
.stat span{font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-3);font-weight:600}
.stat.hot b{color:var(--warn)}

.qc{width:100%;border-collapse:collapse;font-size:11.5px;background:var(--white);table-layout:fixed}
.qc thead th{
  /* pinned just under the green site bar, which is itself sticky at top:0 */
  position:sticky;top:var(--topbar-h,62px);z-index:5;
  background:var(--g);color:var(--white);
  text-align:left;font-weight:600;font-size:11px;letter-spacing:0;
  padding:.45rem .2rem;line-height:1.3;white-space:normal;overflow-wrap:normal;
  vertical-align:bottom;
}
.qc thead th:first-child{border-top-left-radius:var(--r-md)}
.qc thead th:last-child{border-top-right-radius:var(--r-md)}
.qc td{padding:.3rem .3rem;border-bottom:1px solid var(--rule);vertical-align:middle;line-height:1.35;
  overflow:hidden;text-overflow:ellipsis}
.qc tbody tr:hover{background:var(--g-paler)}
.qc .chip{font-size:11px;padding:.08rem .4rem;margin:0 .12rem .08rem 0}
.qc .subtype{display:block;color:var(--ink-3);font-size:11px;line-height:1.3}
.qc .nowrap{white-space:nowrap}
.qc .num{text-align:right}
.qc tr.sub-head td{
  background:var(--g-pale);color:var(--g);
  font-weight:600;font-size:12.5px;padding:.5rem .55rem;
  border-top:1px solid var(--g-line);border-bottom:1px solid var(--g-line);
}
.qc tr.sub-head a{text-decoration:none;color:var(--g);font-weight:700}
.qc tr.sub-head a:hover{text-decoration:underline}
/* The log scrolls with the page, like a paper log book — no inner scrollbar
   and no height limit. `overflow:visible` matters: a scrolling ancestor would
   trap the sticky column headings inside it instead of pinning them to the
   window. A min-height keeps the ruled area substantial on a quiet day. */
.qc-scroll{
  overflow:visible;
  min-height:min(56vh,600px);
  border:1px solid var(--rule);border-radius:var(--r-md);
}

/* Narrow screens get a side-scroller instead; sticky headings cannot work
   inside one, and that is the right trade at phone width. */
@media (max-width:1100px){
  .qc-scroll{overflow:auto;max-height:calc(100vh - 14rem)}
  .qc thead th{position:sticky;top:0}
}

/* inline grid inputs — compact, quiet until touched */
.qc .cell-in{
  width:100%;min-width:0;font:inherit;font-size:11.5px;color:var(--ink);
  background:transparent;border:1px solid transparent;border-radius:var(--r-sm);
  padding:.22rem .3rem;
  transition:border-color .12s ease,background .12s ease;
}
.qc input.cell-in[type=date]{font-size:11px;padding-left:.2rem;padding-right:0}
.qc input[type=date]::-webkit-calendar-picker-indicator{padding:0;margin:0;opacity:.5}
.qc input[type=date]::-webkit-calendar-picker-indicator:hover{opacity:1}
.qc .cell-in:hover{border-color:var(--g-line);background:var(--white)}
.qc .cell-in:focus{outline:none;background:var(--white);border-color:var(--g);
  box-shadow:0 0 0 2px rgba(23,63,95,.12)}
.qc .cell-in::placeholder{color:#B7C1C4}
.qc select.cell-in{
  appearance:none;padding-right:.85rem;font-size:11px;font-weight:600;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),linear-gradient(135deg,var(--ink-3) 50%,transparent 50%);
  background-position:calc(100% - 8px) 54%,calc(100% - 5px) 54%;
  background-size:3.5px 3.5px,3.5px 3.5px;background-repeat:no-repeat;
}
/* the Yes / No columns are narrow, so drop the arrow and centre them */
.qc select.yn{
  background-image:none;padding:.22rem .1rem;text-align:center;text-align-last:center;
  font-size:11px;font-weight:700;
}
/* status select is colour-coded like the yes/no columns in the old log */
.qc select.st-neutral{background-color:var(--g-pale);color:var(--g);border-color:var(--g-line)}
.qc select.st-work,.qc select.st-warn{background-color:var(--warn-bg);color:var(--warn);border-color:var(--warn-line)}
.qc select.st-good{background-color:var(--ok-bg);color:var(--ok);border-color:var(--ok-line)}
.qc select.st-stop{background-color:var(--stop-bg);color:var(--stop);border-color:var(--stop-line)}
/* 16 visible columns; the notes column is added back by .show-notes */
.qc col.k-chk{width:2.6%}
.qc col.k-num{width:2.8%}
.qc col.k-date{width:7.8%}
.qc col.k-coa{width:5.7%}
.qc col.k-qc{width:6.3%}
.qc col.k-vendor{width:6.8%}
.qc col.k-sample{width:8.6%}
.qc col.k-type{width:8.6%}
.qc col.k-lot{width:6.4%}
.qc col.k-qty{width:3.6%}
.qc col.k-content{width:4.8%}
.qc col.k-analysis{width:4.4%}
.qc col.k-yn{width:5.4%}
.qc col.k-exp{width:4.2%}
.qc col.k-coayn{width:4.2%}
.qc col.k-status{width:8.2%}
.qc col.k-note{width:0}

/* notes are off by default so nothing runs off the edge */
.qc .c-note{display:none}
.qc-scroll.show-notes .c-note{display:table-cell}
.qc-scroll.show-notes col.k-note{width:10.5%}
.qc-scroll.show-notes col.k-sample{width:8.4%}
.qc-scroll.show-notes col.k-type{width:8.4%}
.qc-scroll.show-notes col.k-vendor{width:7%}
.qc-scroll.show-notes col.k-lot{width:6.4%}
.qc-scroll.show-notes col.k-date{width:8.4%}

/* a row with unsaved edits */
.qc tr.dirty td{background:#FFFBEB}
.qc tr.dirty td:first-child{box-shadow:inset 3px 0 0 var(--warn)}

/* ---- the save dock: a quiet status light, since the grid autosaves ---- */
.savedock{
  position:fixed;right:clamp(.75rem,2vw,1.6rem);bottom:clamp(.75rem,2vw,1.6rem);
  z-index:70;
  display:flex;align-items:center;gap:.6rem;
  background:var(--white);border:1px solid var(--g-line);border-radius:100px;
  padding:.45rem .55rem .45rem 1rem;
  box-shadow:var(--lift-2);
  transition:border-color .16s ease,background .16s ease;
}
.savedock .dock-state{
  font-size:12px;color:var(--ink-3);display:flex;align-items:center;gap:.45rem;white-space:nowrap;
}
.savedock .dot{width:7px;height:7px;border-radius:50%;background:var(--ok);flex:none}
.savedock .btn{border-radius:100px;padding:.4rem .9rem;font-size:12.5px}
.savedock .dock-row{display:none;gap:.4rem}

.savedock.is-dirty{border-color:var(--warn-line);background:#FFFDF5}
.savedock.is-dirty .dot{background:var(--warn)}
.savedock.is-dirty .dock-state{color:var(--warn);font-weight:600}
.savedock.is-dirty .dock-row{display:flex}

.savedock.is-saving .dot{background:var(--g-soft);animation:pulse 1s ease-in-out infinite}
.savedock.is-saving .dock-state{color:var(--g)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}

.savedock.is-error{border-color:var(--stop-line);background:var(--stop-bg)}
.savedock.is-error .dot{background:var(--stop)}
.savedock.is-error .dock-state{color:var(--stop);font-weight:600}
.savedock.is-error .dock-row{display:flex}

.qc-shell{padding-bottom:4.5rem}

@media (max-width:640px){
  .savedock{left:.75rem;right:.75rem;bottom:.75rem;border-radius:var(--r-lg);padding:.6rem .75rem}
  .savedock .dock-state{flex:1;font-size:11.5px}
}

.bulkbar{
  display:flex;gap:.7rem;align-items:center;flex-wrap:wrap;
  background:var(--g-pale);border:1px solid var(--g-line);color:var(--g);
  padding:.7rem 1rem;border-radius:var(--r-md);margin-bottom:.9rem;font-size:13.5px;font-weight:500;
}
.bulkbar select,.bulkbar input[type=date]{width:auto;min-width:150px;padding:.42rem .7rem;font-size:13.5px}

details.panel>summary{
  list-style:none;display:flex;align-items:center;gap:.7rem;cursor:pointer;
  font-family:var(--serif);font-size:20px;font-weight:500;color:var(--ink);
}
details.panel>summary::-webkit-details-marker{display:none}
details.panel>summary::after{
  content:"";width:8px;height:8px;flex:none;margin-left:auto;
  border-right:2px solid var(--g-soft);border-bottom:2px solid var(--g-soft);
  transform:rotate(45deg) translateY(-2px);transition:transform .18s ease;
}
details.panel[open]>summary::after{transform:rotate(-135deg) translateY(-2px)}
details.panel>summary .ico{color:var(--g-soft)}

/* ---------------------------------------------------------------- footer */

.foot{
  margin-top:3rem;background:var(--g-deep);color:rgba(255,255,255,.66);font-size:13.5px;
}
.foot-inner{
  width:min(var(--wrap),100% - 3rem);margin:0 auto;
  padding:2.4rem 0;display:grid;gap:2rem;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
}
.foot-brand{display:flex;gap:.75rem;align-items:flex-start}
.foot-brand b{display:block;color:var(--white);font-size:16px;font-family:var(--serif);font-weight:500}
.foot-brand span{display:block;color:rgba(255,255,255,.5);font-size:12.5px;max-width:26ch;margin-top:.25rem}
.foot-col>span{display:flex;align-items:center;gap:.45rem;color:rgba(255,255,255,.55);
  font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;margin-bottom:.5rem}
.foot a{color:rgba(255,255,255,.82)}
.foot a:hover{color:var(--white)}

/* ------------------------------------------------------------ responsive */

@media (max-width:980px){
  .hero-inner{grid-template-columns:1fr}
  .hero-media{min-height:210px;order:-1}
  .split{grid-template-columns:1fr;min-height:0}
  .split-art{padding:2.25rem 1.5rem}
  .split-art>*{max-width:none}
  .split-form{padding:2.25rem 1.5rem}
}

@media (max-width:900px){
  .samples thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .samples,.samples tbody,.samples tr,.samples td{display:block;width:100%}
  .samples tr{
    border:1px solid var(--rule);border-left:3px solid var(--g);
    border-radius:var(--r-lg);padding:.85rem 1rem;margin-bottom:.9rem;background:var(--white);
  }
  .samples td{border:0;display:grid;grid-template-columns:11ch 1fr;gap:.6rem;align-items:center;padding:.32rem 0}
  .samples td::before{content:attr(data-label);font-size:11px;font-weight:600;
    letter-spacing:.05em;text-transform:uppercase;color:var(--ink-2)}
  .samples .col-n{text-align:left;grid-template-columns:1fr;font-size:0}
  .samples .col-n::before{
    content:"Sample " attr(data-n);font-size:13px;color:var(--g);font-weight:600;
    letter-spacing:.04em;display:block;padding-bottom:.35rem;margin-bottom:.3rem;
    border-bottom:1px solid var(--rule);
  }
  .samples .col-check,.samples .col-total{text-align:left}
  .samples .col-x{grid-template-columns:1fr;justify-items:start;padding-top:.5rem}
  .samples .col-x::before{content:none}
  .samples .col-x .rowdel{font-size:13px;font-weight:600;color:var(--stop);
    padding:.35rem .7rem;background:var(--stop-bg);border-radius:var(--r-sm)}
  .samples .col-x .rowdel::after{content:" Remove sample"}
  .tablewrap{overflow-x:visible}
  .qc thead th{position:static}
  .qc-scroll{max-height:none}
  .rail .step-label{font-size:11px}
  .topbar{flex-direction:column;align-items:flex-start;gap:.6rem}
  .topnav{margin-left:-.9rem}
}

@media (max-width:560px){
  main{width:min(var(--wrap),100% - 2rem)}
  .hero-inner,.hero-stats,.foot-inner{width:min(var(--wrap),100% - 2rem)}
  .hero-stats{grid-template-columns:1fr}
  .hero-stats div{border-right:0;border-bottom:1px solid rgba(255,255,255,.11);padding-left:0}
  .hero-caption{font-size:11px}
  .trace{bottom:42px}
  .rail{padding-top:1.2rem;padding-bottom:2rem}
  .rail .step-label{display:none}
  .rail .now .step-label{display:block;position:absolute;left:50%;transform:translateX(-50%);width:12ch;font-size:11px}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important}
  .trace-line{stroke-dashoffset:0}
}

/* ----------------------------------------------------------------- print */

@media print{
  .topbar,.topnav,.foot,.actions,.no-print,.savedock{display:none !important}
  body{background:#FFF}
  .panel{box-shadow:none;border-color:#BBB;break-inside:avoid}
  .reveal,.track-head,.qc-bar,.split-art{
    background:#FFF !important;color:#000 !important;border:2px solid #000 !important}
  .reveal::after,.track-head::after,.split-art::after{display:none !important}
  .reveal .code,.reveal p,.reveal .reveal-kicker,.track-head .code,.track-head .kicker,
  .sub-summary div b,.sub-summary div span,.qc-bar h1,.qc-bar .sub{color:#000 !important}
  .qc thead th{background:#FFF !important;color:#000 !important;border-bottom:2px solid #000}
  main{width:100%}
}

/* ===========================================================================
   QC log: submissions on the left, the log on the right
   =========================================================================== */

.qc-layout{display:grid;grid-template-columns:224px minmax(0,1fr) 236px;gap:.9rem;align-items:start}
.qc-layout.no-subs                {grid-template-columns:minmax(0,1fr) 236px}
.qc-layout.no-watch               {grid-template-columns:224px minmax(0,1fr)}
.qc-layout.no-subs.no-watch       {grid-template-columns:minmax(0,1fr)}
.qc-layout.no-subs  .subs     {display:none}
.qc-layout.no-watch .watchpane{display:none}

/* the alerts column: same sticky treatment as the submissions list, so both
   stay with you while the log scrolls past */
.watchpane{
  position:sticky;top:5.2rem;
  max-height:calc(100vh - 7rem);overflow:auto;
  border:1px solid var(--rule);border-radius:var(--r-lg);background:var(--white);
}
.watchpane .watch:last-child{border-bottom:0}

.subs{
  position:sticky;top:5.2rem;
  max-height:calc(100vh - 7rem);overflow:auto;
  border:1px solid var(--rule);border-radius:var(--r-lg);background:var(--white);
}
.subs-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:.5rem;
  padding:.85rem 1rem .6rem;border-bottom:1px solid var(--rule);
  position:sticky;top:0;background:var(--white);z-index:2;
}
.subs-head h2{font-size:15px;font-family:var(--sans);font-weight:600;letter-spacing:.02em}
.subs-search{padding:.6rem .7rem;border-bottom:1px solid var(--rule)}
.subs-search input{font-size:13px;padding:.45rem .6rem}

.sub-item{
  display:block;text-decoration:none;color:inherit;
  padding:.7rem 1rem;border-bottom:1px solid var(--rule);
  border-left:3px solid transparent;
}
.sub-item:hover{background:var(--g-paler);color:inherit}
.sub-item.on{background:var(--g-pale);border-left-color:var(--g)}
.sub-item b{
  display:flex;align-items:center;gap:.4rem;
  font-size:13px;font-weight:700;color:var(--g);letter-spacing:.02em;
}
.sub-item .new{
  font-style:normal;font-size:11px;font-weight:700;letter-spacing:.04em;
  background:var(--warn-bg);color:var(--warn);border:1px solid var(--warn-line);
  padding:.04rem .35rem;border-radius:100px;
}
.sub-item span{display:block;font-size:12px;color:var(--ink-2);margin-top:.12rem}
.sub-item .row2{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;
  font-size:11px;color:var(--ink-3);margin-top:.25rem}
.sub-item .row2 .badge{font-size:11px;padding:.1rem .45rem;font-style:normal}

.logpane{min-width:0}

.sub-banner{
  display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;
  background:var(--g-pale);border:1px solid var(--g-line);border-radius:var(--r-md);
  padding:.7rem 1rem;margin-bottom:.8rem;
}
.sub-banner b{font-size:14px;color:var(--g);letter-spacing:.03em}
.sub-banner span{display:block;font-size:12.5px;color:var(--ink-2)}
.sub-banner .note{color:var(--warn);margin-top:.15rem}

/* ---- paging under the log: it must always be obvious how much there is ---- */
.pager{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  margin-top:.75rem;padding:.6rem .2rem;font-size:12.5px;color:var(--ink-2);
}
.pager b{color:var(--ink);font-variant-numeric:tabular-nums}
.pager-nav,.pager-per{display:flex;align-items:center;gap:.35rem;flex-wrap:wrap}
.pager-per span{margin-right:.2rem}
.pager-at{padding:0 .5rem;font-variant-numeric:tabular-nums}
.pager .btn.is-on{background:var(--g);color:#FFF;border-color:var(--g)}
.pager .btn.is-off{opacity:.4;pointer-events:none}

/* ---- the watch lists at the head of the sidebar ----
   Deliberately loud. Their whole job is to be seen before anything else. */
.watch{border-bottom:1px solid var(--rule);padding:.6rem .65rem .4rem}
.watch-head{display:flex;align-items:center;gap:.35rem;flex-wrap:wrap;margin-bottom:.35rem}
.watch-head b{font-size:12.5px}
.watch-head span{flex:0 0 100%;font-size:11px;color:var(--ink-3);letter-spacing:.01em}
.watch-head svg{flex:none}
.watch-late{background:#FDF4F4}
.watch-late .watch-head b,.watch-late .watch-head svg{color:#8A1C1C}
.watch-ster{background:#F7FCFD}
.watch-clear{background:var(--g-pale)}
.watch-clear .watch-head b,.watch-clear .watch-head svg{color:var(--g)}
.watch-ster .watch-head b,.watch-ster .watch-head svg{color:#216474}

.watch-row{
  display:grid;grid-template-columns:1fr auto;gap:0 .4rem;
  padding:.32rem .35rem;border-radius:var(--r-sm);
  text-decoration:none;color:var(--ink);
}
.watch-row:hover{background:rgba(255,255,255,.75)}
.watch-row .w-main{grid-column:1;font-size:12px;line-height:1.25;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.watch-row .w-sub{grid-column:1;font-size:11px;color:var(--ink-3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.watch-row .w-age{grid-column:2;grid-row:1 / span 2;align-self:center;
  font-size:11px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink-2);white-space:nowrap}
.watch-row .w-age.is-over{color:#8A1C1C}
.watch-row .w-age.is-soon{color:#8A5B12}
.watch-row .rush{font-style:normal;font-size:11px;font-weight:700;letter-spacing:.06em;
  background:#8A1C1C;color:#FFF;border-radius:3px;padding:.03rem .25rem;margin-left:.25rem}
.watch-more{margin:.2rem .35rem .1rem;font-size:11px;color:var(--ink-3)}

/* an expedited line, so a rush job is obvious in a wall of rows */
.qc tr.is-exp td:first-child{box-shadow:inset 3px 0 0 #B4541A}
.qc .yn.yn-exp{background:#FFF1E6;border-color:#E8C3A4;color:#8A4312;font-weight:700}

/* ---- the foot bar: the same actions again at the end of a long log ---- */
.bulkbar-foot{margin-top:.75rem}
.btn-remove{color:#8A1C1C;border-color:#E6C2C2}
.btn-remove:hover{background:#FDECEC;border-color:#D89898;color:#6E1515}

/* ---- warning two: exactly which lines are about to go ---- */
.confirm-del{
  border:1px solid #E6B9B9;background:#FDF4F4;border-radius:var(--r-md);
  padding:1rem 1.1rem;margin-bottom:.9rem;
}
.confirm-head{display:flex;gap:.6rem;align-items:flex-start;margin-bottom:.9rem}
.confirm-head svg{flex:none;color:#8A1C1C}
.confirm-head b{display:block;font-size:15px;color:#8A1C1C}
.confirm-head span{display:block;font-size:12.5px;color:var(--ink-2);margin-top:.15rem}
.confirm-table{width:100%;border-collapse:collapse;background:var(--white);
  border:1px solid #EACFCF;border-radius:var(--r-sm);overflow:hidden;font-size:12.5px}
.confirm-table th{background:#F7EAEA;color:#6E1515;text-align:left;
  font-size:11px;letter-spacing:.05em;text-transform:uppercase;padding:.4rem .6rem}
.confirm-table td{padding:.38rem .6rem;border-top:1px solid #F0DEDE;
  font-variant-numeric:tabular-nums}

/* "this lot is waiting to be logged in" — shown when a submission is open */
.tolog{
  display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;
  background:#FFFBEB;border:1px solid #F0DFA8;border-radius:var(--r-md);
  padding:.75rem 1rem;margin-bottom:.8rem;
}
.tolog b{display:block;font-size:14px;color:#7A5B12}
.tolog span{display:block;font-size:12.5px;color:var(--ink-2);margin-top:.1rem}
.tolog .actions{gap:.5rem}
.tolog input[type=date]{font-size:13px;padding:.4rem .55rem}

/* the quiet pointer to the sidebar when nothing is open */
.tohint{
  display:flex;align-items:center;gap:.55rem;
  margin:0 0 .8rem;padding:.6rem .85rem;
  background:var(--g-pale);border:1px solid var(--g-line);border-radius:var(--r-md);
  font-size:12.5px;color:var(--ink-2);
}
.tohint b{color:var(--g)}
.tohint svg{flex:none;color:var(--g)}

.bulkbar .sep{width:1px;height:22px;background:var(--g-line)}

/* a row that has not been logged in yet */
.qc tr.unlogged td{background:#FFFDF6}
.qc .numcell{font-weight:700;color:var(--g);text-align:right;font-variant-numeric:tabular-nums;
  font-size:11px;letter-spacing:0;padding-left:.15rem;padding-right:.25rem}
.qc .numcell .pending{font-style:normal;font-weight:400;color:var(--ink-3)}
/* the COA number opens a pre-filled certificate; underline only on hover so a
   wall of 600 numbers does not turn into a wall of blue links */
.qc .numcell .coalink{color:inherit;text-decoration:none;border-radius:3px;padding:0 .1rem}
.qc .numcell .coalink:hover,
.qc .numcell .coalink:focus-visible{text-decoration:underline;background:var(--g-pale);outline:none}

/* the Yes / No columns, coloured like the old sheet */
.qc select.yn{font-weight:700;text-align:left}
.qc select.yn-yes{background-color:var(--ok-bg);color:var(--ok);border-color:var(--ok-line)}
.qc select.yn-no{background-color:var(--stop-bg);color:var(--stop);border-color:var(--stop-line)}

/* Three columns need room. Below this the log would be squeezed to the point
   of being hard to read, so the alerts move to a full-width strip under it
   rather than stealing width from the thing you are actually working in. */
@media (max-width:1500px){
  .qc-layout,
  .qc-layout.no-subs,
  .qc-layout.no-watch,
  .qc-layout.no-subs.no-watch{grid-template-columns:224px minmax(0,1fr)}
  .qc-layout.no-subs,
  .qc-layout.no-subs.no-watch{grid-template-columns:minmax(0,1fr)}
  .watchpane{
    grid-column:1 / -1;position:static;max-height:none;
    display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  }
  .watchpane .watch{border-bottom:0;border-right:1px solid var(--rule)}
  .watchpane .watch:last-child{border-right:0}
}

@media (max-width:1100px){
  .qc-layout,
  .qc-layout.no-subs,
  .qc-layout.no-watch,
  .qc-layout.no-subs.no-watch{grid-template-columns:1fr}
  .watchpane{position:static;max-height:none}
  .subs{position:static;max-height:320px}
}

/* ===========================================================================
   Client order form — laid out to match the PDF the lab issues
   =========================================================================== */

body.sheet{background:var(--g-paler)}
.sheet-actions{
  width:min(1000px,100% - 3rem);margin:0 auto 1rem;
  display:flex;gap:.6rem;justify-content:flex-end;
}

.order{
  width:min(1000px,100% - 3rem);margin:0 auto;
  background:var(--white);border:1px solid var(--rule);
  padding:clamp(1.4rem,3.5vw,2.4rem);box-shadow:var(--lift);
  font-size:12px;color:#111;
}

.ord-head{text-align:center;padding-bottom:.7rem}
.ord-head h1{font-size:19px;font-family:var(--serif);font-weight:600;color:#111;letter-spacing:0}
.ord-head p{font-size:11px;color:#444;margin:.25rem 0 0}

.ord-meta{
  display:grid;grid-template-columns:1fr 1fr;gap:.3rem 2.2rem;
  padding:.7rem 0;border-top:1px solid #333;border-bottom:1px solid #333;
}
.ord-meta div{display:flex;gap:.4rem;align-items:baseline;font-size:11.5px}
.ord-meta span{color:#555;white-space:nowrap}
.ord-meta b{font-weight:700;color:#111}

.ord-title{
  text-align:center;font-family:var(--serif);font-weight:600;font-size:15px;
  color:#111;margin:1.1rem 0 .7rem;
}

.ord-table{width:100%;border-collapse:collapse;font-size:11px;table-layout:fixed}
.ord-table th{
  background:var(--g);color:#FFF;font-weight:600;font-size:11px;
  padding:.4rem .3rem;text-align:left;line-height:1.25;vertical-align:bottom;
}
.ord-table td{padding:.3rem .28rem;border-bottom:1px solid #DDD;vertical-align:top;line-height:1.25;
  overflow-wrap:anywhere}
.ord-table tbody tr:nth-child(even) td{background:#F6F8F9}
.ord-table .c-n{width:3%;text-align:right}
.ord-table .c-num{width:4%;text-align:right}
.ord-table .c-amt{width:7%;white-space:nowrap}
.ord-table .c-yn{width:7.4%;text-align:center;padding-left:.12rem;padding-right:.12rem}
.ord-table .c-tot{width:8.4%;text-align:right;white-space:nowrap}
.ord-table th:nth-child(2),.ord-table td:nth-child(2){width:12.5%}
.ord-table th:nth-child(5),.ord-table td:nth-child(5){width:10.5%}
.ord-table th:nth-child(6),.ord-table td:nth-child(6){width:9.5%}
.ord-table th{overflow-wrap:normal;word-break:normal;hyphens:none}
.ord-table th.c-n,.ord-table th.c-num,.ord-table th.c-tot{text-align:right}
.ord-table th.c-yn{text-align:center}

.ord-cols{
  display:grid;grid-template-columns:1.15fr 1fr;gap:2rem;
  margin-top:1.3rem;
}
.ord-cols h3{
  font-size:11.5px;font-family:var(--sans);font-weight:700;color:#111;
  margin-bottom:.4rem;
}
.ord-cols table{width:100%;border-collapse:collapse;font-size:11px}
.ord-cols th{
  text-align:left;font-weight:700;font-size:11px;color:#333;
  border-bottom:1px solid #333;padding:.3rem .2rem;
}
.ord-cols td{padding:.3rem .2rem;border-bottom:1px solid #E6E6E6}
.ord-cols .c-tot{text-align:right;white-space:nowrap}
.ord-summary tfoot td{
  border-top:1.5px solid #333;border-bottom:0;
  font-weight:700;font-size:12px;padding-top:.45rem;
}
.ord-fine{font-size:11px;color:#555;line-height:1.45;margin:.6rem 0 0}

.ord-notes{margin-top:1.3rem;padding-top:.8rem;border-top:1px solid #DDD}
.ord-notes h3{font-size:11.5px;font-weight:700;color:#111;font-family:var(--sans);margin-bottom:.3rem}
.ord-notes p{font-size:11px;color:#333;line-height:1.5;margin:0}

.ord-foot{
  margin-top:1.4rem;padding-top:.6rem;border-top:1px solid #333;
  font-size:11px;color:#555;display:flex;justify-content:space-between;gap:1rem;
}

@media screen and (max-width:820px){
  .ord-meta{grid-template-columns:1fr}
  .ord-cols{grid-template-columns:1fr}
  .order{overflow-x:auto}
}

@media print{
  @page{size:letter portrait;margin:11mm}
  html,body,body.sheet{background:#FFF !important}
  .topbar,.foot,.sheet-actions,.no-print{display:none !important}
  main{width:100%;max-width:none;padding:0;margin:0}
  .order{width:100%;margin:0;padding:0;border:0;box-shadow:none;font-size:9pt}

  .ord-head{padding-bottom:.35rem}
  .ord-head h1{font-size:15pt}
  .ord-head p{font-size:7.5pt}
  .ord-meta{padding:.3rem 0;gap:.1rem 1.6rem}
  .ord-meta div{font-size:8.5pt}
  .ord-title{font-size:11pt;margin:.45rem 0 .35rem}

  .ord-table{font-size:7pt}
  .ord-table th{padding:.25rem .2rem;font-size:6.4pt;
    background:var(--g) !important;color:#FFF !important;
    -webkit-print-color-adjust:exact;print-color-adjust:exact}
  .ord-table td{padding:.17rem .2rem;line-height:1.18}
  .ord-table tbody tr:nth-child(even) td{background:#F4F6F7 !important;
    -webkit-print-color-adjust:exact;print-color-adjust:exact}

  .ord-meta{grid-template-columns:1fr 1fr}
  .ord-cols{grid-template-columns:1.15fr 1fr;margin-top:.5rem;gap:1.3rem}
  .ord-cols h3{font-size:8.5pt;margin-bottom:.2rem}
  .ord-cols table{font-size:7.2pt}
  .ord-cols th,.ord-cols td{padding:.18rem .15rem}
  .ord-summary tfoot td{font-size:9pt;padding-top:.3rem}
  .ord-fine{font-size:6.4pt;margin-top:.4rem}

  .ord-notes{margin-top:.5rem;padding-top:.35rem}
  .ord-notes h3{font-size:8.5pt}
  .ord-notes p{font-size:7.4pt;line-height:1.4}

  .ord-foot{margin-top:.45rem;padding-top:.3rem;font-size:6.4pt}

  .ord-table tr,.ord-notes{break-inside:avoid}
}

/* view toggles in the QC log action bar */
.viewtog{
  display:inline-flex;align-items:center;gap:.35rem;
  font-size:11.5px;font-weight:600;color:var(--g);
  padding:.2rem .5rem;border-radius:var(--r-sm);cursor:pointer;white-space:nowrap;
}
.viewtog:hover{background:rgba(255,255,255,.55)}
.viewtog input{width:14px;height:14px}

/* the checkbox column is only as wide as the box itself */
.qc thead th:first-child,.qc tbody td:first-child{padding-left:.25rem;padding-right:.15rem;text-align:center}
/* the Yes/No headers are the tightest labels in the table */
.qc thead th:nth-child(12),.qc thead th:nth-child(13),
.qc thead th:nth-child(14),.qc thead th:nth-child(15){padding-left:.1rem;padding-right:.1rem}

/* the running count down the left of the log */
.qc .rowno{color:var(--ink-3);text-align:right;font-size:11px;padding-right:.3rem}

/* the submissions page */
.subs-table .cell-in{font-size:12px}
.subs-table td{padding:.42rem .35rem}
.pill-new{
  display:inline-block;margin-left:.3rem;font-size:11px;font-weight:700;
  background:var(--warn-bg);color:var(--warn);border:1px solid var(--warn-line);
  padding:.02rem .3rem;border-radius:100px;
}
details.panel.danger{border-color:var(--stop-line);background:#FFFCFB}
details.panel.danger>summary{color:var(--stop)}
details.panel.danger>summary::after{border-color:var(--stop)}
details.panel.danger>summary .ico{color:var(--stop)}
.btn-danger{background:var(--stop);color:var(--white);border-color:var(--stop)}
.btn-danger:hover{background:#7F231B;color:var(--white)}
.sent-ok{font-size:11px;font-weight:700;color:var(--ok);background:var(--ok-bg);
  border:1px solid var(--ok-line);padding:.1rem .45rem;border-radius:100px}
.sent-no{font-size:11px;font-weight:700;color:var(--warn);background:var(--warn-bg);
  border:1px solid var(--warn-line);padding:.1rem .45rem;border-radius:100px}
.sent-na{font-size:11px;color:var(--ink-3)}
/* the host refused it — this must not look like success */
.sent-bad{font-size:11px;font-weight:700;color:#8A1C1C;background:#FDECEC;
  border:1px solid #F2C4C4;padding:.1rem .45rem;border-radius:100px;cursor:help}