/* ObjectiveDetailComponent: the objective's page -- its content beside its actions. */
@layer components {
  .objective-detail__header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding-block-end: var(--space-4);
    border-block-end: var(--border);
  }

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

  .objective-detail__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 16rem;
    gap: var(--space-8);
    padding-block: var(--space-6) var(--space-8);
    align-items: start;
  }

  .objective-detail__main {
    display: grid;
    gap: var(--space-7);

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

  /* Stays beside the content while it scrolls, below the sticky banner. */
  .objective-detail__sidebar {
    position: sticky;
    inset-block-start: calc(var(--app-header-height) + var(--space-6));
    display: grid;
    gap: var(--space-3);
    padding-inline-start: var(--space-6);
    border-inline-start: var(--border);

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

    & > section {
      margin-block-start: var(--space-5);
    }
  }

  /* The wording as plain text, when the objective is archived. */
  .objective-detail__title {
    font: var(--text-title);
    color: var(--color-muted);
    max-inline-size: none;
  }

  /*
   * The "Add key result" target. The huge scroll margin clamps the scroll
   * position to the top of the page, so following the link never jumps.
   */
  .objective-detail__anchor {
    display: block;
    scroll-margin-block-start: 100vh;
  }
}