@layer screens {
/* Progress Report Card — shared partial rendered on index, show, and dashboard */
.progress-report {
  background-color: var(--surface);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--spacing-4);
  overflow: hidden;
  transition: box-shadow var(--transition-fast), transform var(--transition-fast);

  &:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
  }

  /* Header section */
  & .progress-report-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-4);
    border-block-end: var(--border-width) solid var(--border);

    & h3 {
      margin: 0;
      font-size: var(--font-size-lg);
      font-weight: var(--font-weight-semibold);
      color: var(--text);
    }

    & .date {
      font-size: var(--font-size-sm);
      color: var(--text-muted);
      white-space: nowrap;
    }
  }

  /* Key-value pairs */
  & .key-value {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-1);
    padding: var(--spacing-3) var(--spacing-4);
    border-block-end: var(--border-width) solid var(--border);

    & .label {
      font-weight: var(--font-weight-semibold);
      color: var(--text-muted);
      font-size: var(--font-size-sm);
      text-align: start;
    }

    & .value {
      color: var(--text);
      word-break: break-word;
      text-align: start;
    }
  }

  & .key-value:last-of-type {
    border-block-end: none;
  }

  & .key-value.content {
    border-block-end: var(--border-width) solid var(--border);
  }

  /* Image gallery */
  & .images {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: var(--spacing-2);
    padding: var(--spacing-4);
    border-block-end: var(--border-width) solid var(--border);

    & .image {
      position: relative;
      aspect-ratio: 1;
      overflow: hidden;
      border-radius: var(--radius-sm);
      background-color: var(--surface-sunken);
      border: var(--border-width) solid var(--border);

      & img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform var(--transition-fast);
        display: block;
      }

      &:hover img {
        transform: scale(1.05);
      }

      & a {
        display: block;
        min-height: var(--tap-min);
        height: 100%;
      }

      & a:focus-visible {
        outline: 3px solid var(--focus-ring);
        outline-offset: 2px;
      }
    }
  }

  /* Action buttons */
  & .actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--spacing-2);
    padding: var(--spacing-3) var(--spacing-4);

    & a {
      display: inline-flex;
      align-items: center;
      gap: var(--spacing-1);
      min-height: var(--tap-min);
      padding-inline: var(--spacing-3);
      border-radius: var(--radius);
      text-decoration: none;
      font-size: var(--font-size-sm);
      font-weight: var(--font-weight-medium);
      transition: background-color var(--transition-fast);
      border: var(--border-width) solid transparent;

      &.view {
        background-color: var(--blue-100);
        color: var(--brand);
      }

      &.edit {
        background-color: var(--status-pending-bg);
        color: var(--status-pending-fg);
        border-color: var(--status-pending-border);
      }

      &.delete {
        background-color: var(--status-rejected-bg);
        color: var(--status-rejected-fg);
        border-color: var(--status-rejected-border);
      }

      &:hover,
      &:focus {
        text-decoration: underline;
      }

      &:focus-visible {
        outline: 3px solid var(--focus-ring);
        outline-offset: 2px;
      }
    }
  }
}

/* Latest progress reports section (dashboard) */
section#latest-progress-reports {
  & .progress-report {
    width: 100%;
    max-width: 100%;

    & .actions {
      display: none;
    }
  }
}

/* Responsive adjustments */
@media (min-width: 48rem) {
  .progress-report {
    & .key-value {
      flex-direction: row;
      align-items: baseline;
      gap: var(--spacing-4);

      & .label {
        width: 140px;
        flex-shrink: 0;
      }
    }

    & .images {
      grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }
  }
}
}