/* Ruler crosshair (part.js drives it). Put class "ruler" on any box; part.js adds the lines, the plus and the
   readout inside it. Optional hint tag: data-ruler-hint="Drag to measure".

   Knobs: */
.ruler {
  --ruler-line: #e0e0da;        /* crosshair hairline, drawn with mix-blend-mode: difference so it reads on any ground */
  --ruler-line-w: 1px;
  --ruler-blend: difference;
  --ruler-plus: 241 85 52;      /* the "+" colour as r g b (it fades in corners) */
  --ruler-plus-size: 10px;      /* 1rem = 10 design px */
  --ruler-plus-bar: 2px;        /* .2rem */
  --ruler-ink: #282828;         /* readout text, hint background */
  --ruler-hint-ink: #fff;
  --ruler-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --ruler-text: 10px;
  --ruler-hint-w: 156px;        /* 15.6rem */
  --ruler-show: .25s cubic-bezier(.33, 1, .68, 1);  /* fade in/out on enter/leave: 0.25s power2.out */
  position: relative; overflow: hidden;
}
.ruler__layer { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity var(--ruler-show); }  /* no z-index: it would isolate the blend */
.ruler.is-ruling .ruler__layer { opacity: 1; }
.ruler__layer > * { position: absolute; left: 0; top: 0; will-change: transform; }
.ruler__v { width: var(--ruler-line-w); height: 100%; background: var(--ruler-line); mix-blend-mode: var(--ruler-blend); opacity: .16; }
.ruler__h { height: var(--ruler-line-w); width: 100%; background: var(--ruler-line); mix-blend-mode: var(--ruler-blend); opacity: .16; }
.ruler__plus { width: var(--ruler-plus-size); height: var(--ruler-plus-size); color: rgb(var(--ruler-plus)); }
.ruler__plus::before, .ruler__plus::after { content: ""; position: absolute; background: currentColor; }
.ruler__plus::before { left: calc(50% - var(--ruler-plus-bar) / 2); top: 0; width: var(--ruler-plus-bar); height: 100%; }
.ruler__plus::after { top: calc(50% - var(--ruler-plus-bar) / 2); left: 0; height: var(--ruler-plus-bar); width: 100%; }
.ruler__readout { font: 500 var(--ruler-text)/1.3 var(--ruler-mono); color: var(--ruler-ink); white-space: nowrap; letter-spacing: .02em; }
.ruler__hint { width: var(--ruler-hint-w); max-width: 60%; padding: 8px; background: var(--ruler-ink); color: var(--ruler-hint-ink);
  font: 500 var(--ruler-text)/1.35 var(--ruler-mono); text-transform: uppercase; letter-spacing: .04em; }