/* =============================================================================
   73 — DEV RULER  (v15.692)

   A measuring tool for UI work, visible ONLY to the dev account
   (body.shelfd-dev-account, set in js/17-comments-auth-init.js). A circular
   button sits bottom-right; tapping it drops a 1px red line across the screen
   that can be dragged vertically, reading out how far down it sits.

   THE READOUT IS IN iPhone 14 Pro Max REFERENCE PIXELS (430 x 932 logical pt),
   because that is the device the app is authored against. On that device the
   number is simply the CSS pixel offset from the top of the viewport; on any
   other width the tool also shows the normalised equivalent, so a measurement
   taken anywhere still means the same thing.

   Everything here is z-indexed above every overlay in the app (the clip filter
   sheet, the highest, sits at 2147483644) — a ruler you cannot see over the
   thing you are measuring is useless.
   ========================================================================== */

/* Nothing in this file exists for a normal user. One gate, at the top, rather
   than repeated on every rule below. */
#shelfd-dev-fab,
#shelfd-dev-ruler { display: none; }
body.shelfd-dev-account #shelfd-dev-fab { display: inline-flex; }
body.shelfd-dev-account.shelfd-dev-ruler-on #shelfd-dev-ruler { display: block; }

/* ── the button ───────────────────────────────────────────────────────────── */
#shelfd-dev-fab {
  position: fixed;
  /* Clear of the bottom nav and the home indicator. */
  right: calc(14 * var(--shelfd-px, 1px));
  bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  z-index: 2147483645;
  width: calc(44 * var(--shelfd-px, 1px));
  height: calc(44 * var(--shelfd-px, 1px));
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  background: rgba(20, 18, 28, 0.82);
  backdrop-filter: blur(18px) saturate(1.8);
  -webkit-backdrop-filter: blur(18px) saturate(1.8);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 6px 22px rgba(0, 0, 0, 0.45);
  color: #ffffff;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 140ms cubic-bezier(0.22, 1, 0.36, 1), background 140ms ease;
}
#shelfd-dev-fab:active { transform: scale(0.92); }
#shelfd-dev-fab svg {
  width: calc(21 * var(--shelfd-px, 1px));
  height: calc(21 * var(--shelfd-px, 1px));
  display: block;
}
/* Lit while the ruler is up, so the button doubles as the on/off indicator. */
body.shelfd-dev-ruler-on #shelfd-dev-fab {
  background: rgba(255, 45, 45, 0.9);
  border-color: rgba(255, 255, 255, 0.4);
}

/* ── the ruler layer ──────────────────────────────────────────────────────── */
#shelfd-dev-ruler {
  position: fixed;
  inset: 0;
  z-index: 2147483646;
  /* The layer itself must never eat a tap — only the grab strips and the HUD
     below opt back in. Measuring a screen you can no longer use is no use. */
  pointer-events: none;
}

/* One measuring line. `top: 0` plus a transform means the translate value IS the
   distance from the top of the viewport, so the readout needs no arithmetic and
   the drag stays a pure compositor transform. */
.shelfd-dev-ruler-line {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 0;
  will-change: transform;
}
/* The line itself: 1px, bright red, edge to edge. */
.shelfd-dev-ruler-line::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: #ff2d2d;
}
/* The second line is dashed so the two are never confused at a glance. */
.shelfd-dev-ruler-line[data-ruler-index="2"]::after {
  background: repeating-linear-gradient(
    to right, #ff2d2d 0 6px, transparent 6px 12px);
}

/* The invisible grab strip. A 1px line is impossible to hit with a finger, so
   the target is 44px tall and centred on it — an icon sized to the finger is not
   the same as a target sized to it. */
.shelfd-dev-ruler-grab {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(-22 * var(--shelfd-px, 1px));
  height: calc(44 * var(--shelfd-px, 1px));
  pointer-events: auto;
  touch-action: none;      /* the drag is ours, not the page's */
  cursor: ns-resize;
  -webkit-tap-highlight-color: transparent;
}

/* The number, riding just under the line at the left edge. */
.shelfd-dev-ruler-tag {
  position: absolute;
  left: calc(10 * var(--shelfd-px, 1px));
  top: calc(5 * var(--shelfd-px, 1px));
  display: inline-flex;
  align-items: baseline;
  gap: calc(6 * var(--shelfd-px, 1px));
  padding: calc(4 * var(--shelfd-px, 1px)) calc(9 * var(--shelfd-px, 1px));
  border-radius: calc(6 * var(--shelfd-px, 1px));
  background: rgba(255, 45, 45, 0.92);
  color: #ffffff;
  font-family: 'Sohne', 'DM Sans', ui-monospace, monospace;
  font-size: calc(12.5 * var(--shelfd-px, 1px));
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  pointer-events: none;
}
/* The @430 normalisation, only rendered when the viewport is not 430 wide. */
.shelfd-dev-ruler-tag small {
  font-size: calc(10 * var(--shelfd-px, 1px));
  font-weight: 500;
  opacity: 0.82;
}
/* A line dragged near the bottom would push its tag off-screen; this flips it
   above the line instead. Toggled from JS, which is the only thing that knows
   the viewport height. */
.shelfd-dev-ruler-line.is-flipped .shelfd-dev-ruler-tag {
  top: auto;
  bottom: calc(5 * var(--shelfd-px, 1px));
}

/* ── the HUD ──────────────────────────────────────────────────────────────── */
/* Nudge buttons matter more than they look: placing a line to the exact pixel
   with a fingertip is not possible, so the drag gets you close and these land
   it. Sits bottom-left, clear of the FAB. */
.shelfd-dev-ruler-hud {
  position: fixed;
  left: calc(14 * var(--shelfd-px, 1px));
  bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  display: flex;
  align-items: center;
  gap: calc(6 * var(--shelfd-px, 1px));
  padding: calc(6 * var(--shelfd-px, 1px));
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: rgba(20, 18, 28, 0.9);
  backdrop-filter: blur(18px) saturate(1.8);
  -webkit-backdrop-filter: blur(18px) saturate(1.8);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.45);
  pointer-events: auto;
}
.shelfd-dev-ruler-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: calc(34 * var(--shelfd-px, 1px));
  height: calc(30 * var(--shelfd-px, 1px));
  padding: 0 calc(9 * var(--shelfd-px, 1px));
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.09);
  color: #ffffff;
  font-family: 'Sohne', 'DM Sans', sans-serif;
  font-size: calc(12.5 * var(--shelfd-px, 1px));
  font-weight: 500;
  letter-spacing: 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
}
.shelfd-dev-ruler-btn:active { background: rgba(255, 255, 255, 0.18); }
.shelfd-dev-ruler-btn.is-on { background: rgba(255, 45, 45, 0.85); }
/* The gap between the two lines — the answer to "how tall should this be". */
.shelfd-dev-ruler-delta {
  padding: 0 calc(4 * var(--shelfd-px, 1px));
  color: #ffb4b4;
  font-family: 'Sohne', 'DM Sans', ui-monospace, monospace;
  font-size: calc(12 * var(--shelfd-px, 1px));
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.shelfd-dev-ruler-delta:empty { display: none; }

@media (prefers-reduced-motion: reduce) {
  #shelfd-dev-fab { transition: none; }
}