/* Student dashboard and the practice-mode and read-only banners. */
@layer components {
  .student-dashboard {
    margin-inline: auto;
    max-inline-size: 64rem;
    padding: 3rem;
  }
  .student-dashboard-header { margin-block-end: var(--space-8); }
  .student-dashboard-title {
    color: oklch(var(--oklch-ink-darkest));
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.2;
  }

  .student-assessment-group {
    display: block;
    margin-block-end: var(--space-12);

    summary {
      color: oklch(var(--oklch-ink-darkest));
      cursor: pointer;
      font-size: 1.5rem;
      font-weight: 700;
    }
    .student-assessment-list { margin-block-start: var(--space-8); }
  }

  .student-assessment-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    list-style: none;
    max-inline-size: 48rem;
  }

  .student-assessment-card {
    align-items: center;
    background: oklch(var(--oklch-canvas-raised));
    border: 1px solid oklch(var(--oklch-border));
    border-radius: calc(var(--radius-lg) + 4px);
    box-shadow: 0 6px 18px oklch(var(--oklch-ink-darkest) / 0.04);
    display: flex;
    gap: var(--space-4);
    overflow: hidden;
    padding: 1.75rem 2rem;
    position: relative;
    transition: transform 120ms ease, box-shadow 150ms ease, border-color 150ms;

    &:hover {
      border-color: oklch(var(--oklch-primary) / 0.5);
      box-shadow: 0 12px 28px oklch(var(--oklch-ink-darkest) / 0.08);
      transform: translateY(-4px);
    }
    .badge { align-self: center; }

    @media (max-width: 640px) {
      align-items: stretch;
      flex-direction: column;
    }
  }
  .student-assessment-card-accent {
    align-self: stretch;
    background: linear-gradient(180deg, oklch(var(--oklch-primary)), oklch(var(--oklch-primary) / 0.8));
    border-radius: var(--radius-full);
    flex-shrink: 0;
    inline-size: 6px;
    margin-inline: -1px var(--space-3);
  }
  .student-assessment-card-thumb {
    align-items: center;
    background: linear-gradient(135deg, oklch(var(--oklch-primary) / 0.12), oklch(var(--oklch-canvas)));
    block-size: 72px;
    border-radius: var(--radius-md);
    color: oklch(var(--oklch-primary));
    display: flex;
    flex-shrink: 0;
    font-weight: 700;
    inline-size: 96px;
    justify-content: center;
  }
  .student-assessment-card-body {
    flex: 1;
    min-inline-size: 0;
  }
  .student-assessment-card-title {
    color: oklch(var(--oklch-ink-darkest));
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.3;
    margin-block-end: var(--space-3);
  }
  .student-assessment-card-desc {
    color: oklch(var(--oklch-ink-mid));
    font-size: 0.9375rem;
    line-height: 1.5;
    margin-block-end: var(--space-4);
  }
  .student-assessment-card-meta {
    color: oklch(var(--oklch-ink-light));
    display: flex;
    font-size: 0.8125rem;
    gap: var(--space-3);
    margin-block-end: var(--space-4);
  }
  .student-assessment-card-action {
    align-items: center;
    display: flex;
    flex-shrink: 0;
    gap: var(--space-2);

    @media (max-width: 640px) {
      flex-wrap: wrap;
      inline-size: 100%;
    }
  }

  /* Attempt banners. Variants only set the --banner-* properties. */
  .student-practice-banner,
  .student-read-only-banner {
    align-items: center;
    background: var(--banner-background);
    border-block-end: 2px solid var(--banner-border-color);
    color: var(--banner-color);
    display: flex;
    font-size: 0.875rem;
    font-weight: 600;
    gap: 0.5rem;
    padding: 0.5rem 1.5rem;
  }
  .student-practice-banner {
    --banner-background: light-dark(oklch(0.93 0.08 250), oklch(0.30 0.06 250));
    --banner-border-color: light-dark(oklch(0.80 0.12 250), oklch(0.45 0.10 250));
    --banner-color: light-dark(oklch(0.30 0.14 250), oklch(0.85 0.08 250));
  }
  .student-read-only-banner {
    --banner-background: light-dark(oklch(0.92 0.10 120), oklch(0.30 0.06 120));
    --banner-border-color: light-dark(oklch(0.78 0.14 120), oklch(0.45 0.10 120));
    --banner-color: light-dark(oklch(0.28 0.16 120), oklch(0.85 0.10 120));
  }
  .student-practice-banner-icon,
  .student-read-only-banner-icon { font-size: 1rem; }
}