/* ═══════════════════════════════════════════════════════════════
   TestRoute - shared page backdrop
   Companion to includes/page-backdrop.php. The geometry is argued there.
   ═══════════════════════════════════════════════════════════════ */

/* Covers the hero and nothing else. The parent needs position:relative and
   overflow:hidden; .trh-hero has both already.

   background-size is the tile at its DRAWN size, so a road stays one pixel on
   every monitor and a wider viewport gets more city instead of a bigger one.
   4.51.0 scaled the drawing to cover instead, which made the strokes 2.8x on
   a 2560 screen. That is what "heftig" was.

   z-index 0, under .tra-wrap at 2. Nothing sits between the two. */
.tr-bd {
	position: absolute !important;
	inset: 0 !important;
	z-index: 0 !important;
	pointer-events: none !important;
	background-repeat: repeat !important;
	background-size: 900px 620px !important;
	background-position: center top !important;
	opacity: var(--tr-bd-mult, 1) !important;
	/* ALLEEN ONDERAAN (4.51.4).
	   Dit liep gelijk op met de kleuromslag van .trh-hero, uit angst dat er
	   raster op de footerkleur zou komen te liggen. Die angst was onterecht:
	   #0c1927 en #0d1b2a schelen één punt per kanaal, dus die grens is zelf
	   niet te zien en textuur eroverheen dus ook niet. Het kostte wel de
	   textuur op tweederde van de pagina.
	   Nu volle sterkte tot 220px voor de onderrand, met 55% als bodem voor een
	   korte hero, en helemaal weg 30px voor de rand zodat er niets tegen de
	   footer aan ligt. */
	-webkit-mask-image: linear-gradient(to bottom, #000 0, #000 max(55%, calc(100% - 220px)), transparent calc(100% - 30px)) !important;
	mask-image: linear-gradient(to bottom, #000 0, #000 max(55%, calc(100% - 220px)), transparent calc(100% - 30px)) !important;
}

/* Phone. The card is close to full width here, so the field is a frame of a
   few dozen pixels rather than two wide columns, and at full strength a frame
   reads as a border somebody forgot to finish. Down to 70%.

   Not display:none. The strips above and below the card are exactly where the
   emptiness is on a phone, which is the reason this component exists. */
@media (max-width: 699px) {
	.tr-bd { opacity: calc(var(--tr-bd-mult, 1) * .7) !important; }
}

/* Windows High Contrast strips fills and forces system colours, which turns a
   5% texture into hard lines behind a form. It is decoration; it goes. */
@media (forced-colors: active) {
	.tr-bd { display: none !important; }
}