/* Mobile task list alignment.
   Fixed order: drag handle | status | assignee | task name/room.
   Date/time starts directly below the task name so every row aligns. */
@media (max-width:850px){
  #rows .task-row{
    display:grid !important;
    grid-template-columns:28px 50px 66px minmax(0,1fr) !important;
    grid-template-rows:auto auto !important;
    column-gap:8px !important;
    row-gap:5px !important;
    align-items:center !important;
    position:relative;
    padding:12px 10px !important;
    min-width:0;
    overflow:hidden;
  }

  #rows .task-row > .drag{
    display:block !important;
    grid-column:1 !important;
    grid-row:1 / 3 !important;
    align-self:center !important;
    justify-self:center !important;
    margin:0 !important;
  }

  #rows .task-row > .status{
    display:inline-grid !important;
    grid-column:2 !important;
    grid-row:1 / 3 !important;
    align-self:center !important;
    justify-self:center !important;
    place-items:center !important;
    width:46px !important;
    height:46px !important;
    padding:0 !important;
    margin:0 !important;
  }

  /* Let the schedule's two children participate directly in the row grid. */
  #rows .task-row > .schedule-with-person{
    display:contents !important;
  }

  /* Assignee is on the SAME line as the task name, immediately before it. */
  #rows .task-row > .schedule-with-person > .person-badge{
    display:block !important;
    grid-column:3 !important;
    grid-row:1 !important;
    align-self:center !important;
    justify-self:start !important;
    max-width:66px !important;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    margin:0 !important;
  }

  /* Task name and room always start at exactly the same horizontal position. */
  #rows .task-row > .task-heading{
    display:flex !important;
    grid-column:4 !important;
    grid-row:1 !important;
    align-items:baseline !important;
    justify-content:flex-start !important;
    gap:8px !important;
    min-width:0 !important;
    width:100% !important;
    margin:0 !important;
    text-align:left !important;
  }

  /* Date/time is directly below the task heading and uses the same left edge. */
  #rows .task-row > .schedule-with-person > span:not(.person-badge){
    display:block !important;
    grid-column:4 !important;
    grid-row:2 !important;
    align-self:center !important;
    justify-self:start !important;
    min-width:0 !important;
    max-width:100% !important;
    margin:0 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    color:var(--muted);
    text-align:left !important;
  }

  /* Desktop-only duration/person columns stay hidden on iPhone. */
  #rows .task-row > :nth-child(4),
  #rows .task-row > :nth-child(5){display:none !important;}

  #rows .task-row .row-title{
    flex:0 1 auto;
    min-width:0;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    text-align:left;
  }

  #rows .task-row .room-inline{
    flex:0 1 auto;
    min-width:0;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    text-align:left;
  }

  /* Keep the floating row visually identical while touch-dragging. */
  .task-drag-ghost{
    grid-template-columns:28px 50px 66px minmax(0,1fr) !important;
    grid-template-rows:auto auto !important;
    column-gap:8px !important;
    row-gap:5px !important;
  }
  .task-drag-ghost > .schedule-with-person{display:contents !important;}
  .task-drag-ghost > .schedule-with-person > .person-badge{grid-column:3 !important;grid-row:1 !important;margin:0 !important;}
  .task-drag-ghost > .task-heading{grid-column:4 !important;grid-row:1 !important;}
  .task-drag-ghost > .schedule-with-person > span:not(.person-badge){grid-column:4 !important;grid-row:2 !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;}
}