/*
 * ObjectiveComponent: one objective with its key results and tasks, as a
 * card in an .objective-card-list (the quarter view). The same paper card as
 * .objective-row, opened up: wording and progress on top, then the key
 * result cards, then read-only task rows.
 */
@layer components {
  .objective-card-list {
    display: grid;
    gap: var(--space-4);
    list-style: none;
    padding: 0;

    & > li {
      max-inline-size: none;
    }

    & > li + li {
      margin-block-start: 0;
    }
  }

  .objective-card {
    display: grid;
    gap: var(--space-5);
    padding: var(--space-5) var(--space-6);
    border: var(--border);
    border-radius: var(--radius-m);
    background: var(--color-paper);

    & > * {
      margin: 0;
    }
  }

  /* Wording left, progress right on its first line, meta under both. */
  .objective-card__header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-2) var(--space-6);

    & > * {
      margin: 0;
      max-inline-size: none;
    }
  }

  .objective-card__title {
    font: var(--text-lead);
  }

  /* The wording links to the objective's page; it reads as a heading. */
  .objective-card__open {
    color: var(--color-ink);
    text-decoration: none;

    &:hover {
      text-decoration: underline;
      text-underline-offset: 0.2em;
    }
  }

  .objective-card__progress {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font: var(--text-body-strong);
    white-space: nowrap;
  }

  .objective-card__meta {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    font: var(--text-small);
    color: var(--color-muted);
  }

  /* Key results, then tasks: each part on a hairline with its eyebrow. */
  .objective-card__part {
    padding-block-start: var(--space-3);
    border-block-start: var(--border);

    & > :first-child {
      margin-block-end: var(--space-3);
    }

    & > * + * {
      margin-block-start: var(--space-2);
    }
  }

  .objective-card__empty {
    font: var(--text-small);
    color: var(--color-muted);
  }

  /* Archived: faded, read-only, still opens its page. */
  .objective-card--archived {
    background: var(--color-surface-2);

    & > :not(.objective-card__header),
    & .objective-card__progress {
      opacity: 0.6;
    }

    & .objective-card__open {
      color: var(--color-muted);
    }
  }
}