/* Mobile lesson result modal.
   Reuses the desktop result DOM/data model, only changes presentation <= 767px. */
@media (max-width:767px){
  body.lesson-result-open{
    overflow:hidden!important;
    touch-action:none;
  }

  #lesson-result-modal:not(.hidden){
    position:fixed!important;
    inset:0!important;
    z-index:100!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    padding:6px!important;
    background:rgba(27,28,26,.42)!important;
    -webkit-backdrop-filter:blur(4px);
    backdrop-filter:blur(4px);
  }

  .lesson-result-dialog{
    width:calc(100vw - 12px)!important;
    max-width:480px!important;
    height:auto!important;
    max-height:88dvh!important;
    min-height:0!important;
    display:flex!important;
    flex-direction:column!important;
    overflow:hidden!important;
    background:#fff!important;
    border:1px solid rgba(255,255,255,.82)!important;
    border-radius:10px!important;
    box-shadow:0 18px 52px rgba(15,23,42,.28)!important;
  }

  .lesson-result-header{
    flex:0 0 auto!important;
    display:flex!important;
    align-items:flex-start!important;
    justify-content:space-between!important;
    gap:8px!important;
    padding:10px 10px 8px!important;
    background:linear-gradient(90deg,rgba(0,108,73,.08),rgba(111,251,190,.22),rgba(254,166,25,.12))!important;
    border-bottom:1px solid #efeeea!important;
  }

  .lesson-result-header-main{
    display:flex!important;
    align-items:flex-start!important;
    gap:0!important;
    min-width:0!important;
    flex:1!important;
  }

  .lesson-result-trophy{
    display:none!important;
  }

  .lesson-result-heading-copy{
    min-width:0!important;
    width:100%!important;
  }

  .lesson-result-heading-copy>div{
    display:flex!important;
    align-items:center!important;
    gap:5px!important;
    flex-wrap:wrap!important;
  }

  #lesson-result-status{
    order:-1!important;
    padding:3px 6px!important;
    margin:0!important;
    border-radius:10px!important;
    background:#fea619!important;
    color:#684000!important;
    font-size:10px!important;
    line-height:13px!important;
    font-weight:900!important;
    box-shadow:none!important;
  }

  #lesson-result-title{
    flex:1 1 100%!important;
    width:100%!important;
    margin:4px 0 0!important;
    font-size:16px!important;
    line-height:21px!important;
    font-weight:900!important;
    color:#1b1c1a!important;
  }

  #lesson-result-subtitle{
    margin:2px 0 0!important;
    font-size:11px!important;
    line-height:15px!important;
    color:#6c7a71!important;
    display:-webkit-box!important;
    -webkit-box-orient:vertical!important;
    -webkit-line-clamp:2!important;
    overflow:hidden!important;
  }

  .lesson-result-close{
    width:32px!important;
    height:32px!important;
    flex:0 0 32px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    border-radius:10px!important;
    background:#e4e2de!important;
    color:#3c4a42!important;
    box-shadow:none!important;
  }

  .lesson-result-close .material-symbols-outlined{
    font-size:18px!important;
  }

  .lesson-result-summary{
    flex:0 0 auto!important;
    display:flex!important;
    flex-direction:column!important;
    padding:0!important;
    background:#fff!important;
    border-bottom:0!important;
  }

  .lesson-result-feedback{
    order:1!important;
    display:flex!important;
    align-items:center!important;
    gap:8px!important;
    margin:8px 10px 0!important;
    padding:8px!important;
    border-radius:10px!important;
    background:rgba(255,221,184,.35)!important;
    box-shadow:none!important;
  }

  .lesson-result-feedback-icon{
    width:38px!important;
    height:38px!important;
    flex:0 0 38px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    border-radius:10px!important;
    background:rgba(254,166,25,.22)!important;
    font-size:21px!important;
  }

  .lesson-result-feedback-title{
    font-size:11px!important;
    line-height:14px!important;
    font-weight:900!important;
    color:#855300!important;
  }

  #lesson-result-feedback-text{
    margin-top:1px!important;
    font-size:11px!important;
    line-height:15px!important;
    color:#684000!important;
    display:-webkit-box!important;
    -webkit-box-orient:vertical!important;
    -webkit-line-clamp:2!important;
    overflow:hidden!important;
  }

  .lesson-result-kpis{
    order:2!important;
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:5px!important;
    padding:8px 10px!important;
  }

  .lesson-result-kpi{
    min-width:0!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:1px!important;
    padding:6px 4px!important;
    border-radius:10px!important;
    background:#f5f3ef!important;
    box-shadow:none!important;
    text-align:center!important;
  }

  .lesson-result-kpi-icon{
    display:none!important;
  }

  .lesson-result-kpi-label{
    font-size:9px!important;
    line-height:12px!important;
    font-weight:900!important;
    letter-spacing:.02em!important;
    text-transform:uppercase!important;
    color:#6c7a71!important;
  }

  .lesson-result-kpi-value{
    margin:1px 0!important;
    font-size:18px!important;
    line-height:22px!important;
    font-weight:900!important;
  }

  .lesson-result-kpi:nth-child(1) .lesson-result-kpi-value{color:#006c49!important}
  .lesson-result-kpi:nth-child(2) .lesson-result-kpi-value{color:#855300!important}
  .lesson-result-kpi:nth-child(3) .lesson-result-kpi-value{color:#684000!important}

  .lesson-result-kpi-sub{
    max-width:100%!important;
    font-size:9px!important;
    line-height:12px!important;
    color:#6c7a71!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }

  .lesson-result-filterbar{
    flex:0 0 auto!important;
    display:block!important;
    padding:0 10px 7px!important;
    background:#fff!important;
    border-bottom:1px solid #efeeea!important;
    overflow:hidden!important;
  }

  .lesson-result-filterbar>div:last-child{
    display:none!important;
  }

  .lesson-result-filter-group{
    display:flex!important;
    align-items:center!important;
    flex-wrap:nowrap!important;
    gap:5px!important;
    width:100%!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    padding:1px 0 2px!important;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }

  .lesson-result-filter-group::-webkit-scrollbar{
    display:none!important;
  }

  .lesson-result-filter-label{
    display:none!important;
  }

  .lesson-result-filter{
    flex:0 0 auto!important;
    min-height:28px!important;
    padding:5px 8px!important;
    border-radius:10px!important;
    background:#f5f3ef!important;
    color:#3c4a42!important;
    font-size:10px!important;
    line-height:13px!important;
    font-weight:900!important;
    box-shadow:none!important;
    white-space:nowrap!important;
  }

  .lesson-result-filter.is-active{
    background:#006c49!important;
    color:#fff!important;
    box-shadow:none!important;
  }

  .lesson-result-body{
    flex:1 1 auto!important;
    min-height:0!important;
    overflow-y:auto!important;
    overscroll-behavior:contain;
    padding:7px 10px 8px!important;
    background:#fff!important;
    scrollbar-width:thin;
    scrollbar-color:#10b981 #f1f5f9;
  }

  .lesson-result-body::-webkit-scrollbar{
    width:6px!important;
    display:block!important;
  }

  .lesson-result-body::-webkit-scrollbar-track{
    background:#f1f5f9!important;
    border-radius:10px!important;
  }

  .lesson-result-body::-webkit-scrollbar-thumb{
    background:#10b981!important;
    border-radius:10px!important;
  }

  .lesson-result-question-list{
    display:flex!important;
    flex-direction:column!important;
    gap:8px!important;
  }

  .lesson-result-question-card{
    display:flex!important;
    flex-direction:column!important;
    gap:7px!important;
    padding:9px!important;
    border:0!important;
    border-radius:10px!important;
    background:#f5f3ef!important;
    box-shadow:none!important;
  }

  .lesson-result-question-head{
    display:flex!important;
    align-items:flex-start!important;
    justify-content:space-between!important;
    gap:6px!important;
    flex-wrap:nowrap!important;
  }

  .lesson-result-question-title{
    display:flex!important;
    align-items:flex-start!important;
    gap:6px!important;
    min-width:0!important;
    flex:1!important;
  }

  .lesson-result-question-number{
    flex:0 0 auto!important;
    padding:4px 6px!important;
    border-radius:10px!important;
    background:#006c49!important;
    color:#fff!important;
    font-size:10px!important;
    line-height:13px!important;
    font-weight:900!important;
  }

  .lesson-result-question-name{
    font-size:12px!important;
    line-height:16px!important;
    font-weight:900!important;
    color:#1b1c1a!important;
  }

  .lesson-result-status-chip{
    flex:0 0 auto!important;
    display:inline-flex!important;
    align-items:center!important;
    gap:3px!important;
    padding:4px 6px!important;
    border-radius:10px!important;
    font-size:9px!important;
    line-height:12px!important;
    font-weight:900!important;
    white-space:nowrap!important;
  }

  .lesson-result-status-chip .material-symbols-outlined{
    font-size:12px!important;
  }
  .lesson-result-status-chip.independent{background:rgba(111,251,190,.42)!important;color:#00422b!important}
  .lesson-result-status-chip.supported{background:#e9ddff!important;color:#5516be!important}
  .lesson-result-status-chip.warning{background:#ffdad6!important;color:#93000a!important}
  .lesson-result-status-chip.skipped{background:#efeeea!important;color:#3c4a42!important}

  .lesson-result-prompt{
    padding:0!important;
    border-radius:0!important;
    background:transparent!important;
    color:#1b1c1a!important;
    font-size:12px!important;
    line-height:17px!important;
    font-weight:650!important;
  }

  .lesson-result-answer-grid{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:5px!important;
  }

  .lesson-result-answer{
    min-width:0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:5px!important;
    padding:6px!important;
    border-radius:10px!important;
    border:0!important;
    background:#e4e2de!important;
    color:#3c4a42!important;
    font-size:11px!important;
    line-height:14px!important;
  }

  .lesson-result-answer.is-correct{
    background:#10b981!important;
    color:#00422b!important;
  }

  .lesson-result-answer.is-selected-wrong{
    background:#ffdad6!important;
    color:#93000a!important;
  }

  .lesson-result-answer-label{
    width:25px!important;
    height:25px!important;
    flex:0 0 25px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    border-radius:10px!important;
    background:#fff!important;
    color:#006c49!important;
    font-size:10px!important;
    font-weight:900!important;
  }

  .lesson-result-response-box{
    display:flex!important;
    align-items:flex-start!important;
    gap:6px!important;
    padding:7px 8px!important;
    border-radius:10px!important;
    background:rgba(111,251,190,.22)!important;
    font-size:11px!important;
    line-height:15px!important;
  }

  .lesson-result-response-box .material-symbols-outlined{
    font-size:16px!important;
  }

  .lesson-result-solution{
    display:flex!important;
    align-items:flex-start!important;
    gap:7px!important;
    padding:7px 8px!important;
    border-radius:10px!important;
    background:#fff!important;
    font-size:11px!important;
    line-height:16px!important;
    color:#3c4a42!important;
  }

  .lesson-result-solution-icon{
    width:27px!important;
    height:27px!important;
    flex:0 0 27px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    border-radius:10px!important;
    background:#fea619!important;
    font-size:14px!important;
  }

  .lesson-result-footer{
    flex:0 0 auto!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:6px!important;
    padding:8px 10px calc(8px + env(safe-area-inset-bottom,0px))!important;
    border-top:1px solid #efeeea!important;
    background:#fff!important;
    box-shadow:0 -3px 12px rgba(0,0,0,.05)!important;
  }

  .lesson-result-footer-group{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:6px!important;
    width:100%!important;
  }

  .lesson-result-footer-group:last-child{
    grid-template-columns:1fr!important;
  }

  .lesson-result-action{
    width:100%!important;
    min-height:38px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:5px!important;
    padding:7px 8px!important;
    border-radius:10px!important;
    background:#eae8e4!important;
    color:#1b1c1a!important;
    font-size:10px!important;
    line-height:13px!important;
    font-weight:900!important;
    box-shadow:none!important;
  }

  .lesson-result-sgk-action{
    display:none!important;
  }

  .lesson-result-action.primary{
    min-height:42px!important;
    padding:8px 10px!important;
    background:#10b981!important;
    color:#00422b!important;
    box-shadow:none!important;
    font-size:11px!important;
  }

  .lesson-result-action:disabled{
    opacity:.5!important;
    pointer-events:none!important;
  }

  .lesson-result-empty{
    padding:22px 12px!important;
    border-radius:10px!important;
    background:#f5f3ef!important;
    text-align:center!important;
    color:#6c7a71!important;
    font-size:12px!important;
  }
}

@media (max-width:360px){
  .lesson-result-dialog{
    width:calc(100vw - 8px)!important;
    max-height:90dvh!important;
  }
  .lesson-result-kpi-value{
    font-size:16px!important;
    line-height:20px!important;
  }
  .lesson-result-answer-grid{
    grid-template-columns:1fr!important;
  }
}

@media (max-width:767px) and (max-height:720px){
  .lesson-result-dialog{
    max-height:94dvh!important;
  }
  .lesson-result-feedback{
    margin-top:6px!important;
    padding:6px!important;
  }
  .lesson-result-kpis{
    padding:6px 10px!important;
  }
  .lesson-result-header{
    padding-top:7px!important;
    padding-bottom:6px!important;
  }
}