/*
 * Φυσική Γ' Γυμνασίου – simulation page layout (with theme.css + sim-core.js).
 * Visual language = STEMTeacher brand (docs/brand-visual-2026.md in the site repo).
 * Mobile-first: base styles = phone portrait (canvas on top, controls below).
 * The landscape query MUST match LANDSCAPE_QUERY in sim-core.js.
 */

/* Page base (reset, body type, selection, focus, .sr-only): theme.css. */
html, body { min-height: 100%; }

.gg-layout {
	display: flex;
	flex-direction: column;
	gap: var(--sp-2);
	padding: var(--sp-2) max(var(--sp-2), env(safe-area-inset-right)) max(var(--sp-2), env(safe-area-inset-bottom)) max(var(--sp-2), env(safe-area-inset-left));
}

#stage {
	position: relative;
	min-width: 0;
	display: flex;
	justify-content: center;
}

#stage canvas {
	display: block;
	background: var(--md-surface);
	border: 1px solid var(--md-outline-variant);
	border-radius: var(--r-md);
	touch-action: pan-y pinch-zoom; /* the page scrolls; a touch on a draggable object is claimed in sim-core (touchstart) */
	user-select: none;
	-webkit-user-select: none;
	-webkit-touch-callout: none;
}

#panel {
	width: 100%;
	max-width: 42rem; /* stacked on tablets: keep controls a comfortable width */
	margin: 0 auto;
	background: var(--md-surface);
	border: 1px solid var(--md-outline-variant);
	border-radius: var(--r-md);
	padding: var(--sp-3) var(--sp-4) var(--sp-4);
	user-select: none;
	-webkit-user-select: none;
	overflow-wrap: break-word; /* last resort for a GG.nobreak formula wider than the panel: no word breaks otherwise */
}

/* Landscape (tablet, laptop, phone on its side): controls to the right. */
@media (min-aspect-ratio: 5/4) {
	.gg-layout { flex-direction: row; align-items: flex-start; }
	#stage { flex: 1 1 auto; }
	#panel { flex: 0 0 17rem; width: auto; margin: 0; max-height: calc(100dvh - var(--sp-4)); overflow-y: auto; }
	#panel .gg-title { flex-basis: 100%; } /* narrow side panel: icons on their own row, the title gets the full width */
}
@media (min-aspect-ratio: 5/4) and (max-height: 500px) {
	#panel { flex-basis: 14.5rem; font-size: var(--fs-body-s); padding: var(--sp-2) var(--sp-3); }
	.gg-control { margin: var(--sp-1) 0 var(--sp-2); }
}

/* Title: h1 → Literata 600, never below 24px (brand V4.4/V4.8). */
/* Words never break inside: when the title's longest word does not fit beside the icons, the icons move to a row
 * above it (wrap-reverse; flex-end = top). */
.gg-header { display: flex; flex-wrap: wrap-reverse; align-items: flex-end; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.gg-title + .gg-round { margin-left: auto; }
.gg-title {
	flex: 1 1 auto;
	width: min-content; /* wraps only at spaces, then grows into the free space */
	margin: 0;
	font-family: var(--font-serif);
	font-size: var(--fs-headline-s);
	font-weight: 600;
	line-height: var(--lh-tight);
	letter-spacing: var(--track-headline);
	text-wrap: balance;
}
/* Group labels: the brand's overline role (Inter 600 · 12px · uppercase · +0.08em). */
.gg-section {
	margin: var(--sp-4) 0 var(--sp-1);
	padding-bottom: var(--sp-1);
	border-bottom: 1px solid var(--md-outline-variant);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--md-on-surface-variant);
}

.gg-control { margin: var(--sp-2) 0 var(--sp-3); }
/* A label wraps only at spaces; when it cannot fit beside the value, the value moves to the next line, on the right. */
.gg-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); min-height: 2rem; }
.gg-label { flex: 1 0 auto; width: min-content; font-family: var(--font-math); font-size: var(--fs-body-l); }
.gg-label + * { margin-left: auto; }
.gg-pair { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); min-width: 0; max-width: 100%; } /* the unit drops below the box when large text leaves no room */
.gg-check > span { flex: 1 1 auto; width: min-content; } /* wraps beside its box, at spaces */
.gg-label i { font-style: italic; }
.gg-unit { min-width: 2.6em; font-family: var(--font-math); }
.gg-value { min-width: 4.5em; text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 500; }

/* Inputs: --md-outline is their only boundary, so it must be the ≥3:1 token (brand V3.4). */
.gg-number {
	width: min(5.5em, 100%);
	min-height: 2.75rem;
	font: inherit;
	font-family: var(--font-mono);
	font-size: max(16px, 1rem); /* no iOS zoom on focus */
	padding: var(--sp-1) var(--sp-2);
	text-align: right;
	color: var(--md-on-surface);
	background: var(--md-surface);
	border: 1px solid var(--md-outline);
	border-radius: var(--r-sm);
}
.gg-range { width: 100%; height: 2.75rem; margin: 0; accent-color: var(--md-primary); touch-action: pan-y; cursor: pointer; }

.gg-check { cursor: pointer; min-height: 44px; touch-action: manipulation; }

/* Controls a sim hides for now (el.hidden), e.g. a third lamp's slider, the exercise answer box. */
#panel [hidden] { display: none !important; }

/* Answer box (sim.answer): exercise mode. */
.gg-answer .gg-btn { margin-top: var(--sp-2); }
.gg-answer-status { margin: var(--sp-2) 0 0; font-size: var(--fs-body-s); line-height: var(--lh-body); text-wrap: pretty; }
.gg-answer-status:empty { margin: 0; } /* not display: none: a live region must stay in the accessibility tree to be announced */
.gg-answer-status.is-right { display: flex; align-items: flex-start; gap: var(--sp-1); font-weight: 600; color: var(--md-primary); }
.gg-check input { width: 1.25rem; height: 1.25rem; accent-color: var(--md-primary); }

/* Choice (sim.choice): a native radio group drawn as a segmented control. The radio stays focusable
 * (arrow keys move between options); only its dot is hidden, the whole segment shows the state. */
.gg-choice { margin: var(--sp-2) 0; padding: 0; border: 0; min-width: 0; }
.gg-choice legend { padding: 0; margin-bottom: var(--sp-1); font-size: var(--fs-body-s); color: var(--md-on-surface-variant); }
.gg-seg { display: flex; border: 1px solid var(--md-outline); border-radius: var(--r-full); overflow: hidden; }
.gg-seg label {
	position: relative; /* the visually hidden radio inside is absolute: without this it sits at its static place in the document and focusing it scrolls the page */
	flex: 1 1 0;
	display: flex; align-items: center; justify-content: center;
	min-height: 2.75rem; padding: 0 var(--sp-2);
	font-weight: 600; text-align: center; line-height: var(--lh-snug);
	color: var(--md-on-surface); cursor: pointer; touch-action: manipulation;
	overflow-wrap: anywhere; /* last resort, see .gg-btn */
	transition: background-color var(--dur-fast) var(--ease-standard);
}
.gg-seg label + label { border-left: 1px solid var(--md-outline); }
.gg-seg-col { flex-direction: column; border-radius: var(--r-md); }
.gg-seg-col label { justify-content: flex-start; padding: 0 var(--sp-3); }
.gg-seg-col label + label { border-left: 0; border-top: 1px solid var(--md-outline); }
.gg-seg-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-radius: var(--r-md); }
.gg-seg-grid label { padding: 0 var(--sp-1); font-size: var(--fs-body-s); }
.gg-seg-grid label + label { border-left: 0; }
.gg-seg-grid label:nth-child(even) { border-left: 1px solid var(--md-outline); }
.gg-seg-grid label:nth-child(n+3) { border-top: 1px solid var(--md-outline); }
.gg-seg input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.gg-seg label:has(input:checked) { color: var(--md-on-primary); background: var(--md-primary); }
.gg-seg label:has(input:focus-visible) { outline: 2px solid var(--md-primary); outline-offset: -4px; box-shadow: inset 0 0 0 4px var(--md-surface); }
.gg-seg label:has(input:checked):has(input:focus-visible) { outline-color: var(--md-on-primary); } /* the ring must not be the fill's own colour */
.gg-seg label:hover:not(:has(input:checked)) { background: var(--md-primary-container); }

/* Buttons – brand pills: filled (primary action), tonal (secondary), sentence case, Inter 600. */
.gg-buttons { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-2) 0; } /* the row wraps first; a label wraps (at spaces only) only when it cannot fit a line of its own, e.g. 320 px with 200 % text */
.gg-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sp-2);
	min-height: 2.75rem;
	max-width: 100%;
	padding: var(--sp-2) var(--sp-5);
	font: inherit;
	font-weight: 600;
	line-height: var(--lh-snug);
	text-align: center;
	text-wrap: balance;
	letter-spacing: 0.01em;
	white-space: normal;
	overflow-wrap: anywhere; /* last resort, as in #panel: only a word that alone exceeds the line breaks (the label sits in an anonymous flex item, which break-word cannot shrink) */
	color: var(--md-on-primary-container);
	background: var(--md-primary-container);
	border: 0;
	border-radius: var(--r-full);
	cursor: pointer;
	touch-action: manipulation;
	transition:
		background-color var(--dur-fast) var(--ease-standard),
		box-shadow var(--dur-base) var(--ease-standard),
		transform var(--dur-base) var(--ease-decel);
}
.gg-buttons .gg-btn { flex: 1 1 auto; padding-inline: var(--sp-4); }
/* playback: 'decor' – a compact play/pause at the end of the panel. */
.gg-playback { margin-top: var(--sp-4); }
.gg-playback .gg-btn { flex: 0 1 auto; }
/* aria-disabled = nothing to do here, but the button keeps keyboard focus (sim.steps). :where() keeps specificity low. */
.gg-btn:where(:enabled:not([aria-disabled="true"])):hover { box-shadow: var(--el-1); background: color-mix(in srgb, var(--md-primary-container) 92%, var(--md-primary)); }
.gg-btn:where(:enabled:not([aria-disabled="true"])):active { transform: scale(0.97); transition-duration: var(--dur-fast); }
.gg-btn:disabled, .gg-btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
.gg-primary { color: var(--md-on-primary); background: var(--md-primary); }
.gg-primary:where(:enabled:not([aria-disabled="true"])):hover { box-shadow: var(--el-2); background: color-mix(in srgb, var(--md-primary) 92%, white); }
.gg-primary:where(:enabled:not([aria-disabled="true"])):active { box-shadow: var(--el-0); background: color-mix(in srgb, var(--md-primary) 88%, black); }
.gg-round { width: 2.75rem; padding: 0; flex: none; color: var(--md-primary); background: transparent; }
.gg-round:hover { background: color-mix(in srgb, var(--md-primary) 8%, transparent); box-shadow: none; }
.gg-icon { flex: none; width: 1.25rem; height: 1.25rem; }
.gg-number:disabled, .gg-range:disabled { opacity: 0.5; cursor: not-allowed; }

/* Text button (tertiary). */
.gg-text { background: transparent; color: var(--md-primary); padding-inline: var(--sp-3); }
.gg-text:hover { background: color-mix(in srgb, var(--md-primary) 8%, transparent); box-shadow: none; }

/* «Πρόβλεψη» card at the top of the panel (sim.predict), never over the scene. Tinted surface, no border, no shadow. */
.gg-predict {
	margin: 0 0 var(--sp-3);
	padding: var(--sp-3);
	color: var(--md-on-surface);
	background: var(--md-surface-container);
	border-radius: var(--r-lg);
}
.gg-predict[hidden] { display: none; }
.gg-predict:focus { outline: none; }
.gg-predict:focus-visible { outline: 2px solid var(--md-primary); outline-offset: 3px; }
/* After answering: a slim strip, so the controls move up. */
.gg-predict.is-wait { padding: var(--sp-2) var(--sp-3); }
.gg-predict.is-wait .gg-predict-kicker { display: none; }
.gg-predict-kicker {
	margin: 0 0 var(--sp-1);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--md-primary);
}
.gg-predict-q { margin: 0 0 var(--sp-3); font-weight: 500; text-wrap: pretty; }
.gg-predict-q i, .gg-predict-choices i, .gg-predict-status i { font-family: var(--font-math); font-style: italic; }
/* two columns, or one when two do not fit (large text on a narrow phone) */
.gg-predict-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, max(6.5rem, 45%)), 1fr)); gap: var(--sp-2); }
.gg-predict-choices .gg-btn { padding: var(--sp-2) var(--sp-3); }
@media (min-aspect-ratio: 5/4) { .gg-predict-choices { grid-template-columns: minmax(0, 1fr); } } /* narrow side panel: one choice per row */
.gg-predict-choices[hidden], .gg-predict-q[hidden] { display: none; }
.gg-predict-status { margin: 0; font-size: var(--fs-body-s); line-height: var(--lh-body); text-wrap: pretty; }
.gg-predict.is-result .gg-predict-status { font-size: var(--fs-body-m); }
.gg-predict-verdict { display: inline-flex; align-items: center; gap: var(--sp-1); font-weight: 600; }
.gg-predict-verdict.is-right { color: var(--md-primary); }
.gg-predict-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--sp-2); margin-top: var(--sp-3); }
.gg-predict-why { font-weight: 600; color: var(--md-on-surface-variant); }
.gg-predict.is-wait .gg-predict-actions { display: none; }
.gg-predict-actions .gg-btn[hidden] { display: none; }

/* Help: native modal <dialog>. */
.gg-help {
	width: min(92vw, 40rem);
	max-height: 85dvh;
	padding: 0;
	color: var(--md-on-surface);
	background: var(--md-surface);
	border: 0;
	border-radius: var(--r-lg);
	box-shadow: var(--el-3);
}
.gg-help::backdrop { background: rgba(23, 25, 30, 0.5); }
.gg-help-body { padding: var(--sp-5); line-height: var(--lh-body); overflow-wrap: break-word; }
.gg-help-body p { margin: 0 0 var(--sp-3); max-width: 65ch; text-wrap: pretty; }
.gg-help-keys { color: var(--md-on-surface-variant); font-size: var(--fs-body-s); }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
	.gg-btn:active { transform: none; }
}