/* Calendar mode uses the same frame, toolbar, grid and reserved summary as
   index-booking.css. The dashboard's page heading is restored on every exit. */
html body.student-portal-page main#main-content.responsive-portal.portal-calendar-active {
  --portal-frame: min(1600px, calc(100% - clamp(48px, 12vw, 320px)));
  width: var(--portal-frame);
  height: calc(100dvh - var(--header-height) - 120px);
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: calc(var(--header-height) + 20px) auto 100px;
  padding: 24px 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(41,41,41,.2) transparent;

  & > .workspace-heading { display: none; }
  & .portal-workspace { flex: 1 0 auto; padding: 0 0 34px; min-height: 100%; }
  & .portal-view { flex: 1 0 auto; min-height: min-content; justify-content: flex-start; }
  /* Feedback has its own layer, so saving never squeezes the calendar. */
  & .portal-workspace { position: relative; }
  & .portal-status {
    position: absolute; inset: auto 0 0; margin: 0; height: 34px; min-height: 0;
    display: flex; align-items: center;
    font: 300 14px/1.55 var(--sans);
  }
  & .portal-status:empty { display: none; }
  & .portal-calendar {
    display: flex; flex: 1 0 auto; flex-direction: column;
    min-height: min-content; gap: 8px;
  }
  & .portal-calendar > .booking-back {
    display: inline-flex; align-items: center; align-self: flex-start;
    flex: 0 0 50px; height: 50px; min-height: 50px;
    margin-bottom: -8px; padding: 0;
    font: 400 .875rem/1.5 var(--sans);
  }
  & .portal-calendar > .booking-back:hover { opacity: .65; }
  & .portal-calendar .booking-mobile-back { display: none; }
  & .portal-calendar .calendar-heading {
    flex: 0 0 auto; flex-direction: row; justify-content: space-between;
    align-items: center; gap: 30px;
  }
  & .portal-calendar .calendar-heading h2 {
    font-size: clamp(2rem, 3.1vw, 4rem); line-height: 1.12;
  }
  & .portal-calendar .calendar-heading p {
    margin-top: 7px; font: 300 1rem/1.65 var(--sans);
  }
  & .portal-calendar .calendar-grid {
    display: grid; flex: 1 0 auto; height: auto; min-height: 417px;
    grid-template-columns: 45px repeat(7, minmax(0, 1fr));
    grid-template-rows: 50px 6px repeat(14, minmax(22px, 1fr));
    column-gap: clamp(6px, .9vw, 16px); row-gap: 3px; padding: 4px 0;
  }
  & .portal-calendar .calendar-grid::before {
    content: ""; grid-column: 1 / -1; grid-row: 2;
  }
  & .portal-calendar :is(.calendar-corner, .calendar-hour) { display: block; }
  & .portal-calendar .calendar-date {
    grid-column: auto; margin: 0; padding: 0 0 10px; gap: 5px;
    border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
    background: transparent; justify-content: flex-start; cursor: default;
  }
  & .portal-calendar .calendar-date span { font: 400 .75rem/1.3 var(--sans); }
  & .portal-calendar .calendar-date strong { font: 400 1.4rem/1.1 var(--sans); }
  & .portal-calendar .calendar-slot {
    display: grid; place-items: center; grid-column: auto;
    min-height: 22px; margin: 0; border-radius: 999px;
  }
  & .portal-calendar :is(.calendar-hour, .slot-clock) {
    font: 300 .75rem/1 var(--sans); font-variant-numeric: normal;
  }
  & .portal-calendar .calendar-slot .slot-clock { display: none; }
  & .portal-calendar .calendar-slot .slot-mark { display: block; margin: 0; }
  & .portal-calendar .calendar-slot:is(:not(:disabled), .is-selected) .slot-clock {
    display: block; color: rgba(41,41,41,.7);
  }
  & .portal-calendar .calendar-slot:is(:not(:disabled), .is-selected) .slot-mark { display: none; }
  & .portal-calendar .calendar-slot.is-selected .slot-clock { color: #fff; }
  & .portal-calendar .calendar-actions {
    display: flex; flex-direction: row; align-items: center; justify-content: space-between;
    height: 112px; min-height: 112px; flex: 0 0 112px; gap: 24px; padding-top: 12px;
  }
  & .portal-calendar .calendar-selection {
    flex: 1; height: 100%; min-width: 0; min-height: 0; gap: 8px;
    justify-content: safe center; overflow: auto; font: 300 1rem/1.5 var(--sans);
  }
  & .portal-calendar .calendar-selection .details-slot-line { display: block; }
  & .portal-calendar .calendar-selection .booking-slot-meta { font: inherit; color: inherit; opacity: .45; }
  & .portal-calendar .calendar-actions > .booking-primary {
    width: var(--calendar-slot-width, 120px); height: var(--calendar-slot-height, 22px);
    min-width: 0; min-height: 0; justify-content: center; align-self: center;
    border-radius: 999px; padding: 0 16px; gap: 8px;
    background: #292929; color: #fff; font: 500 12px/1.2 var(--sans);
  }
  & .portal-calendar .calendar-actions > .booking-primary:not(:disabled):is(:hover, :focus-visible) { background: #3a3a3a; }
}

body.student-portal-page:has(main.portal-calendar-active) > .contact-footer { display: none; }

@media (max-width: 1000px) {
  html body.student-portal-page main#main-content.responsive-portal.portal-calendar-active {
    --portal-frame: calc(100% - 64px);
  }
}

/* As in the main calendar, tablets retain full-size touch slots and may scroll
   when fourteen hourly rows need more room than the viewport can provide. */
@media (any-pointer: coarse) {
  html body.student-portal-page main#main-content.responsive-portal.portal-calendar-active {
    & .portal-calendar .calendar-grid { min-height: 719px; grid-template-rows: 44px 6px repeat(14, minmax(44px, 1fr)); }
    & .portal-calendar .calendar-slot { min-height: 44px; }
    & .portal-calendar .calendar-actions > .booking-primary { width: 140px; height: 48px; min-height: 48px; }
  }
}
html.tablet-portrait body.student-portal-page main#main-content.responsive-portal.portal-calendar-active {
  & .portal-calendar .calendar-grid {
    grid-template-columns: 38px repeat(7, minmax(0, 1fr));
    grid-template-rows: 44px 6px repeat(14, minmax(44px, 1fr)); min-height: 719px;
  }
  & .portal-calendar .calendar-slot { min-height: 44px; }
  & .portal-calendar .calendar-actions > .booking-primary { width: 140px; height: 48px; min-height: 48px; }
}

@media (max-width: 767px), (max-width: 1000px) and (max-height: 600px) and (pointer: coarse) {
  html:not(.tablet-portrait) body.student-portal-page main#main-content.responsive-portal.portal-calendar-active {
    --portal-frame: min(560px, calc(100% - 2 * var(--phone-gutter, 24px)));
    height: calc(100dvh - var(--header-height) - 18px - max(16px, env(safe-area-inset-bottom)));
    margin-top: calc(var(--header-height) + 18px);
    margin-bottom: max(16px, env(safe-area-inset-bottom));
    padding: 0; scrollbar-width: none;

    & .portal-workspace { padding-bottom: 0; }
    & .portal-status { top: 100%; bottom: auto; height: auto; display: block; padding-top: 8px; }
    & .portal-status:empty { display: none; }
    & .portal-calendar {
      display: grid; grid-template-rows: max-content minmax(262px, 1fr) max-content;
      gap: 10px; justify-content: stretch;
    }
    & .portal-calendar > .booking-back { display: none; }
    & .portal-calendar .calendar-heading { flex-direction: column; align-items: stretch; gap: 12px; }
    & .portal-calendar .calendar-heading h2 {
      font-size: 28px; font-weight: 400; line-height: 1.08; letter-spacing: -.035em; text-wrap: balance;
    }
    & .portal-calendar .calendar-heading p { margin-top: 18px; font: 300 12.5px/1.55 var(--sans); }
    & .portal-calendar .week-navigation { justify-content: space-between; height: 36px; gap: 8px; }
    & .portal-calendar .week-navigation button { flex-shrink: 0; width: 36px; height: 36px; }
    & .portal-calendar .week-navigation > span { font-size: 12.5px; }
    & .portal-calendar .week-navigation small { display: inline; margin-left: 8px; font-size: 11px; }
    & .portal-calendar .calendar-grid {
      flex: none; height: auto; min-height: 262px;
      grid-template-columns: 30px repeat(7, minmax(0, 1fr));
      grid-template-rows: 30px 6px repeat(14, minmax(14px, 1fr));
      padding: 0; gap: 2px 3px;
    }
    & .portal-calendar .calendar-date { padding-bottom: 4px; gap: 1px; justify-content: center; }
    & .portal-calendar .calendar-date span { font-size: 10px; }
    & .portal-calendar .calendar-date strong { font-size: 14px; }
    & .portal-calendar :is(.calendar-hour, .slot-clock) { font-size: 10px; }
    & .portal-calendar .calendar-slot { min-height: 0; }
    & .portal-calendar .slot-mark { font-size: 10px; }
    & .portal-calendar .calendar-actions {
      display: grid; grid-template-columns: minmax(0, 1fr) 128px;
      grid-template-rows: auto 48px; gap: 8px 12px;
      height: auto; min-height: 0; flex: none; padding-top: 8px;
    }
    & .portal-calendar .calendar-selection {
      grid-column: 1 / -1; height: 3lh; min-height: 0; overflow: auto;
      font: 300 12.5px/21.7px var(--sans); gap: 8px; overflow-wrap: anywhere;
    }
    & .portal-calendar .calendar-actions > .booking-mobile-back {
      display: inline-flex; align-items: center; justify-content: center;
      grid-column: 1; grid-row: 2; justify-self: start;
      min-height: 48px; height: 48px; padding: 10px 16px 10px 0;
      font: 300 12.5px/1.55 var(--sans); border-radius: 999px;
    }
    & .portal-calendar .calendar-actions > .booking-primary {
      grid-column: 2; grid-row: 2; width: 128px; height: 48px; min-height: 48px;
      font: 300 12.5px/1.55 var(--sans); padding: 10px 16px; gap: 12px;
    }
  }
}