.fg-app { grid-template-rows:auto auto minmax(0,1fr); }
.fg-app:has(> .curriculum-tool-context) { grid-template-rows:auto auto auto minmax(0,1fr); }
.fg-app,.fg-dialog { --fraction-card-height:100%; }
.fg-board { min-height:0; display:grid; grid-template-rows:auto minmax(0,1fr) auto auto; gap:12px; padding:16px 24px 12px; }
.fg-status { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:18px; }
.fg-scores { display:flex; flex-wrap:wrap; gap:10px; }
.fg-score { padding:8px 12px; border:2px solid #c6d9e6; border-radius:8px; background:white; }
.fg-score.is-active { border-color:#0877ac; background:#e0f3fc; }
.fg-status--cards { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:20px; text-align:center; }
.fg-status--cards #progress { grid-column:1 / -1; grid-row:1; justify-self:center; }
.fg-status--cards .fg-scores { display:contents; }
.fg-status--cards .fg-score { grid-row:2; justify-self:center; }
.fg-status--cards .fg-score:nth-child(odd) { grid-column:1; }
.fg-status--cards .fg-score:nth-child(even) { grid-column:2; }
.fg-status--cards .fg-score:nth-child(n+3) { grid-row:3; }
.fg-status--cards .fg-score:only-child { grid-column:1 / -1; }
.fg-status--paired .fg-score { grid-row:1; }
.fg-status--paired #progress { max-width:calc(50% - 150px); white-space:normal; }
.fg-display { min-width:0; min-height:0; display:grid; gap:20px; }
.fg-display.is-two { grid-template-columns:1fr 1fr; }
.fg-display.is-comparison,.fg-status--comparison { grid-template-columns:minmax(0,1fr) 72px minmax(0,1fr); }
.fg-display.is-comparison > .fg-card:first-child { grid-column:1; }
.fg-display.is-comparison > .fg-card:last-child { grid-column:3; }
.fg-status--comparison .fg-score:nth-child(2) { grid-column:3; }
.fg-comparison-button { grid-column:2; grid-row:1; align-self:center; width:72px; height:72px; min-width:0; padding:4px; font-size:18px; }
.fg-comparison-button:disabled { opacity:1; cursor:default; }
.fg-symbol-model { display:block; width:100%; height:100%; --fraction-card-font-size:44px; }
.fg-symbol-model .fraction-card-visual { padding:0; }
.fg-symbol-model .fraction-card-expression { min-height:0; font-size:44px; }
.fg-card { min-width:0; min-height:0; padding:8px; background:white; border:3px solid #adcadb; border-radius:12px; display:grid; grid-template-rows:auto minmax(0,1fr); color:var(--ink); }
.fg-card.is-selected { border-color:#0877ac; outline:3px solid #0877ac; outline-offset:-7px; }
.fg-card-label { margin:0; padding:8px 12px; font-size:18px; font-weight:700; text-align:left; }
.fg-model { min-width:0; min-height:0; height:100%; }
.fg-back { display:grid; place-items:center; font-size:clamp(28px,5vw,70px); font-weight:800; background:#12384e; color:white; border-radius:8px; min-height:0; }
.fg-actions { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:10px; min-height:52px; }
.fg-actions button[aria-pressed="true"] { background:#d9f0fd; border-color:#0877ac; }
.fg-actions .fg-snap { min-width:210px; font-size:24px; background:#006c96; color:white; }
.fg-actions .fg-snap[data-player="1"] { background:#7250a3; }
.fg-feedback { margin:0; min-height:45px; display:grid; place-items:center; text-align:center; font-size:18px; line-height:1.3; }
.fg-pair-panel { min-width:0; min-height:0; display:grid; grid-template-rows:auto minmax(0,1fr); gap:8px; padding:10px; background:white; border:3px solid #adcadb; border-radius:12px; }
.fg-pair-panel h2 { margin:0; font-size:18px; }
.fg-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-rows:repeat(3,minmax(0,1fr)); gap:10px; min-height:0; }
.fg-grid .fg-card { grid-template-rows:minmax(0,1fr); padding:3px; border-width:2px; }
.fg-grid .fg-card:disabled { opacity:1; cursor:default; }
.fg-grid .fg-back { font-size:22px; }
.fg-grid .is-claimed { background:#e6f4eb; border-color:#538269; }
.fg-grid .is-claimed span { align-self:center; font-size:18px; color:#286447; }
.fg-grid .fraction-card-visual { padding:3px; }
.fg-complete { display:grid; place-content:center; text-align:center; background:white; border-radius:12px; }
.fg-complete h2 { font-size:clamp(28px,4vw,54px); margin:12px; }
.fg-complete p { font-size:23px; }
.fg-repair { display:flex; justify-content:center; align-items:end; flex-wrap:wrap; gap:10px; }
.fg-repair label { display:grid; gap:6px; font-weight:700; }
.fg-repair input { width:105px; min-height:50px; font:700 24px Arial,sans-serif; border:2px solid #a5bfce; border-radius:8px; padding:8px; }
.fg-dialog { width:min(950px,92vw); max-height:90dvh; padding:20px; border:2px solid #789bb0; border-radius:12px; color:var(--ink); }
.fg-dialog::backdrop { background:#071018b0; }
.fg-dialog-header { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.fg-dialog[data-study="true"] .fg-dialog-header { margin-bottom:10px; }
.fg-dialog h2 { margin:0; }
.fg-method-model { height:170px; }
.fg-bars-model { height:310px; }
.fg-bars-model > .question-visual { margin:0; height:100%; }
.fg-bars-model .diagram-visual { height:100%; width:100%; margin:0; }
.fg-bars-model svg { width:100%; height:90%; }
.fg-study { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.fg-study > p { grid-column:1 / -1; margin:10px 0 0; }
.fg-study .fg-model { height:140px; border:1px solid #b4c8d5; }
.fg-dialog p { font-size:18px; }
@media(max-width:760px),(max-height:560px){
 .fg-bars-model { height:auto; }
 .fg-bars-model .diagram-visual { height:auto; }
 html,body { height:auto; min-height:100%; overflow:auto; }
 .fg-app { height:auto; min-height:100dvh; overflow:visible; }
 .fg-board { padding:12px; gap:10px; }
 .fg-display { min-height:270px; }
 .fg-display.is-two { gap:10px; }
 .fg-card-label { padding:4px; font-size:16px; }
 .fg-toolbar label { flex-wrap:wrap; }
 .fg-status { font-size:16px; }
 .fg-score { padding:6px; }
 .fg-actions .fg-snap { min-width:140px; font-size:20px; }
 .fg-display.is-pairs { grid-template-columns:1fr; }
 .fg-pair-panel { min-height:365px; }
 .fg-study { grid-template-columns:1fr 1fr; }
 .fg-toolbar { gap:6px; }
 .fg-repair input { width:85px; }
}
@media(max-width:760px){
 .fg-status--cards { column-gap:10px; }
 .fg-status--paired .fg-score { grid-row:2; }
 .fg-status--paired #progress { max-width:100%; }
}
@media print {
 @page { size:A4 landscape; margin:12mm; }
 @page spire-tool { size:A4 landscape; margin:10mm; }
 html[data-spire-print-page="a4-landscape"]:has(.fg-app) { width:277mm!important; height:188mm!important; max-height:188mm!important; }
 html[data-spire-print-page="a4-landscape"] body:has(.fg-app) { width:277mm!important; }
 html[data-spire-print-page="a4-landscape"] body.spire-shared-print-brand-layout:has(.fg-app) { height:184mm!important; max-height:184mm!important; }
 html[data-spire-print-page="a4-landscape"] .fg-app .topbar { display:block!important; }
 html,body { width:auto!important; height:auto!important; overflow:visible!important; background:white!important; }
 .fg-app { display:block; height:175mm!important; min-height:0!important; overflow:hidden!important; }
 .fg-app .topbar { display:block!important; background:white!important; color:black!important; padding:0 0 4mm!important; }
 .fg-app .brand-logo,.fg-app .top-actions,.fg-toolbar,.fg-actions,.fg-repair,.fg-dialog { display:none!important; }
 .fg-app h1 { position:static!important; width:auto!important; height:auto!important; clip:auto!important; font-size:20pt!important; color:black!important; }
 .fg-board { height:140mm; padding:0; grid-template-rows:auto minmax(0,1fr) auto; gap:4mm; }
 .fg-display { min-height:0!important; }
 .fg-display.is-two { grid-template-columns:1fr 1fr!important; }
 .fg-display.is-comparison { grid-template-columns:minmax(0,1fr) 72px minmax(0,1fr)!important; }
 .fg-pair-panel { min-height:0!important; }
 .fg-feedback { min-height:0; font-size:12pt; }
 .fg-status,.fg-card-label,.fg-pair-panel h2 { font-size:12pt; }
 .fg-score { padding:2mm; }
 .fg-back { color:black!important; background:#eee!important; }
 .fg-card { break-inside:avoid; }
 .fg-grid .fraction-card-expression { font-size:22pt; }
}

.fg-status--think { justify-content:center; text-align:center; }
.fg-proof { margin-bottom:8px; }
.fg-proof-step { text-align:center; }
.fg-proof-step p { margin:0; font-size:16px; }
.fg-step-model { height:106px; }
@media print { .fg-proof-step { break-inside:avoid; } .fg-step-model { height:22mm; } }

.fg-compare-learning { grid-template-rows:auto minmax(140px,1fr) 218px 58px; }
.fg-compare-learning #compareWorkspace { display:grid; grid-template-rows:48px 80px minmax(0,1fr); gap:4px; }
.fg-compare-learning.fg-compare-opening { grid-template-rows:auto minmax(140px,1fr) 96px 58px; }
.fg-compare-opening #compareWorkspace { grid-template-rows:36px 56px; }
.fg-compare-opening #compareWorking[hidden] { display:none; }
.fg-compare-prompt { margin:0; text-align:center; font-size:18px; line-height:1.25; display:grid; place-items:center; }
.fg-compare-learning #compareWorking { height:80px; }
.fg-proof-pair { display:grid; grid-template-columns:1fr 1fr; }
.fg-proof-pair > div { min-width:0; min-height:0; }
.fg-compare-response { display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; }
.fg-compare-learning .fg-repair { align-items:center; }
.fg-compare-learning .fg-repair label { font-size:16px; }
.fg-compare-learning .fg-repair input { width:85px; min-height:44px; }
.fg-compare-learning .fg-feedback { min-height:58px; }
.fg-bar-explanation .fg-method-model { height:84px; }
.fg-bar-explanation .fg-bars-model { height:260px; }
@media(max-width:1000px){
 .fg-compare-learning .fg-actions { gap:8px; }
 .fg-compare-learning .fg-actions .wide-button { font-size:16px; padding:0 10px; }
}
@media(max-width:760px),(max-height:560px){
 .fg-compare-learning { grid-template-rows:auto 270px auto auto; }
 .fg-compare-learning #compareWorkspace { grid-template-rows:72px 90px 190px; }
 .fg-compare-learning.fg-compare-opening { grid-template-rows:auto 270px auto auto; }
 .fg-compare-opening #compareWorkspace { grid-template-rows:auto auto; }
 .fg-compare-opening .fg-compare-prompt { padding:6px 0; }
 .fg-compare-learning #compareWorking { height:90px; }
 .fg-compare-learning .fg-compare-response { align-content:center; }
 .fg-compare-learning .fg-feedback { height:90px; }
 .fg-bar-explanation .fg-bars-model { height:auto; }
}
@media print {
 .fg-compare-learning { grid-template-rows:auto minmax(0,1fr) 43mm auto; }
 .fg-compare-learning #compareWorkspace { grid-template-rows:12mm 25mm; }
 .fg-compare-learning.fg-compare-opening { grid-template-rows:auto minmax(0,1fr) auto auto; }
 .fg-compare-opening #compareWorkspace { grid-template-rows:auto; }
 .fg-compare-learning #compareWorking { height:25mm; }
 .fg-compare-prompt { font-size:12pt; }
 .fg-compare-response { display:none!important; }
 .fg-compare-learning .fg-feedback { min-height:0; height:auto; }
}

/* The short one-number response shares its row with the action buttons. */
.fg-numerator-learning:not(.fg-compare-opening) { grid-template-rows:auto minmax(150px,1fr) 156px 50px; }
.fg-numerator-learning:not(.fg-compare-opening) #compareWorkspace { grid-template-rows:48px 52px 48px; }
.fg-numerator-learning #compareWorking { height:52px; }
.fg-numerator-learning #compareProof label { display:flex; align-items:center; gap:8px; }
.fg-numerator-learning .fg-feedback { min-height:50px; }
@media(max-width:1000px) and (min-width:761px) and (min-height:561px) {
 .fg-numerator-learning:not(.fg-compare-opening) { grid-template-rows:auto minmax(150px,1fr) 176px 50px; }
 .fg-numerator-learning:not(.fg-compare-opening) #compareWorkspace { grid-template-rows:64px 56px 48px; }
 .fg-numerator-learning #compareWorking { height:56px; }
}
@media(max-width:760px),(max-height:560px) {
 .fg-numerator-learning:not(.fg-compare-opening) { grid-template-rows:auto 270px auto auto; }
 .fg-numerator-learning:not(.fg-compare-opening) #compareWorkspace { grid-template-rows:auto 90px auto; gap:10px; }
 .fg-numerator-learning .fg-compare-prompt { padding:6px 0; }
 .fg-numerator-learning #compareWorking { height:90px; }
 .fg-numerator-learning .fg-compare-response { min-height:130px; }
 .fg-numerator-learning .fg-feedback { height:auto; min-height:64px; }
}
@media print {
 .fg-numerator-learning:not(.fg-compare-opening) { grid-template-rows:auto minmax(0,1fr) 35mm auto; }
 .fg-numerator-learning:not(.fg-compare-opening) #compareWorkspace { grid-template-rows:12mm 23mm; }
 .fg-numerator-learning #compareWorking { height:23mm; }
 .fg-numerator-learning .fg-feedback { min-height:0; }
}

.fg-numerator-learning #compareWorking .fraction-card-visual { padding:0; }

@media(min-width:761px) and (min-height:561px) {
 .fg-numerator-learning { gap:8px; padding:12px 24px 10px; }
 .fg-numerator-learning .fg-status--cards:has(.fg-score:nth-child(3)) .fg-scores { display:flex; grid-column:1 / -1; grid-row:2; justify-content:center; }
}

.fg-card.fg-card--unlabelled { grid-template-rows:minmax(0,1fr); }
/* Fraction Match keeps the grids full-sized while one calculation is worked. */
.fg-match-dialog { width:min(950px,94vw); }
.fg-match-work { display:grid; grid-template-rows:96px 116px 54px 94px 50px 52px; gap:6px; }
.fg-match-original,.fg-match-working { min-width:0; min-height:0; }
.fg-match-working { border:2px solid #c6d9e6; border-radius:8px; background:#f7fbfd; }
.fg-match-prompt,.fg-match-feedback { margin:0; text-align:center; display:grid; place-items:center; font-size:18px; line-height:1.3; }
.fg-match-feedback { font-size:16px; }
.fg-match-work .fg-repair { align-items:end; padding:6px 0 10px; }
.fg-match-work .fg-repair label { font-size:16px; line-height:20px; }
.fg-match-work .fg-repair input { height:50px; min-height:50px; width:96px; }
.fg-match-work .fg-actions { min-height:0; }
.fg-match-conversions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); height:70px; }
.fg-match-conversions.is-single { grid-template-columns:1fr; }
.fg-match-conversions > div { min-width:0; }
.fg-match-bars { height:260px; }
.fg-match-bars > .question-visual { height:100%; margin:0; }
.fg-match-bars .diagram-visual { width:100%; height:100%; margin:0; }
.fg-match-model .fg-method-model { height:74px; }
.fg-match-model p { margin:8px 0; font-size:16px; line-height:1.3; }
@media(max-width:760px),(max-height:560px) {
 .fg-match-work { grid-template-rows:96px 116px auto auto auto auto; }
 .fg-match-prompt,.fg-match-feedback { min-height:54px; }
 .fg-match-work .fg-repair { min-height:94px; }
 .fg-match-work .fg-actions { min-height:50px; }
 .fg-match-work .fg-repair input { width:72px; }
 .fg-match-conversions { grid-template-columns:1fr; height:160px; }
 .fg-match-bars { height:auto; }
 .fg-match-bars > .question-visual,.fg-match-bars .diagram-visual { height:auto; }
}
@media print { .fg-match-dialog { display:none!important; } }
@media(min-width:761px) and (min-height:561px) {
 body[data-spire-tool-id="fraction-match-pairs"] .fg-status--cards:has(.fg-score:nth-child(3)) .fg-scores { display:flex; grid-column:1 / -1; grid-row:2; justify-content:center; }
}

/* Detective keeps the source statement anchored above one current learning question. */
.fg-detective-learning { grid-template-rows:42px 94px minmax(202px,1fr) 52px 56px; gap:8px; padding:12px 24px; }
.fg-detective-learning .fg-status { display:flex; justify-content:center; gap:24px; }
.fg-detective-learning .fg-status #progress { max-width:none; }
.fg-detective-learning .fg-scores { display:flex; }
.fg-detective-learning .fg-card--unlabelled { grid-template-rows:minmax(0,1fr); }
.fg-detective-learning .fg-card-label { font-size:16px; padding:2px 8px; }
.fg-detective-learning .fraction-card-expression { font-size:30px; }
.fg-detective-working .fraction-card-expression { font-size:24px; }
#detectiveWorkspace { display:grid; grid-template-rows:60px minmax(50px,1fr) 72px; gap:10px; min-height:202px; text-align:center; }
#detectiveWorkspace[hidden] { display:none; }
.fg-detective-learning .fraction-card-visual,.fg-detective-explanation .fraction-card-visual { padding:0; box-sizing:border-box; }
.fg-detective-working { min-height:0; background:#f6fbff; border:2px solid #c6d9e6; border-radius:8px; }
.fg-detective-prompt { margin:0; font-size:20px; display:grid; place-items:center; }
#detectiveProof input { width:100px; }
.fg-detective-explanation .fg-method-model { height:70px; }
.fg-detective-explanation .fg-method-model .fraction-card-expression { font-size:28px; }
.fg-detective-explanation > p { text-align:center; margin:12px 0 0; }
.fg-detective-bars { height:250px; }
.fg-detective-bars figure { margin:0; height:100%; }
.fg-detective-bars svg { width:100%; height:100%; }
@media(max-width:760px),(max-height:560px){
 .fg-detective-learning { grid-template-rows:auto 145px auto auto auto; padding:12px; }
 .fg-detective-learning .fg-display { min-height:0; }
 .fg-detective-learning .fraction-card-expression { font-size:clamp(24px,5vw,34px); }
 #detectiveWorkspace { grid-template-rows:125px auto auto; gap:16px; }
 .fg-detective-prompt { font-size:18px; min-height:80px; }
 .fg-detective-bars { height:auto; }
 .fg-detective-bars svg { height:auto; }
 .fg-detective-explanation .fg-method-model .fraction-card-expression { font-size:24px; }
}
@media print {
 .fg-detective-learning { grid-template-rows:auto 30mm 65mm auto auto; }
 #detectiveWorkspace { grid-template-rows:30mm auto; gap:5mm; }
 .fg-detective-prompt { font-size:14pt; }
 .fg-detective-learning .fraction-card-expression { font-size:28pt; }
 #detectiveProof { display:none!important; }
}

@media(min-width:761px) and (max-width:1000px) and (min-height:561px){
 .fg-detective-learning { grid-template-rows:42px 86px minmax(198px,1fr) 50px 52px; gap:6px; padding:10px 18px; }
 #detectiveWorkspace { grid-template-rows:60px minmax(50px,1fr) 76px; gap:6px; min-height:198px; }
 .fg-detective-learning .fraction-card-expression { font-size:28px; }
 .fg-detective-working .fraction-card-expression { font-size:24px; }
 .fg-detective-learning .fg-feedback { min-height:0; font-size:16px; }
 .fg-detective-learning .fg-actions .wide-button { font-size:16px; padding:0 12px; }
}

.fg-dialog:has(.fg-detective-explanation) .fg-dialog-header { margin-bottom:12px; }
.fg-detective-explanation.is-complete .fg-detective-bars { height:215px; }
@media(max-width:760px),(max-height:560px){
 .fg-detective-explanation.is-complete .fg-detective-bars { height:auto; }
}