/* The measuring ruler.
   Everything here is in millimetres so it comes out life size on A4.
   Nothing may be sized in px or the printed ruler lies. */

.steps{counter-reset:st;display:grid;gap:7px}
.steps li{position:relative;padding-inline-start:26px;font-size:13.5px;color:#394543;
  line-height:1.55}
.steps li::before{counter-increment:st;content:counter(st);position:absolute;
  inset-inline-start:0;top:1px;width:18px;height:18px;border-radius:50%;
  background:#387F87;color:#fff;font-size:11px;font-weight:700;
  display:flex;align-items:center;justify-content:center}

.chk-note{font-size:12.5px;color:#5F6A68;margin-bottom:9px;line-height:1.5}

/* a true-millimetre element never shrinks to fit; it scrolls */
.mm-scroll{overflow-x:auto;padding-bottom:2px}
.checkbar{height:9mm;border:1.5px solid #14201F;border-radius:2px;
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;color:#14201F;background:#F2F5F5}

.ruler-block{overflow-x:auto}
.ruler-block>#ruler{overflow-x:auto}
.ruler-strip{position:relative;height:34mm;border:1.5px solid #14201F;
  border-radius:2px;background:#fff;margin-top:4mm}

/* the heel edge: the end you put against the wall */
.heelstop{position:absolute;inset-block:0;inset-inline-start:0;width:6mm;
  background:#14201F;display:flex;align-items:center;justify-content:center}
.heelstop span{font-size:7px;font-weight:700;color:#fff;writing-mode:vertical-rl;
  white-space:nowrap;letter-spacing:.04em}

.tick{position:absolute;top:0;width:.3mm;height:3mm;background:#8A9490}
.tick.mid{height:5mm;background:#5F6A68}
.tick.maj{height:8mm;width:.45mm;background:#14201F}

.num{position:absolute;top:9mm;transform:translateX(50%);
  font-size:10px;font-weight:700;color:#14201F;font-variant-numeric:tabular-nums}
[dir="rtl"] .num{transform:translateX(50%)}

.eu{position:absolute;bottom:3mm;transform:translateX(50%);
  font-size:9.5px;font-weight:700;color:#2A6168;font-variant-numeric:tabular-nums;
  background:#E4EFF0;padding:.6mm 1.4mm;border-radius:1mm;white-space:nowrap}

#sizeTable td,#sizeTable th{font-size:13px;padding:6px 12px}
#sizeTable td.n{font-variant-numeric:tabular-nums}

@media print{
  .ruler-block{overflow:visible}
  .ruler-strip{break-inside:avoid}
  .checkbar{background:#fff}
}