/* Compact practice header + student progress presentation. */

/* Recent attempts stays useful as the history grows instead of stretching the dashboard. */
#recentAttempts{
  max-height:min(410px,48vh);
  overflow-y:auto;
  overflow-x:hidden;
  scrollbar-gutter:stable;
  padding-right:6px;
}
#recentAttempts::-webkit-scrollbar{width:9px}
#recentAttempts::-webkit-scrollbar-thumb{background:#b5c2cc;border-radius:999px;border:2px solid transparent;background-clip:padding-box}
#recentAttempts::-webkit-scrollbar-track{background:transparent}

/* Passage / lesson result colour legend. */
.attempt-color-note{
  margin-top:2px;
  padding:9px 10px;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px 14px;
  border:1px solid #dbe4ea;
  border-radius:8px;
  background:#f8fafb;
  color:#566977;
  font-size:11px;
  line-height:1.35;
}
.attempt-color-note strong{color:#30495e}
.attempt-color-key{display:inline-flex;align-items:center;gap:5px;font-weight:700}
.attempt-color-dot{width:9px;height:9px;border-radius:50%;display:inline-block;background:#1c2730}
.attempt-color-dot.pass{background:#13733f}
.attempt-color-dot.fail{background:#b12b2b}
.attempt-color-dot.unattempted{background:#202a32}
#passageSelect.status-pass,#lessonSelect.status-pass{color:#13733f;font-weight:800}
#passageSelect.status-fail,#lessonSelect.status-fail{color:#b12b2b;font-weight:800}
#passageSelect.status-unattempted,#lessonSelect.status-unattempted{color:#17212b;font-weight:700}

/* During a live practice, the site bar and practice heading become one compact bar. */
body.practice-active .topbar{display:none!important}
body.practice-active .practice-container{
  width:100%!important;
  height:100dvh!important;
  max-height:100dvh!important;
  padding:0 12px 8px!important;
}
body.practice-active .practice-head{display:none!important}
body.practice-active #practiceView:not(.hidden){
  grid-template-rows:auto auto minmax(0,1fr) 54px!important;
  gap:8px!important;
}
.unified-practice-bar{
  min-height:72px;
  margin:0 -12px;
  padding:8px 14px;
  display:grid;
  grid-template-columns:minmax(160px,210px) minmax(280px,1fr) auto auto;
  gap:12px;
  align-items:center;
  background:var(--navy,#16324f);
  color:#fff;
  box-shadow:0 1px 0 rgba(255,255,255,.08);
}
.unified-practice-bar .brand{font-size:16px;line-height:1.05;color:#fff}
.unified-practice-bar .top-subtitle{font-size:10px;line-height:1.1;margin-top:4px;color:#d9e5ee;opacity:1}
.unified-practice-details{min-width:0}
.unified-practice-details .eyebrow{font-size:9px!important;color:#bfd7e9!important;letter-spacing:.13em}
.unified-practice-details h1{
  margin:2px 0 4px!important;
  color:#fff!important;
  font-size:clamp(18px,1.55vw,24px)!important;
  line-height:1.05!important;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.unified-practice-details .chips{gap:4px!important;flex-wrap:nowrap;overflow:hidden}
.unified-practice-details .chip{
  background:rgba(255,255,255,.1);
  border-color:rgba(255,255,255,.2);
  color:#f4f8fb;
  padding:3px 7px;
  font-size:9px;
  white-space:nowrap;
}
.unified-practice-bar .practice-actions-top{gap:7px!important;align-items:stretch}
.unified-practice-bar .timer-card{
  min-width:128px!important;
  padding:5px 10px!important;
  border-color:rgba(255,255,255,.24)!important;
  background:#fff!important;
}
.unified-practice-bar .timer-card strong{font-size:20px!important}
.unified-practice-bar .practice-actions-top>.btn{padding:8px 13px;min-width:70px}
.unified-practice-bar .user-bar{gap:8px;font-size:12px;white-space:nowrap}
.unified-practice-bar .user-bar .btn{padding:8px 12px}

@media(max-width:1200px){
  .unified-practice-bar{grid-template-columns:150px minmax(240px,1fr) auto auto;gap:8px;padding-left:10px;padding-right:10px}
  .unified-practice-bar .brand{font-size:14px}
  .unified-practice-details h1{font-size:19px!important}
  .unified-practice-details .chip:nth-child(n+4){display:none}
  .unified-practice-bar .timer-card{min-width:112px!important}
}
@media(max-width:960px){
  .unified-practice-bar{grid-template-columns:minmax(0,1fr) auto auto;min-height:66px}
  .unified-practice-brand{display:none}
  .unified-practice-bar #studentName{display:none}
  .unified-practice-details h1{font-size:18px!important}
}
@media(max-width:720px){
  body.practice-active .practice-container{height:auto!important;max-height:none!important;padding:0 8px 8px!important}
  .unified-practice-bar{margin:0 -8px;grid-template-columns:minmax(0,1fr) auto;padding:7px 8px}
  .unified-practice-bar .user-bar{display:none!important}
  .unified-practice-details .chips{display:none}
  .unified-practice-bar .timer-card{min-width:96px!important}
  .unified-practice-bar .practice-actions-top>.btn{min-width:58px;padding:7px 9px}
  #recentAttempts{max-height:350px}
}