/* Student theme variables are the source of all added colors. */
#questionsDialog{width:min(1060px,calc(100% - 28px));padding:20px}
.questionToolbar,.questionActions,.practicalControls{display:flex;gap:7px;align-items:center;flex-wrap:wrap}
#questionsDialog input:not([type=file]),#questionsDialog textarea,#practicalPanel textarea{font:inherit;color:var(--text);background:var(--surface-2);border:1px solid var(--border);border-radius:9px;padding:8px}
#questionsDialog label{margin:6px 0;justify-content:flex-start;font-size:.8rem}
#questionsDialog select{max-width:100%}.questionToolbar select{max-width:380px!important}
#questionList{list-style:none;padding:0;max-height:260px;overflow:auto;margin:12px 0}
#questionList li{border:1px solid var(--border);border-radius:10px;padding:9px;margin:6px 0;overflow-wrap:anywhere}
#questionList small{display:block;color:var(--muted);margin:4px 0}
.questionActions button{padding:4px 9px;min-height:30px}
#questionEditor{border-top:1px solid var(--border);padding-top:10px}
.questionFields{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.questionFields label{display:flex!important;flex-direction:column;align-items:stretch!important}
.questionFields input,.questionFields textarea{width:100%;min-width:0}
#questionSaveStatus{color:var(--accent);font-size:.85rem;overflow-wrap:anywhere}
#questionsDialog details{margin-top:10px}
#practicalPanel{padding:16px;margin-bottom:12px}
#practicalPanel h2{font-size:1.2rem;margin:8px 0;overflow-wrap:anywhere}
#practicalPanel p{margin:6px 0;font-size:.85rem}
#practicalInput{width:100%;height:92px;min-height:80px;resize:vertical}
#practicalResult{white-space:pre-wrap;overflow-wrap:anywhere;color:var(--accent)}
#practicalSummary{max-height:160px;overflow:auto}
#practicalSummary li{overflow-wrap:anywhere;font-size:.85rem;margin:5px 0}
body[data-practical=true] .workspace{grid-template-columns:1fr 1fr;grid-template-areas:"keys guide"}
body[data-practical=true] .inputPanel,body[data-practical=true] .correspondencePanel{display:none!important}
body[data-practical=true] .helpFooter #basicHelp{display:none}
body[data-practical=true] .workspace .panel{padding:10px}
body[data-practical=true] .guideKey{min-height:42px}
body[data-practical=true] .rowKey{min-height:35px}
body[data-practical=true] .editKey{min-height:35px}
body[data-practical=true] .guideHint{display:none}
body[data-practical=true] .flickGuide{max-width:260px;margin:4px auto}
body[data-practical=true] .appHeader{margin-bottom:8px}
body[data-practical=true] #practicalPanel{padding:12px;margin-bottom:8px}
@media(max-width:650px){.questionFields{grid-template-columns:1fr}#questionsDialog{padding:12px}.headerActions .subButton{padding:6px}#practicalPanel{padding:10px}body[data-practical=true] .workspace{grid-template-columns:1fr 1fr}}

@media(min-width:1051px){
 body[data-practical=true] .workspace{grid-template-columns:1fr 1fr}
 body[data-practical=true] .keypadPanel .keyboardArea{display:grid;grid-template-columns:minmax(220px,1fr) minmax(80px,.6fr);gap:8px}
 body[data-practical=true] .editKeys{grid-template-columns:1fr;margin:0}
 body[data-practical=true] #practicalPanel{margin:0 0 6px}
 body[data-practical=true] .workspace{gap:8px}
 body[data-practical=true] .panelHeading{margin-bottom:4px}
 body[data-practical=true] #practicalPanel h2{margin:4px 0}
 body[data-practical=true] #practicalPanel p{margin:3px 0}
 body[data-practical=true] #practicalInput{height:80px;min-height:80px}
 body[data-practical=true] .appShell{padding-top:8px}
}

@media(min-width:1051px){
 body[data-practical=true] #practicalPanel{padding:10px}
 body[data-practical=true] .helpFooter{margin-top:5px}
 body[data-practical=true] .appShell{padding-bottom:5px}
 body[data-practical=true] .tenKeyGrid{gap:4px}
 body[data-practical=true] .rowKey strong{font-size:1.15rem;line-height:1.15}
 body[data-practical=true] .rowKey span{line-height:1.1}
 body[data-practical=true] .guideKey{min-height:40px;padding:4px}
 body[data-practical=true] .guideKey strong{font-size:1.3rem}
}