/* v1.4.5: compact, opt-in, mobile-safe guided workflow display. */
#mav-workflow-progress[hidden] { display: none !important; }
.mav-workflow-progress { flex: none; padding: 10px 18px; background: #111d33; color: #e5edf8;
  border-bottom: 1px solid #263c5c; font-size: 14px; max-height: min(36vh, 330px); overflow-y: auto; }
.mav-wf-heading, .mav-wf-heading > div { display:flex; gap: 10px; align-items:center; justify-content:space-between; }
.mav-wf-heading strong { font-size: 15px; }
.mav-wf-heading span { color:#a5b9d7; }
.mav-wf-current { color:#78aefd !important; font-weight:700; white-space:nowrap; }
.mav-wf-track { height:5px; background:#2a3d5d; border-radius:99px; margin:8px 0 7px; overflow:hidden; }
.mav-wf-track span { display:block; height:100%; background:#2587ff; border-radius:99px; }
.mav-wf-next { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#e5edf8; }
.mav-wf-details { margin-top:5px; }
.mav-wf-details summary { color:#91bfff; cursor:pointer; width:fit-content; padding:3px 0; }
.mav-wf-details ol { padding:0 0 0 23px; margin:8px 0; }
.mav-wf-details li { padding:7px 0; border-bottom:1px solid #273c5b; }
.mav-wf-details li div { padding:4px 0; color:#becbe0; white-space:pre-wrap; overflow-wrap:anywhere; }
.mav-wf-details p { padding:7px 0; color:#becbe0; }
@media (max-width: 540px) {
 .mav-workflow-progress { padding:9px 13px; max-height:min(31vh,245px); }
 .mav-wf-heading strong { font-size:14px; }
 .mav-wf-next { font-size:13px; }
}

.mav-wf-details li div { line-height: 1.55; }
.mav-wf-details li strong { font-size: 14px; }
.mav-wf-refresh { margin-left: 12px; padding: 3px 8px; color: #b7d5ff; border: 1px solid #355077; border-radius: 7px; cursor: pointer; font-size: 12px; background: transparent; }
.mav-wf-refresh:hover { background: #243b60; }

/* v1.4.5.2: accessible compact mobile workflow + clear desktop sidebar-toggle gutter. */
.mav-wf-toggle { display: none; }
.mav-wf-expanded { min-width: 0; }

@media (min-width: 768px) {
  /* The open-sidebar control has its own reserved gutter, not the workflow header. */
  #app-view > main { min-width: 0; transition: padding-left .2s ease; }
  #app-view.sidebar-is-collapsed > main { padding-left: 56px; }
  #app-view.sidebar-is-collapsed > main > #sidebar-expand-btn {
    top: 11px; left: 11px; width: 35px; height: 35px; padding: 8px;
  }
}

@media (max-width: 767px) {
  .mav-workflow-progress { padding: 9px 14px 8px; max-height: none; overflow-y: visible; }
  .mav-wf-heading { display: none; }
  .mav-wf-toggle {
    display: flex; align-items: center; gap: 8px; width: 100%; min-height: 29px;
    padding: 2px 0 4px; border: 0; background: transparent; color: #e7f0ff;
    text-align: left; cursor: pointer; font: inherit;
  }
  .mav-wf-toggle:focus-visible { outline: 2px solid #60a5fa; outline-offset: 3px; border-radius: 4px; }
  .mav-wf-mobile-title { font-size: 13px; line-height: 1.35; font-weight: 800; white-space: nowrap; }
  .mav-wf-mobile-count { margin-left: auto; color: #a5b9d7; font-size: 12px; white-space: nowrap; }
  .mav-wf-toggle svg { flex: none; margin-left: 3px; color: #91bfff; transition: transform .16s ease; }
  .mav-wf-mobile-open .mav-wf-toggle svg { transform: rotate(180deg); }
  .mav-wf-track { height: 4px; margin: 3px 0 1px; }
  .mav-wf-expanded { display: none; }
  .mav-wf-mobile-open .mav-wf-expanded { display: block; }
  .mav-workflow-progress.mav-wf-mobile-open { max-height: min(52dvh, 440px); overflow-y: auto; }
  .mav-wf-next { margin-top: 12px; white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.45; }
  .mav-wf-details summary { padding: 9px 0; min-height: 35px; }
  .mav-wf-refresh { margin: 7px 0 5px; min-height: 34px; }
}
@media (prefers-reduced-motion: reduce) {
  #app-view > main, .mav-wf-toggle svg { transition: none !important; }
}