/* Labeled mini-card layout for matrix/metrictable rows on smaller screens.
   Hooks (.pg-rt-head / .pg-rt-row / .pg-rt-title / .pg-rt-wide / data-rtlabel)
   are stamped by assets/js/responsive-tables.js from each table's own header,
   so labels are always that table's real column names. Desktop is untouched —
   everything here is media-gated.

   :root:root lifts specificity to tie the page stylesheets' own !important
   mobile rules (e.g. `.pg-svcp-matrix.cols-4 .pg-svcp-matrix-row { … 1fr
   !important }` at (0,3,0)); this sheet is enqueued after them, so the tie
   breaks this way. */
@media (max-width: 900px) {
	:root:root .pg-rt-head { display: none !important; }

	:root:root .pg-rt-row {
		display: grid !important;
		grid-template-columns: 1fr 1fr !important;
		gap: 12px 14px !important;
		align-items: start !important;
	}

	/* inline text-align:center/right on value cells reads wrong once stacked */
	:root:root .pg-rt-row > * { text-align: left !important; }

	:root:root .pg-rt-row > .pg-rt-title {
		grid-column: 1 / -1;
		font-size: 15px;
		font-weight: bold;
		text-transform: uppercase;
	}

	/* prose cells (why-it-matters / operational-profile / delta commentary) get
	   the full card width and sort BELOW the short value cells, so pairs like
	   rate+tier stay side by side even when the prose sits between them in the
	   markup */
	:root:root .pg-rt-row > .pg-rt-wide { grid-column: 1 / -1; order: 99; }

	:root:root .pg-rt-row > [data-rtlabel]::before {
		content: attr(data-rtlabel);
		display: block;
		font: 600 11px/1.4 'Hanken Grotesk', sans-serif;
		letter-spacing: .06em;
		text-transform: uppercase;
		color: #9097A4;
		margin-bottom: 4px;
	}

	/* Funnel bars (Option A): full-width readable rows; the narrowing moves
	   into a thin gauge whose fill is the remaining-cohort fraction (stamped
	   by responsive-tables.js pass 3). */
	:root:root .pg-rt-funnel-row {
		width: 100% !important;
		flex-wrap: wrap;
	}
	:root:root .pg-rt-funnel-row .pg-rt-funnel-gauge {
		display: block;
		width: 100%;
		height: 3px;
		border-radius: 2px;
		background: rgba(255, 255, 255, .18);
		margin-top: 10px;
	}
	:root:root .pg-rt-funnel-row .pg-rt-funnel-gauge > span {
		display: block;
		height: 3px;
		border-radius: 2px;
		background: rgba(255, 255, 255, .92);
	}
}

/* The gauge exists in the DOM at every width — desktop hides it. */
@media (min-width: 901px) {
	.pg-rt-funnel-gauge { display: none; }
}