/* D8 page CSS — the instrument face, the calibration controls, and the
   reference tables. Loaded by all seven sitemapped instrument-family routes:
   `/`, `/mm-ruler/`, `/inch-ruler/`, `/ruler-on-phone/`,
   `/actual-size-ruler/`, `/screen-ruler/` and `/calibrate/`. (It said "`/` and
   `/calibrate/`" until stage 3 added four more routes and stage 4 a fifth; a
   header that names a subset invites an edit made "only for /" that lands on
   six other pages, which is why the list is now asserted in the suite.)

   THIS FILE EXISTS BECAUSE THE CSP HAS NO 'unsafe-inline' FOR STYLES. Every
   other site in the portfolio carries `style-src 'self' 'unsafe-inline'`
   because each ships at least one page-local <style> block; D8 keeps page CSS
   in an external file for the same reason the portfolio already keeps page JS
   in one. Nothing here may move into a <style> block or a style= attribute
   without widening the policy, and tests/launch-guard.js pins the policy.

   Only kit/base.css tokens are used. No new colours, no new fonts, and no
   embedded font file — the standing rule for every printable and every
   instrument in this repo. */

/* ---------- The ruler face ----------
   THE ONE RULE THIS FILE MUST NOT BREAK: nothing may scale the face. The
   whole product is that a millimetre on the face is a millimetre on the
   glass, and a CSS scale silently multiplies every reading by a factor nobody
   printed. A face wider than the column SCROLLS — which is honest — and the
   wrapper below is what lets it. tests/structure-d8.js strips the comments
   out of this file and then greps the remaining rules, because a gate that
   fires on the sentence describing it is a gate somebody switches off. */

.rule-wrap {
  overflow-x: auto;
  overflow-y: hidden;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.75rem 0 0.5rem;
}

.rule {
  display: block;
  overflow: visible;
}

.rule .t {
  stroke: var(--ink);
  stroke-width: 1;
}

.rule .t-half_mm,
.rule .t-s,
.rule .t-t {
  stroke: var(--ink-soft);
}

.rule .lbl {
  fill: var(--ink);
  font-family: var(--mono);
  font-size: 12px;
  text-anchor: middle;
}

/* The CSS-inch probe. Measured, never seen: a 1in box whose rendered width
   falsifies (or does not) the §6.1 premise that a CSS inch is 96 px on this
   engine. It is `visibility: hidden` and not `display: none`, because a
   display:none box has no box to measure. */
.css-inch {
  position: absolute;
  visibility: hidden;
  width: 1in;
  height: 1px;
  left: -9999px;
  top: 0;
}

/* ---------- State line ---------- */

.state-line {
  font-family: var(--mono);
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  color: var(--ink);
  margin: 0.85rem 0 0.2rem;
}

.state-line.pass { color: var(--pass); }

.state-detail {
  color: var(--ink-soft);
  font-size: 0.94rem;
  margin: 0 0 0.6rem;
  max-width: 46rem;
}

.notes .note { margin: 0.5rem 0; }

/* ---------- The card outline ----------
   Width is the measurement the user sets; height is drawn to the reference's
   own aspect ratio so the box reads as the object. Both arrive as custom
   properties set from JS, so the served markup carries no style attribute. */

.outline-stage {
  overflow-x: auto;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem;
  margin: 0.75rem 0;
}

.card-outline {
  width: var(--outline-w, 324px);
  height: var(--outline-h, 204px);
  border: 2px solid var(--accent);
  border-radius: 8px;
  background: var(--accent-soft);
  position: relative;
}

.card-outline .corner {
  position: absolute;
  width: 10px;
  height: 10px;
  border: 2px solid var(--accent);
}

.card-outline .c-tl { left: -2px; top: -2px; border-right: 0; border-bottom: 0; }
.card-outline .c-br { right: -2px; bottom: -2px; border-left: 0; border-top: 0; }

/* §6.3 vertical long-edge mode. The box is NOT rotated — the matched
   dimension moves to the height and the other follows the object's aspect,
   both through the same custom properties. A CSS rotation would put the
   measurement on a diagonal of the layout box, so the user would be matching
   a length the engine never computed, and `transform` is the one property
   this file may not apply to a measuring surface anyway. The marker class is
   here so the stage can grow vertically rather than scroll a card off the
   bottom of a fixed box. */
.card-outline.upright { margin: 0 auto; }

/* The diagonal seed (§6.6) and the second-reference surface (§6.7). Neither
   gets a colour of its own: the seed is not a measurement and the check is
   reported through the same state line and note list as everything else. */
.seed-controls input[type="number"] {
  width: 6rem;
  font-family: var(--mono);
}

.cross-panel .state-line { margin-top: 0.6rem; }

.match-controls { align-items: flex-end; }

.match-controls input[type="range"] {
  width: min(24rem, 100%);
  accent-color: var(--accent);
}

.match-controls output {
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--ink-soft);
}

fieldset.choice {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.5rem 0.8rem 0.7rem;
  margin: 0.75rem 0;
  background: var(--panel);
}

fieldset.choice legend {
  font-family: var(--mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-soft);
  padding: 0 0.35rem;
}

fieldset.choice label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-right: 1.1rem;
  font-size: 0.92rem;
}

/* ---------- Wizard steps (/calibrate/) ---------- */

.steps {
  counter-reset: step;
  list-style: none;
  padding: 0;
  max-width: 46rem;
}

.steps > li {
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  background: var(--panel);
  border-radius: var(--radius);
  padding: 0.8rem 1rem;
  margin: 0.6rem 0;
}

.steps > li > h3 {
  margin: 0 0 0.3rem;
  font-size: 1rem;
}

.steps .says {
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--ink-soft);
  margin: 0.45rem 0 0;
}

/* ---------- Reference evidence (/calibrate/) ---------- */

.ref-block {
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: var(--radius);
  padding: 0.9rem 1rem;
  margin: 0.9rem 0;
  max-width: 46rem;
}

.ref-block h3 { margin-top: 0; }

.ref-block .basis,
.ref-block .caveat {
  font-size: 0.9rem;
  color: var(--ink-soft);
}

.ref-block .verified {
  font-family: var(--mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-soft);
}

.sources { padding-left: 1.1rem; font-size: 0.88rem; }
.sources li { margin: 0.3rem 0; }
.sources .kind {
  font-family: var(--mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-soft);
}

.withheld {
  border-left-color: var(--warn);
}