/*
 * ObjectiveOutlineComponent inside an .outline: the planning cascade. Each
 * objective a hairline row -- wording left, progress right, badge and
 * summary under it -- with its key results indented beneath, each on its
 * own line with a meter. Dense and read-only; the objective page edits.
 */
@layer components {
  .outline {
    list-style: none;
    padding: 0;

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

  .outline-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-1) var(--space-6);
    max-inline-size: none;
    padding-block: var(--space-4);

    & + & {
      border-block-start: var(--border);
    }

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

  .outline-item__title {
    grid-column: 1;
    font: var(--text-body-strong);
  }

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

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

  /* Right of the wording, on its first line, as on a key result card. */
  .outline-item__progress,
  .outline-item__key-result-progress {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    white-space: nowrap;
  }

  .outline-item__progress {
    grid-column: 2;
    grid-row: 1;
    font: var(--text-body-strong);
  }

  .outline-item__unmeasured {
    font: var(--text-small);
    color: var(--color-subtle);
  }

  .outline-item__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);
  }

  /* Indented under a hairline on the start edge: they belong to the line above. */
  .outline-item__key-results {
    grid-column: 1 / -1;
    display: grid;
    gap: var(--space-1);
    margin-block-start: var(--space-2);
    padding-inline-start: var(--space-4);
    border-inline-start: var(--border);
    list-style: none;

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

  .outline-item__key-result {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
    max-inline-size: none;
    font: var(--text-small);
    color: var(--color-text);
  }

  /* Archived: listed last, faded, still opens its page. */
  .outline-item--archived {
    & > :not(.outline-item__title) {
      opacity: 0.6;
    }

    & .outline-item__open {
      color: var(--color-muted);
    }
  }

  /* A year of the cascade: a disclosure whose summary names it and counts it. */
  .outline-year {
    & + & {
      margin-block-start: var(--space-6);
    }
  }

  /* Within a year, each quarter's objectives under a small label. */
  .outline-year__quarter {
    margin-block: var(--space-5) var(--space-2);
  }

  .outline-year__count {
    margin-inline-start: var(--space-3);
    font: var(--text-small);
    color: var(--color-muted);
  }
}