/* Desktop-practice parity layer for the student web portal. */

body.practice-active{overflow:hidden}
body.practice-active .practice-container{
  width:min(1500px,calc(100% - 24px));
  height:calc(100vh - var(--mc-topbar-height,74px));
  padding:12px 0;
}
body.practice-active #portalView,
body.practice-active #practiceView{height:100%;min-height:0}
body.practice-active #practiceView:not(.hidden){display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;gap:10px;overflow:hidden}
body.practice-active .practice-head{margin:0;align-items:center}
body.practice-active .workspace{height:100%;min-height:0;gap:12px}
body.practice-active .typing-panel{height:100%;min-height:0;min-width:0}
body.practice-active .question-box,
body.practice-active .answer-panel textarea{min-height:0;height:100%;overflow-y:auto;scrollbar-gutter:stable}
body.practice-active .practice-footer{padding:2px 2px 0;min-height:44px}

/* V2.9 desktop software uses Arial for question and answer typing panes. */
.question-box,
.answer-panel textarea,
.review-text,
.lesson-result-feedback{
  font-family:Arial,sans-serif!important;
  font-size:19px;
  line-height:1.58;
  tab-size:8;
  -moz-tab-size:8;
}
.question-box{padding:17px 20px 20px;overflow-anchor:none;scrollbar-gutter:stable}
.answer-panel textarea{padding:17px 20px 20px}

.lesson-char{color:#111;font-weight:inherit}
.lesson-char.correct{color:#0b6b3a;background:#dff4e8;font-weight:inherit}
.lesson-char.wrong{color:#aa2525;background:#ffe4e4;font-weight:inherit;text-decoration:underline;text-decoration-thickness:2px}
.lesson-char.current{box-shadow:inset 0 -2px 0 #315d7e}

/* Result window: mirror the desktop Result & Detailed Analysis layout. */
#resultModal.modal{align-items:stretch;justify-items:center;overflow:hidden;padding:14px}
#resultModal .result-modal-card{
  width:min(1500px,calc(100vw - 18px));
  height:calc(100vh - 28px);
  max-height:none;
  padding:0;
  overflow:hidden;
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;
  background:#f5f8fa;
}
#resultModal .result-header{
  min-height:64px;
  padding:12px 16px;
  background:var(--navy);
  color:#fff;
  align-items:center;
}
#resultModal .result-header .eyebrow{color:#fff;opacity:.88}
#resultModal .result-header h2{margin:3px 0 0;font-size:20px;color:#fff}
#resultContext{font-size:11px;opacity:.82;margin-top:3px;color:#fff}
#resultModal .icon-btn{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.3);color:#fff;width:38px;height:38px}
.desktop-result-scroll{overflow:auto;padding:14px;user-select:text}
#resultModal .result-grid{display:grid;grid-template-columns:repeat(6,minmax(120px,1fr));gap:9px;margin:0}
#resultModal .result-stat{background:#fff;border:1px solid #d6e0e8;border-radius:9px;padding:11px 12px;min-height:75px}
#resultModal .result-stat span{font-size:10px;text-transform:uppercase;letter-spacing:.45px;color:#657481;font-weight:800}
#resultModal .result-stat strong{margin-top:5px;font-size:21px;font-weight:900;color:var(--navy)}
#resultModal .result-stat.pass strong{color:#0b6b3a}
#resultModal .result-stat.fail strong{color:#aa2525}

.desktop-result-section{margin-top:13px;background:#fff;border:1px solid #d6e0e8;border-radius:10px;overflow:hidden}
.desktop-section-head{padding:10px 13px;background:#e9eef3;border-bottom:1px solid #d6e0e8;display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13px;font-weight:900;color:#263d52}
.desktop-section-body{padding:13px}
.desktop-legend{display:flex;gap:8px;flex-wrap:wrap;font-size:11px;font-weight:700}
.desktop-legend-item{padding:4px 7px;border-radius:5px;border:1px solid transparent}
.legend-red{background:#ffe8e8;color:#aa2525;border-color:#ecc0c0}
.legend-blue{background:#eaf2ff;color:#285f9e;border-color:#bfd2ef}
.legend-orange{background:#fff2dc;color:#9a5b00;border-color:#f0d09d}
.legend-green{background:#e7f6ed;color:#0b6b3a;border-color:#b9dfca}
.desktop-passage-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
.passage-review{min-width:0;border:1px solid #d7e0e7;border-radius:8px;overflow:hidden}
.passage-review-title{padding:8px 10px;background:#f1f4f7;font-size:12px;font-weight:900;color:#364c5f;border-bottom:1px solid #d7e0e7}
.review-text{padding:12px 13px;max-height:360px;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;color:#111}
.word-error{color:#aa2525;background:#ffe8e8;border-radius:3px;font-weight:700}
.word-missing{color:#285f9e;background:#eaf2ff;border-radius:3px;font-weight:700}
.format-marker{display:inline-block;font-size:10px;line-height:1;font-weight:900;padding:3px 5px;border-radius:4px;background:#e7f6ed;color:#0b6b3a;border:1px solid #b7dfc8;margin:0 2px;vertical-align:.12em}
.question-marker{background:#f0f2f4;color:#52616d;border-color:#d4dbe1}

#resultModal .result-columns{display:block;margin:0}
#resultModal .result-columns>section{margin-top:13px;background:#fff;border:1px solid #d6e0e8;border-radius:10px;overflow:hidden}
#resultModal .result-columns h3{margin:0;padding:10px 13px;background:#e9eef3;border-bottom:1px solid #d6e0e8;font-size:13px;font-weight:900;color:#263d52}
#resultModal .table-wrap{border:0;border-radius:0;padding:13px;overflow:auto}
#resultModal .table-wrap table{border-collapse:collapse;width:100%;font-size:12px}
#resultModal .table-wrap th,#resultModal .table-wrap td{border:1px solid #d7e0e8;padding:7px 8px;text-align:left;vertical-align:top}
#resultModal .table-wrap th{background:var(--navy);color:#fff;font-size:11px;text-transform:none}
#resultModal .table-wrap tr:nth-child(even) td{background:#f8fafb}
.format-detail{margin:0 13px 13px;padding:8px 10px;border-radius:6px;background:#fff2dc;color:#9a5b00;font-size:12px;font-weight:800;line-height:1.55}
#resultModal .modal-actions{margin:0;min-height:62px;padding:10px 14px;background:#fff;border-top:1px solid #d6e0e8;align-items:center}
.result-rule-web{margin-right:auto;color:#667582;font-size:11px;line-height:1.4}

.recent-main .recent-number{font-weight:900;color:var(--navy)}

@media(max-width:1100px){
  #resultModal .result-grid{grid-template-columns:repeat(3,minmax(120px,1fr))}
}
@media(max-width:820px){
  body.practice-active{overflow:auto}
  body.practice-active .practice-container{height:auto;padding:12px 0}
  body.practice-active #practiceView:not(.hidden){display:block;overflow:visible}
  body.practice-active .workspace{height:auto}
  body.practice-active .typing-panel{height:460px;margin-bottom:12px}
  .desktop-passage-grid{grid-template-columns:1fr}
  #resultModal .result-grid{grid-template-columns:repeat(2,minmax(120px,1fr))}
}