/* V60 — focused workspace + always-accessible collapsible navigation */
:root{--v60-focus-max:1500px}

/* The focused section should start immediately under the compact command bar. */
body.v53-focus-mode .content{
  width:100%!important;
  max-width:var(--v60-focus-max)!important;
  margin:0 auto!important;
  padding:10px 16px 28px!important;
  min-height:0!important;
}
body.v53-focus-mode .panel.active{
  width:100%!important;
  max-width:100%!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  opacity:1!important;
  visibility:visible!important;
  transform:none!important;
}

/* The focus bar is the permanent command bar when a tool/page is open. */
body.v53-focus-mode #v53FocusBar{
  display:flex!important;
  align-items:center!important;
  min-height:54px!important;
  gap:8px!important;
  padding:7px 9px!important;
  margin:0 0 12px!important;
  border-radius:14px!important;
  border:1px solid #d8e4e9!important;
  background:rgba(255,255,255,.97)!important;
  box-shadow:0 7px 20px rgba(18,55,78,.06)!important;
}
#v53FocusBar .v53-menu-btn{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:7px!important;
  min-width:92px!important;
  min-height:38px!important;
  padding:8px 11px!important;
  border:1px solid #d8e3e9!important;
  border-radius:10px!important;
  background:#f7fafb!important;
  color:#153d56!important;
  font-size:10.5px!important;
  font-weight:900!important;
  white-space:nowrap!important;
}
#v53FocusBar .v53-menu-btn:hover{background:#eef6f7!important;border-color:#c6dade!important}
#v53FocusBar .v53-focus-title{font-size:15px!important;line-height:1.25!important;min-width:0!important}
#v53FocusBar button{min-height:38px!important;padding:8px 10px!important;font-size:10.5px!important}

/* Official IEP: remove duplicate hero/header layers and show the real form immediately. */
body.v53-focus-mode #schoolforms.active{
  display:block!important;
  min-height:0!important;
  height:auto!important;
  overflow:visible!important;
}
body.v53-focus-mode #schoolforms.active>.title,
body.v53-focus-mode #schoolforms.active>.sf-hero,
body.v53-focus-mode #schoolforms.active .sf-clean-top{
  display:none!important;
}
body.v53-focus-mode #schoolforms.active #sfIepPane,
body.v53-focus-mode #schoolforms.active .sf-pane,
body.v53-focus-mode #schoolforms.active .sf-card{
  visibility:visible!important;
  opacity:1!important;
  transform:none!important;
}
body.v53-focus-mode #schoolforms.active #sfIepPane{
  display:block!important;
  max-width:1380px!important;
  width:100%!important;
  margin:0 auto!important;
  min-height:0!important;
}
body.v53-focus-mode #schoolforms.active .sf-card{
  margin:0 0 12px!important;
}
body.v53-focus-mode #schoolforms.active .sf-student-card{margin-top:0!important}

/* Don't let empty output/paper placeholders create a giant blank page before content exists. */
body.v53-focus-mode .paper:empty,
body.v53-focus-mode .worksheetpaper:empty,
body.v53-focus-mode [id$="Output"]:empty,
body.v53-focus-mode [id$="Preview"]:empty{min-height:0!important;margin:0!important;padding:0!important;border:0!important;box-shadow:none!important}

/* Sidebar remains fully scrollable when reopened. */
body.v53-focus-mode .sidebar{overflow-y:auto!important;overflow-x:hidden!important}

@media(max-width:780px){
  body.v53-focus-mode .content{padding:8px!important;max-width:100%!important}
  #v53FocusBar .v53-menu-btn{min-width:42px!important;width:42px!important;padding:0!important;font-size:0!important}
  #v53FocusBar .v53-menu-btn::before{content:'☰';font-size:19px!important}
  #v53FocusBar .v53-focus-title{font-size:13px!important}
  #v53FocusBar button{padding:7px 8px!important}
}

@media print{#v53FocusBar{display:none!important}}