/* ===========================================================================
   IRIS portal , field instrument
   Palette sampled from the logo itself: navy #002048, iris blue #005090,
   lime #C8E800. Dark chassis, light readout, one live signal colour.
   =========================================================================== */

:root{
  /* chassis */
  --ink:#00101F; --navy:#002048; --navy-2:#062C5A; --navy-3:#123F76;
  --iris:#005090; --iris-2:#0A66AE; --iris-lit:#63A6E8;
  /* the live signal */
  --lime:#C8E800; --lime-2:#D6F52E; --lime-ink:#16210A; --lime-text:#5F7000;
  /* readout surfaces */
  --paper:#EEF2F7; --panel:#FFFFFF; --panel-2:#F7F9FC; --panel-3:#E7EDF5;
  --line:#D7DFEA; --line-2:#7C8C9D;
  --text:#0A1626; --text-2:#3E5064; --text-3:#57687C;
  --on-navy:#EAF1FA; --on-navy-2:#B3C6DE; --on-navy-3:#8FA8C6;
  /* status */
  --ok:#0B7A4B; --ok-bg:#E1F4EB; --ok-line:#B4E0CB;
  --warn:#8A5A00; --warn-bg:#FCF1DC; --warn-line:#EBD3A4;
  --stop:#A81E12; --stop-bg:#FCEAE7; --stop-line:#EFC3BC;
  --info-bg:#E7F0FA; --info-line:#BCD5EE;

  --e1:0 1px 2px rgba(2,20,45,.06);
  --e2:0 6px 16px -6px rgba(2,20,45,.18), 0 1px 3px rgba(2,20,45,.07);
  --e3:0 22px 48px -18px rgba(2,20,45,.30), 0 2px 6px rgba(2,20,45,.08);
  --inset:inset 0 1px 0 rgba(255,255,255,.07);

  --r-sm:8px; --r:10px; --r-lg:14px; --pill:999px;
  --t:150ms cubic-bezier(.2,.8,.2,1);
  --t-slow:460ms cubic-bezier(.16,1,.3,1);

  --f:'Inter Tight',ui-sans-serif,system-ui,-apple-system,sans-serif;
  --fh:'Plus Jakarta Sans','Inter Tight',Arial,sans-serif;
  --fm:'Martian Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  --tap:48px; --rail:236px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

body{
  margin:0;background:var(--paper);color:var(--text);
  font-family:var(--f);font-size:16px;line-height:1.55;font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{font-family:var(--fh);margin:0;line-height:1.15;letter-spacing:-.022em;text-wrap:balance;font-weight:700}
h1{font-size:clamp(1.6rem,5vw,2.15rem);font-weight:800;letter-spacing:-.032em}
h2{font-size:1.2rem}
h3{font-size:1rem}
p{margin:0 0 14px;max-width:68ch}
a{color:var(--iris);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--iris-2)}
small{font-size:.8rem}
img{max-width:100%;display:block}
svg{flex:none}
:focus-visible{outline:2px solid var(--iris);outline-offset:2px;border-radius:4px}

/* ---------------------------------------------------------------- chassis */
.chassis{background:var(--navy);color:var(--on-navy);position:sticky;top:0;z-index:60;box-shadow:var(--e2)}
.chassis-in{max-width:1240px;margin:0 auto;padding:0 16px;display:flex;align-items:center;gap:14px;min-height:60px}
.mark{display:flex;align-items:center;gap:10px;text-decoration:none;flex:none}
.mark img{height:26px;width:auto}
.mark .div{width:1px;height:20px;background:rgba(255,255,255,.2)}
.mark .role{font-family:var(--fh);font-weight:600;font-size:.82rem;color:var(--on-navy-2);letter-spacing:.01em;white-space:nowrap}
.chassis .grow{flex:1}
.chassis-who{display:flex;align-items:center;gap:8px;min-width:0}
.chassis-who a{color:var(--on-navy);text-decoration:none;font-size:.86rem;font-weight:500;max-width:34vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chassis-who a:hover{color:#fff}
.linkbtn{background:none;border:none;font:inherit;font-size:.86rem;color:var(--on-navy-2);cursor:pointer;padding:6px 2px;white-space:nowrap}
.linkbtn:hover{color:#fff}

.tabs{background:var(--navy-2);position:sticky;top:60px;z-index:55;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs ul{display:flex;gap:0;list-style:none;margin:0 auto;padding:0 8px;max-width:1240px}
.tabs a{display:flex;align-items:center;gap:8px;padding:12px 14px;white-space:nowrap;color:var(--on-navy-2);
  text-decoration:none;font-size:.9rem;font-weight:500;border-bottom:2px solid transparent;transition:color var(--t),border-color var(--t)}
.tabs a:hover{color:#fff}
.tabs a[aria-current]{color:#fff;border-bottom-color:var(--lime);font-weight:600}
.tabs a svg{opacity:.85}

main{max-width:1240px;margin:0 auto;padding:22px 16px 120px}
main.narrow{max-width:760px}
main.reading{max-width:820px}

.foot{max-width:1240px;margin:0 auto;padding:0 16px 44px;color:var(--text-3);font-size:.8rem;line-height:1.6}
.foot a{color:var(--text-3)}

/* ------------------------------------------------------------------ panel */
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px;margin-bottom:16px;box-shadow:var(--e1)}
.panel.flush{padding:0;overflow:hidden}
.panel-head{display:flex;align-items:flex-start;gap:14px;margin-bottom:14px}
.panel-head .grow{flex:1;min-width:0}
.panel-head h2{margin-bottom:2px}
.sub{color:var(--text-2);font-size:.92rem;margin:0}
.muted{color:var(--text-3)}
.rule{border:none;border-top:1px solid var(--line);margin:18px 0}
.stack{display:flex;flex-direction:column;gap:16px}
.cols{display:grid;gap:16px}
@media(min-width:820px){.cols.two{grid-template-columns:1fr 1fr}.cols.three{grid-template-columns:repeat(3,1fr)}}

/* ----------------------------------------------------------------- readout
   The signature: the reference code as an instrument display. */
.readout{
  max-width:560px;
  position:relative;background:linear-gradient(180deg,var(--navy-2),var(--ink));
  border-radius:var(--r-lg);padding:26px 20px 22px;color:#fff;overflow:hidden;
  box-shadow:var(--e3),var(--inset);
}
.readout::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 50% -10%,rgba(200,232,0,.13),transparent 62%)}
.readout-top{display:flex;align-items:center;gap:8px;position:relative;font-family:var(--fm);
  font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--on-navy-2)}
.readout-top .grow{flex:1}
.live{display:inline-flex;align-items:center;gap:6px;color:var(--lime)}
.live i{width:7px;height:7px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 0 rgba(200,232,0,.6);animation:pulse 2.4s ease-out infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(200,232,0,.55)}70%{box-shadow:0 0 0 9px rgba(200,232,0,0)}100%{box-shadow:0 0 0 0 rgba(200,232,0,0)}}
.readout-code{position:relative;font-family:var(--fm);font-weight:700;color:#fff;
  font-size:clamp(1.9rem,9vw,3.1rem);letter-spacing:.02em;line-height:1.06;margin:16px 0 0;text-align:center;
  font-variant-numeric:tabular-nums}
.readout-code span{display:inline-block;transition:opacity var(--t)}
.readout-bars{position:relative;margin:16px auto 0;display:block;max-width:340px;width:100%;height:38px}
.readout-note{position:relative;text-align:center;margin:14px 0 0;font-size:.88rem;color:var(--on-navy);opacity:.9}
.readout.small{padding:16px;max-width:640px}
.readout.small .readout-code{font-size:1.5rem;margin-top:8px}
.readout.small .readout-bars{height:26px;margin-top:10px}

/* code as inline data */
.code{font-family:var(--fm);font-weight:600;font-size:.82em;letter-spacing:.02em;
  background:var(--panel-3);color:var(--navy);border-radius:6px;padding:3px 7px;white-space:nowrap;text-decoration:none;display:inline-block}
a.code{transition:background var(--t),color var(--t)}
a.code:hover{background:var(--navy);color:#fff}
.mono{font-family:var(--fm);font-variant-numeric:tabular-nums;letter-spacing:.01em}

/* ---------------------------------------------------------------- controls */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:var(--tap);
  padding:12px 22px;border-radius:var(--r);border:1px solid transparent;background:var(--lime);color:var(--lime-ink);
  font:inherit;font-family:var(--fh);font-weight:700;font-size:.98rem;letter-spacing:-.005em;text-decoration:none;cursor:pointer;
  box-shadow:0 2px 0 rgba(2,20,45,.14);transition:transform var(--t),box-shadow var(--t),background var(--t),border-color var(--t),color var(--t)}
.btn:hover{background:var(--lime-2);color:var(--lime-ink)}
.btn:active{transform:translateY(2px);box-shadow:0 0 0 rgba(2,20,45,0)}
.btn:disabled{background:var(--panel-3);color:var(--text-3);border-color:var(--line);box-shadow:none;cursor:not-allowed;transform:none}
.btn.navy{background:var(--navy);color:#fff}
.btn.navy:hover{background:var(--navy-3)}
.btn.ghost{background:var(--panel);color:var(--text);border-color:var(--line-2);box-shadow:var(--e1)}
.btn.ghost:hover{background:var(--panel-2);border-color:var(--iris);color:var(--iris)}
.btn.onnavy{background:rgba(255,255,255,.09);color:#fff;border-color:rgba(255,255,255,.24);box-shadow:none}
.btn.onnavy:hover{background:rgba(255,255,255,.16)}
.btn.sm{min-height:38px;padding:8px 14px;font-size:.86rem;gap:6px;border-radius:var(--r-sm)}
.btn.block{width:100%}
.btn.danger{background:var(--stop);color:#fff}
.btns{display:flex;gap:10px;flex-wrap:wrap}
.btns.fill>*{flex:1 1 200px}

.iconbtn{width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--line);background:var(--panel);
  border-radius:var(--r-sm);color:var(--text-3);cursor:pointer;transition:all var(--t)}
.iconbtn:hover{color:var(--iris);border-color:var(--iris);background:var(--panel-2)}
.iconbtn.danger:hover{color:var(--stop);border-color:var(--stop)}

/* ------------------------------------------------------------------ fields */
label{display:block;font-size:.84rem;font-weight:600;color:var(--text-2);margin-bottom:6px}
label .req{color:var(--stop);margin-left:3px}
.field{margin-bottom:16px}
.field:last-child{margin-bottom:0}
.hint{font-size:.79rem;color:var(--text-3);margin-top:5px;line-height:1.45}
input[type=text],input[type=email],input[type=tel],input[type=date],input[type=time],input[type=number],
input[type=datetime-local],input[type=search],input[type=password],select,textarea{
  width:100%;min-height:var(--tap);padding:12px 13px;font:inherit;font-size:1rem;color:var(--text);
  background:var(--panel);border:1px solid var(--line-2);border-radius:var(--r-sm);appearance:none;
  transition:border-color var(--t),box-shadow var(--t),background var(--t)}
input::placeholder,textarea::placeholder{color:var(--text-3)}
select{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233E5064' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 9 7 7 7-7'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:17px;padding-right:40px}
textarea{min-height:92px;resize:vertical;line-height:1.5}
input:hover,select:hover,textarea:hover{border-color:var(--line-2)}
input:focus,select:focus,textarea:focus{border-color:var(--iris);outline:none;box-shadow:0 0 0 3px rgba(0,80,144,.14)}
input[readonly]{background:var(--panel-3);color:var(--text-2);border-style:dashed}
.grid{display:grid;gap:14px}
@media(min-width:660px){
  .grid.half{grid-template-columns:1fr 1fr}
  .grid.third{grid-template-columns:repeat(3,1fr)}
  .grid.quarter{grid-template-columns:repeat(4,1fr)}
}
fieldset{border:none;margin:0;padding:0;min-width:0}
.choices{display:flex;flex-wrap:wrap;gap:8px}
.choice{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:9px 14px;border:1px solid var(--line-2);
  border-radius:var(--r-sm);background:var(--panel);cursor:pointer;font-size:.93rem;font-weight:500;color:var(--text-2);
  transition:all var(--t);margin:0}
.choice:hover{border-color:var(--iris);color:var(--iris)}
.choice input{width:19px;height:19px;margin:0;accent-color:var(--iris);flex:none}
.choice:has(input:checked){border-color:var(--navy);background:var(--navy);color:#fff;font-weight:600}
.choice:has(input:checked) input{accent-color:var(--lime)}

/* ---------------------------------------------------------- sample cards */
.samples{display:flex;flex-direction:column;gap:10px}
.sample{border:1px solid var(--line);border-radius:var(--r);background:var(--panel);overflow:hidden;transition:border-color var(--t),box-shadow var(--t)}
.sample[open]{border-color:var(--line-2);box-shadow:var(--e2)}
.sample-bar{display:flex;align-items:center;gap:12px;padding:12px 13px;cursor:pointer;list-style:none;user-select:none;background:var(--panel)}
.sample-bar::-webkit-details-marker{display:none}
.sample-bar:hover{background:var(--panel-2)}
.sample-n{font-family:var(--fm);font-size:.68rem;font-weight:700;letter-spacing:.06em;color:var(--navy);
  background:var(--panel-3);border-radius:6px;padding:5px 8px;flex:none}
.sample-sum{flex:1;min-width:0;font-size:.92rem;color:var(--text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sample-sum b{color:var(--text);font-weight:600}
.sample-sum .empty{color:var(--text-3)}
.sample-state{flex:none;display:inline-flex;align-items:center;gap:6px;font-size:.72rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;color:var(--text-3)}
.sample-state i{width:8px;height:8px;border-radius:50%;background:var(--line-2)}
.sample-state.done{color:var(--ok)}
.sample-state.done i{background:var(--ok)}
.sample-chev{flex:none;color:var(--text-3);transition:transform var(--t)}
.sample[open] .sample-chev{transform:rotate(180deg)}
.sample-body{padding:4px 13px 15px;border-top:1px solid var(--line)}
.sample-tools{display:flex;gap:8px;padding-top:12px;margin-top:12px;border-top:1px dashed var(--line)}

/* --------------------------------------------------------------- progress */
.steps{display:flex;gap:0;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;margin-bottom:18px;box-shadow:var(--e1)}
.steps a{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:11px 8px;text-decoration:none;
  font-size:.84rem;font-weight:600;color:var(--text-3);border-right:1px solid var(--line);transition:all var(--t);position:relative}
.steps a:last-child{border-right:none}
.steps a:hover{background:var(--panel-2);color:var(--text)}
.steps a[aria-current]{color:var(--navy);background:var(--panel-2)}
.steps a[aria-current]::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--lime)}
.steps .n{font-family:var(--fm);font-size:.68rem;font-weight:700;width:20px;height:20px;border-radius:50%;
  background:var(--panel-3);color:var(--text-3);display:grid;place-items:center;flex:none}
.steps a[aria-current] .n{background:var(--navy);color:#fff}
.steps .done .n{background:var(--ok);color:#fff}

/* ------------------------------------------------------------------ chips */
.chip{display:inline-flex;align-items:center;gap:6px;font-size:.7rem;font-weight:700;letter-spacing:.05em;
  padding:4px 9px;border-radius:var(--pill);text-transform:uppercase;white-space:nowrap;border:1px solid transparent}
.chip i{width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.chip.draft{background:var(--panel-3);color:var(--text-2);border-color:var(--line)}
.chip.submitted{background:var(--info-bg);color:var(--iris);border-color:var(--info-line)}
.chip.received{background:var(--ok-bg);color:var(--ok);border-color:var(--ok-line)}
.chip.queried{background:var(--warn-bg);color:var(--warn);border-color:var(--warn-line)}
.chip.closed{background:var(--panel-3);color:var(--text-3);border-color:var(--line)}
.chip.review{background:var(--stop-bg);color:var(--stop);border-color:var(--stop-line)}
.chip.free{background:var(--navy);color:var(--lime);border-color:var(--navy)}
.chip.soon{background:var(--panel-3);color:var(--text-3);border-color:var(--line)}
.chip.lime{background:var(--lime);color:var(--lime-ink);border-color:var(--lime)}

/* ------------------------------------------------------------------ notes */
.note{border:1px solid var(--info-line);background:var(--info-bg);border-radius:var(--r);
  padding:13px 15px;margin-bottom:14px;font-size:.92rem;color:var(--text);display:flex;gap:11px;align-items:flex-start;max-width:70ch}
.note svg{color:var(--iris);margin-top:1px}
.note b{display:block;font-family:var(--fh);font-weight:700;margin-bottom:2px;font-size:.95rem}
.note p:last-child{margin-bottom:0}
.note.warn{border-color:var(--warn-line);background:var(--warn-bg)}
.note.warn svg{color:var(--warn)}
.note.stop{border-color:var(--stop-line);background:var(--stop-bg)}
.note.stop svg{color:var(--stop)}
.note.ok{border-color:var(--ok-line);background:var(--ok-bg)}
.note.ok svg{color:var(--ok)}
.note ul{margin:6px 0 0;padding-left:18px}
.note li{margin-bottom:3px}

/* the physical handling instruction, treated as a stencil */
.handling{background:var(--ink);color:var(--lime);border-radius:var(--r);padding:12px 16px;margin-bottom:14px;
  font-family:var(--fm);font-weight:700;font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;
  display:flex;align-items:center;gap:11px;line-height:1.5}
.handling svg{color:var(--lime);flex:none}

/* ------------------------------------------------------------------ lists */
.rows{display:flex;flex-direction:column;gap:9px}
.row{display:block;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:14px;
  text-decoration:none;color:inherit;transition:border-color var(--t),box-shadow var(--t),transform var(--t)}
a.row:hover{border-color:var(--iris);box-shadow:var(--e2);transform:translateY(-1px)}
.row-1{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:6px}
.row-1 b{font-family:var(--fh);font-weight:700;font-size:1rem}
.row-2{font-size:.9rem;color:var(--text-2)}
.row-3{font-size:.79rem;color:var(--text-3);margin-top:5px}

/* ----------------------------------------------------------------- tables */
.tbl{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--panel);box-shadow:var(--e1)}
table{border-collapse:collapse;width:100%;font-size:.9rem;min-width:600px}
th{text-align:left;font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;color:var(--text-3);
  background:var(--panel-2);padding:11px 14px;border-bottom:1px solid var(--line);white-space:nowrap;font-weight:700;
  position:sticky;top:0;z-index:2}
td{padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:middle;font-variant-numeric:tabular-nums}
tr:last-child td{border-bottom:none}
tbody tr{transition:background var(--t)}
tbody tr:hover{background:var(--panel-2)}
td.num{text-align:right}
td.wrap{white-space:normal;min-width:200px}

/* ------------------------------------------------------------------ facts */
.facts{margin:0;display:block}
.facts>div{display:flex;gap:14px;padding:10px 0;border-top:1px solid var(--line);align-items:baseline}
.facts>div:first-child{border-top:none;padding-top:0}
.facts dt{flex:0 0 40%;font-size:.72rem;text-transform:uppercase;letter-spacing:.07em;color:var(--text-3);font-weight:700;margin:0}
.facts dd{flex:1;margin:0;font-size:.95rem;min-width:0;overflow-wrap:anywhere}
@media(min-width:660px){.facts dt{flex-basis:220px}}

/* ---------------------------------------------------------------- filters */
.filters{display:flex;gap:7px;overflow-x:auto;padding-bottom:3px;margin-bottom:14px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.filters::-webkit-scrollbar{display:none}
.filters a{flex:none;display:inline-flex;align-items:center;gap:7px;padding:8px 15px;border:1px solid var(--line-2);
  background:var(--panel);border-radius:var(--pill);font-size:.86rem;font-weight:600;color:var(--text-2);
  text-decoration:none;transition:all var(--t);white-space:nowrap}
.filters a:hover{border-color:var(--iris);color:var(--iris)}
.filters a[aria-current]{background:var(--navy);border-color:var(--navy);color:#fff}
.filters a[aria-current] .n{color:var(--lime)}
.filters .n{font-family:var(--fm);font-size:.74rem;color:var(--text-3)}

/* ------------------------------------------------------------ scan search */
.scan{background:linear-gradient(180deg,var(--navy-2),var(--navy));border-radius:var(--r-lg);padding:18px;
  box-shadow:var(--e2),var(--inset);margin-bottom:16px}
.scan label{color:var(--on-navy-2);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  font-family:var(--fm);font-weight:600;margin-bottom:9px}
.scan-row{display:flex;gap:9px}
.scan input{font-family:var(--fm);font-size:1.15rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.22);color:#fff;min-height:52px}
.scan input::placeholder{color:var(--on-navy-3);letter-spacing:.06em}
.scan input:focus{background:rgba(255,255,255,.1);border-color:var(--lime);box-shadow:0 0 0 3px rgba(200,232,0,.18)}
.scan .hint{color:var(--on-navy-3);margin-top:9px}
.scan .btn{min-height:52px}

/* ------------------------------------------------------------------ media */
.frame{position:relative;padding-top:56.25%;background:var(--ink);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--e2)}
.frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.frame .soon{position:absolute;inset:0;display:grid;place-content:center;text-align:center;gap:10px;padding:26px;color:var(--on-navy-2)}
.frame .soon b{color:#fff;font-family:var(--fh);font-size:1.05rem}
.frame .soon svg{margin:0 auto;color:var(--lime);opacity:.8}
.bar{height:4px;background:var(--panel-3);border-radius:2px;overflow:hidden;margin-top:8px;max-width:190px}
.bar i{display:block;height:100%;background:var(--lime);border-radius:2px}

/* ----------------------------------------------------------------- thread */
.msg{border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;margin-bottom:9px;background:var(--panel-2)}
.msg.iris{background:var(--warn-bg);border-color:var(--warn-line)}
.msg .who{font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:var(--text-3);font-weight:700;margin-bottom:5px}
.msg p{margin:0;font-size:.94rem}

/* ----------------------------------------------------------------- photos */
.photos{display:grid;grid-template-columns:repeat(auto-fill,minmax(94px,1fr));gap:9px;margin-top:12px}
.photos figure{margin:0;position:relative}
.photos img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--r-sm);border:1px solid var(--line)}
.photos button{position:absolute;top:5px;right:5px;width:26px;height:26px;border-radius:50%;border:none;
  background:rgba(0,16,31,.72);color:#fff;cursor:pointer;display:grid;place-items:center;transition:background var(--t)}
.photos button:hover{background:var(--stop)}

/* ------------------------------------------------------------- action bar */
.actionbar{position:sticky;bottom:0;z-index:40;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);
  border-top:1px solid var(--line-2);padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  margin:22px -16px 0;display:flex;gap:11px;align-items:center;box-shadow:0 -6px 20px -12px rgba(2,20,45,.3)}
.actionbar .state{flex:1;min-width:0;font-size:.78rem;color:var(--text-3);display:flex;align-items:center;gap:7px;line-height:1.35}
.actionbar .state svg{flex:none;color:var(--text-3)}
.actionbar .state.saved svg{color:var(--ok)}
.actionbar .state.local svg{color:var(--warn)}

/* --------------------------------------------------------------- supplies */
.catgroup{margin-bottom:26px}
.catgroup>h2{display:flex;align-items:center;gap:11px;margin-bottom:12px;font-size:1.05rem}
.catgroup>h2::after{content:"";flex:1;height:1px;background:var(--line)}
.catgroup>h2{position:sticky;top:112px;z-index:10;background:var(--paper);padding:8px 0}
.itemlist{border:1px solid var(--line);border-radius:var(--r);background:var(--panel);overflow:hidden;box-shadow:var(--e1)}
.item{display:flex;align-items:flex-start;gap:16px;padding:15px;border-top:1px solid var(--line);transition:background var(--t)}
.item:first-child{border-top:none}
.item:hover{background:var(--panel-2)}
.item.in{background:var(--info-bg)}
.item-main{flex:1;min-width:0}
.item h3{font-size:.97rem;margin-bottom:4px}
.item p{font-size:.87rem;color:var(--text-2);margin:0 0 7px;max-width:62ch}
.item .sku{font-size:.78rem;color:var(--text-3)}
.item .sku .mono{font-size:.72rem;letter-spacing:.02em}
.item-action{flex:none;display:flex;align-items:center;min-height:48px}
.item .add{min-height:48px;padding:10px 20px}
.stepper{display:none;align-items:center;border:1px solid var(--navy);border-radius:var(--r-sm);overflow:hidden;background:var(--panel)}
.item.in .stepper{display:inline-flex}
.item.in .add{display:none}
.stepper button{width:48px;height:48px;border:none;background:var(--panel);color:var(--navy);cursor:pointer;display:grid;place-items:center;transition:background var(--t)}
.stepper button:hover{background:var(--panel-3)}
.stepper output{min-width:48px;text-align:center;font-family:var(--fm);font-weight:700;font-size:.92rem;
  border-left:1px solid var(--line);border-right:1px solid var(--line);height:48px;line-height:48px;color:var(--navy)}
.item[hidden]{display:none}

.basket{position:fixed;left:0;right:0;bottom:0;z-index:70;background:var(--navy);color:#fff;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));box-shadow:0 -10px 30px -10px rgba(2,20,45,.5);
  transform:translateY(110%);transition:transform var(--t-slow);display:flex;align-items:center;gap:14px}
.basket.up{transform:translateY(0)}
.basket .count{font-family:var(--fm);font-weight:700;font-size:.92rem}

.basket .grow{flex:1}

/* ------------------------------------------------------------- offline bar */
#offline{display:none;background:var(--warn);color:#fff;text-align:center;padding:9px 16px;font-size:.85rem;
  font-weight:600;align-items:center;justify-content:center;gap:9px}
body.is-offline #offline{display:flex}

/* ----------------------------------------------------------------- empties */
.empty{text-align:center;padding:52px 20px;color:var(--text-3);background:var(--panel);
  border:1px dashed var(--line-2);border-radius:var(--r-lg)}
.empty svg{color:var(--line-2);margin:0 auto 14px}
.empty h3{color:var(--text);margin-bottom:6px;font-size:1.1rem}
.empty p{margin:0 auto 16px;max-width:44ch}

/* ================================================================= console
   Luana and Elaine live here all day. Denser, sidebar, keyboard-first. */
body.console{background:var(--paper)}
.console-shell{display:block}
.console-main{padding:20px 16px 90px;margin:0;max-width:none}
.rail{background:var(--navy);color:var(--on-navy)}
.rail-in{display:flex;align-items:center;gap:12px;padding:10px 16px;min-height:56px;max-width:none}
.rail nav{display:flex;overflow-x:auto;scrollbar-width:none;background:var(--navy-2)}
.rail nav::-webkit-scrollbar{display:none}
.rail nav a{display:flex;align-items:center;gap:8px;padding:12px 15px;color:var(--on-navy-2);text-decoration:none;
  font-size:.88rem;font-weight:500;white-space:nowrap;border-bottom:2px solid transparent;transition:all var(--t)}
.rail nav a:hover{color:#fff}
.rail nav a[aria-current]{color:#fff;border-bottom-color:var(--lime);font-weight:600}
.rail nav .n{font-family:var(--fm);font-size:.72rem;background:rgba(255,255,255,.12);padding:1px 6px;border-radius:var(--pill)}
.rail nav a[aria-current] .n{background:var(--lime);color:var(--lime-ink)}

@media(min-width:1024px){
  .console-shell{display:grid;grid-template-columns:var(--rail) 1fr;min-height:100vh}
  .rail{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;overflow-y:auto}
  .rail-in{padding:18px 18px 14px;min-height:0;flex-direction:column;align-items:flex-start;gap:14px}
  .rail nav{flex-direction:column;background:none;padding:0 10px;gap:2px;overflow:visible}
  .rail nav a{border-bottom:none;border-radius:var(--r-sm);padding:10px 12px;position:relative}
  .rail nav a:hover{background:rgba(255,255,255,.07)}
  .rail nav a[aria-current]{background:rgba(255,255,255,.11);color:#fff}
  .rail nav a[aria-current]::before{content:"";position:absolute;left:-10px;top:8px;bottom:8px;width:3px;
    background:var(--lime);border-radius:0 3px 3px 0}
  .rail nav a .grow{flex:1}
  .rail-foot{margin-top:auto;padding:16px 18px;border-top:1px solid rgba(255,255,255,.1);font-size:.78rem;color:var(--on-navy-3)}
  .console-main{padding:26px 26px 80px;margin:0;max-width:1400px}
}
.console-main h1{font-size:clamp(1.4rem,3.4vw,1.75rem)}
body.console table{font-size:.87rem}
body.console td{padding:10px 14px}
body.console th{padding:9px 14px}

/* ------------------------------------------------------------------ misc */
.split{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.split .grow{flex:1}
.dl{display:flex;gap:8px;align-items:center;font-size:.86rem;color:var(--text-2);text-decoration:none;
  padding:11px 13px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--panel);transition:all var(--t)}
.dl:hover{border-color:var(--iris);color:var(--iris);background:var(--panel-2)}
.dl svg{color:var(--text-3);flex:none}
.dl:hover svg{color:var(--iris)}
.prose h2{margin:30px 0 10px}
.prose h3{margin:22px 0 7px}
.prose p,.prose li{color:var(--text-2);max-width:68ch}
.prose ol,.prose ul{margin:0 0 14px;padding-left:22px}
.prose li{margin-bottom:7px}
.prose strong{color:var(--text);font-weight:600}
.prose .lead{font-size:1.06rem;color:var(--text);max-width:64ch}

@media print{.chassis,.tabs,.actionbar,.basket,.rail,.no-print{display:none!important}body{background:#fff}
  .panel{box-shadow:none;border-color:#ccc}}

/* ---------- review pass ---------- */
/* Rows inside a panel are a ruled list, not cards inside a card. */
.panel .rows{gap:0}
.panel .rows>.row{border:none;border-radius:0;border-top:1px solid var(--line);padding:13px 0;box-shadow:none}
/* The divider goes, the padding stays. Zeroing padding-top on the first row
   made its hover box sit flush against the text at the top with 13px under it,
   so the highlight looked lopsided. The list is pulled up by the same amount
   instead, which keeps the row where it was and the box even on both sides. */
.panel .rows>.row:first-child{border-top:none}
.panel .rows{margin-top:-13px}
.panel .rows>a.row:hover{transform:none;box-shadow:none;background:var(--panel-2);
  border-radius:var(--r-sm);padding-left:10px;padding-right:10px;margin-left:-10px;margin-right:-10px}
.panel .rows>.row .row-1 b{font-size:.96rem}

/* Basket reads as a sentence; only the number is instrument type. */
.basket .count{font-family:var(--f);font-weight:500;font-size:.95rem;white-space:nowrap}
.basket .count b{font-family:var(--fm);font-weight:700;color:var(--lime);font-size:1.05rem}
.basket .btn{white-space:nowrap;flex:none}
@media(max-width:420px){.basket .count{white-space:normal;line-height:1.3}}

/* Give the customer column room before it wraps. */
td.wrap{min-width:230px}
.tbl td .sub{margin-top:2px}

/* The logo needs to breathe against the chassis. */
.mark img{height:24px}
@media(min-width:640px){.mark img{height:27px}}
.rail .mark img{height:26px}
.sample-bar .iconbtn{width:34px;height:34px;flex:none;border-color:transparent;background:transparent;color:var(--text-3)}
.sample-bar .iconbtn:hover{border-color:var(--stop);color:var(--stop);background:var(--panel)}

/* On a touch device every control grows to a gloved-hand target. The lab
   console keeps its denser sizes, because it is driven with a mouse. */
@media (pointer: coarse){
  .btn.sm{min-height:44px;padding:10px 16px}
  .iconbtn,.sample-bar .iconbtn{width:44px;height:44px}
  .linkbtn{padding:12px 4px}
  .filters a{padding:11px 16px}
  .tabs a{padding:14px 14px}
  .dl{min-height:48px}
}


/* ---------- finish review ---------- */

/* Focus must be visible on the chassis, the rail and every navy panel.
   Lime on navy is 11.5:1 and is already the instrument's own signal colour. */
.chassis :focus-visible,.tabs :focus-visible,.rail :focus-visible,.hero :focus-visible,
.scan :focus-visible,.readout :focus-visible,.basket :focus-visible{outline-color:var(--lime)}

/* The tab strip must look like it scrolls, not like it ends. */
.tabs{position:sticky}
.tabs-wrap{position:relative}
.tabs-wrap::after{content:"";position:absolute;top:0;right:0;bottom:0;width:44px;pointer-events:none;
  background:linear-gradient(90deg,rgba(6,44,90,0),var(--navy-2));opacity:1;transition:opacity var(--t)}
.tabs-wrap.at-end::after{opacity:0}
@media(min-width:900px){.tabs-wrap::after{display:none}}

/* Below 660px a data table becomes a list. The Watch button and the Balance
   figure are the point of those pages and must not sit off-screen. */
@media(max-width:659px){
  .tbl.stack{border:none;box-shadow:none;background:none;overflow:visible}
  .tbl.stack table{min-width:0;display:block}
  .tbl.stack thead{display:none}
  .tbl.stack tbody{display:block}
  .tbl.stack tr{display:block;background:var(--panel);border:1px solid var(--line);
    border-radius:var(--r);padding:14px;margin-bottom:9px}
  .tbl.stack tr:hover{background:var(--panel)}
  .tbl.stack td{display:block;border:none;padding:0;white-space:normal}
  .tbl.stack td+td{margin-top:9px}
  .tbl.stack td.num{text-align:left}
  .tbl.stack td[data-label]::before{content:attr(data-label);display:block;font-size:.66rem;
    text-transform:uppercase;letter-spacing:.09em;color:var(--text-3);font-weight:700;margin-bottom:3px}
  .tbl.stack td.hide-sm{display:none}
  .tbl.stack .btn{width:100%}
}

/* Measure: nothing runs to 150 characters. */
.row-2,.row-3{max-width:78ch}
body.console .prose p,body.console .prose li{max-width:72ch}


/* A hover that can actually be seen. */
.panel .rows>a.row:hover{background:var(--panel-2);box-shadow:inset 0 0 0 1px var(--line-2)}

/* Only the number carries the signal colour. */
.basket .count{color:var(--on-navy)}
.basket .count #basket-label{color:var(--on-navy)}
.basket .count #basket-n{color:var(--lime)}

@media(max-width:479px){
  .split.wrap-sm{flex-direction:column;align-items:stretch}
  .split.wrap-sm .btn{width:100%}
}

/* The home hero: what it says on the left, what it does on the right. */
/* the readout panel the home banner carries in its aside slot */
.hero-show{border:1px solid rgba(255,255,255,.16);border-radius:var(--r);padding:16px;background:rgba(255,255,255,.04);align-self:center}
.hero-show .readout-code{font-size:clamp(1.5rem,6vw,2rem);margin-top:10px}
.hero-show .readout-bars{height:30px;margin-top:12px;max-width:none}
.hero-show-link{display:inline-flex;align-items:center;gap:7px;margin-top:12px;color:var(--lime);
  text-decoration:none;font-size:.86rem;font-weight:600}
.hero-show-link:hover{color:#fff}
/* the picker's handling stencil sits inside a row */
.row .handling{margin:10px 0 8px;font-size:.7rem;padding:9px 12px}

/* ===========================================================================
   PHOTOGRAPHY
   The portal opens on the work it is about , a lab bench, a crawlspace, a
   cooler being unpacked, instead of another white card on grey.
   Every photograph is laid under a navy wash sampled from the chassis, so the
   type on top passes contrast on its own and the picture stays atmosphere.
   =========================================================================== */

/* -------------------------------------------------------------- page banner */
.pagehead{
  position:relative;isolation:isolate;background:var(--ink);color:#fff;overflow:hidden;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.pagehead-shot{
  position:absolute;inset:0;z-index:0;
  background-image:var(--shot);
  background-size:cover;background-position:center 42%;background-repeat:no-repeat;
  transform:scale(1.03);
}
/* a phone gets the small cut: a quarter of the bytes over a bad connection */
@media(max-width:760px){.pagehead-shot{background-image:var(--shot-sm,var(--shot))}}
/* the wash: navy from the left so the words always land on the darkest part,
   plus a floor gradient so the bottom edge meets the page cleanly */
.pagehead::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(100deg, rgba(0,16,31,.96) 0%, rgba(0,32,72,.90) 34%, rgba(0,32,72,.62) 62%, rgba(0,32,72,.44) 100%),
    linear-gradient(0deg, rgba(0,16,31,.85) 0%, rgba(0,16,31,0) 42%);
}
.pagehead.open::before{
  background:
    linear-gradient(100deg, rgba(0,16,31,.90) 0%, rgba(0,32,72,.72) 40%, rgba(0,32,72,.34) 100%),
    linear-gradient(0deg, rgba(0,16,31,.78) 0%, rgba(0,16,31,0) 46%);
}
/* the lime signal, carried up from the readout so the banner belongs to the set */
.pagehead::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;z-index:3;
  background:linear-gradient(90deg,var(--lime),rgba(200,232,0,0) 62%);
}
.pagehead-in{
  position:relative;z-index:2;max-width:1240px;margin:0 auto;padding:34px 16px 30px;
  display:grid;gap:22px;align-items:center;
}
.pagehead.tall .pagehead-in{padding:52px 16px 46px}
.pagehead-say{min-width:0}
.pagehead .eyebrow{
  font-family:var(--fm);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--lime);margin:0 0 10px;font-weight:600;
}
.pagehead h1{color:#fff;margin:0;max-width:19ch;text-shadow:0 1px 24px rgba(0,16,31,.5)}
.pagehead .lede{color:var(--on-navy);margin:12px 0 0;max-width:56ch;font-size:1rem}
.pagehead .btns{margin-top:20px}
.pagehead-aside{min-width:0}
@media(min-width:900px){
  .pagehead-in{grid-template-columns:1.3fr .7fr;gap:36px;padding:44px 16px 40px}
  .pagehead.tall .pagehead-in{padding:66px 16px 58px}
  .pagehead-shot{background-position:center 38%}
}
/* the console rail already owns the left edge, so the banner squares off there.
   min-width:0 keeps the grid column from being widened by the banner or by a
   wide queue table , without it the whole console shifts and the rail clips. */
.console-main{min-width:0}
.console-main>.pagehead{margin:-26px -26px 22px;border-radius:0}
@media(max-width:1023px){.console-main>.pagehead{margin:-20px -16px 18px}}
.console-main>.pagehead .pagehead-in{max-width:none;padding:26px 26px 24px}
@media(max-width:1023px){.console-main>.pagehead .pagehead-in{padding:22px 16px 20px}}

/* ------------------------------------------------------- the readout, on art
   The home banner carries the live code panel in its aside slot. Over a
   photograph it needs its own ground, so it gets a blurred navy plate rather
   than the translucent film it used over the old flat gradient. */
.pagehead .hero-show{
  border:1px solid rgba(255,255,255,.20);border-radius:var(--r);padding:16px;
  background:rgba(0,16,31,.58);backdrop-filter:blur(8px) saturate(1.1);
  box-shadow:0 18px 40px -20px rgba(0,0,0,.7);
}
.pagehead .hero-show .readout-code{font-size:clamp(1.5rem,5vw,2rem);margin-top:10px}
.pagehead .hero-show .readout-bars{height:30px;margin-top:12px;max-width:none}
/* the home banner leans further right so the readout is not fighting the bench */
.pagehead .hero-show + *,.pagehead-aside{align-self:center}

/* ------------------------------------------------------- page ground, lifted
   A flat grey field made every panel read as a card floating on nothing. This
   puts a faint navy horizon behind the content so panels sit on something. */
body{
  background:
    radial-gradient(120% 60% at 50% 0, rgba(0,80,144,.10), rgba(0,80,144,0) 70%),
    var(--paper);
  background-attachment:fixed;
}
body.console{background:var(--paper)}

/* -------------------------------------------------------------- inset shot
   A photograph used as the ground of a panel rather than as a banner. */
.shotpanel{position:relative;isolation:isolate;overflow:hidden;border-radius:var(--r-lg);
  color:#fff;background:var(--ink);padding:26px 22px;margin-bottom:16px;box-shadow:var(--e3)}
.shotpanel .shot{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center}
.shotpanel::before{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(100deg,rgba(0,16,31,.94),rgba(0,32,72,.72) 55%,rgba(0,32,72,.48))}
.shotpanel>*{position:relative;z-index:2}
.shotpanel h2,.shotpanel h3{color:#fff}
.shotpanel p{color:var(--on-navy)}

/* ------------------------------------------------------------- signin split */
.signin{display:grid;gap:0;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--e3);
  background:var(--panel);border:1px solid var(--line)}
.signin-shot{position:relative;min-height:190px;background:var(--ink);
  background-image:url('/img/field-basement.jpg');background-size:cover;background-position:center 40%}
@media(max-width:760px){.signin-shot{background-image:url('/img/field-basement-sm.jpg')}}
.signin-shot::before{content:"";position:absolute;inset:0;
  background:linear-gradient(160deg,rgba(0,16,31,.72),rgba(0,32,72,.52) 60%,rgba(0,32,72,.72))}
.signin-shot .signin-say{position:relative;padding:24px 22px;color:#fff;height:100%;
  display:flex;flex-direction:column;justify-content:flex-end}
.signin-shot .eyebrow{font-family:var(--fm);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--lime);margin:0 0 8px;font-weight:600}
.signin-shot p{color:var(--on-navy);margin:6px 0 0;font-size:.9rem;max-width:34ch}
.signin-shot b{color:#fff;font-family:var(--fh);font-size:1.05rem;font-weight:700}
.signin-form{padding:26px 22px}
.signin-form h1{margin-bottom:8px}
@media(min-width:820px){
  .signin{grid-template-columns:.9fr 1.1fr}
  .signin-shot{min-height:100%}
  .signin-form{padding:34px 30px}
}

/* ------------------------------------------------------------- sticky floor
   On a short page (sign in, an empty list) the footer used to stop wherever the
   content stopped, stranding the address block halfway up the screen with dead
   space under it. Holding the shell to the viewport pushes it to the floor. */
body:not(.console){min-height:100dvh;display:flex;flex-direction:column}
/* width:100% matters. `main` and the footer centre themselves with `margin:0
   auto`, and an auto margin on the cross axis eats the free space instead of
   stretching, which leaves them sized to their widest child rather than to the
   viewport. Being explicit puts the max-width back in charge. */
body:not(.console)>main{flex:1 0 auto;width:100%}
body:not(.console)>.foot{flex:none;margin-top:auto;width:100%}
body:not(.console)>header,body:not(.console)>.tabs-wrap{flex:none;width:100%}

/* ===========================================================================
   TWO UP
   Pages were one column of full-width cards, so everything below the first
   card was a scroll away and the last thing on a page was four folds down.
   These put the page on two tracks and hold it to two or three folds.
   =========================================================================== */

/* ------------------------------------------------------------ launch pair
   The two ways into a job, side by side at the top of the page, instead of
   one at the top and the other stranded under the whole catalogue. */
.launch{display:grid;gap:12px;margin-bottom:20px}
@media(min-width:720px){.launch{grid-template-columns:1fr 1fr}}
.launch-block{
  position:relative;display:flex;flex-direction:column;gap:8px;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:18px 18px 16px;text-decoration:none;color:inherit;box-shadow:var(--e1);
  transition:border-color var(--t),box-shadow var(--t),transform var(--t);
}
a.launch-block:hover{border-color:var(--iris);box-shadow:var(--e2);transform:translateY(-1px)}
.launch-block .ico{
  width:38px;height:38px;border-radius:var(--r-sm);display:grid;place-items:center;
  background:var(--panel-3);color:var(--navy);margin-bottom:2px;
}
.launch-block h2{font-size:1.05rem}
.launch-block p{font-size:.88rem;color:var(--text-2);margin:0;max-width:44ch}
.launch-block .go{
  margin-top:auto;padding-top:10px;display:inline-flex;align-items:center;gap:7px;
  font-size:.86rem;font-weight:600;color:var(--iris);
}
a.launch-block:hover .go{color:var(--iris-2)}
/* the primary of the pair wears the chassis colours */
.launch-block.lead{background:linear-gradient(160deg,var(--navy-2),var(--ink));border-color:var(--ink);color:#fff}
.launch-block.lead h2{color:#fff}
.launch-block.lead p{color:var(--on-navy)}
.launch-block.lead .ico{background:rgba(255,255,255,.10);color:var(--lime)}
.launch-block.lead .go{color:var(--lime)}
a.launch-block.lead:hover{border-color:var(--lime)}
a.launch-block.lead:hover .go{color:#fff}

/* ------------------------------------------------------------------ tiles
   The form picker as a grid of app tiles: a mark and a name on each, no prose.
   Squares, four across on a desk and two on a phone, so the forms sit in one
   screen and the eye finds a word instead of reading a paragraph.
   Navy tile for a form, lime for the fastest way in (repeat the last job),
   light for the other way in (upload the paper form). */
.tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:8px}
@media(min-width:720px){.tiles{grid-template-columns:repeat(3,1fr);gap:14px}}
@media(min-width:1024px){.tiles{grid-template-columns:repeat(4,1fr)}}
.tile{
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  aspect-ratio:1;padding:18px 14px;text-align:center;text-decoration:none;
  background:linear-gradient(160deg,var(--navy-3),var(--navy));color:#fff;
  border:1px solid var(--navy-2);border-radius:var(--r-lg);box-shadow:var(--e1);
  transition:border-color var(--t),box-shadow var(--t),transform var(--t);
}
.tile:hover,.tile:focus-visible{border-color:var(--lime);box-shadow:var(--e2);transform:translateY(-2px);color:#fff}
.tile-ico{display:grid;place-items:center;width:58px;height:58px;border-radius:50%;
  background:rgba(255,255,255,.08);color:var(--lime);margin-bottom:2px}
.tile b{font-family:var(--fh);font-weight:700;font-size:1.02rem;line-height:1.2;letter-spacing:-.015em;text-wrap:balance}
.tile small{font-size:.76rem;color:var(--on-navy-2);line-height:1.3;max-width:20ch}
.tile .chip{position:absolute;top:10px;right:10px}
.tile.lead{background:linear-gradient(160deg,var(--lime-2),var(--lime));color:var(--lime-ink);border-color:var(--lime)}
.tile.lead .tile-ico{background:rgba(0,32,72,.10);color:var(--navy)}
.tile.lead small{color:var(--lime-text)}
.tile.lead:hover,.tile.lead:focus-visible{border-color:var(--navy);color:var(--lime-ink)}
.tile.alt{background:var(--panel);color:var(--navy);border-color:var(--line)}
.tile.alt .tile-ico{background:var(--panel-3);color:var(--navy)}
.tile.alt small{color:var(--text-3)}
.tile.alt:hover,.tile.alt:focus-visible{border-color:var(--iris);color:var(--navy)}
@media(max-width:419px){
  .tile{gap:8px;padding:14px 10px}
  .tile-ico{width:48px;height:48px}
  .tile-ico svg{width:28px;height:28px}
  .tile b{font-size:.92rem}
}

/* ------------------------------------------------------------- two-up rows
   The same row card, laid on two tracks. Halves the page. */
@media(min-width:880px){
  .rows.two{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-content:start}
  .rows.two .row{display:flex;flex-direction:column}
  .rows.two .row .row-3{margin-top:auto;padding-top:5px}
}

/* --------------------------------------------------------- two-up catalogue
   32 supply items stacked was five folds. As cards on two tracks it is two. */
@media(min-width:900px){
  .itemlist{display:grid;grid-template-columns:1fr 1fr;gap:10px;
    background:none;border:none;box-shadow:none;overflow:visible}
  .itemlist .item{border:1px solid var(--line);border-radius:var(--r);background:var(--panel)}
  .itemlist .item:first-child{border-top:1px solid var(--line)}
  .itemlist .item:hover{background:var(--panel-2)}
}

/* ------------------------------------------------------------- two-up prose
   Long explainers read as columns rather than one endless scroll. Each panel
   stays whole: `break-inside` stops a heading being orphaned from its text. */
@media(min-width:960px){
  .prose-cols{column-count:2;column-gap:18px}
  .prose-cols>*{break-inside:avoid;margin-bottom:16px}
}

/* ------------------------------------------------------- invoice documents */
.doclinks{display:flex;flex-direction:column;gap:5px;align-items:flex-start}
.doclink{display:inline-flex;align-items:center;gap:6px;font-size:.83rem;font-weight:600;
  color:var(--iris);text-decoration:none;padding:3px 0}
.doclink:hover{color:var(--iris-2);text-decoration:underline}
.doclink svg{flex:none;opacity:.8}

/* --------------------------------------------------- catalogue, three tracks
   32 items is a catalogue, not a list. On a wide screen it takes three tracks
   and the whole thing is inside two folds. */
@media(min-width:1180px){
  .itemlist{grid-template-columns:repeat(3,1fr)}
}
@media(min-width:900px){
  .itemlist .item{padding:13px;gap:10px}
  .itemlist .item h3{font-size:.93rem}
  .itemlist .item p{font-size:.83rem;margin-bottom:5px}
  .itemlist .item-action{min-height:0}
  .itemlist .item .add{min-height:40px;padding:8px 14px}
  .itemlist .stepper button{width:40px;height:40px}
  .itemlist .stepper output{min-width:40px;height:40px;line-height:40px}
}
/* the category rule no longer needs to be sticky once the list is short */
@media(min-width:900px){.catgroup>h2{position:static;padding:4px 0}.catgroup{margin-bottom:20px}}

/* ------------------------------------------------------------ topic cards */
.topics{display:grid;gap:10px}
@media(min-width:820px){.topics{grid-template-columns:1fr 1fr}}
@media(min-width:1240px){.topics{grid-template-columns:repeat(3,1fr)}}
.topic{display:flex;flex-direction:column;gap:9px;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r);padding:14px;transition:border-color var(--t),box-shadow var(--t),transform var(--t)}
.topic:hover{border-color:var(--iris);box-shadow:var(--e2);transform:translateY(-1px)}
.topic-say{text-decoration:none;color:inherit;display:block}
.topic-top{display:flex;align-items:center;gap:8px;margin-bottom:7px}
.topic-top .grow{flex:1}
.topic-type{font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3);font-weight:700}
.topic-dur{font-size:.75rem;color:var(--text-2)}
.topic h3{font-size:.97rem;margin-bottom:5px}
.topic p{font-size:.86rem;color:var(--text-2);margin:0}
.topic-foot{display:flex;align-items:center;gap:10px;margin-top:auto;padding-top:4px;flex-wrap:wrap}
.topic-foot .grow{flex:1}
.topic-link{font-size:.8rem;font-weight:600;color:var(--iris);text-decoration:none;white-space:nowrap}
.topic-link:hover{text-decoration:underline}

/* one line for search and filters, instead of two stacked blocks */
.findbar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.findbar-search{display:flex;gap:9px;flex:none;width:min(340px,100%)}
.findbar .filters{margin:0;flex:1;min-width:0}

/* ------------------------------------------------------------ three tracks */
@media(min-width:900px){
  .rows.three{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;align-content:start}
  .rows.three .row{display:flex;flex-direction:column}
  .rows.three .row .row-3{margin-top:auto;padding-top:5px}
}
@media(min-width:1240px){.rows.three{grid-template-columns:repeat(3,1fr)}}
/* the card's own label for the group it belongs to, now that the group heading is gone */
.row-0{display:flex;align-items:center;gap:6px;font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;
  font-weight:700;color:var(--text-3);margin-bottom:7px}
.row-0 svg{opacity:.7}

/* On a phone the filter chips scroll sideways, which is right for a thumb.
   On a desktop there is width to spare, so they wrap instead of running off
   the edge with the last one sliced in half. */
@media(min-width:900px){
  .filters{flex-wrap:wrap;overflow-x:visible;row-gap:7px}
  .findbar{align-items:flex-start}
  .findbar-search{padding-top:0}
}

/* A flush list inside a panel divides its items with a top rule, and drops that
   rule on the first one. On two tracks the first *row* is two items, not one,
   so the second column started a rule lower than the first and the two columns
   never lined up. */
@media(min-width:880px){
  .panel .rows.two{gap:0 26px}
  .panel .rows.two>.row:nth-child(-n+2){border-top:none}
}
@media(min-width:900px){
  .panel .rows.three{gap:0 26px}
  .panel .rows.three>.row:nth-child(-n+2){border-top:none}
}
@media(min-width:1240px){
  .panel .rows.three>.row:nth-child(3){border-top:none}
}

/* ------------------------------------------------------------- copy field */
.copyrow{display:flex;gap:8px;align-items:stretch}
.copyrow input{flex:1;min-width:0;font-size:.82rem;background:var(--panel-2)}
.copyrow .btn{flex:none;white-space:nowrap}

/* ===========================================================================
   THE CATALOGUE AS A SHOP
   A row of text and an Add button is a spare parts list. A picture is how
   somebody recognises the cassette they are holding, so each item is a tile:
   photograph, name, what it is for, then the control.
   =========================================================================== */
.itemlist .item{flex-direction:column;align-items:stretch;gap:0;padding:0;overflow:hidden}
.item-shot{
  position:relative;aspect-ratio:4/3;background:#F2F5F8;flex:none;
  border-bottom:1px solid var(--line);
}
.item-shot img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform var(--t-slow);
}
.itemlist .item:hover .item-shot img{transform:scale(1.04)}
.itemlist .item-main{padding:13px 14px 10px;flex:1;min-width:0}
.itemlist .item-action{padding:0 14px 13px;min-height:0;justify-content:flex-start}
.itemlist .item .add{width:100%;justify-content:center}
.itemlist .item .stepper{width:100%}
.itemlist .item .stepper output{flex:1}
/* an item already in the basket wears the signal rather than a wash of colour */
.itemlist .item.in{background:var(--panel);box-shadow:inset 0 0 0 2px var(--lime)}
.itemlist .item.in .item-shot{border-bottom-color:var(--lime)}

/* the phone gets a compact two-up shelf rather than one giant tile per screen */
@media(max-width:899px){
  .itemlist{display:grid;grid-template-columns:1fr 1fr;gap:10px;border:none;background:none;box-shadow:none}
  .itemlist .item{border:1px solid var(--line);border-radius:var(--r);background:var(--panel)}
  .itemlist .item:first-child{border-top:1px solid var(--line)}
  .itemlist .item-main{padding:11px 12px 8px}
  .itemlist .item h3{font-size:.9rem}
  .itemlist .item p{display:none}
  .itemlist .item-action{padding:0 12px 11px}
}

/* A catalogue of 32 is allowed to scroll, but not like that. Four tracks on a
   wide screen, a shorter crop, and the tile stops being mostly photograph. */
@media(min-width:1180px){
  .itemlist{grid-template-columns:repeat(4,1fr)}
}
.item-shot{aspect-ratio:16/11}
@media(min-width:900px){
  .itemlist .item-main{padding:11px 12px 8px}
  .itemlist .item h3{font-size:.9rem;line-height:1.25}
  .itemlist .item p{font-size:.8rem;margin-bottom:5px;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .itemlist .item .sku{font-size:.72rem}
  .itemlist .item-action{padding:0 12px 11px}
  .itemlist .item .add{min-height:36px;padding:7px 12px;font-size:.85rem}
  .itemlist .stepper button{width:36px;height:36px}
  .itemlist .stepper output{min-width:36px;height:36px;line-height:36px}
}

/* ------------------------------------------------ customer submission detail */
.status-rail{
  display:grid;gap:8px;margin:2px 0 16px;
  grid-template-columns:repeat(auto-fit,minmax(128px,1fr));
}
.status-rail>div{
  display:flex;align-items:center;gap:8px;padding:10px 11px;border:1px solid var(--line);
  border-radius:var(--r);background:var(--panel-2);font-size:.82rem;font-weight:650;color:var(--text-2);
}
.status-rail i{
  width:10px;height:10px;border-radius:50%;background:var(--line-2);box-shadow:0 0 0 3px rgba(0,0,0,.03);
  flex:none;
}
.status-rail .done{color:var(--text)}
.status-rail .done i{background:var(--ok)}
.status-rail .now{border-color:var(--iris);background:#F4F8FF;color:var(--ink)}
.status-rail .now i{background:var(--lime);box-shadow:0 0 0 4px rgba(200,232,0,.24)}

.sample-cards{display:grid;gap:12px}
@media(min-width:920px){.sample-cards{grid-template-columns:1fr 1fr}}
.sample-card{
  border:1px solid var(--line);border-radius:var(--r);background:var(--panel);
  padding:14px;box-shadow:var(--e1);
}
.sample-card-head{display:flex;align-items:flex-start;gap:10px;margin-bottom:12px}
.sample-card h3{font-size:1rem;margin:1px 0 2px}
.sample-facts{display:grid;grid-template-columns:1fr;gap:8px;margin:0}
@media(min-width:620px){.sample-facts{grid-template-columns:1fr 1fr}}
.sample-facts div,.facts.compact div{min-width:0}
.sample-facts dt,.facts.compact dt{
  font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;font-weight:700;color:var(--text-3);
}
.sample-facts dd,.facts.compact dd{margin:2px 0 0;color:var(--text);overflow-wrap:anywhere}
.sample-more{margin-top:10px;border-top:1px solid var(--line);padding-top:9px}
.sample-more summary{cursor:pointer;font-size:.82rem;font-weight:650;color:var(--iris)}

/* ------------------------------------------------ supplies checkout */
.catalog-section{margin-bottom:22px}
.section-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin:0 0 10px;
}
.section-head h2{margin:0;font-size:1.05rem}
.section-head>span{font-size:.78rem;color:var(--text-3);font-weight:650}
.checkout{scroll-margin-top:18px}
.checkout-lines{
  display:grid;gap:8px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--panel-2);padding:10px;margin-bottom:14px;
}
.checkout-line{
  display:flex;align-items:center;gap:10px;justify-content:space-between;
  padding:8px 9px;border-radius:var(--r-sm);background:var(--panel);
}
.checkout-line b{font-size:.88rem}
.checkout-line span{font-size:.76rem;color:var(--text-2)}

/* ------------------------------------------------ LMS sections */
.lms{display:grid;gap:18px}
.lms-section{
  border-top:1px solid var(--line);padding-top:16px;
}
.lms-section:first-child{border-top:none;padding-top:0}
.lms-section .section-head{align-items:flex-start}