/* Formula structures use the same ink, rounded cards and palette as the game. */
.fm .fd-lab{min-width:0;max-width:100%;overflow:hidden;background:#fffdf7}
.fm .fd-lab .fd-lab{box-shadow:none;margin-top:10px;background:#fff;border-width:2px}
.fm .fd-title{margin:0 0 12px;font-size:1.1rem;line-height:1.5}
.fm .fd-stage{min-width:0;max-width:100%;padding:12px 0}
.fm .fd-stage svg,.fm .fd-lab>div>svg,.fm .fd-estimate-answer svg{width:100%;max-width:560px;max-height:370px;display:block;margin:auto;height:auto;font-size:18px}
.fm .fd-caption{padding:10px 12px;border:2px solid var(--ink);border-radius:12px;background:#fff3c9;overflow-wrap:anywhere}
.fm .fd-caption p{font-size:1rem;line-height:1.65}
.fm .fd-formula{font-size:clamp(1rem,2.2vw,1.35rem);font-weight:800;padding:10px 8px;line-height:1.8;overflow-wrap:anywhere;min-width:0}
.fm .fd-controls{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:12px;padding-top:8px;border-top:2px dashed var(--line2)}
.fm .fd-controls .btn,.fm .fd-lab .btn{min-height:44px;padding:6px 14px;font-size:.95rem}
.fm .fd-controls .btn:disabled{opacity:.42;cursor:default}
.fm .fd-control{display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-width:0;min-height:44px;margin:6px 0;font-weight:700;font-size:.9rem}
.fm .fd-controls>.fd-control{flex:1 1 100%}
.fm .fd-control input[type=range]{flex:1 1 150px;width:100%;min-width:100px;max-width:480px;min-height:44px;accent-color:#2c6fd6;cursor:ew-resize;touch-action:pan-y}
.fm .fd-control input[type=text],.fm .fd-control select{font:inherit;min-width:70px;max-width:100%;width:140px;min-height:44px;padding:5px 8px;border:3px solid var(--ink);border-radius:10px;color:var(--ink);background:#fff}
.fm .fd-control select{width:auto}
/* Blank answer entries stay separate from editable worked-example parameters. */
.fm .fd-attempt-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr));gap:8px 14px}
.fm .fd-attempt-fields .fd-control{display:flex;flex-direction:column;align-items:stretch;justify-content:end;gap:4px}
.fm .fd-attempt-fields .fd-control input{width:100%;max-width:none;min-height:44px;box-sizing:border-box}
.fm .fd-attempt-fields .fd-answer-wide{grid-column:1 / -1}
.fm .fd-attempt-form>.btn{margin-top:10px}
.fm .fd-attempt-fields input[aria-invalid=true]{border-color:var(--bad);background:var(--bad-soft)}
.fm .fd-attempt-fields input[aria-invalid=false]{border-color:var(--good);background:var(--good-soft)}
.fm .fd-tabs[aria-label="Answer or explanation"]{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));max-width:380px}
.fm .fd-tabs[aria-label="Answer or explanation"] .btn{padding:6px;font-size:.85rem}
.fm [data-answer-entry] .fd-control{margin:3px 0}
.fm .fd-attempt-form .fb:empty{display:none}
.fm .fd-estimate-question{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));gap:12px}
.fm .fd-estimate-question svg{width:100%;height:auto}
.fm .fd-control input:focus-visible,.fm .fd-control select:focus-visible,.fm .fd-lab button:focus-visible{outline:3px solid #2c6fd6;outline-offset:3px}
.fm .fd-status{margin-left:auto;font-weight:800;font-variant-numeric:tabular-nums}
.fm .fd-current,.fm table .fd-current,.fm table tr.fd-current>*{background:#ffe38a!important;color:var(--ink);box-shadow:inset 0 0 0 2px #d69e16;border-radius:5px}
.fm .fd-term{padding:2px 6px;background:#ffe38a;border-radius:6px;display:inline-block}
.fm .fd-vertical{display:inline-grid;grid-template-columns:repeat(var(--cols),minmax(32px,1.2em));padding:16px 12px;background:#fff;border:3px solid var(--ink);border-radius:14px;font:800 1.65rem/1.45 "Baloo 2",sans-serif;gap:2px;vertical-align:top}
.fm .fd-cell{display:flex;justify-content:center;align-items:center;min-height:36px;position:relative;white-space:nowrap}
.fm .fd-cell.fd-small{font-size:.65em;color:#b53125;min-height:24px}
.fm .fd-cell del{color:#937d6c;text-decoration-color:#d94135;font-size:.7em;margin-right:1px}
.fm .fd-cell>del:only-child{font-size:1em;margin:0}
.fm .fd-cell del+b{color:#b53125;font-size:.8em}
.fm .fd-line{border-top:3px solid var(--ink)}
.fm .fd-down{color:#176eb3}
.fm .fd-current:not(tr){animation:fdGlow .3s ease-out}
@keyframes fdGlow{from{filter:brightness(1.2);transform:translateY(-2px)}to{filter:none;transform:none}}
.fm .fd-table{font-size:1.1rem;min-width:max-content}
.fm .fd-place button{min-width:44px;min-height:44px;border:2px solid var(--ink);border-radius:8px;background:#fff;font:800 1.15rem "Baloo 2",sans-serif;color:var(--ink);cursor:pointer}
.fm .fd-place th,.fm .fd-place td{min-width:70px}
.fm .fd-fraction{display:inline-flex;vertical-align:middle;flex-direction:column;text-align:center;line-height:1.3;margin:0 5px;max-width:100%;font-size:1em}
.fm .fd-fraction>span{padding:3px 6px;overflow-wrap:anywhere}
.fm .fd-fraction>span+span{border-top:2px solid currentColor}
.fm .fd-equation-chain{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center;font-size:1.2rem;font-weight:800}
.fm .fd-equation-chain>span{padding:8px 12px;border-radius:10px;border:2px solid var(--ink);background:#fff}
.fm .fd-digitrow{display:flex;gap:5px;justify-content:center;flex-wrap:wrap}
.fm .fd-digitrow>span{border:2px solid var(--ink);border-radius:9px;padding:3px 9px;font-size:1.5rem;font-weight:800;background:#fff}
.fm .fd-shift{display:grid;grid-template-columns:repeat(6,78px);width:max-content;max-width:none;margin:auto}
.fm .fd-shift>div{display:flex;flex-direction:column;align-items:center;border:1px solid var(--line2);padding:4px}
.fm .fd-shift small{font-size:.7rem;height:38px;text-align:center}
.fm .fd-shift b{font-size:1.5rem;min-height:40px;width:100%;text-align:center}
.fm .fd-shift span{color:var(--good)}
.fm .fd-table-guide,.fm .fd-guide-control{border:2px dashed var(--line2);border-radius:12px;padding:8px;margin-top:8px}
.fm .fd-book-reference{border:2px solid var(--line2);border-radius:12px;padding:8px;margin-top:10px}
.fm .fd-book-reference>summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font-weight:700}
.fm .fm-calculation{margin:8px 0;border:2px solid var(--line2);border-radius:12px;padding:8px;background:#fffdf7}
.fm .fm-calculation>summary{min-height:44px;cursor:pointer;font-weight:800;padding:8px 0}
.fm .fm-calculation .fd-lab{box-shadow:none}
.fm .fd-division,body.focus-mode .fm .fd-vertical.fd-division{grid-template-columns:repeat(var(--cols),1em);font-size:1.5rem;padding:10px 4px;gap:0}
.fm .fd-lab [aria-pressed=true]{background:#ffe38a;border-color:var(--ink)}
@media(max-width:600px){
  .fm .fd-lab{padding:9px}.fm .fd-controls{gap:6px}.fm .fd-controls .btn{padding:5px 9px}
  .fm .fd-vertical{font-size:1.35rem;grid-template-columns:repeat(var(--cols),minmax(28px,1.2em));padding:12px 6px;gap:1px}
  .fm .fd-division,body.focus-mode .fm .fd-vertical.fd-division{font-size:1.1rem;grid-template-columns:repeat(var(--cols),1em);padding:10px 4px;gap:0}
  .fm .fd-formula{padding:8px 2px}.fm .fd-caption{padding:8px}.fm .fd-stage{padding:8px 0}
  .fm .fd-equation-chain>span{padding:6px;font-size:1rem}
}
@media(prefers-reduced-motion:reduce){.fm .fd-current{animation:none!important}}

/* One working surface: change steps/topics in place instead of stacking full cards. */
.fm .fd-tabs{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 10px;min-width:0}
.fm .fd-tabs .btn{min-height:44px;max-width:100%;padding:6px 12px;font-size:.95rem;white-space:normal}
.fm .fd-tabs [aria-selected=true]{background:#ffe38a;box-shadow:0 3px 0 var(--ink)}
.fm .fd-tabs button:disabled{opacity:.4;cursor:default}
.fm .fd-deck-panel{min-width:0;max-width:100%}
.fm .fd-step-nav{margin:0}
.fm-ex .fm-step{border-left:0;padding:0;animation:none}
.fm-ex .fm-step>.sn{margin-bottom:4px}
.fm .fd-lab{container-type:inline-size}
.fm .fd-lab svg{display:block;width:100%;max-width:560px;max-height:220px;height:auto;margin:auto;font-size:18px}
.fm .fd-settings{border-bottom:2px dashed var(--line2);margin-bottom:8px;padding-bottom:4px}
.fm .fd-settings>summary{cursor:pointer;min-height:44px;display:list-item;padding:8px 0;font-weight:700;font-size:.9rem}
.fm .fd-settings>.ctrl{display:flex;gap:8px;margin:8px 0}
.fm .fd-settings .fd-control{flex:1 1 90px;display:flex;flex-direction:column;align-items:stretch;gap:3px;margin:0;font-size:.8rem}
.fm .fd-settings .fd-control input{width:100%;min-width:0}
.fm .fd-lab [data-method].fd-lab{border:0;box-shadow:none;padding:0;background:transparent}
.fm .fd-player{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;min-width:0}
.fm .fd-stage-tools{display:flex;align-items:center;justify-content:space-between;gap:8px}
.fm .fd-stage-tools .btn{padding:4px 10px;min-height:44px;font-size:.85rem;background:#fff}
.fm .fd-stage{padding:8px;max-height:260px;max-height:min(32dvh,280px);overflow:auto;border:2px solid var(--line2);border-radius:12px;background:#fff;overscroll-behavior:contain;scrollbar-gutter:stable}
.fm .fd-player[data-layout=calculation]>.fd-stage{height:240px;height:clamp(180px,28dvh,250px)}
.fm .fd-stage>.scrollx{overflow:visible}
.fm .fd-stage .fd-vertical{border:0;padding:4px;border-radius:0}
.fm .fd-caption{align-self:start;padding:8px 10px}
.fm .fd-caption p{font-size:.9rem;line-height:1.5}
.fm .fd-caption .fd-formula{font-size:1.05rem;padding:6px 0;line-height:1.6}
.fm .fd-controls{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:8px;margin:0;padding:0;border:0;align-items:center}
.fm .fd-controls .btn{min-width:56px;padding:5px 8px;font-size:.85rem;min-height:44px;white-space:nowrap}
.fm .fd-controls>.fd-control{flex-wrap:nowrap;margin:0;font-size:.8rem;gap:5px;white-space:nowrap}
.fm .fd-controls>.fd-control input{min-width:45px}
.fm .fd-controls .fd-status{justify-self:end;font-size:.85rem;margin:0}
.fm .fd-expanded>.fd-stage{height:auto!important;max-height:none;overflow:auto}
.fm-ex,.fm .fd-lab{overflow:clip}
/* Each area has its own grid row. Scrolling must never float controls over a diagram. */
.fm .fd-player>*{min-width:0}
.fm .fd-player>.fd-stage-tools{grid-row:1}
.fm .fd-player>.fd-controls{grid-row:2}
.fm .fd-player>.fd-stage{grid-row:3}
.fm .fd-player>.fd-caption{grid-row:4}
/* Focus game: the answer panel never holds a full calculation player */
.sheet .fd-player,.sheet .fd-book-reference{display:none!important}
/* Focus: give the working the full card width, with its explanation underneath.
   The card scrolls vertically; diagrams must not shrink to fit the remaining height. */
.fm .fd-player{gap:12px}
.fm .fd-stage{max-height:520px;max-height:65dvh;padding:12px;scrollbar-gutter:auto}
.fm .fd-player[data-layout=calculation]>.fd-stage{height:clamp(320px,48dvh,440px)}
.fm .fd-player[data-layout=visual]>.fd-stage{max-height:none;overflow:visible}
.fm .fd-diagram{width:100%;max-width:100%;min-width:0;overflow-x:auto;overscroll-behavior-x:contain;margin:8px 0;padding-bottom:4px}
.fm .fd-lab .fd-diagram>svg{width:100%;min-width:calc(var(--fd-diagram-width) * .95);max-width:800px;max-height:none;height:auto;margin:0 auto;font-size:18px}
.fm .fd-diagram:focus-visible{outline:3px solid #2c6fd6;outline-offset:2px;border-radius:6px}
.fm .fd-caption p{font-size:1.1rem;line-height:1.6}
.fm .fd-caption .fd-formula{font-size:1.2rem}
.fm .fd-controls .btn,.fm .fd-lab .btn{min-height:52px;font-size:1rem}
.fm .fd-control{font-size:1rem;min-height:52px}
.fm .fd-control input[type=range]{min-height:52px}
.fm .fd-controls>.fd-control,.fm .fd-controls .fd-status{font-size:1rem}
body.focus-mode .fm .fd-vertical.fd-division{font-size:1.6rem}
@media(max-width:600px){
  .fm .fd-stage{padding:8px}
  .fm .fd-controls{grid-template-columns:auto minmax(0,1fr);gap:6px}
  .fm .fd-controls .fd-control{font-size:.95rem}
  .fm .fd-controls .fd-status{grid-column:2;justify-self:end;font-size:.95rem}
  .fm .fd-caption p{font-size:1.05rem}
}
/* arrows over the working: carry, regroup, multiply pair, bring down */
.fm .fd-vertical{position:relative}
.fm .fd-arrows,body.focus-mode .fm .fd-lab svg.fd-arrows{position:absolute;left:0;top:0;pointer-events:none;overflow:visible;z-index:3;max-height:none!important;max-width:none!important}
.fm .fd-arrow{fill:none;stroke-width:3.5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;animation:fdDraw .55s ease-out forwards}
.fm .fd-arrow.pair{stroke-dasharray:.06 .05;stroke-dashoffset:0;animation:fdFade .4s ease-out both}
.fm .fd-arrow-t{font:800 15px "Baloo 2",sans-serif;paint-order:stroke;stroke:#fff;stroke-width:4px;opacity:0;animation:fdFade .35s ease-out forwards}
@keyframes fdDraw{to{stroke-dashoffset:0}}
@keyframes fdFade{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.fm .fd-arrow,.fm .fd-arrow-t{animation:none;stroke-dashoffset:0;opacity:1}}
.fm .fd-stage .fd-vertical[data-arrows]{padding-top:34px}
.fm .fd-arrow.pair{stroke-width:2.5}

/* Use the actual question-card width, including after resizing notes or the window. */
body.focus-mode #qarea{container:focus-board / inline-size}
.fm-layout{display:flex;flex-direction:column;gap:16px;min-width:0}
.fm-question-pane,.fm-display-pane{min-width:0;max-width:100%}
.fm-display-pane{display:flex;flex-direction:column;gap:12px}
.fm-question-pane>*+*{margin-top:14px}
.fm-lesson-wide{display:grid;grid-template-columns:minmax(240px,.7fr) minmax(0,1.3fr);gap:20px;align-items:start}
.fm-lesson-wide>.fd-tabs+.fd-deck-panel{grid-column:2;grid-row:1}
.fm-lesson-wide>.fd-deck-panel:last-child{grid-column:1;grid-row:1;padding:14px;border:2px solid var(--line2);border-radius:14px;background:#fff;position:sticky;top:0;max-height:55dvh;overflow:auto;overscroll-behavior:contain}
@container focus-board (min-width:900px){
  .fm-layout{display:grid;grid-template-columns:minmax(240px,.7fr) minmax(0,1.3fr);gap:20px;align-items:start}
  .fm-question-pane{padding:14px;border:2px solid var(--line2);border-radius:14px;background:#fff;position:sticky;top:0;max-height:55dvh;overflow:auto;overscroll-behavior:contain}
  .fm-layout>.fm-question-pane{grid-column:1;grid-row:1}
  .fm-layout>.fm-display-pane{grid-column:2;grid-row:1}
}