/* Mobile course-detail layout: keep actions readable and horizontal. */
@media (max-width:650px){
  #detail-dialog{
    width:calc(100% - 20px);
    max-height:calc(100dvh - 24px);
    padding:16px;
  }
  #detail-dialog .dialog-head{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:start;
    gap:10px 8px;
    margin-bottom:14px;
  }
  #detail-dialog .dialog-head h2{
    grid-column:1;
    grid-row:1;
    min-width:0;
    font-size:20px;
    line-height:1.38;
    overflow-wrap:anywhere;
  }
  #detail-dialog .dialog-head > .icon{
    grid-column:2;
    grid-row:1;
    width:42px;
    min-width:42px;
    min-height:42px;
    padding:4px;
    align-self:start;
  }
  #detail-dialog .detail-head-actions{
    grid-column:1 / -1;
    grid-row:2;
    width:100%;
    margin:0;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:6px;
  }
  #detail-dialog .detail-head-actions button{
    width:100%;
    min-width:0;
    min-height:38px;
    padding:6px 7px;
    font-size:12px;
    line-height:1.25;
    white-space:nowrap;
    writing-mode:horizontal-tb;
    word-break:keep-all;
  }
  #detail-dialog .detail-list{
    grid-template-columns:76px minmax(0,1fr);
    gap:9px 12px;
  }
}