/* Match the PC Today header on tablets and unfolded Fold screens only.
 * Keep phone layout, original lesson actions, type scale and 64px pills. */
html:is([data-pe-device="tablet"], [data-pe-ipados="true"], [data-pe-fold-wide="true"])
  body.homeDashboardApp #app #homeTodayList .peHomeTodayWideRow {
  container: pe-home-today-tablet-row / inline-size;
}

@container pe-home-today-tablet-row (min-width: 215px) {
  html:is([data-pe-device="tablet"], [data-pe-ipados="true"], [data-pe-fold-wide="true"])
    body.homeDashboardApp #app #homeTodayList .peHomeTodayInfoBlock {
    grid-template-columns: auto minmax(0, 1fr) auto 64px;
    align-items: center;
    column-gap: 2px;
  }
  html:is([data-pe-device="tablet"], [data-pe-ipados="true"], [data-pe-fold-wide="true"])
    body.homeDashboardApp #app #homeTodayList :is(.peHomeTodayHead, .peHomeTodaySubjectLine) {
    display: contents;
  }
  html:is([data-pe-device="tablet"], [data-pe-ipados="true"], [data-pe-fold-wide="true"])
    body.homeDashboardApp #app #homeTodayList :is(.peHomeTodayPeriod, .peHomeTodayClass, .peHomeTodayLesson, .peHomeTodayStatus) {
    grid-row: 1;
    align-self: center;
  }
  html:is([data-pe-device="tablet"], [data-pe-ipados="true"], [data-pe-fold-wide="true"])
    body.homeDashboardApp #app #homeTodayList .peHomeTodayPeriod {
    grid-column: 1;
    padding-inline: 3px;
  }
  html:is([data-pe-device="tablet"], [data-pe-ipados="true"], [data-pe-fold-wide="true"])
    body.homeDashboardApp #app #homeTodayList .peHomeTodayClass { grid-column: 2; }
  html:is([data-pe-device="tablet"], [data-pe-ipados="true"], [data-pe-fold-wide="true"])
    body.homeDashboardApp #app #homeTodayList .peHomeTodayLesson {
    grid-column: 3;
    padding-top: 0;
  }
  html:is([data-pe-device="tablet"], [data-pe-ipados="true"], [data-pe-fold-wide="true"])
    body.homeDashboardApp #app #homeTodayList .peHomeTodayStatus { grid-column: 4; }
  html:is([data-pe-device="tablet"], [data-pe-ipados="true"], [data-pe-fold-wide="true"])
    body.homeDashboardApp #app #homeTodayList .peHomeTodaySubject {
    grid-column: 1 / -1;
    grid-row: 2;
    padding-top: 0;
  }
  html:is([data-pe-device="tablet"], [data-pe-ipados="true"], [data-pe-fold-wide="true"])
    body.homeDashboardApp #app #homeTodayList .peHomeTodayInfoBlock > .peHomeTodayMeta {
    grid-column: 1 / -1;
    grid-row: 3;
  }
}

/* Fold uses the existing smaller type scale, so the same four fields fit
 * at 198px without changing text or pill sizes. */
@container pe-home-today-tablet-row (min-width: 198px) {
  html[data-pe-fold-wide="true"] body.homeDashboardApp #app #homeTodayList .peHomeTodayInfoBlock {
    grid-template-columns: auto minmax(0, 1fr) auto 64px;
    align-items: center;
    column-gap: 2px;
  }
  html[data-pe-fold-wide="true"] body.homeDashboardApp #app #homeTodayList :is(.peHomeTodayHead, .peHomeTodaySubjectLine) { display: contents; }
  html[data-pe-fold-wide="true"] body.homeDashboardApp #app #homeTodayList :is(.peHomeTodayPeriod, .peHomeTodayClass, .peHomeTodayLesson, .peHomeTodayStatus) {
    grid-row: 1;
    align-self: center;
  }
  html[data-pe-fold-wide="true"] body.homeDashboardApp #app #homeTodayList .peHomeTodayPeriod {
    grid-column: 1;
    padding-inline: 3px;
  }
  html[data-pe-fold-wide="true"] body.homeDashboardApp #app #homeTodayList .peHomeTodayClass { grid-column: 2; }
  html[data-pe-fold-wide="true"] body.homeDashboardApp #app #homeTodayList .peHomeTodayLesson {
    grid-column: 3;
    padding-top: 0;
  }
  html[data-pe-fold-wide="true"] body.homeDashboardApp #app #homeTodayList .peHomeTodayStatus { grid-column: 4; }
  html[data-pe-fold-wide="true"] body.homeDashboardApp #app #homeTodayList .peHomeTodaySubject {
    grid-column: 1 / -1;
    grid-row: 2;
    padding-top: 0;
  }
  html[data-pe-fold-wide="true"] body.homeDashboardApp #app #homeTodayList .peHomeTodayInfoBlock > .peHomeTodayMeta {
    grid-column: 1 / -1;
    grid-row: 3;
  }
}

@container pe-home-today-tablet-row (min-width: 230px) {
  html:is([data-pe-device="tablet"], [data-pe-ipados="true"], [data-pe-fold-wide="true"])
    body.homeDashboardApp #app #homeTodayList .peHomeTodayInfoBlock { column-gap: 6px; }
  html:is([data-pe-device="tablet"], [data-pe-ipados="true"], [data-pe-fold-wide="true"])
    body.homeDashboardApp #app #homeTodayList .peHomeTodayPeriod { padding-inline: 4px; }
}

@container pe-home-today-tablet-row (min-width: 250px) {
  html:is([data-pe-device="tablet"], [data-pe-ipados="true"], [data-pe-fold-wide="true"])
    body.homeDashboardApp #app #homeTodayList .peHomeTodayPeriod { padding-inline: 6px; }
}