/* The desktop canvas uses available width while keeping reading areas bounded. */
@media screen and (min-width: 1024px) {
  #app:has(> .workspace) {
    --sidebar: clamp(196px, 15vw, 224px);
    --desktop-gutter: clamp(22px, 2.1vw, 36px);
    --desktop-content: 1560px;
  }

  #app > .sidebar {
    padding: 24px 16px 20px;
  }

  #app > .sidebar > .main-nav {
    margin-top: 26px;
    gap: 4px;
  }

  #app > .sidebar .nav-link {
    min-height: var(--control-height);
    padding: 10px 12px;
  }

  #app > .sidebar .sidebar-bottom {
    padding-top: 18px;
  }

  #app > .sidebar .sidebar-status {
    margin-bottom: 12px;
  }

  #app > .sidebar .sidebar-copyright {
    margin-top: 16px;
  }

  #app > .workspace {
    --card-space: 14px;
    --section-space: 20px;
    --dashboard-heading-size: clamp(36px, 3vw, 48px);
    min-width: 0;
  }

  #app > .workspace > .topbar {
    height: 62px;
    padding-inline: max(var(--desktop-gutter), calc((100% - var(--desktop-content)) / 2 + var(--desktop-gutter)));
  }

  #app > .workspace > .view-container {
    width: 100%;
    max-width: var(--desktop-content);
    padding: 22px var(--desktop-gutter) 30px;
    min-height: calc(100vh - 62px);
  }

  #app > .aa-workspace > .aa-view {
    min-height: 0;
  }

  .workspace .page-heading,
  .workspace .academy-heading,
  .workspace .co-page-head {
    margin-bottom: 16px;
  }

  .workspace .section-header {
    margin-bottom: 14px;
  }

  .workspace .dashboard-top {
    margin-bottom: 18px;
  }

  .workspace .power-next-card .focus-content {
    padding: 14px 18px;
  }

  .workspace .power-coaching-overview > .agenda-card,
  .aa-view .aa-perform-schedule > .agenda-card {
    padding-block: 0 4px;
  }

  .workspace .power-calendar-header {
    margin-bottom: 10px;
  }

  .workspace .agenda-card .date-week {
    padding-bottom: 10px;
  }

  .workspace .agenda-card .agenda-row {
    padding-block: 10px;
  }

  .workspace .agenda-card .agenda-empty {
    padding: 20px 12px;
  }

  .workspace .aa-athlete-feed {
    margin-block: 18px;
    --aa-feed-inset: 16px;
  }

  .workspace .aa-athlete-feed .aa-feed-featured:not(.news-media-card) .news-card-content {
    min-height: 0;
    padding: 16px 20px;
    gap: 10px;
  }

  .workspace .aa-athlete-feed .aa-feed-featured.news-media-card {
    min-height: 230px;
    padding: 14px;
    gap: 14px;
  }

  .workspace .aa-athlete-feed .news-media-card .news-event-photo {
    min-height: 202px;
  }

  .workspace .aa-athlete-feed .news-event-video video {
    position: absolute;
    inset: 0;
    min-height: 0;
    aspect-ratio: auto;
    object-fit: contain;
  }

  .workspace .aa-athlete-feed .aa-feed-text-row {
    padding-block: 10px;
  }

  .workspace .news-card p {
    max-width: 66ch;
  }

  .workspace .app-footer {
    margin-top: 18px;
    padding: 10px 14px;
  }

  .aa-view > .aa-profile-form {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    align-items: start;
  }

  .aa-view > .aa-profile-form > button {
    grid-column: 1 / -1;
  }

  .aa-perform .aa-perform-archive {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 255px), 1fr));
    align-items: start;
    gap: 16px;
  }

  .aa-perform .aa-archive-category:has(details[open]) {
    grid-column: 1 / -1;
  }

  .workspace .co-workspace-tabs,
  .workspace .trainer-page-tabs,
  .workspace .shop-category-tabs {
    margin-bottom: 16px;
  }

  .workspace .trainer-page-tabs {
    padding-bottom: 12px;
  }

  .workspace .trainer-page-identity {
    margin-bottom: 16px;
    padding: 16px;
  }

  .workspace .trainer-page-panel > .organization-team {
    gap: 14px;
  }

  .workspace .organization-team .org-section {
    gap: 10px;
    padding-top: 14px;
  }

  .workspace .co-page .co-detail-tabs {
    padding-block: 10px;
    margin-top: 14px;
  }

  .workspace .co-page .co-training-days-list {
    gap: 8px;
  }

  .workspace .co-page .co-training-day-heading,
  .workspace .co-perform-plan-heading {
    min-height: 56px;
    padding: 12px 14px;
  }

  .workspace .co-page .co-training-day-content {
    padding: 14px;
  }

  .workspace .cdm-section-tabs,
  .workspace .cdm-test-picker {
    margin-bottom: 14px;
  }

  .workspace .cpg-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: 14px;
  }

  .workspace .cpg-card:only-child {
    max-width: 880px;
  }

  .workspace .academy-reader-hero,
  .workspace .academy-modules-hero {
    margin-bottom: 16px;
  }

  .workspace .academy-reader-hero .academy-reader-toolbar,
  .workspace .academy-modules-hero .academy-module-toolbar {
    margin-bottom: 16px;
  }

  .workspace .academy-flat-reader .academy-video-card {
    max-width: min(100%, 960px);
    margin-bottom: 12px;
  }

  .workspace .academy-flat-reader .academy-tabs,
  .workspace .academy-flat-reader .academy-tab-panel {
    max-width: 960px;
  }

  .workspace .academy-flat-reader .academy-tabs {
    margin-bottom: 16px;
  }

  .workspace .academy-source-prose :is(p, ul, ol) {
    max-width: 72ch;
  }

  .workspace .academy-modules-browser .academy-module-section {
    margin-block: 0 16px;
  }

  .workspace .academy-modules-browser .academy-course-lesson {
    min-height: 60px;
  }

  .workspace .shop-course-cover {
    min-height: 195px;
    padding: 20px;
  }

  .workspace .shop-course-body {
    padding: 20px;
    gap: 14px;
  }

  .workspace .shop-product-image {
    max-height: 310px;
  }

  .atd-admin .admin-main {
    min-width: 0;
  }

  .atd-admin :is(.admin-card-grid, .admin-split) {
    align-items: start;
  }
}

@media screen and (min-width: 1200px) {
  .aa-view .power-coaching-overview:has(> .aa-ranking-overview) {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    align-items: start;
    gap: 12px 24px;
  }

  .aa-view .power-coaching-overview:has(> .aa-ranking-overview) > .aa-perform-schedule {
    grid-column: 1;
    grid-row: 1 / span 2;
  }

  .aa-view .power-coaching-overview:has(> .aa-ranking-overview) > :is(.aa-ranking-overview, .aa-points-link) {
    grid-column: 2;
  }

  .aa-view .power-coaching-overview > .aa-ranking-overview .section-header {
    margin-bottom: 0;
  }

  .workspace .trainer-page-panel > .organization-team:has([aria-labelledby="org-staff-heading"]) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    max-width: none;
    align-items: start;
    column-gap: 24px;
  }

  .workspace .trainer-page-panel > .organization-team:has([aria-labelledby="org-staff-heading"]) > :not(.org-section) {
    grid-column: 1 / -1;
  }

  .workspace .co-page :is(.co-training-days-list, .co-perform-plan-list) {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
    align-items: start;
  }

  .workspace .co-page :is(.co-training-days-list, .co-perform-plan-list) > .is-open,
  .workspace .aa-perform-deliveries .co-perform-plan-list > :has(> [aria-expanded="true"]) {
    grid-column: 1 / -1;
  }

  .workspace .academy-modules-browser .academy-module-section {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 14px;
    align-items: start;
  }

  .workspace .academy-modules-browser .academy-module-section > :is(.academy-module-position, .academy-module-heading) {
    grid-column: 1 / -1;
    margin: 0;
  }

  .workspace .academy-modules-browser .academy-module-section > .academy-course-lesson {
    margin: 0;
  }
}

@media screen and (min-width: 1360px) {
  .workspace .power-coaching-overview:has(> .power-movers) {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    align-items: start;
    gap: 24px;
  }

  .workspace .power-coaching-overview > .power-movers {
    margin: 0;
    padding: 14px 16px;
  }

  .workspace .power-coaching-overview .pwm-panels {
    gap: 12px;
  }

  .workspace .power-coaching-overview .pwm-columns {
    gap: 8px;
  }

  .workspace .power-coaching-overview .pwm-column li > button {
    gap: 4px;
    min-height: 44px;
  }

  .workspace .academy-flat-reader .academy-lesson-area:has(> .academy-video-card):has(> .academy-tab-panel:not([hidden])) {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    align-items: start;
    gap: 12px 24px;
  }

  .workspace .academy-flat-reader .academy-lesson-area:has(> .academy-video-card):has(> .academy-tab-panel:not([hidden])) > :is(.academy-video-card, .academy-tabs) {
    grid-column: 1;
    min-width: 0;
    margin-bottom: 0;
  }

  .workspace .academy-flat-reader .academy-lesson-area:has(> .academy-video-card) > .academy-tab-panel:not([hidden]) {
    grid-column: 2;
    grid-row: 1 / span 2;
    min-width: 0;
  }
}