/* User home. The precompiled Tailwind has no xl:/2xl: classes and no container queries, so the layout lives here. */

.home-layout {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.home-main {
  flex: 1;
  min-width: 0;
}

.home-side {
  display: none;
}

@media (min-width: 1280px) {
  .home-layout {
    flex-direction: row;
    align-items: flex-start;
  }

  .home-side {
    display: block;
    width: 340px;
    flex-shrink: 0;
  }
}

@media (min-width: 1920px) {
  .home-layout {
    gap: 24px;
  }

  .home-side {
    width: 390px;
  }
}

.home-groups {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
}

/* lets one-line titles cut off with "…" instead of widening the column */
.home-group {
  min-width: 0;
}

@media (min-width: 1920px) {
  .home-groups {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
}

.home-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.home-tiles > :last-child {
  grid-column: 1 / -1;
}

@media (min-width: 640px) {
  .home-tiles {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
  }

  .home-tiles > :last-child {
    grid-column: auto;
  }
}

@media (min-width: 1280px) {
  .home-tiles {
    display: none;
  }
}

.continue-wrap {
  container-type: inline-size;
}

.continue-thumb {
  width: 268px;
  aspect-ratio: 4 / 3;
  align-self: center;
}

.continue-body {
  padding: 20px;
}

.continue-bar {
  margin-top: 14px;
}

.continue-foot {
  padding-top: 16px;
}

/* a narrow card would outgrow its picture: the helper note goes first */
@container (min-width: 600px) and (max-width: 760px) {
  .continue-note {
    display: none;
  }

  .continue-foot {
    justify-content: flex-end;
    padding-top: 12px;
  }

  .continue-thumb {
    width: 292px;
  }

  .continue-body {
    padding: 16px;
  }

  .continue-bar {
    margin-top: 10px;
  }
}

@container (max-width: 599px) {
  .continue-card {
    flex-direction: column;
  }

  .continue-thumb {
    width: 100%;
    align-self: auto;
  }

  .continue-body {
    padding: 16px;
  }

  .continue-foot {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 10px;
  }

  .continue-foot a {
    width: 100%;
  }

  .continue-note {
    text-align: center;
  }
}

.row-thumb {
  width: 96px;
}

@media (max-width: 639px) {
  .row-thumb {
    width: 80px;
  }
}

.progress-ring {
  width: 112px;
  height: 112px;
}

.progress-ring-track {
  stroke: hsl(var(--primary) / 0.12);
}

.progress-ring-arc {
  stroke: hsl(var(--primary));
}

.progress-ring-done,
.progress-ring-check {
  stroke: hsl(var(--success));
}

.progress-tip {
  vertical-align: -3px;
}

/* the side card sits at the page's right edge: open the tip leftwards, below, clear of the percentage */
.progress-tip.info-tip[data-tooltip]:hover::after,
.progress-tip.info-tip[data-tooltip]:focus::after {
  bottom: auto;
  top: 100%;
  left: auto;
  right: 0;
  transform: translate(1rem, 6px);
}