@layer components {
  /* Risk Form Grid - 2 columns on wider screens
  /* ------------------------------------------------------------------------ */

  .risk-form-grid {
    display: grid;
    gap: var(--block-space);
    grid-template-columns: 1fr;

    @media (min-width: 800px) {
      grid-template-columns: 1fr 1fr;
      align-items: start;
    }
  }

  /* Projects Grid
  /* ------------------------------------------------------------------------ */

  .projects-grid {
    display: grid;
    gap: var(--block-space);
    grid-template-columns: 1fr;

    @media (min-width: 640px) {
      grid-template-columns: repeat(2, 1fr);
    }

    @media (min-width: 960px) {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  /* Project Card
  /* ------------------------------------------------------------------------ */

  .project-card {
    --project-status-color: var(--color-ink-medium);

    background-color: var(--color-canvas);
    border-radius: 0.5em;
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    gap: var(--block-space-half);
    padding: var(--block-space) var(--inline-space-double);
    position: relative;
    text-align: start;
    transition: transform 150ms ease, box-shadow 150ms ease;

    &::before {
      background-color: var(--project-status-color);
      border-radius: 0.5em 0 0 0.5em;
      content: "";
      inset-block: 0;
      inset-inline-start: 0;
      position: absolute;
      width: 4px;
    }

    @media (any-hover: hover) {
      &:hover {
        box-shadow: var(--shadow), 0 0 0 1px var(--color-ink-lighter);
        transform: translateY(-2px);
      }
    }

    html[data-theme="dark"] & {
      box-shadow: 0 0 0 1px var(--color-ink-lighter);

      @media (any-hover: hover) {
        &:hover {
          box-shadow: 0 0 0 1px var(--color-ink-light);
        }
      }
    }

    @media (prefers-color-scheme: dark) {
      html:not([data-theme]) & {
        box-shadow: 0 0 0 1px var(--color-ink-lighter);

        @media (any-hover: hover) {
          &:hover {
            box-shadow: 0 0 0 1px var(--color-ink-light);
          }
        }
      }
    }
  }

  .project-card--active {
    --project-status-color: oklch(var(--lch-green-medium));
  }

  .project-card--completed {
    --project-status-color: oklch(var(--lch-blue-medium));
  }

  .project-card--archived {
    --project-status-color: var(--color-ink-light);
  }

  /* Card Header */
  .project-card__header {
    display: flex;
    flex-direction: column;
    gap: 0.25em;
  }

  .project-card__name {
    color: var(--color-ink);
    font-size: var(--text-medium);
    font-weight: 900;
    line-height: 1.2;
    margin: 0;
  }

  .project-card__meta {
    align-items: center;
    color: var(--color-ink-dark);
    display: flex;
    font-size: var(--text-x-small);
    gap: 1ch;
  }

  .project-card__code {
    font-family: var(--font-mono);
    text-transform: uppercase;
  }

  .project-card__status {
    font-weight: 600;
    text-transform: uppercase;
  }

  /* Card Description */
  .project-card__description {
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    color: var(--color-ink-dark);
    display: -webkit-box;
    font-size: var(--text-small);
    line-height: 1.4;
    margin: 0;
    overflow: hidden;
  }

  /* Risk Stats */
  .project-card__risks {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    font-size: var(--text-x-small);
    gap: 0.75ch;
    margin-block-start: auto;
    padding-block-start: var(--block-space-half);
  }

  .project-card__risk-stat {
    align-items: center;
    background-color: var(--stat-bg, var(--color-ink-lightest));
    border-radius: 0.3em;
    color: var(--stat-color, var(--color-ink-dark));
    display: inline-flex;
    font-weight: 600;
    gap: 0.3ch;
    padding: 0.2em 0.5em;
  }

  .project-card__risk-stat--total {
    --stat-bg: var(--color-ink-lightest);
    --stat-color: var(--color-ink);
  }

  .project-card__risk-stat--critical {
    --stat-bg: oklch(var(--lch-risk-critical) / 0.15);
    --stat-color: oklch(var(--lch-risk-critical));
  }

  .project-card__risk-stat--high {
    --stat-bg: oklch(var(--lch-risk-high) / 0.15);
    --stat-color: oklch(var(--lch-risk-high));
  }

  .project-card__risk-stat--medium {
    --stat-bg: oklch(var(--lch-risk-medium) / 0.15);
    --stat-color: oklch(var(--lch-risk-medium));
  }

  .project-card__risk-stat--low {
    --stat-bg: oklch(var(--lch-risk-low) / 0.15);
    --stat-color: oklch(var(--lch-risk-low));
  }

  /* Card Footer */
  .project-card__footer {
    border-block-start: 1px solid var(--color-ink-lighter);
    color: var(--color-ink-dark);
    font-size: var(--text-x-small);
    margin-block-start: var(--block-space-half);
    padding-block-start: var(--block-space-half);
  }

  /* Risk Strip — score + status + tags in one bar
  /* ------------------------------------------------------------------------ */

  .risk-strip {
    display: flex;
    flex-direction: column;
    min-inline-size: 0;
  }

  .risk-strip__score {
    align-items: center;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    gap: 0.1em;
    min-inline-size: 3ch;
  }

  .risk-strip__number {
    color: var(--risk-color);
    font-size: var(--text-x-large);
    font-weight: 900;
    line-height: 1;
  }

  .risk-strip__level {
    color: var(--risk-color);
    font-size: var(--text-xx-small);
    font-weight: 700;
  }

  .risk-strip__score--small .risk-strip__number {
    font-size: var(--text-large);
  }

  .risk-strip__factors {
    align-items: baseline;
    color: var(--color-ink-dark);
    display: flex;
    flex-wrap: wrap;
    font-size: var(--text-small);
    gap: 0.3em;
  }

  .risk-strip__multiply {
    color: var(--color-ink-light);
  }

  .risk-strip__description {
    border-block-start: 1px solid var(--color-ink-lighter);
    color: var(--color-ink);
    font-size: var(--text-small);
    line-height: 1.5;
    margin: 0.75em 0 0;
    padding-block-start: 0.75em;
  }

  .risk-strip__tags {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35em;
  }

  .risk-strip__tag {
    background-color: color-mix(in oklch, var(--color-ink) 8%, transparent);
    border-radius: 0.3em;
    color: var(--color-ink);
    font-size: var(--text-xx-small);
    font-weight: 700;
    padding: 0.15em 0.5em;
    text-transform: uppercase;
  }

  .risk-strip__tag--category {
    background-color: color-mix(in srgb, var(--cat-color) 15%, transparent);
    color: var(--cat-color);
  }

  .risk-strip__tag--alert {
    background-color: color-mix(in oklch, var(--color-negative) 15%, transparent);
    color: var(--color-negative);
  }


  /* Project Row — compact card-style row for dashboard active projects
  /* ------------------------------------------------------------------------ */

  .project-row {
    background: var(--color-ink-lightest);
    border-radius: 0.5em;
    display: flex;
    align-items: center;
    gap: 0.75em;
    justify-content: space-between;
    padding: 0.6em 0.75em;
    text-decoration: none;

    @media (any-hover: hover) {
      &:hover {
        background: var(--color-ink-lighter);
      }
    }
  }

  .project-row__header {
    display: flex;
    align-items: baseline;
    gap: 0.75ch;
    min-inline-size: 0;
  }

  .project-row__name {
    color: var(--color-ink);
    font-size: var(--text-small);
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .project-row__code {
    color: var(--color-ink-medium);
    flex-shrink: 0;
    font-family: var(--font-mono);
    font-size: var(--text-xx-small);
    text-transform: uppercase;
  }

  .project-row__risks {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    gap: 0.4ch;
  }

  /* Risk Row — card-style row for Top Risks lists
  /* ------------------------------------------------------------------------ */

  .risk-row {
    align-items: center;
    background: var(--color-ink-lightest);
    border-radius: 0.4em;
    display: flex;
    font-size: var(--text-small);
    gap: 0.75em;
    padding: 0.5em 0.75em;
    text-decoration: none;

    @media (any-hover: hover) {
      &:hover {
        background: var(--color-ink-lighter);
      }
    }
  }

  .risk-row__code {
    color: var(--color-ink-medium);
    flex-shrink: 0;
    font-family: var(--font-mono);
    font-size: 0.85em;
    font-weight: 700;
  }

  .risk-row__name {
    color: var(--color-ink);
    flex: 1;
    font-weight: 500;
  }

  /* Risk Badge — pill-shaped score indicator
  /* ------------------------------------------------------------------------ */

  .risk-badge {
    align-items: center;
    border-radius: 99rem;
    display: inline-flex;
    flex-shrink: 0;
    font-size: var(--text-x-small);
    font-weight: 700;
    justify-content: center;
    min-inline-size: 2.2em;
    padding: 0.15em 0.6em;
  }
}