/* Decorative workspace photography. Keep recording and account controls first. */
.workspace-scene {
  min-width: 0;
  max-width: 100%;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: linear-gradient(135deg, var(--tint), #dce9ee);
}

.workspace-scene > img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.workspace-welcome {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  align-items: center;
  gap: 2.4rem;
  margin: .4rem 0 2rem;
}

.workspace-welcome > .welcome-intro {
  min-width: 0;
  max-width: none;
  margin: 0;
  text-align: left;
}

.workspace-welcome .welcome-intro p {
  margin: 0;
}

.workspace-welcome > .workspace-scene {
  height: clamp(220px, 24vw, 310px);
}

.portal-card--visual {
  --portal-visual-inset: 1.6rem;
  min-width: 0;
  overflow: hidden;
  padding: var(--portal-visual-inset);
}

.portal-card--visual > .portal-photo {
  display: block;
  flex: none;
  width: calc(100% + 2 * var(--portal-visual-inset));
  max-width: none;
  height: 130px;
  margin: calc(-1 * var(--portal-visual-inset)) calc(-1 * var(--portal-visual-inset)) 1.15rem;
  border-bottom: 1px solid var(--line);
  background: var(--tint);
  object-fit: cover;
  object-position: center;
}

.portal-card--visual > .icon-tile {
  margin-bottom: 1rem;
}

.portal-card--visual > h2,
.portal-card--visual > p,
.portal-card--visual > .card-action {
  max-width: 100%;
  overflow-wrap: anywhere;
}

.workspace-scene--signin {
  height: 210px;
  margin-bottom: 1.35rem;
}

.signin-intro:has(> .workspace-scene--signin) .back-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-bottom: .8rem;
}

.workspace-dashboard-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, .75fr);
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}

.workspace-dashboard-intro > .dashboard-heading,
.workspace-dashboard-intro > .page-heading,
.workspace-dashboard-intro > .dashboard-heading > div,
.workspace-dashboard-intro > .page-heading > div {
  min-width: 0;
  max-width: 100%;
  margin-bottom: 0;
  overflow-wrap: anywhere;
}

.workspace-dashboard-intro > .dashboard-heading {
  flex-direction: column;
  align-items: flex-start;
  gap: .85rem;
}

.workspace-dashboard-intro .dashboard-heading > .button {
  max-width: 100%;
  white-space: normal;
  text-align: center;
}

.workspace-scene--dashboard {
  width: 100%;
  max-width: 360px;
  height: 200px;
  justify-self: end;
}

.academy-feature {
  --academy-visual-inset: 1.5rem;
}

.academy-feature > .academy-feature-photo {
  display: block;
  width: calc(100% + 2 * var(--academy-visual-inset));
  max-width: none;
  height: 145px;
  margin: calc(-1 * var(--academy-visual-inset)) calc(-1 * var(--academy-visual-inset)) 1.15rem;
  background: #285362;
  object-fit: cover;
  object-position: center;
}

.academy-feature:has(> .academy-feature-photo) > .status-pill {
  top: 1rem;
  right: 1rem;
  background: #102f43ed;
  color: #fff;
  border-color: #ffffff35;
}

.academy-feature > .academy-feature-photo ~ .academy-mark {
  margin-bottom: 1rem;
}

.engineer-learning {
  display: grid;
  grid-template-columns: minmax(0, 180px) minmax(0, 1fr);
  align-items: center;
  gap: 1.3rem;
  min-width: 0;
}

.engineer-learning > img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 150px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--tint);
  object-fit: cover;
  object-position: center;
}

.engineer-learning-copy {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.engineer-learning-copy > p {
  color: var(--muted);
  font-size: .88rem;
}

.workspace-welcome .button,
.workspace-dashboard-intro .button,
.portal-card--visual .card-action,
.engineer-learning a,
.academy-feature > a {
  min-height: 44px;
}

.engineer-learning a {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
}

.workspace-welcome a:focus-visible,
.portal-card--visual:focus-visible,
.signin-intro .back-link:focus-visible,
.workspace-dashboard-intro a:focus-visible,
.engineer-learning a:focus-visible,
.academy-feature > a:focus-visible {
  outline: 3px solid var(--focus, #e3ae22);
  outline-offset: 4px;
}

.workspace-welcome a,
.portal-card--visual,
.signin-intro .back-link,
.workspace-dashboard-intro a,
.engineer-learning a,
.academy-feature > a {
  transition: none;
}

/* A missing decorative element leaves the content in a full-width column. */
.workspace-welcome:not(:has(> .workspace-scene)),
.workspace-welcome:has(> .workspace-scene[hidden]),
.workspace-welcome:has(> .workspace-scene > img[hidden]),
.workspace-dashboard-intro:not(:has(> .workspace-scene)),
.workspace-dashboard-intro:has(> .workspace-scene[hidden]),
.workspace-dashboard-intro:has(> .workspace-scene > img[hidden]),
.engineer-learning:not(:has(> img)),
.engineer-learning:has(> img[hidden]) {
  grid-template-columns: minmax(0, 1fr);
}

.workspace-scene[hidden],
.workspace-scene:has(> img[hidden]),
.portal-card--visual > .portal-photo[hidden],
.academy-feature > .academy-feature-photo[hidden],
.engineer-learning > img[hidden] {
  display: none;
}

@media (max-width: 1160px) {
  .workspace-welcome {
    gap: 1.5rem;
  }

  .workspace-welcome > .workspace-scene {
    height: 240px;
  }

  .workspace-dashboard-intro {
    gap: 1rem;
    margin-bottom: 1.2rem;
  }

  .workspace-scene--dashboard,
  .workspace-scene--signin {
    height: 145px;
  }

  .academy-feature {
    --academy-visual-inset: 1.25rem;
  }
}

@media (max-width: 900px) {
  .portal-card--visual {
    --portal-visual-inset: 1.2rem;
  }

  .engineer-learning {
    grid-template-columns: minmax(0, 145px) minmax(0, 1fr);
    gap: 1rem;
  }

  .engineer-learning > img {
    height: 130px;
  }
}

@media (max-width: 700px) {
  .workspace-welcome {
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    margin: .2rem 0 1.4rem;
  }

  .workspace-welcome > .workspace-scene {
    height: 170px;
  }

  .portal-card--visual {
    --portal-visual-inset: 1.3rem;
  }

  .workspace-scene--signin {
    height: 100px;
    margin-bottom: 1rem;
  }

  .signin-intro:has(> .workspace-scene--signin) .back-link {
    margin-bottom: .4rem;
  }

  .workspace-dashboard-intro {
    grid-template-columns: minmax(0, 1fr) 110px;
    align-items: start;
    gap: .8rem;
    margin-bottom: 1.1rem;
  }

  .workspace-scene--dashboard {
    width: 110px;
    height: 100px;
    max-height: 130px;
    border-radius: 10px;
  }

  .workspace-dashboard-intro > .page-heading {
    display: block;
  }

  .workspace-dashboard-intro > .dashboard-heading {
    gap: .65rem;
  }

  .engineer-learning {
    grid-template-columns: 100px minmax(0, 1fr);
    gap: .9rem;
  }

  .engineer-learning > img {
    height: 110px;
  }

  .engineer-learning-copy > p {
    font-size: .8rem;
  }
}

@media (max-width: 380px) {
  .workspace-dashboard-intro {
    grid-template-columns: minmax(0, 1fr);
  }

  .workspace-scene--dashboard {
    display: none;
  }

  .engineer-learning {
    grid-template-columns: 80px minmax(0, 1fr);
  }
}

@media print {
  .workspace-scene,
  .portal-card--visual > .portal-photo,
  .academy-feature > .academy-feature-photo,
  .engineer-learning > img {
    display: none !important;
  }

  .workspace-welcome,
  .workspace-dashboard-intro,
  .engineer-learning {
    display: block;
  }

  .portal-card--visual {
    overflow: visible;
  }
}