/**
 * acf/defect-explorer
 *
 * Everything is scoped under .gl-de and prefixed .gde-* so theme styles and block styles stay out of each other's way.
 * To retheme, override the custom properties on .gl-de from the theme, e.g.
 *
 *   .gl-de { --gde-ground: #fff; }
 *
 * Type: IBM Plex Sans throughout (the theme loads it).
 *
 * Layout
 *   ≥ 1100px  list | model | copy, in one full-width row
 *   760–1099  model across the top, list and copy side by side below
 *   < 760     model, then a swipeable row of numbered chips, then the copy
 */

.gl-de {
	/* IBM Plex Sans is loaded site-wide by the theme (300–600); the block uses it everywhere, no extra font request */
	--gde-sans: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
	--gde-display: var( --gde-sans );
	--gde-mono: var( --gde-sans );

	--gde-ground: #edf2f8;
	--gde-stage: #e3eaf3;
	--gde-surface: #ffffff;
	--gde-line: #d3deec;
	--gde-ink: #0b2545;
	--gde-ink-2: #4a6285;
	--gde-ink-3: #7186a3;
	--gde-accent: #00b6a5;   /* brand teal: list numbers, active tooth, focus, hover */
	--gde-link: #0050c8;     /* site label and case links */

	--gde-fill: linear-gradient( 45deg, #00b6a5 10%, #009bfa 90% );   /* markers, active states */
	--gde-ring: #00b6a5;
	--gde-on-fill: #ffffff;

	--gde-radius: 14px;
	--gde-shadow: 0 1px 2px rgba( 11, 37, 69, 0.06 ), 0 8px 24px -12px rgba( 11, 37, 69, 0.22 );
	--gde-stage-h: clamp( 460px, 66vh, 720px );
	--gde-gutter: clamp( 16px, 3vw, 40px );

	box-sizing: border-box;
	display: block;
	background: var( --gde-ground );
	color: var( --gde-ink );
	font-family: var( --gde-sans );
	font-size: 16px;
	line-height: 1.55;
}
.gl-de *,
.gl-de *::before,
.gl-de *::after { box-sizing: inherit; }
.gl-de [hidden] { display: none !important; }

.gl-de .gde-inner {
	max-width: 1680px;
	margin: 0 auto;
	padding: clamp( 24px, 4vw, 56px ) var( --gde-gutter );
	display: grid;
	gap: clamp( 16px, 2vw, 28px );
}

/* ---------- heading ---------- */
.gl-de .gde-head { max-width: 760px; }
.gl-de .gde-title {
	margin: 0;
	font-family: var( --gde-display );
	font-size: clamp( 26px, 3vw, 40px );
	line-height: 1.12;
	font-weight: 600;
	color: var( --gde-ink );
	text-wrap: balance;
}
.gl-de .gde-intro { margin: 10px 0 0; color: var( --gde-ink-2 ); max-width: 62ch; }

/* ---------- layout ---------- */
.gl-de .gde-layout {
	display: grid;
	grid-template-columns: minmax( 210px, 260px ) minmax( 0, 1fr ) minmax( 300px, 380px );
	grid-template-areas: "list stage copy";
	gap: clamp( 16px, 2vw, 28px );
	align-items: start;
}
.gl-de .gde-list { grid-area: list; min-width: 0; }
.gl-de .gde-stage { grid-area: stage; min-width: 0; }
.gl-de .gde-copy { grid-area: copy; min-width: 0; }

/* ---------- site list ---------- */
.gl-de .gde-list ol {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 6px;
}
.gl-de .gde-list li { margin: 0; padding: 0; }
.gl-de .gde-site {
	-webkit-tap-highlight-color: transparent;
	width: 100%;
	display: grid;
	grid-template-columns: 30px minmax( 0, 1fr );
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	margin: 0;
	background: transparent;
	border: 1px solid transparent;
	border-radius: 10px;
	color: var( --gde-ink );
	font: inherit;
	font-size: 15px;
	line-height: 1.3;
	text-align: left;
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease;
}
.gl-de .gde-site:hover { background: var( --gde-surface ); border-color: var( --gde-line ); }
.gl-de .gde-n {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	font-family: var( --gde-mono );
	font-size: 13px;
	font-weight: 500;
	color: var( --gde-accent );
	border: 1.5px solid currentColor;
	background: var( --gde-surface );
}
.gl-de .gde-site[aria-current="true"] { background: var( --gde-surface ); border-color: var( --gde-line ); box-shadow: var( --gde-shadow ); }
.gl-de .gde-site[aria-current="true"] .gde-n { background: var( --gde-fill ); color: var( --gde-on-fill ); border-color: transparent; }
.gl-de .gde-site[aria-current="true"] .gde-t { font-weight: 600; }

/* ---------- stage ---------- */
.gl-de .gde-stage {
	/* a long press should rotate the model, not select it or open the callout menu */
	-webkit-user-select: none;
	user-select: none;
	-webkit-touch-callout: none;
	-webkit-tap-highlight-color: transparent;
	position: relative;
	height: var( --gde-stage-h );
	border-radius: var( --gde-radius );
	overflow: hidden;
	background: radial-gradient( 120% 90% at 50% 40%, var( --gde-surface ) 0%, var( --gde-stage ) 72% );
}
.gl-de model-viewer {
	-webkit-user-select: none;
	user-select: none;
	-webkit-touch-callout: none;
	outline: none;
	display: block;
	width: 100%;
	height: 100%;
	background: transparent;
	--poster-color: transparent;
	--progress-bar-color: transparent;
}
.gl-de .gde-loading {
	position: absolute;
	left: 50%;
	bottom: 72px;
	width: 140px;
	height: 3px;
	margin-left: -70px;
	border-radius: 2px;
	background: var( --gde-line );
	overflow: hidden;
}
.gl-de .gde-loading span { display: block; height: 100%; width: 0; background: var( --gde-fill ); transition: width .2s ease; }
.gl-de .gde-loading.is-done { display: none; }

/* markers */
.gl-de .gde-hs {
	--size: 32px;
	width: var( --size );
	height: var( --size );
	padding: 0;
	border-radius: 50%;
	border: 2px solid var( --gde-on-fill );
	background: var( --gde-fill );
	color: var( --gde-on-fill );
	font-family: var( --gde-mono );
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	display: grid;
	place-items: center;
	cursor: pointer;
	box-shadow: 0 2px 8px rgba( 0, 0, 0, .25 );
	transition: transform .15s ease, opacity .2s ease;
}
.gl-de .gde-hs:hover { transform: scale( 1.12 ); }
.gl-de .gde-hs:not( [data-visible] ) { opacity: .3; }
.gl-de .gde-hs[aria-pressed="true"] { outline: 3px solid color-mix( in srgb, var( --gde-ring ) 45%, transparent ); outline-offset: 3px; }
.gl-de .gde-hs[aria-pressed="true"]::after {
	content: "";
	position: absolute;
	inset: -9px;
	border-radius: 50%;
	border: 2px solid var( --gde-ring );
	animation: gde-ping 1.8s ease-out infinite;
	pointer-events: none;
}
@keyframes gde-ping { from { transform: scale( .7 ); opacity: .9; } to { transform: scale( 1.5 ); opacity: 0; } }

/* stage toggles */
.gl-de .gde-toggle {
	position: absolute;
	top: 14px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	height: 36px;
	margin: 0;
	padding: 0 13px 0 10px;
	font-family: var( --gde-mono );
	font-size: 12px;
	line-height: 1;
	color: var( --gde-ink-2 );
	background: var( --gde-surface );
	border: 1px solid var( --gde-line );
	border-radius: 999px;
	cursor: pointer;
}
.gl-de .gde-toggle svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.gl-de .gde-toggle:hover { border-color: var( --gde-ring ); }
.gl-de .gde-toggle[aria-pressed="true"] { background: var( --gde-fill ); color: var( --gde-on-fill ); border-color: transparent; }
.gl-de .gde-toggle--cut { left: 14px; }
.gl-de .gde-toggle--grid { right: 14px; }
.gl-de .gde-slash { display: none; }
.gl-de .gde-toggle--cut[aria-pressed="false"] .gde-slash { display: inline; }

.gl-de .gde-tools {
	position: absolute;
	left: 14px;
	right: 14px;
	bottom: 14px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 8px;
	pointer-events: none;
}
.gl-de .gde-tools > * { pointer-events: auto; }
.gl-de .gde-hint {
	font-family: var( --gde-mono );
	font-size: 12px;
	color: var( --gde-ink-3 );
	background: color-mix( in srgb, var( --gde-surface ) 80%, transparent );
	border-radius: 999px;
	padding: 6px 12px;
}
.gl-de .gde-chip {
	margin: 0;
	font-family: var( --gde-mono );
	font-size: 12px;
	line-height: 1;
	color: var( --gde-ink );
	background: var( --gde-surface );
	border: 1px solid var( --gde-line );
	border-radius: 999px;
	padding: 9px 14px;
	cursor: pointer;
}
.gl-de .gde-chip:hover { border-color: var( --gde-ring ); }

/* ---------- copy panel ---------- */
.gl-de .gde-copy { max-height: var( --gde-stage-h ); overflow-y: auto; }
.gl-de .gde-card {
	background: var( --gde-surface );
	border: 1px solid var( --gde-line );
	border-radius: var( --gde-radius );
	box-shadow: var( --gde-shadow );
	padding: clamp( 20px, 2vw, 28px );
	display: grid;
	gap: 12px;
}
.gl-de .gde-meta {
	font-family: var( --gde-mono );
	font-size: 12px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var( --gde-link );
}
.gl-de .gde-card-title {
	margin: 0;
	font-family: var( --gde-display );
	font-size: clamp( 21px, 1.6vw, 26px );
	line-height: 1.2;
	font-weight: 600;
	color: var( --gde-ink );
	text-wrap: balance;
}
.gl-de .gde-card p,
.gl-de .gde-body { margin: 0; color: var( --gde-ink-2 ); }
.gl-de .gde-body > * + * { margin-top: .75em; }
.gl-de .gde-body > :first-child { margin-top: 0; }
.gl-de .gde-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	justify-self: start;
	font-weight: 600;
	color: var( --gde-link );
	text-decoration: none;
	line-height: 1.35;
}
.gl-de .gde-link:hover { text-decoration: underline; }
.gl-de .gde-link svg { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.gl-de .gde-nav { display: flex; justify-content: space-between; gap: 8px; margin-top: 4px; }
.gl-de .gde-nav button {
	margin: 0;
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	color: var( --gde-ink );
	background: none;
	border: 1px solid var( --gde-line );
	border-radius: 8px;
	padding: 10px 14px;
	cursor: pointer;
}
.gl-de .gde-nav button:hover { border-color: var( --gde-ring ); color: var( --gde-accent ); }

/* ---------- placement mode (editors only) ---------- */
.gl-de .gde-place { display: grid; gap: 10px; justify-items: start; }
.gl-de .gde-place-panel {
	width: 100%;
	display: grid;
	gap: 8px;
	padding: 14px 16px;
	border-radius: 10px;
	background: #fff4de;
	border: 1px solid #e9c98a;
	color: #5a3c00;
}
.gl-de .gde-place-panel pre { margin: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; white-space: pre-wrap; word-break: break-all; color: var( --gde-ink ); background: none; padding: 0; }
.gl-de .gde-place-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.gl-de .gde-probe { width: 14px; height: 14px; border-radius: 50%; background: #e4541c; border: 2px solid #fff; pointer-events: none; }
.gl-de.is-placing model-viewer { cursor: crosshair; }

/* focus */
.gl-de button:focus-visible,
.gl-de a:focus-visible { outline: 3px solid var( --gde-ring ); outline-offset: 2px; }

/* ---------- tablet: model on top, list + copy below ---------- */
@media ( max-width: 1099px ) {
	.gl-de { --gde-stage-h: clamp( 380px, 58vh, 600px ); }
	.gl-de .gde-layout {
		grid-template-columns: minmax( 200px, 250px ) minmax( 0, 1fr );
		grid-template-areas: "stage stage" "list copy";
	}
	.gl-de .gde-copy { max-height: none; overflow: visible; }
}

/* ---------- phone: stack, list becomes a chip row ---------- */
@media ( max-width: 759px ) {
	.gl-de { --gde-stage-h: clamp( 320px, 92vw, 460px ); --gde-gutter: 16px; }
	.gl-de .gde-inner { padding-top: 24px; padding-bottom: 28px; padding-left: max( 16px, env( safe-area-inset-left, 0px ) ); padding-right: max( 16px, env( safe-area-inset-right, 0px ) ); }
	.gl-de .gde-layout {
		grid-template-columns: minmax( 0, 1fr );
		grid-template-areas: "stage" "list" "copy";
		gap: 14px;
	}
	.gl-de .gde-list { margin: 0 calc( -1 * var( --gde-gutter ) ); }
	.gl-de .gde-list ol {
		display: flex;
		gap: 8px;
		overflow-x: auto;
		scroll-snap-type: x proximity;
		padding: 2px var( --gde-gutter ) 6px;
		scroll-padding-inline: var( --gde-gutter );
		scrollbar-width: none;
	}
	.gl-de .gde-list ol::-webkit-scrollbar { display: none; }
	.gl-de .gde-list li { flex: none; scroll-snap-align: start; }
	.gl-de .gde-site {
		width: auto;
		grid-template-columns: 26px auto;
		gap: 8px;
		padding: 7px 14px 7px 7px;
		border-radius: 999px;
		background: var( --gde-surface );
		border-color: var( --gde-line );
		font-size: 14px;
		white-space: nowrap;
	}
	.gl-de .gde-n { width: 26px; height: 26px; font-size: 12px; }
	.gl-de .gde-site[aria-current="true"] { box-shadow: none; border-color: var( --gde-ring ); }
	.gl-de .gde-hint { display: none; }
	.gl-de .gde-toggle { height: 38px; width: 38px; padding: 0; justify-content: center; top: 10px; }
	.gl-de .gde-toggle--cut { left: 10px; }
	.gl-de .gde-toggle--grid { right: 10px; }
	.gl-de .gde-toggle .gde-lbl { display: none; }
	.gl-de .gde-tools { left: 10px; right: 10px; bottom: 10px; justify-content: flex-end; }
	.gl-de .gde-hs { --size: 34px; }
	.gl-de .gde-card { padding: 20px; }
}

@media ( prefers-reduced-motion: reduce ) {
	.gl-de .gde-hs,
	.gl-de .gde-hs::after,
	.gl-de .gde-site { transition: none; animation: none; }
}