.fp-app { --fraction-card-height:100%; grid-template-rows:auto auto minmax(0,1fr); }
.fp-board { min-height:0; padding:16px 24px 12px; display:grid; gap:12px; text-align:center; }
.fp-breakers { grid-template-rows:auto 96px minmax(150px,1fr) 72px auto 44px; }
.fp-board #progress { font-size:18px; }
.fp-hand { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; min-height:0; }
.fp-card { border:2px solid #adcadb; border-radius:8px; background:white; min-width:0; min-height:0; display:grid; grid-template-rows:minmax(0,1fr) auto; padding:4px; }
.fp-card:disabled { opacity:1; color:var(--ink); }
.fp-card.is-selected { outline:4px solid #0877ac; outline-offset:-4px; }
.fp-card .fraction-card-expression { font-size:clamp(20px,2.6vw,38px); }
.fp-card .fraction-card-visual { padding:4px; }
.fp-card > span:first-child { min-width:0; min-height:0; }
.fp-solved { font-size:20px; color:#1d8f5a; }
.fp-task { background:white; border:2px solid #adcadb; border-radius:8px; min-height:0; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center; padding:8px; gap:12px; }
.fp-task:has(.fp-pile) { grid-template-columns:1fr; grid-template-rows:minmax(0,1fr) auto; }
.fp-task > p { margin:0; }
.fp-task-model { min-height:0; height:100%; font-size:36px; }
.fp-pile { display:grid; place-items:center; background:#12384e; color:white; border-radius:8px; }
.fp-question,.fp-division-model { min-height:0; }
.fp-question .fraction-card-visual { padding:0; }
.fp-question .fraction-card-expression { font-size:36px; }
.fp-answer,.fp-actions { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:10px; }
.fp-answer label { display:grid; gap:4px; font-weight:700; }
.fp-answer input { width:95px; min-height:48px; font:700 24px Arial,sans-serif; padding:6px; border:2px solid #a5bfce; border-radius:8px; }
.fp-answer select { min-height:48px; max-width:100%; }
.fp-actions .wide-button { min-height:48px; }
.fp-board #feedback { margin:0; display:grid; place-items:center; font-size:18px; line-height:1.3; }
.fp-stage-prompt { margin:0; font-size:20px; }
.fp-result { font-size:28px; }
.fp-extension-model { width:190px; height:85px; }
.fp-discuss { font-size:23px; }
/* The two practical games always allocate the available viewport to the board. */
@media screen {
 html:has(.fp-app),body:has(.fp-app) { height:100%; min-height:0; overflow:hidden; }
 .fp-app { height:100dvh; min-height:0; overflow:hidden; }
 .fp-board { min-width:0; padding:clamp(6px,1.3vh,16px) clamp(8px,1.8vw,24px); gap:clamp(4px,1vh,10px); }
 .fp-breakers { grid-template-rows:auto 96px minmax(0,1fr) auto auto minmax(36px,auto); }
 .fp-question .fraction-card-expression { min-height:2.65em; }
 .fp-board #feedback { min-height:0; font-size:clamp(14px,1.7vw,18px); line-height:1.25; }
 .fp-answer { min-width:0; }
 .fp-answer label { min-width:0; }
 .fp-task { min-width:0; gap:clamp(4px,1vw,12px); }
 .fp-card { container-type:inline-size; }
 .fp-card .fraction-card-expression { font-size:clamp(14px,min(14cqw,28cqh),38px); flex-wrap:nowrap; min-height:2.65em; }
 .fp-card .fraction-card-visual { padding:2px; }
 .fp-task-model .fraction-card-visual { padding:2px; }
 .fp-task-model .fraction-card-expression { flex-wrap:nowrap; min-height:2.65em; font-size:clamp(18px,min(14cqw,30cqh),100px); }
 .fp-actions { flex-wrap:nowrap; min-width:0; gap:6px; }
 .fp-actions .wide-button { min-width:0; white-space:normal; }
 .fp-answer input { max-width:100%; }
 .fp-answer button { min-width:0; white-space:normal; }
 .fp-answer [aria-pressed="true"] { border-color:#0877ac; background:#e0f3fc; }
 .fp-extension-model .fraction-card-visual { padding:0; }
 .fp-extension-model .fraction-card-expression { min-height:2.65em; font-size:clamp(16px,min(var(--fraction-card-fit,20cqw),30cqh),44px); }
 .fp-discuss { font-size:clamp(16px,2vw,23px); }
}
@media screen and (max-height:650px) {
}
@media screen and (max-width:680px) {
 .fp-app>.toolbar { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:6px; padding:6px 8px; }
 .fp-app>.toolbar>.control-group { grid-column:span 3; display:grid; gap:3px; }
 .fp-app>.toolbar>button { grid-column:span 2; min-width:0; padding:4px; min-height:42px; white-space:normal; font-size:14px; }
 body[data-spire-tool-id="connected-facts"] .fp-app>.toolbar>button { grid-column:span 3; }
 .fp-app>.toolbar select { width:100%; min-width:0; padding-inline:6px; min-height:42px; font-size:14px; }
 .fp-app>.toolbar .control-label { font-size:13px; }
 .fp-hand { grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-rows:repeat(2,minmax(0,1fr)); gap:6px; }
 .fp-solved { font-size:15px; line-height:1.1; }
 .fp-task { padding:6px; }
 .fp-task:has(.fp-pile) { grid-template-rows:minmax(0,1fr) auto; }
 .fp-answer { gap:6px; }
 .fp-answer label { font-size:13px; gap:3px; }
 .fp-answer input { width:74px; min-height:38px; height:38px; font-size:20px; padding:4px; }
 .fp-answer select { min-height:38px; height:38px; font-size:14px; }
 .fp-answer .wide-button,.fp-actions .wide-button { min-height:40px; padding:5px 7px; font-size:14px; }
 .fp-actions .wide-button { flex:1 1 0; }
 .fp-board #progress { font-size:14px; line-height:1.2; }
 .fp-stage-prompt { font-size:16px; }
 .fp-breakers { grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:72px minmax(0,1fr) auto auto minmax(38px,auto); }
 .fp-breakers #progress { grid-column:1; grid-row:1; align-self:center; }
 .fp-breakers #question { grid-column:2; grid-row:1; }
 .fp-breakers #divisionModel { grid-column:1 / -1; grid-row:2; }
 .fp-breakers #stageControls { grid-column:1 / -1; grid-row:3; }
 .fp-breakers #actions { grid-column:1 / -1; grid-row:4; }
 .fp-breakers #feedback { grid-column:1 / -1; grid-row:5; }
 .fp-breakers #stageControls:has([data-fb="chooseShare"]) { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px; }
 .fp-breakers #stageControls:has(#method) { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); }
 .fp-question .fraction-card-expression { font-size:clamp(18px,34cqh,30px); }
 .fp-result { font-size:22px; }
}
@media screen and (max-height:540px) and (min-width:681px) {
 .fp-app>.toolbar { padding:4px 8px; gap:6px; }
 .fp-app>.toolbar select,.fp-app>.toolbar .wide-button { min-height:34px; height:34px; font-size:14px; padding:3px 8px; }
 .fp-board { padding:5px 8px; gap:5px; }
 .fp-board #progress { font-size:14px; line-height:1.1; }
 .fp-board #feedback { font-size:13px; line-height:1.15; }
 .fp-solved { font-size:13px; line-height:1; }
 .fp-card .fraction-card-expression { font-size:clamp(14px,min(14cqw,28cqh),30px); }
 .fp-answer { gap:4px; }
 .fp-answer label { font-size:12px; gap:2px; }
 .fp-answer input { width:64px; min-height:32px; height:32px; padding:3px; font-size:18px; }
 .fp-answer select,.fp-answer .wide-button,.fp-actions .wide-button { min-height:32px; height:32px; font-size:13px; padding:3px 6px; }
 .fp-discuss { font-size:15px; }
 .fp-breakers { grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); grid-template-rows:auto 58px minmax(0,1fr) auto auto; }
 .fp-breakers #progress { grid-column:1 / -1; grid-row:1; }
 .fp-breakers #question { grid-column:1; grid-row:2; }
 .fp-breakers #divisionModel { grid-column:1; grid-row:3 / 5; }
 .fp-breakers #stageControls { grid-column:2; grid-row:2 / 4; }
 .fp-breakers #actions { grid-column:2; grid-row:4; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px; }
 .fp-breakers #feedback { grid-column:1 / -1; grid-row:5; }
 .fp-breakers #stageControls:has([data-fb="chooseShare"]) { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px; align-content:center; }
 .fp-question .fraction-card-expression { font-size:clamp(18px,34cqh,24px); }
 .fp-stage-prompt,.fp-result { font-size:16px; }
}
@media print {
 @page { size:A4 landscape; margin:10mm; }
 html:has(.fp-app),body:has(.fp-app) { height:184mm!important; max-height:184mm!important; overflow:hidden!important; background:white!important; }
 .fp-app { height:175mm!important; min-height:0!important; }
 .fp-app .toolbar,.fp-actions,.fp-answer input,.fp-answer button,.fp-answer select { display:none!important; }
 .fp-board { height:145mm!important; padding:2mm!important; gap:2mm; }
 .fp-hand { grid-template-columns:repeat(5,minmax(0,1fr)); grid-auto-rows:auto; }
 .fp-card .fraction-card-expression { font-size:18pt; }
 .fp-breakers { grid-template-rows:auto 15mm 70mm auto auto 10mm; }
 .fp-task { grid-template-columns:1fr 1fr; }
 .fp-board #feedback { min-height:0; font-size:12pt; }
}

@media print {
 @page spire-tool { size:A4 landscape; margin:10mm; }
 html[data-spire-print-page="a4-landscape"]:has(.fp-app) { width:277mm!important; height:188mm!important; max-height:188mm!important; }
 html[data-spire-print-page="a4-landscape"] body:has(.fp-app) { width:277mm!important; }
 html[data-spire-print-page="a4-landscape"] body.spire-shared-print-brand-layout:has(.fp-app) { height:184mm!important; max-height:184mm!important; }
 .fp-app { display:block; height:165mm!important; overflow:hidden!important; }
 html[data-spire-print-page="a4-landscape"] .fp-app .topbar { display:block!important; background:white!important; color:black!important; padding:0 0 4mm!important; }
 .fp-app .brand-logo,.fp-app .top-actions { display:none!important; }
 .fp-app h1 { position:static!important; width:auto!important; height:auto!important; clip:auto!important; font-size:20pt!important; color:black!important; }
 .fp-board { height:132mm!important; }
 .fp-breakers { grid-template-rows:auto 15mm 65mm auto auto 10mm; }
}

@media print { .fp-answer label { display:none!important; } }
/* Build the family shares the practical-game shell and card models. */
@media screen {
 .fp-family { grid-template-rows:auto minmax(130px,.6fr) minmax(0,1fr) minmax(40px,auto); }
 .fp-family .family-task { display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:auto minmax(0,1fr); align-items:stretch; gap:8px; padding:10px; }
 .fp-family[data-phase="answer"] .family-task { grid-template-rows:auto minmax(0,1fr) auto; }
 .fp-family[data-phase="extra"] .family-task { grid-template-rows:auto auto minmax(0,1fr) auto; }
 .fp-family[data-phase="complete"] .family-task { grid-template-rows:minmax(0,1fr); }
 .family-task-head { display:flex; justify-content:space-between; align-items:center; gap:8px; min-width:0; }
 .family-task-head h2 { margin:0; font-size:clamp(18px,2vw,25px); text-align:left; }
 .family-task-head button { min-height:40px; }
 .family-choices { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; min-height:0; }
 .family-choice { min-width:0; min-height:0; }
 .family-choice:hover,.family-choice:focus-visible { border-color:#0877ac; background:#eaf7fd; }
 .family-choice.is-wrong { border-color:#b33e35; }
 .family-choice small { font-size:14px; color:#9c3028; }
 .family-choice .fraction-card-expression { min-height:1.65em; font-size:clamp(14px,min(14cqw,50cqh),76px); }
 .family-choice .fraction-card-expression:has(.stacked-fraction) { min-height:2.65em; font-size:clamp(12px,min(14cqw,30cqh),76px); }
 .family-card .fraction-card-expression { min-height:1.5em; }
 .family-card .fraction-card-expression:has(.stacked-fraction) { min-height:2.65em; }
 .family-card.is-anchor { border-color:#0877ac; background:#e7f5ff; }
 .family-card:not(.is-solved) { border-style:dashed; background:#f4f8fb; }
 .family-maths { min-height:0; }
 .family-empty { display:grid; place-items:center; height:100%; color:#607480; font-size:clamp(16px,1.8vw,23px); }
 .family-working { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center; gap:10px; min-height:0; }
 .family-working .fp-answer { min-height:0; }
 .family-working .fp-answer button { min-width:100px; }
 .family-unit { font-size:25px; font-weight:700; }
 .family-extra-label { display:flex; justify-content:center; align-items:center; gap:8px; font-size:15px; font-weight:700; }
 .family-extra-label select { min-width:0; max-width:100%; min-height:40px; }
 .family-finish { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; min-height:0; }
 .family-finish h2,.family-finish p { margin:0; }
 .family-finish h2 { font-size:clamp(24px,3vw,38px); }
 .family-finish p,.family-extra-result { font-size:clamp(18px,2.2vw,28px); }
 .family-finish small { font-size:14px; }
}
@media screen and (max-width:680px) {
 .fp-family { grid-template-rows:auto minmax(140px,.6fr) minmax(0,1fr) minmax(38px,auto); }
 .fp-family[data-phase="complete"],.fp-family[data-phase="extra"] { grid-template-rows:auto minmax(172px,.65fr) minmax(0,1fr) minmax(38px,auto); }
 .family-card:has(.stacked-fraction) .fraction-card-visual { padding:0; }
 .fp-family .family-task { padding:6px; gap:6px; }
 .family-task-head h2 { font-size:15px; }
 .family-task-head button { min-height:34px; padding:4px 8px; font-size:14px; }
 .family-choices { grid-template-columns:minmax(0,1fr); grid-template-rows:repeat(3,minmax(0,1fr)); gap:5px; }
 .family-choice { padding:2px; grid-template-columns:minmax(0,1fr) auto; grid-template-rows:minmax(0,1fr); }
 .family-choice small { width:60px; max-width:60px; font-size:12px; }
 .family-working { grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,1fr) auto; gap:4px; }
 .family-working .fp-answer { flex-wrap:nowrap; gap:5px; }
 .family-working .fp-answer button { min-width:0; font-size:13px; }
 .family-working .fp-answer input { width:64px; }
 .fp-family .fp-actions .wide-button { min-height:34px; }
 .family-extra-label { display:grid; gap:2px; font-size:12px; }
 .family-extra-label select { min-height:34px; height:34px; font-size:13px; }
 .family-unit { font-size:18px; }
 .family-finish { gap:8px; }
}
@media screen and (max-height:540px) and (min-width:681px) {
 .fp-family { grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); grid-template-rows:auto minmax(0,1fr) auto; }
 .fp-family #progress { grid-column:1 / -1; }
 .fp-family #hand { grid-column:1; grid-row:2; grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-rows:repeat(2,minmax(0,1fr)); gap:5px; }
 .fp-family #taskArea { grid-column:2; grid-row:2; padding:5px; gap:4px; }
 .fp-family #feedback { grid-column:1 / -1; grid-row:3; }
 .family-task-head h2 { font-size:14px; }
 .family-task-head button { min-height:30px; height:30px; font-size:13px; }
 .family-choices { gap:5px; }
 .family-working { gap:5px; }
 .family-working .fp-answer { gap:4px; }
 .family-working .fp-answer button { min-width:0; }
 .family-extra-label { font-size:12px; }
 .family-extra-label select { min-height:30px; height:30px; font-size:12px; }
 .family-finish { gap:6px; }
 .family-finish h2 { font-size:24px; }
 .family-finish p { font-size:16px; }
}
@media print {
 .fp-family { grid-template-rows:auto 40mm minmax(40mm,1fr) 10mm; }
 .fp-family .family-task { grid-template-columns:minmax(0,1fr); grid-template-rows:auto minmax(0,1fr); padding:2mm; }
 .family-hand { grid-template-columns:repeat(5,minmax(0,1fr)); }
 .family-choices { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); height:45mm; gap:3mm; }
 .family-choice,.family-card { border:1px solid #627b8b; }
 .family-choice .fraction-card-expression { font-size:22pt; }
 .family-card.is-anchor { background:#e7f5ff; }
 .family-working { height:45mm; }
 .family-maths { min-height:0; }
 .family-finish { text-align:center; }
 .family-task-head h2 { font-size:16pt; margin:0; }
 .family-task-head button,.family-extra-label,.family-finish button,.family-finish small { display:none!important; }
 .family-empty { color:#607480; }
}


@media screen and (max-width:680px) {
 .fp-family[data-phase="extra"] .family-working { grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); grid-template-rows:minmax(0,1fr); }
 .fp-family[data-phase="extra"] .fp-answer { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); justify-items:center; }
 .fp-family[data-phase="extra"] .fp-answer>label:only-child { grid-column:1 / -1; }
 .fp-family[data-phase="extra"] .fp-actions .wide-button { padding:3px; font-size:12px; }
 .fp-family[data-phase="extra"] .fp-task-model .fraction-card-visual { padding:0; }
 .fp-family[data-phase="extra"] .family-extra-label select { min-height:32px; height:32px; }
}
@media screen and (max-height:540px) and (min-width:681px) {
 .fp-family .fp-actions .wide-button { height:auto; min-height:36px; padding:3px 4px; font-size:12px; line-height:1.1; }
}

.fp-family .fp-solved { display:flex; align-items:center; justify-content:center; gap:4px; flex-wrap:nowrap; }
.family-shown { font-size:.72em; white-space:nowrap; }

/* All Connected Facts modes use the same settings, notation and bounded board. */
.cf-toolbar .control-group { display:flex; align-items:center; gap:8px; min-width:0; }
.cf-toolbar select { min-width:0; max-width:100%; }
.cf-anchors { display:grid; grid-template-columns:minmax(0,1fr); gap:10px; min-height:0; }
.fp-sort .cf-anchors { grid-template-columns:repeat(2,minmax(0,1fr)); }
.cf-anchor { display:grid; grid-template-rows:auto minmax(0,1fr); padding:4px; gap:2px; min-height:0; }
.cf-anchor-label { font-size:14px; line-height:1; font-weight:700; }
.cf-anchor-model { min-height:0; }
.cf-anchor .fraction-card-visual { padding:0; }
.cf-anchor .fraction-card-expression { min-height:1.65em; flex-wrap:nowrap; font-size:clamp(16px,min(14cqw,48cqh),42px); }
.cf-anchor-0 { border-color:#0877ac; background:#e7f5ff; }
.fp-sort .cf-anchor-1 { border-color:var(--violet); background:#f1effc; }
.cf-mode-head { display:flex; align-items:center; justify-content:space-between; gap:8px; min-width:0; }
.cf-mode-head h2 { margin:0; font-size:clamp(16px,1.8vw,23px); text-align:left; }
.cf-mode-actions { display:flex; gap:6px; flex:0 0 auto; }
.cf-mode-actions .wide-button { min-height:40px; padding:5px 10px; }
.cf-odd-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:repeat(2,minmax(0,1fr)); min-height:0; gap:10px; }
.cf-odd-card { min-height:0; }
.cf-odd-card>span,.cf-sort-card>span { min-height:0; min-width:0; }
.cf-odd-card small { min-height:18px; font-size:14px; line-height:18px; }
.cf-odd-card .fraction-card-expression,.cf-sort-card .fraction-card-expression { min-height:1.65em; font-size:clamp(14px,min(14cqw,45cqh),76px); flex-wrap:nowrap; }
.cf-odd-card .fraction-card-expression:has(.stacked-fraction),.cf-sort-card .fraction-card-expression:has(.stacked-fraction) { min-height:2.65em; font-size:clamp(12px,min(14cqw,34cqh),64px); }
.cf-odd-card:hover,.cf-odd-card:focus-visible,.cf-sort-card:hover,.cf-sort-card:focus-visible { border-color:#0877ac; background:#eaf7fd; }
.cf-odd-card.is-wrong { border-color:#b33e35; }
.cf-odd-card.is-wrong small { color:#a33028; }
.cf-odd-card.is-correct { border-color:var(--green); background:#edf9f2; }
.cf-sort-workspace { display:grid; grid-template-rows:minmax(0,1.4fr) auto minmax(0,1fr); gap:8px; min-width:0; min-height:0; }
.cf-sort-groups { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; min-height:0; }
.cf-sort-group { display:grid; grid-template-rows:repeat(3,minmax(0,1fr)); gap:6px; min-height:0; padding:4px; border:2px solid #a9cddd; border-radius:8px; }
.cf-sort-group-1 { border-color:#c2b9e5; }
.cf-sort-slot { min-height:0; min-width:0; border:1px dashed #c5d5de; border-radius:6px; background:#f4f8fb; }
.cf-pool-empty { opacity:.45; }
.cf-sort-pool { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-rows:repeat(2,minmax(0,1fr)); gap:6px; min-height:0; }
.cf-sort-card { grid-template-rows:minmax(0,1fr); padding:2px; min-height:0; }
.cf-sort-card.is-selected { outline:4px solid #0877ac; outline-offset:-4px; }
.cf-sort-card.is-placed { border-color:var(--green); }
.cf-sort-discuss { grid-column:1 / -1; grid-row:1 / -1; margin:0; display:grid; place-items:center; padding:8px; font-size:clamp(16px,2vw,24px); }
.fp-sort[data-selected="true"] .cf-anchor:hover,.fp-sort.is-dragging [data-family]:hover { outline:3px solid #149bd7; outline-offset:-3px; }
@media screen {
 .fp-odd,.fp-sort { grid-template-rows:auto clamp(64px,11vh,96px) minmax(0,1fr) minmax(40px,auto); }
 .fp-odd .cf-odd-task { display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:auto minmax(0,1fr); gap:8px; padding:8px; align-items:stretch; }
}
@media screen and (min-width:1024px) {
 .cf-sort-group { grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-rows:minmax(0,1fr); }
 .cf-sort-pool { grid-template-columns:repeat(6,minmax(0,1fr)); grid-template-rows:minmax(0,1fr); }
}
@media screen and (max-width:680px) {
 .fp-app>.cf-toolbar { display:grid; grid-template-columns:minmax(0,1fr) 52px 64px; padding:6px 8px; gap:6px; }
 .fp-app>.cf-toolbar>.control-group { display:block; grid-column:auto; }
 .cf-toolbar .control-label { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
 .fp-app>.cf-toolbar select { min-height:40px; height:40px; font-size:12px; padding-inline:4px; }
 body[data-spire-tool-id="connected-facts"] .fp-app>.cf-toolbar>button { grid-column:auto; min-height:40px; padding:4px; font-size:12px; }
 .fp-odd,.fp-sort { grid-template-rows:auto 64px minmax(0,1fr) minmax(38px,auto); }
 .cf-anchors,.cf-sort-groups { gap:6px; }
 .cf-anchor-label { font-size:12px; }
 .cf-mode-head h2 { font-size:14px; }
 .cf-mode-head { gap:4px; }
 .cf-mode-actions { gap:4px; }
 .cf-mode-actions .wide-button { min-height:32px; padding:3px 6px; font-size:12px; }
 .fp-odd .cf-odd-task { padding:5px; gap:5px; }
 .cf-odd-grid { gap:6px; }
 .cf-odd-card small { font-size:12px; min-height:16px; line-height:16px; }
 .cf-sort-workspace { gap:6px; }
 .cf-sort-group { gap:4px; padding:3px; }
 .cf-sort-pool { gap:4px; }
 .cf-sort-card { padding:1px; }
 .cf-sort-card .fraction-card-visual { padding:0; }
 .cf-sort-discuss { font-size:16px; }
}
@media screen and (max-height:540px) and (min-width:681px) {
 .fp-odd,.fp-sort { grid-template-rows:auto 50px minmax(0,1fr) minmax(30px,auto); }
 .cf-mode-head h2 { font-size:14px; }
 .cf-mode-actions .wide-button { min-height:30px; height:30px; font-size:12px; padding:3px 6px; }
 .cf-sort-group { grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-rows:minmax(0,1fr); gap:4px; padding:2px; }
 .cf-sort-pool { grid-template-columns:repeat(6,minmax(0,1fr)); grid-template-rows:minmax(0,1fr); }
 .cf-sort-workspace { gap:4px; }
 .cf-anchor-label { font-size:11px; }
}
@media print {
 .fp-odd,.fp-sort { grid-template-rows:auto 18mm minmax(0,1fr) 12mm; }
 .cf-mode-head button { display:none!important; }
 .cf-mode-head h2 { font-size:14pt; }
 .fp-odd .cf-odd-task { grid-template-columns:minmax(0,1fr); grid-template-rows:auto minmax(0,1fr); align-items:stretch; }
 .cf-odd-grid { height:70mm; }
 .cf-odd-card .fraction-card-expression { font-size:24pt; }
 .cf-sort-group { grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-rows:minmax(0,1fr); }
 .cf-sort-pool { grid-template-columns:repeat(6,minmax(0,1fr)); grid-template-rows:minmax(0,1fr); }
 .cf-sort-card .fraction-card-expression { font-size:16pt; }
 .fp-sort .cf-mode-head h2,.fp-sort .cf-sort-discuss { font-size:12pt; }
 .cf-anchor .fraction-card-expression { font-size:18pt; }
 .cf-sort-workspace { grid-template-rows:minmax(0,1.4fr) auto minmax(0,1fr); }
}

@media screen and (max-height:540px) and (min-width:681px) {
 .cf-odd-grid { grid-template-columns:repeat(4,minmax(0,1fr)); grid-template-rows:minmax(0,1fr); gap:6px; }
}
/* Fixed step reservations keep the registered whole unchanged throughout a question. */
.fb-steps { display:flex; list-style:none; gap:12px; margin:0; padding:0; justify-content:center; font-size:16px; }
.fb-steps li { border-bottom:3px solid transparent; padding:2px 6px; }
.fb-steps [aria-current="step"] { border-color:var(--violet); font-weight:800; }
.fb-steps .is-done { color:#17653d; }
.fb-guided #progress { display:flex; justify-content:center; align-items:center; gap:24px; font-weight:700; }
.fb-methods { display:flex; gap:8px; min-width:0; }
.fb-answer-fields { display:flex; justify-content:center; align-items:center; gap:10px; margin:0; }
.fb-methods button { max-width:235px; }
.fb-guided #stageControls { min-width:0; align-content:center; }
.fb-guided #stageControls:has([data-fb="chooseShare"]) { display:flex; flex-wrap:wrap; }
.fb-guided .fp-result { font-size:28px; white-space:nowrap; }
@media screen {
 .fb-guided { grid-template-columns:minmax(0,1fr); grid-template-rows:32px 76px minmax(0,1fr) 84px 48px 58px; gap:6px; }
 .fb-guided #progress,.fb-guided #question,.fb-guided #divisionModel,.fb-guided #stageControls,.fb-guided #actions,.fb-guided #feedback { grid-column:1; grid-row:auto; }
 .fb-guided #stageControls .wide-button { min-height:46px; }
 .fb-guided #stageControls .fb-share-count { display:flex; align-items:center; gap:6px; }
 .fb-guided .fp-question .fraction-card-expression { font-size:28px; }
 .fb-guided .fp-actions .wide-button { min-height:44px; }
 .fb-guided #feedback { font-size:17px; }
}
@media screen and (max-width:680px) {
 .fp-app>.fb-toolbar { padding:5px 8px; gap:5px; }
 .fb-toolbar .control-label { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
 .fp-app>.fb-toolbar select { min-height:38px; height:38px; font-size:13px; }
 .fp-app>.fb-toolbar>button { min-height:36px; font-size:13px; }
 .fb-guided { grid-template-columns:minmax(0,1fr) minmax(0,1fr); grid-template-rows:64px minmax(0,1fr) 96px 44px 58px; gap:5px; }
 .fb-guided #progress { grid-column:1; grid-row:1; display:grid; gap:2px; font-size:12px; }
 .fb-steps { gap:2px; font-size:12px; }
 .fb-steps li { padding:1px 2px; border-width:2px; }
 .fb-guided #question { grid-column:2; grid-row:1; }
 .fb-guided #divisionModel { grid-column:1 / -1; grid-row:2; }
 .fb-guided #stageControls { grid-column:1 / -1; grid-row:3; }
 .fb-guided #actions { grid-column:1 / -1; grid-row:4; }
 .fb-guided #feedback { grid-column:1 / -1; grid-row:5; font-size:14px; }
 .fb-guided #stageControls:has(.fb-methods) { display:grid; grid-template-columns:minmax(0,1fr); gap:4px; }
 .fb-methods { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; }
 .fb-guided #stageControls .fb-methods button { min-height:44px; padding:3px 7px; font-size:14px; line-height:1.15; }
 .fb-guided #stageControls .fb-share-count { justify-content:center; }
 .fb-guided #shares { min-height:32px; height:32px; width:64px; }
 .fb-guided #stageControls:has([data-fb="chooseShare"]) { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px; }
 .fb-guided #stageControls [data-fb="chooseShare"] { min-height:38px; }
 .fb-guided .fp-question .fraction-card-expression { font-size:23px; }
 .fb-guided .fp-result { font-size:24px; }
 .fb-guided .fp-actions .wide-button { padding:4px 5px; font-size:13px; min-height:40px; }
}
@media screen and (max-height:540px) and (min-width:681px) {
 .fb-guided { grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); grid-template-rows:30px 56px minmax(0,1fr) 64px 44px; gap:4px; }
 .fb-guided #progress { grid-column:1 / -1; grid-row:1; font-size:13px; gap:16px; }
 .fb-guided #question { grid-column:1; grid-row:2; }
 .fb-guided #divisionModel { grid-column:1; grid-row:3 / 5; }
 .fb-guided #stageControls { grid-column:2; grid-row:2 / 4; }
 .fb-guided #actions { grid-column:2; grid-row:4; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px; align-content:center; }
 .fb-guided #feedback { grid-column:1 / -1; grid-row:5; font-size:13px; }
 .fb-guided #stageControls:has(.fb-methods) { display:grid; grid-template-columns:minmax(0,1fr); gap:4px; }
 .fb-methods { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px; }
 .fb-guided #stageControls .fb-methods button { min-height:40px; height:auto; padding:3px; line-height:1.1; font-size:13px; }
 .fb-guided #stageControls .fb-share-count { justify-content:center; }
 .fb-guided #shares { min-height:30px; height:30px; }
 .fb-guided #stageControls:has([data-fb="chooseShare"]) { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px; }
 .fb-guided #stageControls [data-fb="chooseShare"] { min-height:32px; }
 .fb-guided .fp-question .fraction-card-expression { font-size:20px; }
 .fb-guided .fp-result { font-size:20px; }
 .fb-guided .fp-actions .wide-button { min-height:30px; height:30px; font-size:12px; }
}
@media print {
 .fb-guided { grid-template-columns:minmax(0,1fr); grid-template-rows:10mm 16mm 65mm 20mm 0 15mm; gap:2mm; }
 .fb-guided #progress,.fb-guided #question,.fb-guided #divisionModel,.fb-guided #stageControls,.fb-guided #actions,.fb-guided #feedback { grid-column:1; grid-row:auto; }
 .fb-guided #progress { font-size:12pt; }
 .fb-steps { font-size:12pt; }
 .fb-guided .fp-result { font-size:24pt; }
 .fb-guided .fp-stage-prompt,.fb-guided #feedback { font-size:12pt; }
}