/* Keep the supplied grading intact while making its controls usable on phones. */
@media(max-width:680px){
  .page{padding:24px 14px 40px}
  .result-card{padding:17px 14px;border-radius:12px;min-width:0}
  .result-card header,.weakness-head{flex-wrap:wrap;gap:8px 12px}
  h4,details.fold summary{font-size:12px;line-height:1.6}
  details.fold summary{min-height:44px;gap:12px;padding-block:8px}
  .solution-btn,.close-btn{min-height:44px;padding:10px 16px}
  .report-origin{gap:4px;margin-bottom:16px}
  .report-origin a{display:flex;align-items:center;min-height:44px}
  .banner,.strength,.weakness{padding:12px;line-height:1.7}
  .problem,.panel,.dialog-body{overflow-wrap:anywhere}
  .katex-display{max-width:100%;overflow-x:auto}
  dialog{width:calc(100vw - 24px);max-height:calc(100svh - 32px)}
  dialog[open]{display:flex;flex-direction:column}
  .dialog-head,.dialog-actions{flex-shrink:0;padding:12px 14px}
  .dialog-head h3{font-size:15px;line-height:1.5}
  .dialog-body{min-height:0;overflow-y:auto;padding:14px}
  .chevron{flex-shrink:0}
}