/* Same capped frame and heading as Booking/Course; no scaled composition. */
html body.student-portal-page main#main-content.responsive-portal {
  --portal-frame: min(1600px, calc(100% - clamp(48px, 12vw, 320px)));
  --portal-title: clamp(40px, 4.34vw, 84px);
  width: var(--portal-frame); max-width: none;
  height: auto; min-height: calc(100svh - var(--header-height));
  display: grid; grid-template-rows: max-content minmax(min-content, 1fr);
  row-gap: 40px; margin-inline: auto;
  padding: calc(var(--header-height) + 32px) 0 32px;
  overflow: visible;

  & .workspace-heading { margin: 0; }
  & .workspace-heading h1 {
    font-size: var(--portal-title); line-height: 1.02;
    font-weight: 400; letter-spacing: -.045em; text-wrap: balance;
  }
  & .workspace-heading p { font: 300 16px/1.55 var(--sans); margin-top: 18px; }
  & .portal-workspace { min-width: 0; min-height: 0; padding-top: 12px; }
  & .portal-view { min-height: 0; }
  & .portal-status { font: 300 14px/1.55 var(--sans); }

  & .portal-login { width: min(480px, 100%); }
  & .portal-login h2 { font: 400 clamp(29px, 3.2vw, 48px)/1.12 var(--serif); letter-spacing: -.04em; min-height: 2.24em; }
  & .portal-login h2 span { white-space: normal; }
  & .portal-login-form input { font-size: 16px; }
  & .portal-login-button { min-height: 48px; padding: 12px 22px; font-size: 14px; }
  & .portal-workspace:has(.portal-login) { min-height: 350px; }
  & .portal-workspace:has(.portal-login) .portal-status { width: min(480px, 100%); min-height: 2.8em; margin: 12px auto 0; }

  & .portal-dashboard { --portal-card-gap: 20px; }
  & .portal-dashboard-card, & .portal-yki { padding: 22px; }
  & .portal-dashboard-heading { gap: 20px; }
  & .portal-dashboard-heading h2 { font-size: 32px; }
  & .portal-dashboard-heading p { font-size: 14px; }
  & .portal-dashboard-actions { gap: 20px; }
  & .portal-dashboard-grid { height: auto; min-height: clamp(440px, 42svh, 500px); grid-template-columns: repeat(2, minmax(0, 1fr)); }
  & .portal-lessons-card { contain: size; }
  & .portal-tabs { gap: 20px; }
  & .portal-tabs button { font-size: 14px; }
  & .portal-lesson { grid-template-columns: 56px minmax(0, 1fr) auto; gap: 12px; padding-block: 14px; }
  & .portal-lesson-date { width: 56px; border-radius: 13px; }
  & .portal-lesson-date strong { font-size: 26px; }
  & .portal-lesson-date span { font-size: 10px; margin-top: 5px; }
  & .portal-lesson-info { min-width: 0; }
  & .portal-lesson-info h3 { font-size: 14px; line-height: 1.5; }
  & .portal-lesson-info p { font-size: 13px; }
  & .portal-lesson-info small { display: inline-block; margin-left: 7px; font-size: 11px; }
  & .portal-lesson-actions { gap: 10px; }
  & .portal-lesson-actions :is(button,a) { font-size: 12px; }
  & .portal-join { padding: 10px 12px; gap: 8px; }
  & .portal-account { grid-template-columns: minmax(0, 1fr); grid-template-rows: repeat(2, minmax(min-content, 1fr)); }
  & .portal-account-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  & .portal-account-label { margin-bottom: 10px; font-size: 12px; }
  & .portal-subscription { font-size: 16px; }
  & .portal-weekly-slots { font-size: 14px; }
  & .portal-credit { font-size: 34px; }
  & .portal-credit-action { margin-top: 14px; }
  & .portal-card-button { min-height: 44px; font-size: 14px; padding: 10px 18px; }
  & .portal-yki { min-height: 0; }
  & .portal-yki h3 { font-size: 24px; }
  & .portal-yki p { font-size: 14px; margin: 10px 0 14px; line-height: 1.5; }
  & .portal-yki > :is(a,button) { font-size: 14px; min-height: 32px; }

  & .portal-calendar { min-height: 0; gap: 16px; }
  & .portal-calendar .calendar-heading h2 { font-size: clamp(28px, 2.25vw, 40px); }
  & .portal-calendar .calendar-heading p { font-size: 14px; }
  & .portal-calendar .calendar-grid { flex: none; height: clamp(370px, 40svh, 480px); min-height: 0; }
  & .portal-calendar .calendar-actions { min-height: 96px; flex: 0 0 96px; }
  & .portal-calendar .calendar-selection { flex: 1; min-width: 0; font-size: 14px; }
  & .portal-success h2 { font-size: clamp(32px, 3.1vw, 46px); }
  & .portal-success p { font: 300 16px/1.55 var(--sans); }
}

/* Give the lesson text room before narrowing the two main columns further. */
@media (min-width: 1001px) and (max-width: 1500px) {
  html body.student-portal-page main#main-content.responsive-portal {
    & .portal-lesson-actions { flex-direction: column; align-items: flex-end; gap: 0; }
    & .portal-lesson-actions :is(button,a) { min-height: 32px; }
  }
}

@media (max-width: 1000px) {
  html body.student-portal-page main#main-content.responsive-portal {
    --portal-frame: calc(100% - 64px);
    --portal-title: clamp(40px, 5.5vw, 55px);
    & .portal-dashboard-grid { grid-template-columns: minmax(0, 1fr); height: auto; }
    & .portal-lessons-card { height: 460px; }
    & .portal-account { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: 1fr; }
    & .portal-account-summary { grid-template-columns: minmax(0, 1fr); gap: 20px; }
    & .portal-yki { min-height: 300px; }
    & .portal-calendar .calendar-heading { align-items: flex-start; }
    & .portal-calendar .calendar-heading h2 { font-size: 28px; }
  }
}

@media (any-pointer: coarse) {
  html body.student-portal-page main#main-content.responsive-portal {
    & .portal-lesson-actions :is(button,a) { min-height: 44px; }
    & .portal-calendar .calendar-grid { height: auto; grid-template-rows: 50px repeat(14, 36px); }
  }
}

@media (max-width: 767px), (max-width: 1000px) and (max-height: 600px) and (pointer: coarse) {
  html body.student-portal-page main#main-content.responsive-portal {
    --portal-frame: calc(100% - 2 * var(--phone-gutter, 24px));
    --portal-title: clamp(32px, 9vw, 38px);
    height: auto; min-height: calc(100svh - 90px); row-gap: 28px;
    padding-top: calc(var(--header-height) + 28px); padding-bottom: 12px;
    & .portal-workspace:has(.portal-login) { min-height: 320px; }
    & .portal-login h2 { font-size: 29px; }
    & .portal-dashboard-heading h2 { font-size: 29px; }
    & .portal-lesson { grid-template-columns: 48px minmax(0, 1fr) 80px; gap: 10px; }
    & .portal-lesson-date { width: 48px; }
    & .portal-lesson-date strong { font-size: 23px; }
    & .portal-lesson-actions { flex-direction: column; align-items: flex-end; gap: 0; }
    & .portal-account { grid-template-columns: minmax(0, 1fr); grid-template-rows: repeat(2, minmax(240px, 1fr)); }
    & .portal-account-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
    & .portal-card-button { font-size: 13px; padding-inline: 14px; }
    & .portal-yki { min-height: 0; }
    & .portal-yki h3 { font-size: 27px; }
    & .portal-calendar .calendar-heading { flex-direction: column; align-items: stretch; gap: 18px; }
    & .portal-calendar .calendar-grid { height: auto; grid-template-rows: 44px repeat(14, 28px); }
    & .portal-calendar .calendar-actions { min-height: 156px; flex-basis: 156px; }
  }
  html:not(.tablet-portrait) body.student-portal-page main#main-content.responsive-portal .portal-login-button {
    width: 100%; min-width: 0; justify-self: stretch;
    height: var(--phone-action-height); min-height: var(--phone-action-height);
    padding-block: 0;
  }
}