/* Fraction-specific layout; house chrome is owned by interactive-tool-shell.css. */
.app { height:100dvh; min-height:0; display:flex; flex-direction:column; }
#fractionNumberLineModel { display:flex; flex-direction:column; flex:1; min-height:0; }
.fnl-toolbar { flex-wrap:wrap; align-items:flex-end; gap:8px; z-index:10; }
.fnl-toolbar-field { display:flex; flex-direction:column; gap:4px; font-size:.85rem; color:var(--muted); font-weight:800; }
.fnl-toolbar-field select { font-size:1rem; max-width:210px; }
#fnl-denominator { min-width:88px; }
.fnl-spacer { flex:1; }
.fnl-modes { display:flex; gap:8px; margin-bottom:12px; }
.fnl-modes button { flex:1; }
.fnl-session { display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; flex:none; }
.fnl-session .fnl-modes,.fnl-session .fnl-task-actions { margin:0; }
.fnl-session-choices { display:flex; flex-wrap:wrap; align-items:flex-end; gap:12px; }
.fnl-session .fnl-toolbar-field select { max-width:240px; }
.fnl-session .fnl-task-actions { align-items:flex-end; }
.fnl-zoom-actions { display:flex; gap:8px; margin-top:12px; flex:none; }
.fnl-zoom-settings { display:flex; flex-wrap:wrap; align-items:flex-end; gap:12px; padding:12px; margin-top:8px; border:1px solid var(--line); border-radius:var(--radius); flex:none; }
.fnl-zoom-settings>label { display:flex; flex-direction:column; gap:6px; }
.fnl-zoom-settings input { max-width:64px; }
.fnl-extra-scale { margin-top:12px; }
.fnl-working .fnl-stacked-label { flex-direction:column; align-items:stretch; gap:6px; }
.fnl-working .fnl-stacked-label input { width:100%!important; }
.fnl-working fieldset { border:0; padding:0; margin:14px 0; min-width:0; }
.fnl-working fieldset legend { font-weight:800; margin-bottom:8px; }
.fnl-working .fnl-editor { margin:0; }
.fnl-preset-list { display:grid; gap:8px; }
#fnl-teacher-setup p { font-size:.85rem; color:var(--muted); line-height:1.4; }
#fnl-teacher-setup label { min-height:44px; }

.fnl-guide { flex:none; margin:12px 0; font-size:17px; line-height:1.45; }
.fnl-entry-help { font-size:.85rem; line-height:1.5; color:var(--muted); margin:10px 0; }
.fnl-working .fnl-primary { background:var(--blue); color:var(--ink); grid-column:1/-1; }
.fnl-labelled-editor .fnl-whole-entry { flex-direction:column; gap:4px; }
.fnl-labelled-editor label span { font-size:.8rem; color:var(--muted); font-weight:800; }
.fnl-labelled-editor .fnl-editor-fraction { width:auto; }
.fnl-labelled-editor input { width:64px!important; font-size:20px; text-align:center; }
.fnl-labelled-editor .fnl-editor-fraction label { gap:6px; }
.fnl-labelled-editor .fnl-editor-fraction label input { border-radius:var(--radius); border-bottom:1px solid var(--line); }
.fnl-labelled-editor .fnl-editor-fraction label:first-child input { border-bottom:2px solid var(--ink); border-bottom-left-radius:0; border-bottom-right-radius:0; }
.fnl-menu-panel { width:min(440px,calc(100vw - 28px)); max-height:70dvh; overflow:auto; z-index:25; }
.fnl-questions .fnl-menu-panel { left:auto; right:0; }
.fnl-menu-panel fieldset { border:0; margin:0 0 16px; padding:0; }
.fnl-menu-panel legend { font-weight:800; margin-bottom:8px; }
.fnl-menu-panel label { display:flex; align-items:center; gap:8px; min-height:44px; margin:5px 0; }
.fnl-menu-panel input:not([type=radio]):not([type=checkbox]) { width:100px; }
.fnl-menu-panel p { color:var(--muted); font-size:.9rem; line-height:1.5; }
.fnl-menu-panel fieldset>button { margin:3px; }
.fnl-task { flex:none; padding:0 0 14px; }
#fnl-prompt { font-size:22px; line-height:1.65; min-width:0; }
.fnl-task-actions { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 16px; }
.fnl-task-actions button { flex:1; }
.fnl-feedback { flex:none; margin:0 0 12px; padding:10px 14px; border-radius:var(--radius); background:#fff4d6; font-size:17px; line-height:1.4; }
.fnl-workspace { display:grid; grid-template-columns:minmax(0,1fr) 296px; gap:14px; padding:18px; flex:1; min-height:0; }
.fnl-canvas { min-height:0; min-width:0; padding:16px; display:flex; flex-direction:column; }
.fnl-working { min-height:0; overflow:auto; padding:14px; font-size:1rem; }
.fnl-working>div,.fnl-working>details { margin-bottom:18px; }
.fnl-working summary { min-height:48px; display:flex; align-items:center; cursor:pointer; font-weight:800; }
.fnl-working summary:before { content:'▸'; margin-right:8px; }
.fnl-working details[open]>summary:before { content:'▾'; }
.fnl-working label { display:flex; align-items:center; gap:8px; }
.fnl-working label input:not([type=checkbox]) { width:78px; }
.fnl-action-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:10px; }
.fnl-action-grid button { padding:8px; font-size:.95rem; }
.fnl-editor { border:0; padding:0; margin:0; display:inline-flex; gap:8px; align-items:center; min-width:0; }
.fnl-editor legend { font-size:.9rem; color:var(--muted); font-weight:800; padding:0; margin-bottom:8px; }
.fnl-editor>input { width:86px; font-size:20px; text-align:center; }
.fnl-editor-fraction { display:flex; flex-direction:column; gap:2px; width:80px; }
.fnl-editor-fraction input { width:100%; text-align:center; font-size:20px; padding:0 4px; }
.fnl-editor-fraction input:first-child { border-bottom:2px solid var(--ink); border-bottom-left-radius:0; border-bottom-right-radius:0; }
.fnl-editor-pair { display:flex; flex-wrap:wrap; gap:12px; }
.fnl-editor-pair .fnl-editor>input,.fnl-editor-pair .fnl-editor-fraction { width:55px; }
.fnl-fraction { display:inline-flex; flex-direction:column; vertical-align:middle; align-items:stretch; text-align:center; font-size:.82em; line-height:1.15; margin:0 .13em; min-width:1.1em; }
.fnl-fraction>span:first-child { border-bottom:1.5px solid currentColor; padding:0 .14em .08em; }
.fnl-fraction>span:last-child { padding:.08em .14em 0; }
.fnl-marker-list { display:flex; gap:8px; flex-wrap:wrap; }
.fnl-marker-list button { font-size:17px; }
.fnl-canvas>.fnl-marker-list { flex:none; justify-content:center; margin-top:14px; }
.fnl-canvas>.fnl-marker-list:empty { display:none; }
.fnl-order-item { display:flex; align-items:center; justify-content:space-between; gap:7px; font-size:21px; margin:5px 0; }
.fnl-order-item button { min-width:48px; }
.fnl-order-item button:first-of-type { margin-left:auto; }
#fnl-response h2 { font-size:1rem; margin:0 0 8px; }
#fnl-answer-preview { font-size:20px; margin:7px 0; }
#fnl-common-labels { font-size:18px; line-height:2.4; }
#fnl-number-sentence { text-align:center; font-size:28px; line-height:1.8; flex:none; margin-top:18px; }
#fnl-number-sentence:empty { display:none; }
.fnl-related { display:flex; gap:12px; flex-wrap:wrap; margin-top:12px; }
.fnl-related a { color:#096687; min-height:48px; display:flex; align-items:center; }
#fnl-model { min-height:0; flex:1; display:flex; align-items:center; justify-content:center; }
#fnl-model>figure { width:100%; height:100%; margin:0; display:flex; flex-direction:column; justify-content:center; }
#fnl-model svg { display:block; width:100%; height:100%; max-height:100%; overflow:visible; flex:1; min-height:0; }
#fnl-bar { flex:none; max-height:25%; display:flex; justify-content:center; }
#fnl-bar:empty { display:none; }
#fnl-bar>figure { margin:0; max-width:55%; max-height:100%; }
#fnl-bar svg { height:100%; max-height:100px; width:auto; max-width:100%; }
.instructions-header form { margin:0; }
@media(max-width:1100px) { .fnl-workspace { grid-template-columns:minmax(0,1fr) 256px; padding:12px; } .fnl-toolbar { gap:6px; } .fnl-toolbar button,.fnl-toolbar summary { padding:0 12px; } .fnl-toolbar-field select { max-width:190px; } }
@media(max-width:860px) {
  .app { height:auto; min-height:100dvh; }
  .fnl-workspace { display:flex; flex-direction:column; }
  .fnl-canvas { min-height:320px; padding:12px; }
  .fnl-working { overflow:visible; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  .fnl-working>div,.fnl-working>details { min-width:0; }
  #fnl-prompt { font-size:20px; }
  .fnl-menu-panel { position:fixed; top:min(160px,20dvh); left:14px!important; right:auto!important; max-height:72dvh; }
  #fnl-model { min-height:260px; }
  #fnl-model>figure { height:auto; }
  #fnl-model svg { height:auto; max-height:none; }
}
@media(max-width:550px) { .fnl-working { display:block; } .fnl-canvas { min-height:220px; } #fnl-model { min-height:180px; } .fnl-toolbar { padding:10px; gap:8px; } .fnl-toolbar-field select { max-width:210px; } .fnl-spacer { display:none; } #fnl-number-sentence { font-size:22px; } }
@media(prefers-reduced-motion:reduce) { * { scroll-behavior:auto!important; transition:none!important; } }
@media print {
  @page { size:A4 landscape; margin:10mm; }
  html,body,.app { height:auto!important; min-height:0!important; background:white!important; overflow:visible!important; }
  .topbar,.fnl-toolbar,.fnl-working,.fnl-session,.fnl-zoom-actions,.fnl-zoom-settings,.fnl-guide,.fnl-task-actions,.fnl-feedback,.instructions-dialog,.annotation-overlay { display:none!important; }
  #fractionNumberLineModel { display:flex; flex:1; min-height:0; }
  .fnl-workspace { display:flex; flex:1; height:auto; min-height:0; padding:0; break-inside:avoid; }
  .fnl-canvas { flex:1; height:auto; min-height:0; width:100%; border:0; padding:0; display:flex; box-shadow:none; }
  .fnl-task { flex:none; padding:0 0 3mm; }
  #fnl-prompt { font-size:15pt; }
  .fnl-canvas svg { print-color-adjust:exact; -webkit-print-color-adjust:exact; }
  #fnl-model { height:auto; flex:1; min-height:0; }
  #fnl-model>figure { height:100%; margin:0; }
  #fnl-model svg { height:100%; width:100%; max-height:100%; }
  #fnl-number-sentence { font-size:18pt; margin-top:5mm; }
  .fnl-related { display:none!important; }
  .fnl-canvas>.fnl-marker-list button { font-size:12pt; background:white; color:var(--ink); border:0; padding:2mm; }
}

/* Immediate actions stay beside the line; optional teaching equipment opens in place. */
.fnl-line-toolbar { display:flex; align-items:center; gap:12px; justify-content:space-between; flex:none; margin-top:12px; }
.fnl-line-toolbar .fnl-guide { margin:0; }
.fnl-line-toolbar .fnl-zoom-actions { margin:0; flex-wrap:wrap; }
.fnl-marker-actions { display:flex; justify-content:center; gap:8px; flex-wrap:wrap; margin-top:8px; flex:none; }
.fnl-transform-actions { grid-template-columns:repeat(3,minmax(0,1fr)); }
#fnl-scale-toggle,#fnl-repeat-toggle { margin-top:12px; }
.fnl-working #fnl-selected-support { margin-bottom:12px; }
@media print { .fnl-line-toolbar,.fnl-marker-actions { display:none!important; } }
.fnl-line-toolbar { flex-wrap:wrap; }
.fnl-line-toolbar .fnl-guide { flex:1 1 240px; min-width:0; }
.fnl-line-toolbar .fnl-zoom-actions { flex:0 1 auto; min-width:0; }
@media(max-width:550px) { .fnl-line-toolbar .fnl-guide { flex-basis:100%; } }

/* Classroom displays keep the line and its controls in one viewport, including
   shorter boards and optional aligned/zoomed scales. The SVG fits its host. */
@media screen and (min-width:861px) {
  #fractionNumberLineModel { --touch:44px; }
  .fnl-workspace { grid-template-columns:minmax(0,1fr) 296px; grid-template-rows:minmax(0,1fr); gap:10px; padding:10px; }
  .fnl-canvas { position:relative; padding:12px; }
  .fnl-working { position:relative; overflow:visible; padding:6px 10px; font-size:.95rem; }
  .fnl-working>div,.fnl-working>details { margin-bottom:2px; }
  .fnl-working #fnl-selected-support { margin-bottom:4px; }
  #fnl-response h2 { margin-bottom:4px; }
  .fnl-working fieldset { margin:0; }
  .fnl-working summary { min-height:44px; }
  .fnl-entry-help { margin:6px 0; line-height:1.35; }
  .fnl-session { gap:6px; }
  .fnl-session-choices { gap:8px; }
  .fnl-task-actions { gap:6px; }
  .fnl-line-toolbar { margin-top:8px; }
  .fnl-task { padding-bottom:8px; }
  #fnl-prompt { font-size:20px; line-height:1.35; }
  #fnl-number-sentence { margin-top:18px; line-height:1.3; }
  .fnl-feedback { margin-bottom:6px; padding:6px 10px; }
  #fnl-zoom-settings { position:absolute; top:64px; right:12px; max-width:calc(100% - 24px); z-index:25; background:white; box-shadow:0 12px 32px rgba(15,33,49,.12); }
  #fnl-equivalence-tools { display:grid; grid-template-columns:1fr 1fr; gap:6px; align-items:center; }
  #fnl-equivalence-tools>.fnl-action-grid,#fnl-equivalence-tools>label:not(:first-child) { grid-column:1/-1; }
  #fnl-equivalence-tools>label:first-child { grid-column:1; grid-row:1; }
  #fnl-equivalence-tools>#fnl-scale-toggle { grid-column:2; grid-row:1; margin-top:0; padding:4px; font-size:.9rem; }
  #fnl-jump-tools { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; align-items:start; }
  #fnl-jump-tools>.fnl-editor-pair { grid-column:1/-1; flex-wrap:nowrap; gap:6px; }
  #fnl-jump-tools>.fnl-action-grid { grid-template-columns:1fr; margin-top:0; }
  #fnl-jump-tools>#fnl-repeat-toggle { margin-top:0; width:100%; padding:4px; font-size:.85rem; line-height:1.2; }
  #fnl-jump-tools>label,#fnl-jump-tools>#fnl-repeat-tools,#fnl-jump-tools>#fnl-jump-list { grid-column:1/-1; }
  .fnl-working fieldset legend { margin-bottom:2px; }
  #fnl-jump-tools .fnl-editor>input { width:54px; }
  #fnl-jump-tools .fnl-editor-fraction { width:60px; }
  #fnl-scale-settings,#fnl-repeat-tools { position:absolute; right:calc(100% + 10px); top:50%; transform:translateY(-50%); width:280px; margin:0; padding:12px; z-index:25; background:white; border:1px solid var(--line); border-radius:var(--radius); box-shadow:0 12px 32px rgba(15,33,49,.12); }
}