/* ══════════════════════════════════════════════════════════════════════════
   Marks — the owned line-art vocabulary (§4.1).

   One stroke weight, everywhere, at every size. `non-scaling-stroke` is what
   makes that true: without it a mark in a 16px stepper cell and the same mark
   overshooting a 100px option chip would be two different pens, and the hand
   would stop reading as one hand.

   `currentColor` is rule 5 — a mark inherits the ink of whatever it annotates
   and can therefore never introduce a colour of its own.
   ══════════════════════════════════════════════════════════════════════ */

@layer components {
  .rtv-mark {
    display: block;
    inline-size: var(--rtv-mark-size, 1em);
    block-size: var(--rtv-mark-size, 1em);
    /* Marks overshoot their box by design (rule 2). Clipping them to the
       viewBox would close the ellipse, which is the one thing it may not be. */
    overflow: visible;
  }

  .rtv-mark path {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
  }

  /* The three chosen-mark variants and the strike stretch to the box they
     annotate, so they are sized by their positioning context, not by a size
     token. Their stroke stays 2px because of non-scaling-stroke above. */
  .rtv-mark--chosen-1,
  .rtv-mark--chosen-2,
  .rtv-mark--chosen-3,
  .rtv-mark--strike,
  .rtv-mark--contact {
    inline-size: 100%;
    block-size: 100%;
  }
}