/* Φυσική Γ' Γυμνασίου – theory ("book") pages that embed a simulation.
 * STEMTeacher brand: Literata 600 for h1/h2 only, Inter body 16px / 1.6, ragged right,
 * measure ≤ 58–75ch, no hyphenation (unreliable for Greek), no italic emphasis. */

/* Page base (reset, body type, selection, focus, .sr-only): theme.css. */

/* One measure for every text block on the page. It lived as a literal 65ch in six places, and the
   seventh block simply never got one: <details> is not in the `article > …` list below, so answers
   rendered 113 characters wide next to their own 65-character question. A token instead of a repeated
   number, so the next block added here inherits the measure instead of escaping it.
   Not in theme.css: that file's tokens are copied verbatim from the site and must not drift. */
:root { --measure: 65ch; }

/* Same width as the site header (--container), so the page has one left edge; the sim frame uses it all,
   text keeps its measure. */
article {
	width: min(100% - 2 * var(--gutter), var(--container));
	margin: 0 auto;
	padding: var(--sp-6) 0 var(--sp-9);
	overflow-wrap: break-word; /* last resort, as in #panel: only a word that alone is wider than the line breaks (200 % text on a 320 px phone) */
}
h1, h2 {
	font-family: var(--font-serif);
	font-weight: 600;
	line-height: var(--lh-tight);
	letter-spacing: var(--track-headline);
	text-wrap: balance;
	max-width: 22ch;
}
/* min(…, N vw): no change at normal text size; with 200 % text on a 320 px phone the heading stops growing, so a long
   word («δυνάμεων») still fits the line and is never broken. */
h1 { font-size: min(var(--fs-headline-l), 11vw); margin: 0 0 var(--sp-5); color: var(--md-primary); }
h2 { font-size: min(var(--fs-headline-s), 9vw); margin: var(--sp-8) 0 var(--sp-3); }
h3 { font-size: min(var(--fs-title-l), 7vw); font-weight: 600; line-height: var(--lh-snug); margin: var(--sp-6) 0 var(--sp-2); }
p, li { text-wrap: pretty; }
article > p, article > ol, article > ul, article > .table-wrap { max-width: var(--measure); }
p { margin: 0 0 var(--sp-4); }
b, strong { font-weight: 600; }
a { color: var(--md-primary); font-weight: 500; text-underline-offset: 3px; }

.sim-frame { margin: 0 0 var(--sp-4); }
.sim-frame iframe {
	display: block;
	width: 100%;
	aspect-ratio: 9 / 16;
	max-height: 90dvh;
	border: 1px solid var(--md-outline-variant);
	border-radius: var(--r-md);
	background: var(--md-background);
}
.sim-frame figcaption { margin-top: var(--sp-2); font-size: var(--fs-body-s); }
/* A standalone link, not inline in a sentence: a full 44 px tap target. */
.sim-frame figcaption a { display: inline-flex; align-items: center; min-height: 44px; }
/* The embedded sim switches to its landscape layout when the frame is wide. */
@media (min-width: 44rem) { .sim-frame iframe { aspect-ratio: 16 / 10; } }

/* A ManimGX clip (sims/anim): it plays only when asked, so nothing on the page moves by itself. */
.clip { margin: var(--sp-4) 0; }
.clip video {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid var(--md-outline-variant);
	border-radius: var(--r-md);
	background: var(--md-background);
}
.clip figcaption { margin-top: var(--sp-2); font-size: var(--fs-body-s); color: var(--md-on-surface-variant); }

/* Formulas: quantity symbols in Literata italic (notation, not emphasis), units upright. */
.eq { font-family: var(--font-math); font-size: 1.1em; white-space: nowrap; padding: 0 0.05em; }
/* Exponents as <sup>: one size for every digit (the Unicode ⁴⁵… come from another font block than ² and ³). */
.eq sup { font-size: 0.7em; line-height: 0; vertical-align: 0.55em; }
.eq i { font-style: italic; }
/* Phones: a stacked fraction wider than the line wraps inside its numerator and denominator instead of being clipped by
   the page. It stays one block when it fits. */
@media (max-width: 30rem) {
	.frac { max-width: 100%; }
	.frac > .num, .frac > .den { white-space: normal; }
}
/* Very narrow or zoomed (rem: 200 % text on a 375 px phone counts as 187 px wide in em): a formula wider than the line
   wraps at its spaces instead of being clipped by the page. Not above 20rem: an inline-block wrapper shifts the line
   spacing by a few px, which a phone at normal text size does not need (the formulas fit there, tools/formulas.mjs).
   A formula with a stacked fraction stays inline (inline-block would shift its fraction) and may break at its spaces. */
@media (max-width: 20rem) {
	.eq:not(.eq-block, :has(.frac)) { display: inline-block; max-width: 100%; white-space: normal; vertical-align: baseline; }
	.eq:has(.frac) { white-space: normal; }
}
.eq-block { display: block; margin: var(--sp-4) 0; text-align: left; font-size: var(--fs-title-l); white-space: normal; }
/* Stacked fraction: numerator over denominator; the hidden «διά» keeps it readable for screen readers. */
.frac { display: inline-flex; flex-direction: column; vertical-align: middle; text-align: center; font-size: 0.9em; line-height: 1.2; margin: 0 0.12em; white-space: nowrap; position: relative; top: 0.12em; }
.frac > .num { padding: 0 0.2em 0.1em; }
.frac > .den { padding: 0.1em 0.2em 0; border-top: 0.07em solid currentColor; }
.eq-block .frac { font-size: 0.85em; }
/* Root over more than one symbol: √<span class="rad">α + β</span> draws the bar over the whole radicand. */
/* an angle Β̂: a hat drawn over the letter (the combining circumflex lands beside Greek capitals in these fonts) */
.ang { display: inline-block; position: relative; }
.ang::after { content: ""; position: absolute; left: 50%; top: -0.02em; width: 0.26em; height: 0.26em; border: solid currentColor; border-width: 0.07em 0 0 0.07em; transform: translateX(-50%) rotate(45deg); }
.rad { display: inline-block; line-height: 1; border-top: 0.07em solid currentColor; padding: 0.04em 0.06em 0; }
/* Before a tall radicand (a fraction) the √ is stretched so it reaches the bar. */
.surd { display: inline-block; transform: scaleY(2.1); transform-origin: 50% 72%; margin-right: -0.04em; }

.crumbs { margin: 0 0 var(--sp-2); font-size: var(--fs-body-s); color: var(--md-on-surface-variant); }

/* Tables: hairlines, numbers aligned, scroll inside the wrapper on narrow phones. */
.table-wrap {
	max-width: 100%; overflow-x: auto; margin: 0 0 var(--sp-4);
	/* Edge shadow on the side that still has more to scroll to (covers fade out as the table is scrolled). */
	background:
		linear-gradient(to right, var(--md-background) 30%, transparent) 0 0 / 2.5rem 100% no-repeat local,
		linear-gradient(to left, var(--md-background) 30%, transparent) 100% 0 / 2.5rem 100% no-repeat local,
		radial-gradient(farthest-side at 0 50%, color-mix(in srgb, var(--md-on-surface) 22%, transparent), transparent) 0 0 / 0.75rem 100% no-repeat scroll,
		radial-gradient(farthest-side at 100% 50%, color-mix(in srgb, var(--md-on-surface) 22%, transparent), transparent) 100% 0 / 0.75rem 100% no-repeat scroll;
}
table { border-collapse: collapse; min-width: min(20rem, 100%); }
caption { text-align: left; font-size: var(--fs-body-s); color: var(--md-on-surface-variant); padding-bottom: var(--sp-2); }
th, td { padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--md-outline-variant); text-align: center; }
th { font-weight: 600; }
th[scope="row"] { text-align: left; }
table i { font-family: var(--font-math); font-style: italic; }
/* Phones: smaller type and tighter cells so a 3–4 column table fits without sideways scroll. */
@media (max-width: 30rem) {
	table { font-size: var(--fs-body-s); }
	th, td { padding: var(--sp-2) var(--sp-1); }
}

/* Exercises with collapsible solutions (<details>: works without JS). */
.exercises { max-width: var(--measure); padding-left: 1.4em; }
.exercises > li { margin-bottom: var(--sp-5); }
.exercises p { margin-bottom: var(--sp-2); }
/* The measure applies here too. A top-level «Απάντηση» is a direct child of article and so missed the
   rule above; inside .exercises the list already constrained it, which is why only half of them were
   wrong and the other half looked right. No <details> on these pages holds a table, so capping the
   width cannot turn one into a sideways-scrolling box. */
details { max-width: var(--measure); border-left: 2px solid var(--md-outline-variant); padding-left: var(--sp-3); }
summary {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	min-width: 44px;
	font-weight: 600;
	color: var(--md-primary);
	cursor: pointer;
	touch-action: manipulation;
}
details[open] { border-left-color: var(--md-primary); }
li i, p i { font-family: var(--font-math); font-style: italic; }

/* «Με απλά λόγια»: the idea explained from first principles (Feynman style) before the theory. */
.plain p { max-width: var(--measure); }
.plain i { font-family: var(--font-math); font-style: italic; }
/* A tinted panel, not a rail on a card: the blue block lead-in below already names the block, and the
   half-rounded corners only existed to finish the border-left. Fill distinguishes it from .worked, which
   is outlined — one device each, so the two never read as the same object. */
.aha {
	padding: var(--sp-3) var(--sp-4);
	border-radius: var(--r-sm);
	background: color-mix(in srgb, var(--md-primary) 6%, var(--md-surface));
}
.aha b { display: block; margin-bottom: var(--sp-1); color: var(--md-primary); }

/* Theory in small steps (design-system/THEORY.md): worked examples, pauses, common mistakes, levels, recap. */
.worked {
	max-width: var(--measure);
	margin: 0 0 var(--sp-5);
	padding: var(--sp-3) var(--sp-4);
	border: 1px solid var(--md-outline-variant);
	border-radius: var(--r-sm);
	background: var(--md-surface);
}
.worked-title { margin: 0 0 var(--sp-2); font-weight: 600; }
.worked dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--sp-2) var(--sp-3); margin: 0; }
.worked dt { font-weight: 600; color: var(--md-on-surface-variant); }
.worked dd { margin: 0; min-width: 0; } /* minmax(0, …) + min-width: a nowrap .eq must not stretch the column past the page */
.worked dd p { margin: 0 0 var(--sp-1); }
@media (max-width: 30rem) {
	.worked dl { grid-template-columns: minmax(0, 1fr); gap: 0; }
	.worked dd { margin-bottom: var(--sp-2); }
}
/* No accent rail. The coloured lead-in already names the block («Γρήγορος έλεγχος», «Συχνό λάθος»), so a
   hairline above is enough to break the reading flow — and it keeps the aside flush with the body text
   instead of indenting it. A thick side border reads as a card and competes with .worked, which is the
   only boxed thing on these pages. Colour still separates the two: secondary asks, error warns. */
.pause, .mistake {
	max-width: var(--measure);
	margin-top: var(--sp-5);
	padding-top: var(--sp-3);
	border-top: 1px solid var(--md-outline-variant);
}
.pause > b:first-child { color: var(--md-secondary); }
.mistake > b:first-child { color: var(--md-error); }
.level {
	display: inline-block;
	margin-right: var(--sp-2);
	padding: 0 var(--sp-2);
	border: 1px solid var(--md-outline-variant);
	border-radius: var(--r-full);
	font-size: var(--fs-body-s);
	font-weight: 600;
	color: var(--md-on-surface-variant);
	max-width: 100%;
}
.recap {
	max-width: var(--measure);
	margin-top: var(--sp-8);
	padding: var(--sp-4) var(--sp-5);
	border-radius: var(--r-md);
	background: color-mix(in srgb, var(--md-primary) 5%, var(--md-surface));
}
.recap h2 { margin-top: 0; }
.recap i { font-family: var(--font-math); font-style: italic; }