/* Practice problems and worksheets (includes/Practice.php, assets/js/practice.js).
   Ledger tokens; 1rem = 10px on this site. */

.frg-practice { display: grid; gap: 2rem; margin: 2.4rem 0 3.2rem; padding: 2.4rem; border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--paper); }
.frg-practice__head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 1.2rem 2.4rem; }
.frg-practice__head > div { flex: 1 1 32rem; min-width: 0; }
html body .frg-practice .frg-practice__title { margin: 0.4rem 0 0.6rem; font-size: 2.2rem; line-height: 1.3; }
.frg-practice__note { margin: 0; color: var(--ink-muted); font-size: 1.45rem; line-height: 1.6; }
.frg-practice__note [data-role="number"] { white-space: nowrap; }
.frg-practice__body { display: grid; gap: 1.6rem; min-height: 32rem; }
.frg-practice.is-ready .frg-practice__body { min-height: 0; }
.frg-practice__task { margin: 0; font-weight: 600; }
html body .frg-practice .frg-practice__table { display: table; width: 100%; margin: 0; }
.frg-practice .frg-practice__table td { width: auto; text-align: right; }

.frg-practice__step { display: grid; gap: 0.8rem; padding: 1.4rem 1.6rem; border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--surface); }
.frg-practice__label { display: flex; align-items: baseline; gap: 1rem; font-weight: 600; }
.frg-practice__num { display: inline-grid; place-items: center; flex: none; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--ink); color: var(--on-ink, #fff); font-size: 1.3rem; }
.frg-practice__row { display: flex; flex-wrap: wrap; gap: 0.8rem 1.2rem; align-items: stretch; }
.frg-practice__row .frg-field__control { order: 0; flex: 1 1 18rem; max-width: 32rem; min-height: 4.4rem; }
.frg-practice__row .fr-btn { order: 1; }
.frg-practice__feedback { margin: 0; font-size: 1.5rem; line-height: 1.55; }
.frg-practice__feedback:empty { display: none; }
.frg-practice__step[data-state="right"] { border-color: var(--accent); background: var(--accent-soft); }
.frg-practice__step[data-state="right"] .frg-practice__feedback::before { content: "\2713  "; color: var(--accent-strong); font-weight: 700; }
.frg-practice__step[data-state="wrong"] { border-color: var(--danger); }
.frg-practice__step[data-state="shown"] { border-color: var(--line-strong); }
.frg-practice__reveal { justify-self: start; padding: 0.4rem 0; border: 0; background: none; color: var(--accent-strong); font: inherit; font-size: 1.45rem; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.frg-practice__reveal[hidden] { display: none; }
.frg-practice__status { margin: 0; font-weight: 600; }
.frg-practice__status:empty { display: none; }
@media (max-width: 640px) {
	.frg-practice { padding: 1.6rem; }
	.frg-practice__step { padding: 1.2rem; }
}

/* Worksheet builder. */
.frg-worksheet { display: grid; gap: 1.6rem; margin: 2.4rem 0 1.6rem; padding: 2.4rem; border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--paper); }
.frg-worksheet p { margin: 0; }
.frg-worksheet__ratios { display: flex; flex-wrap: wrap; gap: 0.8rem 2rem; margin: 0; padding: 0; border: 0; }
.frg-worksheet__ratios legend { margin-bottom: 0.8rem; padding: 0; font-weight: 600; }
.frg-worksheet__ratios label, .frg-worksheet__options label { display: inline-flex; align-items: center; gap: 0.8rem; }
.frg-worksheet__options { display: flex; flex-wrap: wrap; gap: 1.2rem 2.4rem; align-items: center; }
.frg-worksheet__options select { min-height: 4rem; padding: 0.4rem 0.8rem; border: 1px solid var(--line-strong); border-radius: 0.6rem; background: var(--paper); color: var(--ink); font: inherit; }
.frg-worksheet__actions { display: flex; flex-wrap: wrap; gap: 1.2rem; align-items: center; }
.frg-worksheet__error { color: var(--danger); font-weight: 600; }
.frg-worksheet__note { color: var(--ink-muted); font-size: 1.45rem; }
.frg-worksheet__pdfs { margin: 0 0 2.4rem; }
.frg-worksheet__pdf-title { margin: 0 0 0.8rem; font-weight: 600; }
.frg-worksheet__pdfs span { color: var(--ink-muted); font-size: 0.9em; }

/* The printed worksheet: built into body > .frg-sheet, shown only while printing. */
.frg-sheet { display: none; }
body.frg-sheet-preview .frg-sheet { display: block; }
@media print {
	body.frg-printing > *:not(.frg-print-root) { display: none !important; }
	body.frg-printing .frg-sheet { display: block; }
}
.frg-sheet { color: #000; background: #fff; font: 10.5pt/1.4 Georgia, "Times New Roman", serif; }
.frg-sheet h1 { margin: 0 0 3pt; font: 700 17pt/1.2 Arial, Helvetica, sans-serif; }
.frg-sheet h2 { margin: 0 0 2pt; font: 700 11pt/1.3 Arial, Helvetica, sans-serif; }
.frg-sheet h3 { margin: 8pt 0 3pt; font: 700 10.5pt/1.3 Arial, Helvetica, sans-serif; }
.frg-sheet p { margin: 0 0 4pt; }
.frg-sheet__head { margin-bottom: 12pt; padding-bottom: 6pt; border-bottom: 1.5pt solid #000; }
.frg-sheet__brand { font: 700 8pt/1.2 Arial, Helvetica, sans-serif; letter-spacing: 0.08em; text-transform: uppercase; }
.frg-sheet__name { margin-top: 6pt !important; }
.frg-sheet__problem { margin: 0 0 14pt; break-inside: avoid; }
.frg-sheet table { width: 62%; margin: 2pt 0 6pt; border-collapse: collapse; background: none; font: 9pt/1.3 Arial, Helvetica, sans-serif; }
.frg-sheet caption { padding: 0 0 2pt; color: #000; text-align: left; font: 700 8pt/1.3 Arial, Helvetica, sans-serif; letter-spacing: 0.04em; text-transform: uppercase; }
.frg-sheet th, .frg-sheet td { width: auto; padding: 1.5pt 5pt; border: 0; border-bottom: 0.5pt solid #aaa; text-align: left; font-weight: 400; }
.frg-sheet td { text-align: right; }
.frg-sheet__steps { margin: 0; padding-left: 16pt; }
.frg-sheet__steps li { margin: 0 0 7pt; }
.frg-sheet__blank { display: inline-block; width: 130pt; border-bottom: 0.75pt solid #000; }
.frg-sheet__key { break-before: page; }
.frg-sheet__key ol { margin: 0; padding-left: 16pt; }
.frg-sheet__key li { margin: 0 0 2pt; }
.frg-sheet__answer { break-inside: avoid; }
.frg-sheet__foot { margin-top: 14pt; padding-top: 5pt; border-top: 0.5pt solid #aaa; font: 8.5pt/1.4 Arial, Helvetica, sans-serif; }
@media print {
	@page { size: letter; }
	html, body.frg-printing { margin: 0; padding: 0; background: #fff; }
}

/* The theme greys out labels; these carry the questions and choices, so they use body ink. */
html body .frg-practice .frg-practice__label, html body .frg-worksheet label, html body .frg-worksheet legend { color: var(--ink); }