/* Academy: content-first lessons;
status colors preserve source semantics. */
#overview{
  display:grid;
  gap:24px
}
#overview>.item{
  border:1px solid var(--line);
  border-radius:var(--radius-control);
  padding:24px;
  background:var(--card)
}
#overview>.item>.text{
  font-size:22px;
  line-height:1.3;
  margin:8px 0 20px;
  max-width:65ch
}
#overview .row{
  padding:12px 0;
  border-top:1px solid var(--line);
  margin-top:0!important;
  min-height:68px
}
#overview .row>span{
  font-size:14px;
  line-height:1.7;
  flex:1
}
#overview .row>button{
  flex:0 0 auto
}
#overview .badge{
  margin:3px 0 3px 5px
}
.lesson-card{
  max-width:850px;
  padding:32px 0;
  margin-top:20px;
  border-top:1px solid var(--line)
}
.lesson-card>.text{
  font-size:clamp(26px,4vw,34px)!important;
  line-height:1.2;
  font-weight:500!important;
  letter-spacing:-.03em;
  margin:12px 0 16px;
  max-width:30ch
}
.lesson-card>.hint{
  font-size:16px;
  max-width:65ch
}
.lesson-card>.meta{
  font-size:12px;
  color:var(--text-secondary)
}
.lesson-card .facts{
  display:grid;
  gap:16px;
  margin:24px 0;
  max-width:70ch
}
.facts>div{
  padding:16px 0;
  border-top:1px solid var(--line);
  font-size:15px
}
.facts b{
  display:block;
  font-size:12px;
  font-weight:500;
  color:var(--text-secondary);
  margin-bottom:6px
}
.facts li{
  padding:4px 0
}
.facts ol,.facts ul{
  padding-left:22px;
  margin:8px 0
}
.allergen{
  color:var(--danger);
  font-weight:500
}
.q{
  border:1px solid var(--line);
  border-radius:var(--radius-control);
  padding:24px;
  margin:20px 0!important;
  background:var(--card);
  max-width:850px
}
.q .opts,.opts{
  display:grid;
  gap:10px;
  margin-top:16px
}
.opt{
  display:flex;
  align-items:center;
  gap:12px;
  padding:13px 16px;
  margin:0;
  min-height:52px;
  border:1px solid var(--control);
  border-radius:var(--radius-control);
  background:var(--bg);
  cursor:pointer;
  color:var(--text);
  font-size:15px;
  font-weight:400
}
.opt.sel{
  border-color:var(--accent);
  background:var(--accent-soft)
}
.opt:focus-within{
  outline:2px solid var(--accent);
  outline-offset:2px
}
.mistake{
  border-left:3px solid var(--danger)
}
.ok-answer,.pass{
  color:var(--success)
}
.fail{
  color:var(--danger)
}
.pass,.fail{
  font-weight:500
}
.tag-crit{
  padding:14px 16px;
  border-left:3px solid var(--warning);
  background:var(--warning-soft);
  color:var(--warning);
  font-size:13px;
  line-height:1.6;
  margin:20px 0!important
}
.editor-section{
  border-top:1px solid var(--line);
  padding:8px 0 24px;
  max-width:900px
}
.editor-section textarea{
  font-family:ui-monospace,monospace;
  font-size:13px;
  line-height:1.6
}
.editor-section>.field{
  margin-top:20px
}
#manage-courses .row{
  flex-wrap:wrap;
  justify-content:flex-start;
  padding:16px 0;
  border-top:1px solid var(--line)
}
#manage-courses .row>span{
  flex:1 1 100%
}
#manage-courses .item>.text{
  font-size:20px;
  margin:12px 0 20px
}
#manage-courses{
  margin-bottom:40px
}
#lesson-back{
  margin-top:4px
}
#start-test{
  margin-top:24px
}
#skill-box>.text{
  font-size:19px;
  font-weight:500;
  margin:12px 0
}
#skill-box .hint{
  margin-top:8px
}
.lesson-card .q>.meta{
  font-size:12px;
  color:var(--text-secondary)
}
.lesson-card>.text[style*="margin:8px"]{
  font-size:16px!important;
  font-weight:400!important;
  line-height:1.75;
  letter-spacing:0;
  max-width:70ch
}
#test-view>.q .text{
  font-size:18px;
  line-height:1.5
}
.field{
  min-width:0
}
.field input,.field select{
  width:100%
}
@media(min-width:1000px){
  #overview{
    grid-template-columns:1fr 1fr;
    align-items:start
  }
  #overview>.item:has(.row){
    grid-column:auto
  }
  #overview>.item>.text{
    font-size:21px
  }
  #overview .row{
    align-items:start;
    flex-wrap:wrap
  }
  #overview .row>span{
    flex-basis:100%
  }
  #overview .row>button{
    margin-top:0
  }
}
@media(max-width:600px){
  #overview{
    gap:20px
  }
  #overview>.item{
    padding:20px 16px
  }
  #overview>.item>.text{
    font-size:20px
  }
  #overview .row{
    align-items:flex-start;
    flex-wrap:wrap
  }
  #overview .row>span{
    flex-basis:100%
  }
  .lesson-card{
    padding-top:24px
  }
  .q{
    padding:18px 16px
  }
  .opt{
    padding:12px
  }
  .lesson-card>.text{
    font-size:27px!important
  }
  .facts>div{
    font-size:15px
  }
  .editor-section .btnrow{
    display:block
  }
  .editor-section .btnrow>.field{
    margin:16px 0
  }
  .editor-section>button{
    width:100%
  }
}
/* Dynamic result markup contains indentation;
do not preserve it as content. */
#test-view>.item>.text{
  white-space:normal;
  font-size:22px!important;
  line-height:1.5;
  margin:16px 0 24px
}
#test-view>.item>.primary,#test-view>.item>.ghost{
  margin:0 8px 8px 0
}