/* ---------------------------------------------------------------
   Subtle surface texture - a fine dot grid plus hairline column
   guides. Deliberately near-threshold: it should read as paper
   grain, never as pattern.

   Standalone file (not part of styles.scss) so a Sass rebuild
   cannot overwrite it, and deleting this file fully reverts.

   Targets .mstr-section-wrapper-inner because that is the surface
   that is visible at every breakpoint.

   Photo-backed sections are excluded via :not(:has(> .section__source)) -
   i.e. by whether a picture layer is actually present. Excluding on the
   .background--image class instead does NOT work: almost every section
   carries that class whether or not it has an image, so texture would
   never appear anywhere. If :has() is unsupported the rule is simply
   dropped and the design falls back to untextured.
   --------------------------------------------------------------- */

:root {
	--tex-dot-size: 22px;   /* grid pitch */
	--tex-dot-light: rgba(0, 0, 0, 0.055);
	--tex-dot-dark: rgba(255, 255, 255, 0.05);
	--tex-rule-light: rgba(0, 0, 0, 0.07);
	--tex-rule-dark: rgba(255, 255, 255, 0.06);
}

/* --- Dot grid: light sections ----------------------------------- */
#mstr-theme .mstr-section-wrapper.section--light:not(:has(> .section__source)) > .mstr-section-wrapper-inner {
	background-image: radial-gradient(var(--tex-dot-light) 1px, transparent 1px);
	background-size: var(--tex-dot-size) var(--tex-dot-size);
	background-position: center top;
}

/* --- Dot grid: dark sections ------------------------------------ */
#mstr-theme .mstr-section-wrapper.section--dark:not(:has(> .section__source)) > .mstr-section-wrapper-inner {
	background-image: radial-gradient(var(--tex-dot-dark) 1px, transparent 1px);
	background-size: var(--tex-dot-size) var(--tex-dot-size);
	background-position: center top;
}

/* --- Hairline column guides ------------------------------------- */
/* Inset shadows rather than borders: no layout shift, no risk of
   pushing the 1400px column into horizontal overflow. Only from the
   breakpoint where the column actually has margin either side. */
@media (min-width: 75em) {
	#mstr-theme .mstr-section-wrapper.section--light:not(:has(> .section__source)) > .mstr-section-wrapper-inner {
		box-shadow: inset 1px 0 0 var(--tex-rule-light),
		            inset -1px 0 0 var(--tex-rule-light);
	}

	#mstr-theme .mstr-section-wrapper.section--dark:not(:has(> .section__source)) > .mstr-section-wrapper-inner {
		box-shadow: inset 1px 0 0 var(--tex-rule-dark),
		            inset -1px 0 0 var(--tex-rule-dark);
	}
}

/* --- Section divider -------------------------------------------- */
/* The theme already draws a #f4f4f4 rule under every section; it is
   invisible against dark sections, so give those one that reads. */
#mstr-theme .mstr-section-wrapper.section--dark {
	border-bottom-color: rgba(255, 255, 255, 0.08);
}