/* Track Mishnah UI 2.18.3
 * Durable signed-in page column, audience preview controls, and natural
 * dashboard summary sizing on tall desktop screens.
 */

/* The signed-in shell now has one explicit page column. This avoids relying on
 * flex behavior on the body element, which was inconsistent on short pages in
 * the deployed desktop layout. The footer remains in normal document flow. */
body.app-theme-jewel.is-signed-in {
  display: block;
}

body.app-theme-jewel.is-signed-in > .tm-page-column {
  width: 100%;
  min-width: 0;
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

body.app-theme-jewel.is-signed-in > .tm-page-column > main {
  width: 100%;
  min-width: 0;
  flex: 1 0 auto;
}

body.app-theme-jewel.is-signed-in > .tm-page-column > .site-footer {
  position: static;
  inset: auto;
  flex: 0 0 auto;
  margin-block-start: auto !important;
}

/* Only administrators see this view control. Participant pages have no
 * audience badge or explanatory pill above the release list. */
body.app-theme-jewel .release-notes-view-switcher {
  width: fit-content;
  display: flex;
  align-items: center;
  gap: 3px;
  margin: 0 0 10px;
  padding: 3px;
  border: 1px solid var(--app-border);
  border-radius: 8px;
  background: var(--app-surface-soft);
}

body.app-theme-jewel .release-notes-view-switcher > span {
  padding-inline: 7px 5px;
  color: var(--app-text-muted);
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

body.app-theme-jewel .release-notes-view-switcher > a {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  padding: 5px 9px;
  color: var(--app-text-soft);
  border: 1px solid transparent;
  border-radius: 6px;
  font-size: .64rem;
  font-weight: 800;
  text-decoration: none;
}

body.app-theme-jewel .release-notes-view-switcher > a:hover {
  color: var(--app-primary-ink);
  border-color: var(--app-border-strong);
  background: var(--app-surface);
}

body.app-theme-jewel .release-notes-view-switcher > a[aria-current="page"] {
  color: var(--jewel-on-accent);
  border-color: var(--app-primary);
  background: var(--app-primary);
}

@media (min-width: 1220px) {
  /* Restore full-width desktop content after introducing the page wrapper. */
  body.app-theme-jewel.is-signed-in > .tm-page-column > main {
    width: auto;
  }

  body.app-theme-jewel.is-signed-in > .tm-page-column > main .shell,
  body.app-theme-jewel.is-signed-in > .tm-page-column > .site-footer > .shell {
    width: 100%;
    max-width: none;
  }

  /* My Learning remains the tall working surface. The summary column uses its
   * content height, so taller screens never turn its cards into empty panels. */
  body.app-theme-jewel .dashboard-primary-workspace {
    --tm-my-learning-height: clamp(680px, calc(100dvh - 104px), 840px);
    align-items: start;
  }

  body.app-theme-jewel .dashboard-primary-workspace > .project-overview {
    height: auto !important;
    min-height: 0 !important;
    align-self: start;
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
  }

  body.app-theme-jewel .dashboard-primary-workspace .project-overview-heading {
    min-height: 0 !important;
    flex: 0 0 auto !important;
    align-content: start;
  }

  body.app-theme-jewel .dashboard-primary-workspace .dashboard-command-grid {
    min-height: 0;
    flex: 0 0 auto !important;
    grid-template-rows: none !important;
    grid-auto-rows: auto;
    align-content: start;
  }

  body.app-theme-jewel .dashboard-primary-workspace .dashboard-command-card,
  body.app-theme-jewel .dashboard-primary-workspace .continue-learning-card,
  body.app-theme-jewel .dashboard-primary-workspace .personal-dashboard-summary,
  body.app-theme-jewel .dashboard-primary-workspace .project-progress-card {
    height: auto !important;
    min-height: 0 !important;
    align-content: start;
    overflow: visible !important;
  }

  body.app-theme-jewel .dashboard-primary-workspace > #my-learning {
    height: var(--tm-my-learning-height);
  }
}

@media (min-width: 1220px) and (min-height: 880px) {
  body.app-theme-jewel .dashboard-primary-workspace {
    --tm-my-learning-height: clamp(760px, calc(100dvh - 88px), 940px);
  }
}

@media (min-width: 1600px) and (min-height: 880px) {
  body.app-theme-jewel .dashboard-primary-workspace .project-overview-heading {
    padding: 13px 14px;
  }

  body.app-theme-jewel .dashboard-primary-workspace .dashboard-command-card {
    gap: 7px;
    padding: 11px 12px;
  }

  body.app-theme-jewel .dashboard-primary-workspace .dashboard-card-heading h2,
  body.app-theme-jewel .dashboard-primary-workspace .continue-learning-copy h3 {
    font-size: .94rem;
  }

  body.app-theme-jewel .dashboard-primary-workspace .continue-learning-copy p,
  body.app-theme-jewel .dashboard-primary-workspace .personal-progress-lead,
  body.app-theme-jewel .dashboard-primary-workspace .personal-goal-note,
  body.app-theme-jewel .dashboard-primary-workspace .progress-segment-legend,
  body.app-theme-jewel .dashboard-primary-workspace .progress-legend {
    font-size: .62rem;
  }

  body.app-theme-jewel .dashboard-primary-workspace .continue-learning-stats dt,
  body.app-theme-jewel .dashboard-primary-workspace .personal-goal-stats dt,
  body.app-theme-jewel .dashboard-primary-workspace .project-progress-card .progress-metrics article span {
    font-size: .54rem;
  }

  body.app-theme-jewel .dashboard-primary-workspace .continue-learning-stats dd,
  body.app-theme-jewel .dashboard-primary-workspace .personal-goal-stats dd,
  body.app-theme-jewel .dashboard-primary-workspace .project-progress-card .progress-metrics article strong {
    font-size: .78rem;
  }
}

@media (max-width: 640px) {
  body.app-theme-jewel .release-notes-view-switcher {
    width: 100%;
  }

  body.app-theme-jewel .release-notes-view-switcher > span {
    flex: 0 0 auto;
  }

  body.app-theme-jewel .release-notes-view-switcher > a {
    flex: 1 1 0;
    justify-content: center;
  }
}