/* D8 — page CSS for `/screen-ruler/`. Loaded by that route alone; the
   site-wide instrument styles stay in ../ruler.css and are not touched here.

   This file exists for the same reason ruler.css does: the CSP carries no
   'unsafe-inline' for styles, so there is no <style> block and no style=
   attribute anywhere on the site, and a page that needs rules of its own
   gets a file of its own.

   THE RULE THIS FILE MUST NOT BREAK, exactly as on the ruler face: NOTHING
   MAY SCALE THE MEASURING SURFACE. No transform, no zoom, no scale(), no
   percentage width on the bar or on any ancestor that would resolve against
   it. The whole claim on this page is that the number beside the line is the
   layout distance between its two marks; a CSS scale would multiply it by a
   factor nobody printed and no note could catch. The bar is positioned and
   sized in CSS pixels, from custom properties, and nothing else.

   Only kit/base.css tokens are used — no new colours, no new fonts, no font
   file. */

/* ---------- The overlay ----------
   Fixed to the window so the line can be laid over anything drawn in it, and
   INERT except for its handles: pointer-events are off on the layer and back
   on for the three controls, so the page underneath stays fully usable while
   the ruler is on it. */

.measure-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 30;
}

.measure-overlay.hidden { display: none; }

.m-bar {
  position: absolute;
  left: var(--m-left, 40px);
  top: var(--m-top, 240px);
  width: var(--m-w, 240px);
  height: var(--m-h, 0px);
  border: 0;
}

/* The line itself: a 2 px rule on the measured axis. The measured length is
   the distance between the two marks, and the rule is drawn between them —
   its thickness is on the other axis and is not part of any reading. */
.m-bar.across { border-top: 2px solid var(--accent); }
.m-bar.down { border-left: 2px solid var(--accent); }

/* The comb: one mark every 10 CSS px, from a repeating gradient, so the
   spacing is geometry rather than a picture that could be resized. The class
   is added by measure.js only while 10 CSS px clears three device pixels;
   below that the comb is dropped and the note says so. */
.m-bar.across.comb {
  background-image: repeating-linear-gradient(to right,
    var(--line-strong) 0 1px, transparent 1px 10px);
  background-size: 100% 6px;
  background-repeat: no-repeat;
  background-position: left top;
}

.m-bar.down.comb {
  background-image: repeating-linear-gradient(to bottom,
    var(--line-strong) 0 1px, transparent 1px 10px);
  background-size: 6px 100%;
  background-repeat: no-repeat;
  background-position: left top;
}

/* ---------- Handles ----------
   Real buttons, so they are focusable and operable from the keyboard: a
   handle you can only drag is a handle some people cannot use at all.
   `touch-action: none` stops a drag being stolen by the page scroll. */

.m-handle {
  position: absolute;
  appearance: none;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 2px solid var(--accent);
  border-radius: 50%;
  background: var(--panel);
  color: var(--accent);
  font: inherit;
  font-family: var(--mono);
  font-size: 0.7rem;
  line-height: 1;
  cursor: grab;
  pointer-events: auto;
  touch-action: none;
}

.m-handle:active { cursor: grabbing; }

.m-grip {
  border-radius: var(--radius);
  width: 30px;
  height: 20px;
}

.m-bar.across .m-a { left: -13px; top: -13px; }
.m-bar.across .m-b { right: -13px; top: -13px; }
.m-bar.across .m-grip { left: calc(50% - 15px); top: -10px; }

.m-bar.down .m-a { top: -13px; left: -13px; }
.m-bar.down .m-b { bottom: -13px; left: -13px; }
.m-bar.down .m-grip { top: calc(50% - 10px); left: -14px; }

/* ---------- The window line ---------- */

.win-line {
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--ink-soft);
  margin: 0.4rem 0 0;
}

/* ---------- The specimen strip ----------
   Bars of known CSS-pixel width, so the line can be checked against a length
   the page already knows. Widths are literal pixel values: no percentages,
   nothing that resolves against the viewport, nothing that would make the
   check pass by construction. */

.specimen {
  list-style: none;
  padding: 0;
  margin: 0.75rem 0 0;
}

.specimen li {
  margin: 0.55rem 0;
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--ink-soft);
}

.spec-bar {
  display: block;
  height: 12px;
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  border-radius: 2px;
  margin-bottom: 0.2rem;
}

.spec-96 { width: 96px; }
.spec-100 { width: 100px; }
.spec-240 { width: 240px; }

/* The strip can be wider than a narrow phone column; it scrolls rather than
   being squeezed, for the same reason the ruler face does. */
.specimen-wrap { overflow-x: auto; }