/**
 * Gymnastics Plus - Gymnast app legal pages (Privacy Policy, Terms)
 * ---------------------------------------------------------------------------
 * Pushed-screen chrome + document typography for the two legal pages on the
 * APP DOOR (inc/gp-gymnast-app-legal.php). Tier-2/3 semantics only, no raw
 * hex, no :root. The chrome numbers are the Mind Lab lesson's
 * (css/gp-gymnast-app-mindlab.css), so the back row reads as the same control
 * everywhere; the surface is the frozen .gp-card.
 *
 * The text is whatever the page editor holds: h1/h2/h3, p, ul/ol, strong, a.
 * Everything below is scoped under .gp-gal__doc so it styles the DOCUMENT and
 * never the chrome.
 */

.gp-gal {
	padding: 0 0 14px;
}

/* The [hidden] attribute always wins (module-wide guard). */
.gp-gal [hidden] {
	display: none !important;
}

.gp-gal__vh {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	margin: 0;
}

/* ==========================================================================
   TITLE ROW: back control, centred title, 44px spacer.
   ========================================================================== */

.gp-gal__backrow {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 10px 8px 8px;
	flex: none;
}

.gp-gal__back {
	flex: none;
	width: 44px;
	height: 44px;
	border-radius: var(--gp-r-full, 999px);
	display: grid;
	place-items: center;
	color: var(--gp-color-text);
	text-decoration: none;
	transition: background var(--gp-motion-duration-instant, 120ms) var(--gp-motion-ease-out);
}

.gp-gal__back:active {
	background: var(--gp-color-surface-2);
}

.gp-gal__backtitle {
	flex: 1;
	min-width: 0;
	text-align: center;
	font-size: var(--gp-t-sub);
	font-weight: 600;
	color: var(--gp-color-text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.gp-gal__backspacer {
	flex: none;
	width: 44px;
}

/* ==========================================================================
   THE SURFACE. One card, the document inside it; nothing on the canvas.
   ========================================================================== */

.gp-gal__pane {
	padding: 0 16px calc(env(safe-area-inset-bottom, 0px) + 24px);
}

.gp-gal__card {
	margin: 4px 0 0;
	overflow: hidden;
}

.gp-gal__doc {
	padding: 22px 18px 26px;
	color: var(--gp-color-text);
	font-size: var(--gp-t-sub);
	line-height: 1.55;
	overflow-wrap: anywhere;
}

/* Document title (the page's own top heading), then the section ramp. Two
   steps between title and section so they never read as the same level. */
.gp-gal__doc h1 {
	margin: 0 0 6px;
	font-size: var(--gp-t-md);
	line-height: 1.25;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--gp-color-text);
}

.gp-gal__doc h2 {
	margin: 26px 0 8px;
	font-size: var(--gp-t-body);
	line-height: 1.3;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--gp-color-text);
}

.gp-gal__doc h3,
.gp-gal__doc h4 {
	margin: 18px 0 6px;
	font-size: var(--gp-t-sub);
	line-height: 1.35;
	font-weight: 600;
	color: var(--gp-color-text);
}

.gp-gal__doc h1:first-child,
.gp-gal__doc h2:first-child,
.gp-gal__doc h3:first-child {
	margin-top: 0;
}

.gp-gal__doc p {
	margin: 0 0 12px;
}

.gp-gal__doc p:last-child,
.gp-gal__doc ul:last-child,
.gp-gal__doc ol:last-child {
	margin-bottom: 0;
}

/* Bold runs stay bold, and take the text ink even where old content carried
   an inline colour (the pre-rewrite Terms page does). */
.gp-gal__doc strong,
.gp-gal__doc b {
	font-weight: 600;
	color: var(--gp-color-text-strong, var(--gp-color-text)) !important;
}

.gp-gal__doc em {
	font-style: italic;
}

/* Lists indent from the text edge, with a little air between items. */
.gp-gal__doc ul,
.gp-gal__doc ol {
	margin: 0 0 14px;
	padding-left: 1.35em;
}

.gp-gal__doc li {
	margin: 0 0 6px;
	padding-left: 2px;
}

.gp-gal__doc li:last-child {
	margin-bottom: 0;
}

.gp-gal__doc li > ul,
.gp-gal__doc li > ol {
	margin-top: 6px;
	margin-bottom: 0;
}

.gp-gal__doc a {
	color: var(--gp-color-link);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.gp-gal__doc hr {
	border: 0;
	border-top: 1px solid var(--gp-color-border);
	margin: 20px 0;
}

.gp-gal__doc blockquote {
	margin: 0 0 14px;
	padding: 2px 0 2px 14px;
	border-left: 3px solid var(--gp-color-border);
	color: var(--gp-color-text-secondary, var(--gp-color-text));
}

/* A table wider than the phone scrolls inside itself, never the page. */
.gp-gal__doc table {
	display: block;
	width: 100%;
	max-width: 100%;
	overflow-x: auto;
	border-collapse: collapse;
	font-size: var(--gp-t-foot);
	margin: 0 0 14px;
}

.gp-gal__doc th,
.gp-gal__doc td {
	padding: 6px 8px;
	border-bottom: 1px solid var(--gp-color-border);
	text-align: left;
	vertical-align: top;
}

.gp-gal__doc img {
	max-width: 100%;
	height: auto;
}

/* Draft-only: a [CONFIRM ...] marker in text still under review. Visible on
   purpose, so a draft reads as a draft. The approved text has none. */
.gp-gal__confirm {
	background: var(--gp-color-highlight-bg);
	color: var(--gp-color-text);
	border-radius: var(--gp-r-xs);
	padding: 0 4px;
	font-weight: 600;
}

.gp-gal__empty {
	margin: 0;
	color: var(--gp-color-text-muted);
}

/* ==========================================================================
   FROZEN FRAME ON THE PHONE: title row stays, the document scrolls.
   Pushed-screen chrome: no logo header, no tab bar. Neither renders on this
   page today (it is outside the portal page list), and the rules below keep
   that true if the list ever grows. Doubled class per the house pattern.
   ========================================================================== */

@media (max-width: 1024px) {
	.gp-gal {
		height: calc(100lvh - env(safe-area-inset-top, 0px));
		display: flex;
		flex-direction: column;
		overflow: hidden;
		padding-bottom: 0;
	}

	.gp-gal__pane {
		flex: 1 1 auto;
		min-height: 0;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior: contain;
	}

	/* THE SHELL HEADER IS NO LONGER HIDDEN HERE, AND HIDING IT WAS A LIVE BUG.
	   This rule was correct when this screen drew its own .gp-gal__backrow: the
	   shell header would have been a second bar above it. On 2026-09-09 the
	   screen ADOPTED the shell header and the bespoke row went behind a
	   logged-out check, and this rule was not removed with it. The result, on
	   dev and reported by the owner: a signed-in member got NO header at all on
	   Privacy Policy or Terms. The header was in the DOM, carrying the light
	   class and the right title, and painting nothing.

	   HOW IT PASSED ITS OWN TESTS, which is the part worth keeping: every row I
	   wrote asked whether the control was PRESENT (a back element, a title
	   string, the modifier class) and none asked whether it PAINTED. This
	   codebase's own rule is to assert computed visibility and never DOM
	   presence, and the rows now do.

	   Signed out there is nothing to hide anyway: gp_render_mobile_nav() returns
	   early for a logged-out request, so no .gp-mobile-header is rendered and the
	   bespoke row is the only chrome. The two other hides below stay: the bottom
	   bar and the sidebar's own phone header are both genuinely unwanted here. */

	/* CLEAR THE FIXED HEADER THIS SCREEN NOW SHOWS. The offset goes on the frame,
	   which is a full-height flex column with the scroller inside it, so the pane
	   starts below the bar and scrolls under it rather than the first line
	   beginning underneath it.

	   !important IS LOAD-BEARING, not decoration. css/gp-mobile-single.css sets
	   `.gp-content { padding: 0 16px 24px !important }` for every pushed screen,
	   and this frame IS a .gp-content, so a plain rule here loses no matter how
	   specific it is. Measured on the live page: without it the computed
	   padding-top stayed 0px and the first card sat at y=4, under a 52px bar;
	   with it the pane starts at 52 and the card at 56. Same trap the gutter rule
	   already records for this stylesheet family.

	   The height stays 100lvh with border-box, so the frame still fills the
	   screen and the padding eats into it rather than pushing the bottom off. */
	.gp-gal-page .gp-content.gp-gal {
		box-sizing: border-box;
		padding-top: calc(var(--gp-mobile-header-height, 52px) + env(safe-area-inset-top, 0px)) !important;
	}

	.gp-gal-page .gp-bottom-nav.gp-bottom-nav {
		display: none !important;
	}

	/* The sidebar include's OWN phone header (hamburger / title / gear, from
	   css/gp-portal-sidebar.css: fixed, z-index 90, shown at <=768px). The
	   mobile-nav stylesheets hide it on portal pages, and they never load
	   here, so it painted over the back row for a signed-in member on dev
	   (2026-09-04). Retired the same way as the other two. */
	.gp-gal-page .gp-portal-mobile-header.gp-portal-mobile-header {
		display: none !important;
	}

	.gp-gal-page .gp-portal-main {
		padding-top: env(safe-area-inset-top, 0px) !important;
		padding-bottom: 0 !important;
	}
}

/* Desktop: the document sits on a comfortable measure, centred. */
@media (min-width: 1025px) {
	.gp-gal {
		max-width: 760px;
		margin: 0 auto;
		padding: 12px 24px 40px;
	}

	.gp-gal__doc {
		padding: 30px 32px 34px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.gp-gal__back {
		transition: none;
	}
}