/* ── Real Dimensions EXPERIMENT — page chrome (route: /real-dimensions) ───────
   Loaded solely on the /real-dimensions virtual route
   (inc/real-dimensions-page.php), alongside p1-theme.css (dependency).
   Colors ride the house tokens (:root light / html.dark), so this file needs
   no dark block for text/borders — the vars flip themselves.

   Token exception, documented: the artwork drop-shadow tokens live in
   p1-artwork.css, which does NOT load on this route, so per the §1.1 plugin
   rule this file keeps var() FALLBACKS that mirror the token values (light
   0 10px 22px rgba(0,0,0,.3); dark doubles to .6). If p1-artwork.css is ever
   enqueued here, the fallbacks become inert — safe either way.

   Layout contract with assets/js/p1-realdim.js (v4 — THREE view modes via
   the quiet native select #p1-rd-view-select; the page root carries
   data-rd-mode="relative|masonry|group"):
   - RELATIVE: before packing, .p1-rd-wall is a flex-wrap fallback where
     every item is sized by its inch custom properties at a fixed
     2px-per-inch — still TRUE relative scale, so no-JS visitors see an
     honest (if unpacked) wall. After packing, .p1-rd-wall.is-packed switches
     to position:relative and the script absolutely positions each item
     (left/top/width/height in px, one shared px-per-inch scale, ONE 16px
     gap on both axes). LABEL-FREE (v4 owner call): no caption exists in the
     markup at all — hover is lift + shadow only; titles live in aria-labels.
   - MASONRY (the v4 DEFAULT view): .p1-rd-wall--grid is the /artworks/
     masonry idiom (CSS columns, same breakpoints + 16px gaps as
     .p1-masonry, p1-theme.css; bare images — the archive's meta block is
     commented out, so bare matches) — pure CSS; the script clears the
     packing inline styles.
   - GROUP ("Group by dimensions"): the script MOVES the item nodes into
     #p1-rd-groups — a section per stored-W×H bucket, size heading +
     side-by-side wrapping rows (.p1-rd-group__grid) — and hides the wall
     ([hidden] backed below).
   - Scale legend + same-scale intro sentence render ONLY in relative mode
     (data-rd-mode rules below — they'd be lies elsewhere); the figures rail
     follows via the is-packed display chain. */

/* ── Page scaffold ── */
.p1-rd-page {
	max-width: 1400px;          /* archive wrapper width (§4.5) */
	margin: 0 auto;
	padding: 40px 20px 80px;
	/* No overflow clip here (v4): the figures rail hugs the BROWSER edge
	   (JS pulls it left of the wall box on wide viewports — see
	   FIGURE_EDGE_PAD_PX in p1-realdim.js), and a clip would truncate it.
	   Safe: the v3 clip guarded nowrap hover captions, which are gone;
	   left-side overhang never creates scrollable overflow, and nothing
	   overhangs right (hover lift is vertical). The no-h-scroll gate is
	   re-verified each pass. */
}

/* ── Quiet header (v4 owner call: NO visible page title — the view
      select IS the header control; the h1 stays in the markup as
      .p1-rd-vh for a11y/landmarks) ── */
.p1-rd-header { margin-bottom: 36px; }
.p1-rd-header__sub {
	font-size: 0.95rem;
	color: var(--p1-text-muted);
	margin: 14px 0 0;           /* follows the select */
}
/* ── View mode select (v4, replaces the v2 two-button toggle) ──
   A quiet NATIVE <select> (a11y + simplicity beat a custom dropdown) in
   the house micro-label voice: .72rem uppercase ls .08em, ink text,
   --p1-border-input hairline, radius-sm, ≥44px target, §5.3 accent
   focus ring. appearance:none + a currentColor chevron on the wrapper
   (pseudo-elements can't attach to <select>). JS reveals it (hidden
   attr — inert without JS). Note: the legacy dark-mode form rescue in
   p1-theme.css (!important select bg/border) lands close to these token
   values; documented nit, not fought here. */
.p1-rd-view {
	position: relative;
	display: inline-block;      /* first visible header element (no title, v4) */
}
.p1-rd-view[hidden] { display: none; }
.p1-rd-view__select {
	appearance: none;
	-webkit-appearance: none;
	background: transparent;
	border: 1px solid var(--p1-border-input);
	border-radius: var(--p1-radius-sm);
	min-height: 44px;
	padding: 0 34px 0 12px;
	font: inherit;
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--p1-text);
	cursor: pointer;
	transition: border-color 0.2s;
}
.p1-rd-view__select:hover { border-color: var(--p1-text-muted); }
.p1-rd-view__select:focus-visible {
	outline: 2px solid var(--p1-accent);
	outline-offset: 2px;
}
.p1-rd-view::after {
	content: "";
	position: absolute;
	right: 14px;
	top: 50%;
	width: 6px;
	height: 6px;
	border-right: 1px solid var(--p1-text-muted);
	border-bottom: 1px solid var(--p1-text-muted);
	transform: translateY(-70%) rotate(45deg);
	pointer-events: none;
}

/* Page-scoped visually-hidden (the select's "View" label). Promote to
   p1-theme.css as a house utility when a second surface needs one. */
.p1-rd-vh {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Outside relative mode the true-scale promises (sentence + ruler) would
   be lies — hidden. data-rd-mode is JS-set; no-JS pages carry no
   attribute and keep both (the no-JS wall IS true-scale). */
.p1-rd-page[data-rd-mode='masonry'] .p1-rd-header__sub,
.p1-rd-page[data-rd-mode='masonry'] .p1-rd-legend,
.p1-rd-page[data-rd-mode='group'] .p1-rd-header__sub,
.p1-rd-page[data-rd-mode='group'] .p1-rd-legend { display: none; }

/* ── Scale legend: a 12-inch ruler at the wall's current scale ── */
.p1-rd-legend {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 18px 0 0;
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--p1-text-muted);
}
.p1-rd-legend__bar {
	display: inline-block;
	height: 8px;
	box-sizing: border-box;
	border: 1px solid var(--p1-text-muted);
	border-top: none;           /* map-style scale bar: open on top */
}

/* ── The wall ── */
.p1-rd-wall {
	/* no-JS / pre-pack fallback: flex wrap at a fixed 2px per inch.
	   16px = THE page gap (one value both axes, packed and fallback —
	   the §3.1 masonry gap step). */
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 16px;
}
.p1-rd-wall.is-packed {
	display: block;
	position: relative;         /* items become absolutely positioned */
}
/* Group mode hides the wall via [hidden]; explicit because the flex rule
   above outweighs the UA [hidden] display. */
.p1-rd-wall[hidden] { display: none; }

.p1-rd-item {
	position: relative;
	display: block;
	width: calc(var(--rd-w, 10) * 2px);   /* fallback sizing only */
	height: calc(var(--rd-h, 10) * 2px);
	text-decoration: none;
	color: inherit;
	transition: transform 0.2s, box-shadow 0.2s;
}
.p1-rd-wall.is-packed .p1-rd-item {
	position: absolute;         /* left/top/width/height set by the script */
	width: auto;
	height: auto;
}
.p1-rd-item img {
	display: block;
	width: 100%;
	height: 100%;
	/* cover, never letterbox (v3, owner call): the box IS the physical
	   truth (stated inches × shared scale); when the image's own aspect
	   disagrees the photo crops to fill rather than showing background
	   slivers. >5% aspect mismatches stay flagged in the ?rddebug=1 list —
	   a data problem to fix in meta, not to display. Never distorts. */
	object-fit: cover;
}

/* Generous invisible tap target: tiny works (a 5×7 can render ~12px on
   mobile) still get a ≥44px hit area via the pseudo-element — anchors'
   pseudo-elements are clickable. */
.p1-rd-item::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: max(100%, 44px);
	height: max(100%, 44px);
	transform: translate(-50%, -50%);
}

/* Hover/focus: masonry lift + the house artwork drop-shadow (fallbacks
   mirror the p1-artwork.css token values — see file header). A purely
   PHYSICAL affordance: since v4 there is no caption in the markup at all
   (owner call — label-free wall; /artworks/ is equally bare). Titles
   stay in aria-labels (screen readers) and no title="" attributes exist
   anywhere in the wall, so no native tooltip can surface text either. */
.p1-rd-item:hover,
.p1-rd-item:focus-visible {
	transform: translateY(-3px);
	box-shadow: var(--p1-shadow-artwork, 0 10px 22px rgba(0, 0, 0, 0.3));
	z-index: 5;                 /* shadow rises above neighbours */
}
html.dark .p1-rd-item:hover,
html.dark .p1-rd-item:focus-visible {
	box-shadow: var(--p1-shadow-artwork, 0 10px 22px rgba(0, 0, 0, 0.6));
}
.p1-rd-item:focus-visible {
	outline: 2px solid var(--p1-accent);
	outline-offset: 2px;
}

/* v3/v4, owner calls: the v2 tiny-tier ALWAYS-VISIBLE callout went in v3;
   the v3 hover caption chip went in v4 — the wall reads as pure art at
   rest AND under the cursor. Touch and mouse users reach titles on the
   artwork page; assistive tech gets them from the links' aria-labels. */

/* ── Human-scale figures (v3 feature, v4 geometry): ONE gallery-visitor
   silhouette per load (the adult couple at a TRUE 72in or the kid at a
   TRUE 36in × the shared px-per-inch scale — seeded 50/50, roster is
   data on #p1-rd-figures), riding sticky down the wall's LEFT rail (v4
   owner call — the pointing gesture aims into the artworks; image not
   mirrored). The packing script soft-reserves the rail (art may overlap
   the figure zone by FIG_OVERLAP_FRAC of the figure width, painting
   ABOVE the silhouette — items follow this div in DOM order, and
   pointer-events:none keeps overlapped art clickable), sets the img
   height (heightIn × scale) and its sticky offset, and reveals the
   block only when the reservation is safe. EDGE HUG (v4 owner: "just a
   1/4 minimum padding from the side"): JS overrides `left` so the rail
   sits FIGURE_EDGE_PAD_PX (24px ≈ ¼in) from the BROWSER edge, not the
   wall box — negative on wide viewports (which is why the page carries
   no overflow clip). Decorative silhouette: 0.35 opacity (v4, was 0.5)
   + the --fade feet-fade trial below; the black PNG inverts in dark
   mode. Hidden: pre-pack, masonry/group modes (scale would be a lie),
   ≤700px (the scale bar suffices), and no-JS. ── */
.p1-rd-figures {
	position: absolute;
	top: 0;
	left: 0;                    /* JS refines to the browser-edge hug */
	bottom: 0;
	display: none;              /* JS + is-packed reveal below */
	pointer-events: none;
}
.p1-rd-wall.is-packed .p1-rd-figures:not([hidden]) { display: block; }
.p1-rd-figures__img {
	position: sticky;
	top: 0;                     /* JS refines: rides near the viewport bottom */
	display: block;
	width: auto;                /* height set by JS; width follows aspect */
	opacity: 0.35;              /* v4 owner: "30% more faint" (was 0.5) — same in dark */
}
/* Gradient trial (v4 owner: "possibly a bit of a gradient over it…
   not sure"): a subtle FEET-FADE — full strength at the heads, easing
   to ~75% by the shoes, the entourage-figure treatment in gallery
   renderings. (An edge-fade variant was screenshotted for comparison
   and judged worse — it fights the browser-edge hug.) ONE-LINE REVERT:
   delete the --fade modifier class in template-parts/real-dimensions.php. */
.p1-rd-figures--fade .p1-rd-figures__img {
	-webkit-mask-image: linear-gradient(to bottom, #000 55%, rgba(0, 0, 0, 0.75) 100%);
	mask-image: linear-gradient(to bottom, #000 55%, rgba(0, 0, 0, 0.75) 100%);
}
html.dark .p1-rd-figures__img {
	filter: invert(1);          /* black silhouette → light on dark walls */
}
@media (max-width: 700px) {
	.p1-rd-wall.is-packed .p1-rd-figures:not([hidden]) { display: none; }
}

/* ── MASONRY idiom ("Masonry Grid" mode — the v4 DEFAULT view). Mirrors
   .p1-masonry (p1-theme.css): CSS columns 4/3/2/1 at the same
   1100/700/420 breakpoints, 16px gaps, radius-md cards, bare images,
   hover lift only (the archive grid casts no shadow and shows no text —
   its meta block is commented out). Same DOM nodes as the wall — the
   script clears packing inline styles; these rules do the rest. */
.p1-rd-wall--grid {
	display: block;
	column-count: 4;
	column-gap: 16px;
}
@media (max-width: 1100px) { .p1-rd-wall--grid { column-count: 3; } }
@media (max-width: 700px)  { .p1-rd-wall--grid { column-count: 2; } }
@media (max-width: 420px)  { .p1-rd-wall--grid { column-count: 1; } }

.p1-rd-wall--grid .p1-rd-item {
	display: inline-block;      /* archive masonry item recipe */
	width: 100%;
	height: auto;
	vertical-align: top;
	break-inside: avoid;
	margin-bottom: 16px;
	border-radius: var(--p1-radius-md);
	overflow: hidden;
}
.p1-rd-wall--grid .p1-rd-item img {
	height: auto;               /* natural aspect — columns size the width */
}
/* Archive items are bare images: no artwork shadow either. */
.p1-rd-wall--grid .p1-rd-item:hover,
.p1-rd-wall--grid .p1-rd-item:focus-visible {
	box-shadow: none;           /* keep the translateY lift only */
}

/* ── GROUP mode ("Group by dimensions", v4): #p1-rd-groups is JS-built —
   a section per stored-W×H bucket, smallest area first (owner order),
   under a heading in the house dimensions format (24"W x 36"H).
   Headings are sanctioned wayfinding text (owner), not per-piece
   labels — the works themselves stay bare. Owner calls: works sit SIDE
   BY SIDE in wrapping rows (identical rectangles per group tile
   cleanly — flex rows at the masonry column widths/breakpoints, NOT
   stacked columns), and the dimension words run 2x the quiet micro
   tier — 1.6rem, which lands on the §2.2 modal control-title step
   (0.8rem × 2), not a stray. ── */
.p1-rd-groups[hidden] { display: none; }
.p1-rd-group { margin-bottom: 40px; }   /* the page's own section step (§3.1 archive padding) */
.p1-rd-group:last-child { margin-bottom: 0; }
.p1-rd-group__title {
	font-size: 1.6rem;          /* 2x the 0.8rem micro tier = the §2.2 1.6rem step */
	font-weight: 600;
	text-transform: uppercase;  /* no-op on 24"W x 36"H — kept for micro-label voice parity */
	letter-spacing: 0.08em;
	color: var(--p1-text-muted);
	margin: 0 0 14px;
}
.p1-rd-group__grid {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;                  /* THE page gap (§3.1 masonry step) */
}
.p1-rd-group__grid .p1-rd-item {
	/* Masonry column widths at the masonry breakpoints, flowed in ROWS. */
	width: calc((100% - 3 * 16px) / 4);
	height: auto;
	border-radius: var(--p1-radius-md);
	overflow: hidden;
}
.p1-rd-group__grid .p1-rd-item img {
	height: auto;               /* natural aspect — the row width sizes it */
}
.p1-rd-group__grid .p1-rd-item:hover,
.p1-rd-group__grid .p1-rd-item:focus-visible {
	box-shadow: none;           /* bare like the archive: lift only */
}
@media (max-width: 1100px) { .p1-rd-group__grid .p1-rd-item { width: calc((100% - 2 * 16px) / 3); } }
@media (max-width: 700px)  { .p1-rd-group__grid .p1-rd-item { width: calc((100% - 16px) / 2); } }
@media (max-width: 420px)  { .p1-rd-group__grid .p1-rd-item { width: 100%; } }

/* ── No-JS note / empty state ── */
.p1-rd-noscript,
.p1-rd-empty {
	color: var(--p1-text-muted);
	font-size: 0.9rem;
	margin-top: 24px;
}

/* ── Debug list (engineering surface — renders ONLY with ?rddebug=1
      since v3; visitors never see dimension text or badges) ── */
.p1-rd-debug {
	margin-top: 96px;
	padding-top: 24px;
	border-top: 1px solid var(--p1-border);
}
.p1-rd-debug__title {
	font-size: 0.8rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--p1-text-muted);
	margin: 0 0 8px;
}
.p1-rd-debug__coverage {
	font-size: 0.78rem;
	color: var(--p1-text-muted);
	margin: 0 0 16px;
}
.p1-rd-debug__list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.p1-rd-debug__row {
	display: flex;
	align-items: baseline;
	gap: 10px;
	padding: 4px 0;
	font-size: 0.78rem;
	color: var(--p1-text-muted);
}
.p1-rd-debug__name { color: var(--p1-text); }
.p1-rd-debug__detail em { font-style: italic; }

.p1-rd-badge {
	flex: none;
	display: inline-block;
	min-width: 72px;
	text-align: center;
	padding: 1px 8px;
	font-size: 0.65rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	border: 1px solid var(--p1-border-input);
	border-radius: var(--p1-radius-pill);
}
.p1-rd-badge--wh   { color: var(--p1-success); border-color: var(--p1-success); }
.p1-rd-badge--dims { color: var(--p1-success); border-color: var(--p1-success); }
.p1-rd-badge--awv  { color: var(--p1-text-muted); }
.p1-rd-badge--none { color: var(--p1-error); border-color: var(--p1-error); }