/* Use the viewport width even while the owning document reserves its scrollbar.
   The retained document supplies its own gutter; reserving both shrinks the view. */
iframe[data-math-view] { position:fixed; inset:0; width:100vw; max-width:none; height:100%; height:100svh; border:0; visibility:hidden; pointer-events:none; z-index:100; }
iframe[data-math-view].math-view-active { visibility:visible; pointer-events:auto; }
html[data-retained-view] { overflow:hidden; scrollbar-gutter:auto; }
html[data-retained-view] body > :not(iframe[data-math-view]):not(#math-view-status):not(script):not(style) { visibility:hidden!important; }
#math-view-status { display:inline-flex; align-items:center; flex-wrap:wrap; gap:6px; min-width:0; max-width:min(18rem, 100%); box-sizing:border-box; margin:0; padding:5px 8px; border:1px solid #d8e3de; border-radius:8px; background:#f0f7f3; color:#25483b; font:13px/1.4 system-ui,sans-serif; white-space:normal; overflow-wrap:anywhere; }
.mk-nav:has(#math-view-status:not([hidden])) { flex-wrap:wrap; }
#math-view-status::before { content:''; width:10px; height:10px; flex:0 0 auto; border:2px solid #c3dace; border-top-color:#0d6e4f; border-radius:50%; animation:hosted-spin 1s linear infinite; }
#math-view-status[data-error=true]::before { display:none; }
@media (prefers-reduced-motion: reduce) { #math-view-status::before { animation:none; } }
#math-view-status[data-error=true] { color:#b42318; }
#math-view-status[hidden] { display:none; }
/* Route focus announces the heading; only interactive controls need a focus ring. */
[data-math-view-focus][tabindex="-1"]:focus { outline:none; }
#hosted-save-status { position:fixed; bottom:12px; left:50%; transform:translateX(-50%); z-index:2147483000; display:flex; align-items:center; gap:12px; width:max-content; max-width:calc(100% - 24px); box-sizing:border-box; padding:10px 16px; border:1px solid #d8e3de; border-radius:8px; background:#fff; color:#25483b; font:14px/1.4 system-ui,sans-serif; box-shadow:0 2px 10px #0002; }
#hosted-save-status[hidden] { display:none; }
#hosted-save-status button { flex-shrink:0; min-height:44px; }

/* The picker, file toggle and phase message cannot share a narrow header row.
   Keep the loading message immediately to the right of File settings. */
@media (max-width: 620px) {
  .learner-controls:has(> #math-view-status:not([hidden])) { display:grid; grid-template-columns:auto minmax(0,1fr); }
  .learner-controls:has(> #math-view-status:not([hidden])) > .learner-picker { grid-column:1 / -1; }
  .learner-controls > #math-view-status { max-width:100%; }
}