/* ============================================================
   Field Portal — GRID RULER  (shared dev overlay)
   Column grid + tinted margin bands + the yellow margin-box guide lines + corner squares
   + iPhone fold lines. Press G on ANY page that includes this asset to toggle.
       <link rel="stylesheet" href="<path>/assets/css/grid-ruler.css">
       <script src="<path>/assets/js/grid-ruler.js" defer></script>
   (root page → "assets/…"; a form in a subfolder → "../assets/…").
   The draggable read-out WIDGET was removed 2026-07-07 (grid + lines only, no widget).
   ============================================================ */
/* The grid / guide-line TOKENS (--gr-cols · --gr-margin · --gr-gutter · --gr-max · --gr-bp ·
   --gr-logo-x · --gr-logo-y and all their breakpoints) were MOVED to base.css on 2026-07-10.
   Production layout (nav/logo/fields box to --gr-logo-x, gutters to --gr-logo-y) no longer
   depends on this dev-only file, so it can be stripped from the production bundle without
   breaking anything. This file now ONLY draws the visual overlay below, using those tokens. */

/* Column-grid overlay — created by grid-ruler.js, revealed only with body.grid-ruler-on. */
#grid-ruler {
  position: fixed; inset: 0; z-index: 2147483000;
  pointer-events: none;
  padding: 0 var(--gr-margin);
  opacity: 0; visibility: hidden;
  transition: opacity .12s;
}
body.grid-ruler-on #grid-ruler { opacity: 1; visibility: visible; }
#grid-ruler .gr-margin {                             /* the side margins, tinted */
  position: absolute; top: 0; bottom: 0; width: var(--gr-margin);
  background: rgba(0, 150, 200, .10);
  border-inline: 1px dashed rgba(0, 150, 200, .55);
}
#grid-ruler .gr-margin.l { left: 0; }
#grid-ruler .gr-margin.r { right: 0; }
#grid-ruler .gr-inner {                              /* the columns live here */
  height: 100%;
  max-width: var(--gr-max); margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(var(--gr-cols), 1fr);
  column-gap: var(--gr-gutter);
}
#grid-ruler .gr-col {
  background: rgba(228, 51, 56, .10);                /* Enduro red columns */
  border-inline: 1px solid rgba(228, 51, 56, .35);
}

/* Yellow logo-alignment guides — a vertical line at the Enduro logo's LEFT edge and a
   mirror line the same distance in from the RIGHT page edge (symmetry check). Positions
   set by grid-ruler.js from the live logo. Shown with the grid. (2026-07-06) */
.gr-logoline {
  position: fixed; top: 0; bottom: 0; width: 1px;
  background: #E3FF17;                 /* Enduro yellow */
  z-index: 2147483002; pointer-events: none;
  display: none;
}
.gr-logoline-l { left: var(--gr-logo-x); }    /* logo left-align (portal-home) */
.gr-logoline-r { right: var(--gr-logo-x); }   /* mirror — same distance off the right edge */
/* Top + bottom lines — 2026-07-22 (owner): they now sit on the page's OUTERMOST CONTENT EDGES,
   measured live by grid-ruler.js into --gr-edge-t / --gr-edge-b, so the yellow box actually bounds
   what is on screen instead of floating at a constant that describes nothing. --gr-logo-y remains
   the fallback for the frame before the first measurement (and if nothing measurable is found).
   The four CORNER squares read the same variables, or the box stops being a box. */
.gr-logoline-t, .gr-logoline-b {
  left: 0; right: 0; width: auto; height: 1px; top: auto; bottom: auto;
}
.gr-logoline-t { top: var(--gr-edge-t, var(--gr-logo-y)); }
.gr-logoline-b { bottom: var(--gr-edge-b, var(--gr-logo-y)); }
body.grid-ruler-on .gr-logoline { display: block; }

/* A square marker on each of the 4 corners where the yellow lines meet. All four lines sit
   at the same --gr-logo-x inset, so the box is a uniform square. (2026-07-06) */
.gr-corner {
  position: fixed; width: 9px; height: 9px;
  background: #E3FF17; z-index: 2147483003; pointer-events: none; display: none;
}
body.grid-ruler-on .gr-corner { display: block; }
.gr-corner-tl { top: var(--gr-edge-t, var(--gr-logo-y));    left: var(--gr-logo-x);  transform: translate(-50%, -50%); }
.gr-corner-tr { top: var(--gr-edge-t, var(--gr-logo-y));    right: var(--gr-logo-x); transform: translate(50%, -50%); }
.gr-corner-bl { bottom: var(--gr-edge-b, var(--gr-logo-y)); left: var(--gr-logo-x);  transform: translate(-50%, 50%); }
.gr-corner-br { bottom: var(--gr-edge-b, var(--gr-logo-y)); right: var(--gr-logo-x); transform: translate(50%, 50%); }

/* Tiny reference letters so each line can be named. L/R/T/B on the yellow lines; a number on
   each red column. Barely in the way. (2026-07-07) */
.gr-logoline::after {
  position: absolute; font: 700 9px/1 'SF Mono', ui-monospace, monospace;
  color: #191A1C; background: #E3FF17; padding: 1px 3px; border-radius: 2px; pointer-events: none;
}
.gr-logoline-l::after { content: 'L'; top: 44px; left: 2px; }
.gr-logoline-r::after { content: 'R'; top: 44px; right: 2px; }
.gr-logoline-t::after { content: 'T'; left: 44px; top: 2px; }
.gr-logoline-b::after { content: 'B'; left: 44px; bottom: 2px; }
#grid-ruler .gr-col { position: relative; }
#grid-ruler .gr-col-edge {                 /* a letter on EVERY column edge line (both sides) */
  position: absolute; top: 3px;
  font: 700 8px/1 'SF Mono', ui-monospace, monospace; color: #E43338; pointer-events: none;
}
#grid-ruler .gr-col-edge.le { left: 0;  transform: translateX(-50%); }
#grid-ruler .gr-col-edge.re { right: 0; transform: translateX(50%); }

/* The `.gr-fold` rules that used to sit here are GONE (2026-07-21), with the JS that built
   them — they marked the iPhone's 932px PHYSICAL screen height, but the usable viewport on
   that phone measures 775px, so every line sat ~157px past the fold it named, on every
   device under 500px wide. Fold position is measured live per-device now (grid-ruler.js).
   `#grid-ruler-hud` is dropped from the print rule below at the same time: the read-out
   widget it hid was removed long ago, and the selector had outlived it. */

/* NEVER let the dev overlay bleed into an exported / printed report. */
@media print { #grid-ruler, .gr-logoline, .gr-corner { display: none !important; } }