/* ============================================================
   THE UNDERLYING GRID
   A modular grid in the Samara sense: a fixed column structure
   plus a horizontal flowline unit. Every photograph is placed by
   three integers and nothing else —

       --col    which column its left edge starts on   (0 … 11)
       --span   how many columns wide it is            (1 … 12)
       --row    which flowline its top edge sits on    (0 … n)

   No rotation, no free coordinates, no exceptions. A piece cannot
   land off-grid because there is no way to express off-grid.

   HORIZONTAL UNITS ARE PERCENTAGES, VERTICAL ARE vw. That is not an
   oversight. Percentages resolve against the container, so the
   column structure is exact and never fights the scrollbar; the
   vertical unit has to be vw because the container's height is what
   we are computing, so a percentage would be circular.
   ============================================================ */
:root{
	--grid-cols:   12;
	--grid-margin: 4%;      /* left and right page margin        */
	--grid-gutter: 1.5%;    /* space between columns             */
	--grid-row:    4vw;     /* flowline spacing (vertical unit)  */

	/* Derived — don't hand-edit. 100% minus both margins minus the
	   eleven gutters, divided by twelve. */
	--grid-colw: calc(
		(100% - (2 * var(--grid-margin)) - (11 * var(--grid-gutter)))
		/ var(--grid-cols)
	);
	/* One column plus one gutter: the horizontal step. */
	--grid-step: calc(var(--grid-colw) + var(--grid-gutter));
}

/* The pieces, placed purely from the three integers. */
.scatter .piece{
	position: absolute;
	left:  calc(var(--grid-margin) + (var(--col) * var(--grid-step)));
	top:   calc(var(--row) * var(--grid-row));
	width: calc(
		(var(--span) * var(--grid-colw))
		+ ((var(--span) - 1) * var(--grid-gutter))
	);
	transform: none;          /* the grid version is never tilted */
	margin: 0;
}
.scatter .piece:hover{
	transform: none;          /* no lift either — it would break alignment */
	z-index: 50;
}

/* ------------------------------------------------------------
   #grid — the placement editor. Everything below does nothing
   until the URL hash contains "grid", exactly like #edit and
   #debug. It ships to production harmlessly.
   ------------------------------------------------------------ */

/* The grid made visible: one band per column, plus flowlines. */
.gr-overlay{
	position: absolute; inset: 0;
	pointer-events: none;
	z-index: 1;
	display: none;
}
body.gr-on .gr-overlay{ display: block; }
body.gr-on .gr-overlay.is-hidden{ display: none; }

.gr-col{
	position: absolute; top: 0; bottom: 0;
	background: rgba(70,120,255,0.055);
	border-left:  1px solid rgba(70,120,255,0.16);
	border-right: 1px solid rgba(70,120,255,0.16);
}
.gr-flow{
	position: absolute; left: 0; right: 0;
	height: 0;
	border-top: 1px solid rgba(70,120,255,0.10);
}
.gr-flow.is-major{ border-top-color: rgba(70,120,255,0.26); }

/* Pieces become handles. */
body.gr-on .scatter .piece{ cursor: grab; }
body.gr-on .scatter .piece.is-dragging{ cursor: grabbing; z-index: 90; }
body.gr-on .scatter .piece.is-dragging img{ opacity: 0.75; }
body.gr-on .scatter .piece.is-selected{ z-index: 80; }
body.gr-on .scatter .piece.is-selected img{
	outline: 2px solid #2f6bff;
	outline-offset: 2px;
}
body.gr-on .piece figcaption{ opacity: 1; }
body.gr-on .lb{ display: none !important; }   /* the piece window stands down */

/* Ghost of where the piece will land. */
.gr-ghost{
	position: absolute;
	border: 1px dashed #2f6bff;
	background: rgba(47,107,255,0.08);
	pointer-events: none;
	z-index: 85;
	display: none;
}
.gr-ghost.is-on{ display: block; }

/* ---- the panel ---------------------------------------------- */
.gr-panel{
	position: fixed;
	top: 1rem; right: 1rem;
	z-index: 300;
	width: 250px;
	display: none;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 11px;
	line-height: 1.5;
	color: #16181d;
	background: rgba(255,255,255,0.94);
	-webkit-backdrop-filter: blur(18px);
	backdrop-filter: blur(18px);
	border: 1px solid rgba(16,16,16,0.14);
	border-radius: 6px;
	box-shadow: 0 10px 40px rgba(16,16,16,0.16);
	overflow: hidden;
}
body.gr-on .gr-panel{ display: block; }

.gr-panel h3{
	margin: 0; padding: 0.6rem 0.75rem;
	font-size: 11px; font-weight: 600; letter-spacing: 0.05em;
	background: #16181d; color: #fff;
	display: flex; justify-content: space-between; align-items: center;
}
.gr-panel h3 em{ font-style: normal; opacity: 0.55; font-weight: 400; }
.gr-sec{ padding: 0.6rem 0.75rem; border-bottom: 1px solid rgba(16,16,16,0.09); }
.gr-sec:last-child{ border-bottom: 0; }
.gr-sec > label{
	display: block; margin-bottom: 0.35rem;
	color: rgba(16,16,16,0.45); letter-spacing: 0.04em;
}
.gr-row{ display: flex; align-items: center; gap: 0.35rem; margin-bottom: 0.3rem; }
.gr-row:last-child{ margin-bottom: 0; }
.gr-row span{ flex: 0 0 3.2rem; color: rgba(16,16,16,0.5); }
.gr-row output{ flex: 1; text-align: center; font-variant-numeric: tabular-nums; }

.gr-panel button{
	font: inherit; cursor: pointer;
	background: #fff; color: #16181d;
	border: 1px solid rgba(16,16,16,0.2);
	border-radius: 3px;
	padding: 0.2rem 0.45rem;
	min-width: 1.7rem;
}
.gr-panel button:hover{ background: #eef2ff; border-color: #2f6bff; }
.gr-panel button:active{ background: #dbe4ff; }
.gr-panel button.gr-wide{ width: 100%; padding: 0.4rem; margin-top: 0.35rem; }
.gr-panel button.gr-primary{
	background: #2f6bff; color: #fff; border-color: #2f6bff; font-weight: 600;
}
.gr-panel button.gr-primary:hover{ background: #1d55e0; }
.gr-panel input[type="number"]{
	font: inherit; width: 3.2rem; padding: 0.15rem 0.3rem;
	border: 1px solid rgba(16,16,16,0.2); border-radius: 3px;
}
.gr-hint{ color: rgba(16,16,16,0.42); }
.gr-hint kbd{
	font: inherit; background: rgba(16,16,16,0.07);
	border-radius: 2px; padding: 0 0.2rem;
}
.gr-empty{ color: rgba(16,16,16,0.4); font-style: italic; }