/* ------------------------------------------------------------------ *
 * A bottle label, drawn to the cut sizes in mm and the type sizes in pt
 * the approved artwork uses. Shared by stickers.html, which prints sheets
 * of these, and kits.html, which shows one as a preview while the kit's
 * components are being edited — the two must draw the same label or the
 * preview is worth nothing.
 *
 * Every coordinate below was read out of
 *   Stickers/OxMag Viral RNADNA purification kit  MAG-009-01.ai
 * (a PDF underneath, so its geometry can be measured rather than eyeballed)
 * and is written here as millimetres from the label's own top-left corner.
 * That is why the blocks are positioned rather than stacked: the .ai file's
 * rules start and stop where they do — the line beside "Solution A" runs from
 * 9.2 to 24.27 mm and crosses two rows of content, and the rule above REF/LOT
 * does not reach the left half of the label at all — and no arrangement of
 * borders on flex boxes puts them there.
 *
 * The page that includes this must set --red, --navy, --label and --rule;
 * the defaults below are the artwork's own, so a page that sets none still
 * draws correctly.
 * ------------------------------------------------------------------ */
:root{
  --red:#e22127; --navy:#31345c;
  --label:Arial,Helvetica,"Liberation Sans",sans-serif;
  --narrow:"Arial Narrow","Liberation Sans Narrow",Arial,Helvetica,sans-serif;
  /* the weight of a label's rules - see "the rules on a label" below -
     and of the crop marks the sheet sets around each one */
  --rule:.2mm; --rule-out:.22mm;
}

/* ---- a label ------------------------------------------------------- *
   Everything here is in mm and pt so what is cut out fits the bottle. */
/* No outline: the artwork draws none, and a line printed on the label's own
   edge survives an imperfect cut as a black sliver down one side of the
   bottle. What production cuts to are the crop marks the sheet sets in the
   gutter between labels - see stickers.html - which are waste either way. */
.lb{position:relative;width:100%;height:100%;background:#fff;border:0;overflow:hidden;
  font-family:var(--label);color:#1a1a1a;line-height:1;
  -webkit-print-color-adjust:exact;print-color-adjust:exact}

/* A rule where the artwork draws it. `left`/`top` come from the .ai file and
   are set inline; the weight is the one the sheet prints at. */
.lb .rl{position:absolute;background:#111;width:var(--rule);z-index:3}
.lb .rl.h{width:auto;height:var(--rule)}

.lb .head{position:absolute;left:0;right:0;top:0;background:var(--red);color:#fff;
  display:flex;align-items:flex-start;white-space:nowrap;overflow:hidden}
.lb .head .kit{font-weight:700;letter-spacing:-.021em}
.lb .head .tag{font-style:italic;color:#1b2a5e}
.lb .foot{position:absolute;left:0;right:0;bottom:0;background:var(--navy);color:#fff;
  font-weight:700;text-align:right;letter-spacing:.043em;overflow:hidden}
/* The pages that host a label have a .kit, a .tag, a .foot and a .sub of
   their own, for quite different things, and a bare class name in their
   stylesheet reaches inside the label. kits.html's .foot alone carries a
   14 px top margin, which on a block anchored to the bottom of the label
   lifts the whole navy bar off it. Anything of theirs that would move or
   restyle a block is turned off here rather than left to chance. */
.lb .head .kit,.lb .head .tag{display:inline;width:auto;margin:0;padding:0;border:0;
  background:none;border-radius:0;font-size:inherit;text-transform:none}
.lb .head .tag{letter-spacing:normal}
.lb .foot{margin:0;border:0;text-transform:none}
.lb .sub{margin:0;padding:0;background:none;border:0;text-transform:none}

/* The boxed words are the Illustrator sheet's own outlines (label-svg/), so
   they are sized in mm by the label they sit on rather than by a font size:
   the .ai file drew the QTY box 3.26 mm tall on a solution label and 2.20 on
   a small one, which is not the ratio their type sizes are in.

   Every one of them is centred on the reading beside it rather than standing
   on its baseline. That is what the artwork does - on a solution label the
   REF box's middle is at 23.235 mm and the middle of MAG-009-1 at 23.22 -
   and it is what a box the height of a whole line wants: hung from the
   baseline it rides above the number it belongs to. With line-height 1 the
   middle of the line box and the middle of the capitals are 0.01 em apart,
   so centring the row does it. */
.bx{width:auto;vertical-align:middle}
.marks{display:inline-flex;align-items:center;white-space:nowrap}
/* Every block here is set solid - line-height 1 - so that the type sits at the
   millimetre the artwork puts it at. One em is less than Arial actually needs
   though: ascent and descent come to 1.117 em, so the bottom 0.06 em of the
   line falls outside the box, and a box that clips takes the tail of every g,
   y, p and µ with it. The room is given back below the line, where padding
   moves nothing: the baseline stays where it was measured and the descender
   is inside the box again. */
.qty{display:flex;align-items:center;white-space:nowrap;overflow:hidden;padding-bottom:.25em}
/* an amount longer than the artwork's column is cut short rather than pushing
   the CE, IVD and ISO marks off the label - a mark that is not printed is a
   mark the bottle does not carry. That clip is a second box inside .qty's, and
   it needs the descender room given above in its own right or the tail of the
   g in "20 mg" is cut off flat. The padding is taken back as negative margin
   so the flex row still centres the same box it did before and the number
   stays on the millimetre it was measured at. */
.qty .val{color:var(--red);flex:0 1 auto;min-width:0;overflow:hidden;
  padding-bottom:.25em;margin-bottom:-.25em}
.qty .marks{flex:0 0 auto}
.idrow{display:flex;align-items:center;white-space:nowrap;overflow:hidden;
  padding-bottom:.25em;font-family:var(--narrow)}
.idrow .v{font-weight:400}
.idrow .exp{display:inline-flex;align-items:center;margin-left:auto}
.lb svg{display:block}
.lb img{width:auto;display:inline-block}
.nm{font-weight:700;line-height:1;color:#2d2d2d;white-space:nowrap}
.sub{font-style:italic;color:#1a1a1a;white-space:nowrap}

/* maker + EC REP block, on every label but the vial. The three parts sit at
   the coordinates the artwork gives them; the block itself only carries the
   rule that separates it from the label above. */
.maker{position:absolute;left:0;right:0;overflow:hidden}
.maker .mk-f{position:absolute}
.maker .mk-t{position:absolute;white-space:nowrap}
.maker .mk-t .ox{color:#1b2a5e}
.maker .mk-t .ox span{color:var(--red)}
.maker .mk-t .site{font-weight:400}
.maker .mk-t .rd{color:var(--red)}
.maker .mk-r{position:absolute;font-weight:700;color:#1b2a5e;white-space:nowrap;
  font-size:5.88pt}
.maker .mk-r .ec1{position:relative;color:#1b2a5e}
.maker .mk-r .ec1 .bx{position:absolute;left:0}

/* Type sizes below are the artwork's own, read out of the Illustrator file,
   so a rebuilt label sets the same as the one that was approved. */

/* ================================================================== *
 * 100 x 43 solution label   (the artwork draws it 100 x 42.45; the
 * 0.55 mm the cut adds goes to the maker block, so every rule and every
 * line of type above it keeps the .ai file's own distance from the top)
 * ================================================================== */
.lb.sol .head{height:5mm;font-size:9.94pt;padding:.89mm 0 0 2.03mm;gap:2.98mm}
.lb.sol .foot{height:5mm;font-size:8.83pt;padding:.87mm 3.74mm 0 0}

.lb.sol .sl-name{position:absolute;left:2.03mm;top:5.81mm;width:42mm;overflow:hidden;padding-bottom:.25em}
.lb.sol .sl-name.has-sub{top:6.87mm}
.lb.sol .sl-name .nm{font-size:21pt}
.lb.sol .sl-sub{font-size:8pt;margin-top:.57mm;overflow:hidden;padding-bottom:.25em}
.lb.sol .sl-sub .sub{font-style:italic}
/* the ethanol sentence a wash bottle carries, on a label the artwork never
   drew: it wraps inside the name's own column rather than crossing the rule */
.lb.sol .sl-sub.sl-note{font-size:6.6pt;line-height:2.7mm}
.lb.sol .sl-sub.sl-note .sub{display:block}
.lb.sol .sl-sub.sl-note .eth{font-style:italic;color:var(--red)}
.lb.sol .sl-sub.sl-note .tick{height:2.2mm}

.lb.sol .sl-th{position:absolute;left:46.54mm;top:8.93mm}
/* The box the diamonds get, not the diamonds themselves: one or two sit
   where the artwork drew them, and a component with more fills the box
   downwards instead of running under the statements beside it. */
.dia-grid{display:grid;gap:.6mm;justify-items:start;align-items:center}
.lb.sol .sl-dia{position:absolute;left:64.16mm;top:8.95mm;width:15.24mm;height:10.4mm;
  display:grid;justify-items:start;align-items:center}
/* one diamond and no statements beside it: the artwork centres it in the
   whole right-hand block instead of leaving it against the rule */
.lb.sol .sl-dia.solo{left:61.84mm;top:9.86mm;width:38.16mm;height:auto;
  display:flex;justify-content:center;gap:1.55mm}
.lb.sol .sl-h{position:absolute;left:80mm;top:11.88mm;width:16.8mm;text-align:center;
  font-family:var(--narrow);font-size:5.78pt;line-height:3.07mm}

.lb.sol .sl-qty{position:absolute;left:2.36mm;top:20.72mm;font-size:12.11pt}
.lb.sol .sl-qty .bx{height:3.26mm}
.lb.sol .sl-qty .val{margin-left:1.02mm}
.lb.sol .sl-qty .marks{margin-left:1.95mm}
.lb.sol .sl-qty .ce{height:2.7mm}
.lb.sol .sl-qty .ivd{height:3.15mm;margin-left:1.15mm}
.lb.sol .sl-qty .iso{height:3.41mm;margin-left:.64mm}

.lb.sol .sl-ids{position:absolute;left:46.31mm;top:22.14mm;width:51.69mm;font-size:6.57pt}
.lb.sol .sl-ids .bx{height:2.07mm}
.lb.sol .sl-ids .v{margin-left:.59mm}
.lb.sol .sl-ids .lotbox{margin-left:2.09mm}
.lb.sol .sl-ids .hg{height:2.23mm}
.lb.sol .sl-ids .exp .v{margin-left:.47mm}

.lb.sol .maker{top:26.04mm;height:11.96mm;font-size:5.7pt}
.lb.sol .maker .mk-f{left:2.51mm;top:3.02mm}
.lb.sol .maker .mk-f .sym{height:6.16mm}
.lb.sol .maker .mk-t{left:11.12mm;top:1.67mm;line-height:2.72mm}
.lb.sol .maker .mk-r{left:72.76mm;top:1.9mm;line-height:2.82mm}
.lb.sol .maker .mk-r .ec1{padding-left:10.15mm}
.lb.sol .maker .mk-r .bx{height:2.61mm;top:-.41mm}

/* ================================================================== *
 * 100 x 70 wash label — the one size the artwork draws at the cut size
 * ================================================================== */
.lb.wash .head{height:5mm;font-size:9.94pt;padding:.39mm 0 0 3.67mm;gap:2.98mm}
.lb.wash .foot{height:5mm;font-size:8.83pt;padding:.59mm 3.64mm 0 0}

.lb.wash .wa-name{position:absolute;left:3.21mm;top:7.22mm;width:93mm;overflow:hidden;padding-bottom:.25em}
.lb.wash .wa-name .nm{font-size:27pt}
.lb.wash .wa-sub{position:absolute;left:3.32mm;top:18.35mm;width:94mm;
  display:flex;align-items:baseline;white-space:nowrap;overflow:hidden;padding-bottom:.25em}
.lb.wash .wa-sub .sub{font-family:var(--narrow);font-size:12pt;font-style:italic}
.lb.wash .wa-sub .eth{font-size:8pt;font-style:italic;color:var(--red);margin-left:1.76mm}
.lb.wash .wa-sub .tick{height:2.91mm;margin-left:1.34mm}

.lb.wash .wa-qty{position:absolute;left:3.78mm;top:35.14mm;font-size:13.8pt}
.lb.wash .wa-qty .bx{height:4.19mm}
.lb.wash .wa-qty .val{margin-left:1.51mm}
.lb.wash .wa-marks{position:absolute;left:3.64mm;top:49.1mm;
  display:flex;align-items:center}
.lb.wash .wa-marks .ce{height:2.7mm}
.lb.wash .wa-marks .ivd{height:3.15mm;margin-left:1.14mm}
.lb.wash .wa-marks .iso{height:3.41mm;margin-left:.64mm}

.lb.wash .wa-th{position:absolute;left:37.19mm;top:29.48mm}
.lb.wash .wa-dia{position:absolute;left:70.15mm;top:26.08mm;height:19.8mm;
  display:grid;justify-items:start;align-items:center}
/* the statements stand on end beside the diamonds and read upwards, which is
   how the .ai file sets them, and each column is centred on the same line
   across the label rather than hung from a common top */
.lb.wash .wa-h{position:absolute;right:8.4mm;top:26.32mm;height:21mm;
  display:flex;align-items:center;gap:.6mm}
.lb.wash .wa-h span{writing-mode:vertical-rl;transform:rotate(180deg);
  font-family:var(--narrow);font-size:8.64pt;white-space:nowrap}

.lb.wash .wa-ids{position:absolute;left:38.55mm;top:49.42mm;width:56.4mm;font-size:7.51pt}
.lb.wash .wa-ids .bx{height:2.75mm}
.lb.wash .wa-ids .v{margin-left:.7mm}
.lb.wash .wa-ids .lotbox{margin-left:.91mm}
.lb.wash .wa-ids .hg{height:2.92mm}
.lb.wash .wa-ids .exp .v{margin-left:.55mm}

.lb.wash .maker{top:54.2mm;height:10.83mm;font-size:5.7pt}
.lb.wash .maker .mk-f{left:3.47mm;top:2.79mm}
.lb.wash .maker .mk-f .sym{height:6.16mm}
.lb.wash .maker .mk-t{left:12.08mm;top:1.44mm;line-height:2.72mm}
.lb.wash .maker .mk-r{left:71.29mm;top:1.85mm;line-height:2.82mm}
.lb.wash .maker .mk-r .ec1{padding-left:10.5mm}
.lb.wash .maker .mk-r .ec1 .bx{left:.35mm}
.lb.wash .maker .mk-r .bx{height:2.61mm;top:-.21mm}

/* ================================================================== *
 * 80 x 29 small label
 * ================================================================== */
.lb.sm .head{height:4mm;font-size:8.28pt;padding:.6mm 0 0 1.9mm;gap:2.4mm}
.lb.sm .foot{height:4mm;font-size:7.13pt;padding:1mm 3.12mm 0 0}

.lb.sm .sm-name{position:absolute;left:2.05mm;top:4.32mm;width:33mm;overflow:hidden;padding-bottom:.25em}
.lb.sm .sm-name .nm{font-size:12.99pt}
.lb.sm .sm-sub{position:absolute;left:2.1mm;top:9.63mm;width:33mm;font-size:5.75pt;
  overflow:hidden;padding-bottom:.25em}

.lb.sm .sm-qty{position:absolute;left:2.3mm;top:13.47mm;width:32.76mm;font-size:7.69pt}
.lb.sm .sm-qty .bx{height:2.2mm}
.lb.sm .sm-qty .val{margin-left:.3mm}
.lb.sm .sm-qty .marks{margin-left:auto}
.lb.sm .sm-qty .ce{height:1.78mm}
.lb.sm .sm-qty .ivd{height:2.08mm;margin-left:.75mm}
.lb.sm .sm-qty .iso{height:2.25mm;margin-left:.42mm}

.lb.sm .sm-th{position:absolute;left:38.18mm;top:5.06mm}
.lb.sm .sm-dia{position:absolute;left:52.63mm;top:5.54mm;display:flex;gap:.7mm}
.lb.sm .sm-dia .dnf{height:5.3mm}

.lb.sm .sm-ids{position:absolute;left:38.42mm;top:13.56mm;width:39.43mm;font-size:5.1pt}
.lb.sm .sm-ids .bx{height:1.59mm}
.lb.sm .sm-ids .v{margin-left:.45mm}
.lb.sm .sm-ids .lotbox{margin-left:3.89mm}
.lb.sm .sm-ids .hg{height:1.72mm}
.lb.sm .sm-ids .exp .v{margin-left:.37mm}

.lb.sm .maker{top:16.8mm;height:8.2mm;font-size:4.61pt}
.lb.sm .maker .mk-f{left:2.16mm;top:2.28mm}
.lb.sm .maker .mk-f .sym{height:4.99mm}
.lb.sm .maker .mk-t{left:9.14mm;top:1.16mm;line-height:2.21mm}
.lb.sm .maker .mk-r{left:58.69mm;top:1.55mm;font-size:4.79pt;line-height:2.2mm}
.lb.sm .maker .mk-r .ec1{padding-left:7.57mm}
.lb.sm .maker .mk-r .ec1 .bx{left:.15mm}
.lb.sm .maker .mk-r .bx{height:2.11mm;top:-.01mm}

/* ================================================================== *
 * 38 x 19 vial label — no room for the address block, so the name runs
 * the full width and the marks share the bottom line with the ids
 * ================================================================== */
.lb.vial .head{height:2mm}
.lb.vial .foot{height:2mm}

.lb.vial .vl-name{position:absolute;left:1.21mm;top:2.13mm;width:26.5mm;overflow:hidden;padding-bottom:.25em}
.lb.vial .vl-name .nm{font-size:12pt}
.lb.vial .vl-sub{position:absolute;left:1.36mm;top:6.23mm;width:14mm;
  font-family:var(--narrow);font-size:5.5pt;font-style:normal;overflow:hidden;padding-bottom:.25em}

.lb.vial .vl-qty{position:absolute;left:1.34mm;top:11mm;font-size:5.04pt}
.lb.vial .vl-qty .bx{height:1.72mm}
.lb.vial .vl-qty .val{margin-left:.48mm}
.lb.vial .vl-marks{position:absolute;left:1.21mm;top:14.3mm;display:flex;align-items:center}
.lb.vial .vl-marks .ce{height:1.52mm}
.lb.vial .vl-marks .ivd{height:1.78mm;margin-left:.66mm}
.lb.vial .vl-marks .iso{height:1.93mm;margin-left:.35mm}

.lb.vial .vl-th{position:absolute;left:14.98mm;top:7.54mm}
.lb.vial .vl-dia{position:absolute;left:30.6mm;top:6.33mm;display:flex;
  flex-direction:column;gap:.48mm}
.lb.vial .vl-dia.wide{flex-direction:row;left:29.6mm;gap:.3mm}

/* the artwork tracks the vial's identifiers tighter than the font sets them,
   which is the only way REF, LOT and the date fit across 22.6 mm. Tighter than
   that was too tight: at .04 mm the catalogue number touched the REF outline
   and read as part of it. The row still has ~2.2 mm going spare in front of
   the date, so the gap after each boxed word is paid for out of that. */
.lb.vial .vl-ids{position:absolute;left:14.48mm;top:14.58mm;width:22.57mm;font-size:4.2pt;
  letter-spacing:-.06em}
.lb.vial .vl-ids .bx{height:1.63mm}
.lb.vial .vl-ids .v{margin-left:.35mm}
.lb.vial .vl-ids .lotbox{margin-left:.62mm}
.lb.vial .vl-ids .hg{height:1.64mm}
.lb.vial .vl-ids .exp .v{margin-left:.3mm}

/* ================================================================== *
 * 100 x 70 kit box label — the artwork draws this one 71.77 mm tall and
 * it is cut to 70, so 1.77 mm has to come out somewhere. It comes out of
 * the two gaps that carry nothing: 0.37 off the foot of the red band and
 * 1.40 off the space between the body and the maker rule, which leaves
 * every mark, rule and line of type where the .ai file put it to within
 * a millimetre.
 * ================================================================== */
.lb.box .bx-red{position:absolute;left:0;right:0;top:0;height:29.2mm;
  background:var(--red);color:#fff;overflow:hidden}
.lb.box .bx-title{position:absolute;left:3.38mm;top:2.49mm;width:74mm;
  font-family:"Arial Black","Arial Bold",var(--label);font-weight:900;
  font-size:16.79pt;letter-spacing:.016em;line-height:7.11mm;overflow:hidden;padding-bottom:.25em}
.lb.box .bx-tag{position:absolute;left:3.6mm;top:20.95mm;
  font-size:11pt;font-weight:700;font-style:italic}
.lb.box .bx-qr{position:absolute;left:76.98mm;top:3.9mm}

.lb.box .bx-qty{position:absolute;left:2.18mm;top:30.89mm;font-size:13.8pt}
.lb.box .bx-qty .bx{height:4.19mm}
.lb.box .bx-qty .val{margin-left:1.16mm}
.lb.box .bx-marks{position:absolute;left:2.58mm;top:41.62mm;height:3.98mm;
  display:flex;align-items:center}
.lb.box .bx-marks .ce{height:3.15mm}
.lb.box .bx-marks .ivd{height:3.68mm;margin-left:1.35mm}
.lb.box .bx-marks .iso{height:3.98mm;margin-left:.39mm}
.lb.box .bx-bar{position:absolute;left:2.78mm;top:47.33mm}

.lb.box .bx-th{position:absolute;left:40.74mm;top:32.89mm}
.lb.box .bx-dia{position:absolute;left:63.4mm;top:29.62mm;display:grid;
  grid-template-columns:repeat(2,auto);gap:1.08mm 1.7mm}
.lb.box .bx-sds{position:absolute;left:83.79mm;top:36.32mm}
.lb.box .bx-sds .sds{height:4.01mm}

.lb.box .bx-ids{position:absolute;left:40mm;top:50.32mm;width:56.74mm;font-size:8.29pt}
.lb.box .bx-ids .bx{height:3.04mm}
.lb.box .bx-ids .v{margin-left:.63mm}
.lb.box .bx-ids .lotbox{margin-left:2.65mm}
.lb.box .bx-ids .hg{height:3.23mm}
.lb.box .bx-ids .exp .v{margin-left:1.09mm}

.lb.box .maker{top:54.6mm;height:10.4mm;font-size:5.7pt}
.lb.box .maker .mk-f{left:3.76mm;top:2.29mm}
.lb.box .maker .mk-f .sym{height:6.16mm}
.lb.box .maker .mk-t{left:12.37mm;top:.93mm;line-height:2.75mm}
.lb.box .maker .mk-r{left:73.74mm;top:1.34mm;line-height:2.82mm}
.lb.box .maker .mk-r .ec1{padding-left:10.51mm}
.lb.box .maker .mk-r .ec1 .bx{left:.35mm}
.lb.box .maker .mk-r .bx{height:2.61mm;top:-.2mm}
.lb.box .foot{height:5mm;font-size:8.83pt;padding:.8mm 3.98mm 0 0}

.lb.seal{background:none}

/* ---- the rules on a label ------------------------------------------ *
 The sheet's rules are 0.25-0.284 pt hairlines - 0.1 mm - and a CSS border
 cannot draw that at any size. A browser rounds every box edge up to a whole
 device pixel, so a border is stuck at one pixel however thin it is asked to
 be: on paper that is 0.75 pt = 0.265 mm, near three times the artwork, and
 on screen it is why the rules thickened as the sheet was zoomed out and
 thinned as it was zoomed in - the pixel stayed one pixel while the label
 around it grew and shrank. A background is not rounded. So the internal
 rules are drawn as positioned bars (.rl above), which scale with the label
 at every zoom. The label carries no border at all, so a block placed 2.03 mm
 in is 2.03 mm from the cut and not from the inside of a hairline.

 Screen keeps 0.2 mm and paper gets the sheet's own 0.1 mm: at 96 dpi a
 0.1 mm bar is a third of a pixel and washes out to pale grey, while 0.2 mm
 reads as the fine line the artwork draws. On paper there are pixels enough
 to lay down the real thing. */