/* Test the bin lid: the drawing, the flow strip and their colours. Everything else comes from the shared lab kit (css/labs.css).
   Colours are theme tokens, so light and dark mode both work. Text in the drawing follows the kit's 13 px rule
   (font-size scales with --u, which Labs.fit sets on the svg), and the lid and the words say open or closed, not only the colour. */
.lab-binlid .binlid-svg {
  display: block;
  width: 100%;
  max-width: 22rem;
  height: auto;
  margin: .2rem auto .9rem;
}
.lab-binlid .binlid-svg text {
  font-family: var(--font-body);
  font-size: calc(13px * var(--u, 1));
  font-weight: 600;
  fill: var(--text-primary);
}
.lab-binlid .bl-ground { stroke: var(--border-strong); stroke-width: 2; stroke-linecap: round; }
.lab-binlid .bl-ruler { stroke: var(--text-secondary); stroke-width: 1.2; }
.lab-binlid .bl-beam { stroke: var(--text-secondary); stroke-width: 1.2; stroke-dasharray: 2 3; }
.lab-binlid .bl-trigger { stroke: var(--text-primary); stroke-width: 1.6; stroke-dasharray: 5 4; }
.lab-binlid .bl-close { stroke: var(--primary); stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: .1 4.2; }
.lab-binlid .bl-sensor { fill: var(--bg-secondary); stroke: var(--text-secondary); stroke-width: 1.5; }
.lab-binlid .bl-hand { fill: var(--accent); stroke: var(--text-primary); stroke-width: 1.2; }
.lab-binlid .bl-body { fill: var(--bg-secondary); stroke: var(--text-secondary); stroke-width: 2; }
.lab-binlid .bl-lid { fill: var(--primary); stroke: var(--primary-dark); stroke-width: 1.5; }

/* The input, decision and output strip, stacked so it reads the same on a phone and on a desktop */
.lab-binlid .lab-flow { display: flex; flex-direction: column; gap: .15rem; margin: 0 0 .9rem; }
.lab-binlid .lab-flow .lab-stat b { font-size: .95rem; line-height: 1.35; }
.lab-binlid .lab-arrow { display: block; text-align: center; color: var(--text-secondary); font: 700 .95rem/1 var(--font-mono); }