/* Maqam Academy global App Help component */
.app-help-button{
  width:64px;height:64px;flex:0 0 64px;border:0;border-radius:999px;
  background-color:transparent;background-image:url('/assets/icons/help.webp');background-repeat:no-repeat;background-position:center;background-size:contain;
  color:transparent;display:inline-grid;place-items:center;padding:0;overflow:hidden;
  cursor:pointer;transition:transform .16s ease,filter .16s ease;
}
.app-help-button>span{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.app-help-button:hover,.app-help-button:focus-visible{transform:translateY(-2px) scale(1.025);filter:brightness(.98);outline:none}
.app-help-button.is-unconfigured{opacity:.38}
.app-help-modal{position:fixed;inset:0;z-index:1800;display:grid;place-items:center;padding:24px}
.app-help-modal[hidden]{display:none!important}
.app-help-backdrop{position:absolute;inset:0;background:rgba(12,35,30,.56);backdrop-filter:blur(3px)}
.app-help-panel{position:relative;z-index:1;width:min(760px,100%);max-height:min(82vh,820px);overflow:auto;border:1px solid var(--border-300,#DED8CF);border-radius:24px;background:var(--ivory-50,#FDFAF5);padding:30px;box-shadow:0 28px 70px rgba(12,35,30,.22)}
.app-help-close{position:absolute;right:16px;top:16px;width:42px;height:42px;border:1px solid var(--border-300,#DED8CF);border-radius:12px;background:#fff;color:var(--forest-950,#0C231E);font-size:28px;line-height:1;cursor:pointer}
.app-help-heading{padding-right:56px}
.app-help-heading h2{margin:5px 0 8px;color:var(--forest-950,#0C231E);font-family:Georgia,"Times New Roman",serif;font-size:clamp(30px,4vw,44px);font-weight:600}
.app-help-heading>p:last-child{margin:0;color:var(--muted-600,#5F6966);font-size:15px;line-height:1.6}
.app-help-sections{display:grid;gap:12px;margin-top:22px}
.app-help-section{border:1px solid var(--border-300,#DED8CF);border-radius:16px;background:#fff;padding:17px 18px}
.app-help-section h3{margin:0 0 7px;color:var(--forest-800,#134339);font-size:15px;font-weight:800}
.app-help-section p{margin:0;color:var(--ink-900,#272623);font-size:14px;line-height:1.62;white-space:pre-line}
.app-help-section.is-level{border-color:var(--sage-500,#A0BDB5)}
.app-help-empty{padding:18px;border:1px dashed var(--border-300,#DED8CF);border-radius:14px;color:var(--muted-600,#5F6966)}
html[data-theme="dark"] .app-help-button{filter:none}
html[data-theme="dark"] .app-help-panel{background:#102923;border-color:#31534b}
html[data-theme="dark"] .app-help-close,html[data-theme="dark"] .app-help-section{background:#17352f;border-color:#31534b;color:#f6f3ed}
html[data-theme="dark"] .app-help-heading h2,html[data-theme="dark"] .app-help-section p{color:#f6f3ed}
html[data-theme="dark"] .app-help-heading>p:last-child{color:#b8c6c2}

.practice-question-head .app-help-button{margin-left:auto}
.practice-question-head .practice-question-help-stack{display:flex;flex-direction:column;align-items:flex-end;gap:14px;margin-left:auto}
.maqam-lab-hero-actions .app-help-button,.scale-tree-head .app-help-button{align-self:flex-end;margin-left:auto}

/* Super Admin > Site Content > App Help: exact editor alignment */
#app-help-editor .form-grid{align-items:start;column-gap:18px;row-gap:18px}
#app-help-editor .form-grid>label:not(.field-full){
  min-width:0;grid-template-rows:18px 44px minmax(32px,auto);align-content:start;gap:7px;
}
#app-help-editor .form-grid>label:not(.field-full)>input{height:44px;min-height:44px;margin:0}
#app-help-editor .form-grid>label:not(.field-full)>.research-active-check{
  height:44px;min-height:44px;margin:0;padding:0 12px;display:flex;align-items:center;gap:10px;
  border:1px solid var(--arch-line,#DED8CF);border-radius:10px;background:var(--arch-card,#fff);
}
#app-help-editor .form-grid>label:not(.field-full)>.research-active-check input{
  width:18px;height:18px;min-height:18px;margin:0;padding:0;flex:0 0 18px;
}
#app-help-editor .form-grid>label>.hint{margin:0;line-height:1.35}
#app-help-editor .form-grid>.field-full{align-content:start}
#app-help-editor .form-grid>.field-full>input,#app-help-editor .form-grid>.field-full>textarea{margin:0}

@media(max-width:760px){
  .app-help-button{width:48px;height:48px;flex-basis:48px;border-width:4px;font-size:38px}
  .app-help-modal{padding:12px}
  .app-help-panel{max-height:88vh;border-radius:20px;padding:24px 18px 20px}
  .app-help-heading{padding-right:44px}
  .app-help-close{right:12px;top:12px;width:38px;height:38px}
  .app-help-section{padding:14px}
  .practice-question-head .practice-question-help-stack{gap:10px;align-items:flex-end}
  #app-help-editor .form-grid>label:not(.field-full){grid-template-rows:auto auto auto}
}

body.app-help-open{overflow:hidden}

.app-help-report{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:18px;padding-top:18px;border-top:1px solid var(--border-300,#DED8CF)}
.app-help-report>div{display:grid;gap:4px;min-width:0}.app-help-report strong{color:var(--forest-950,#0C231E);font-size:14px}.app-help-report span{color:var(--muted-600,#5F6966);font-size:12px;line-height:1.5}.app-help-report .btn{flex:0 0 auto;white-space:nowrap}
html[data-theme="dark"] .app-help-report{border-top-color:#31534b}html[data-theme="dark"] .app-help-report strong{color:#f6f3ed}html[data-theme="dark"] .app-help-report span{color:#b8c6c2}

@media(max-width:700px){.app-help-report{align-items:stretch;flex-direction:column}.app-help-report .btn{width:100%;justify-content:center}}