/*
 * ObjectiveRowComponent inside an .objective-list: each objective a card,
 * draggable to reorder (sortable_controller.js).
 */
@layer components {
  .objective-list {
    display: grid;
    gap: var(--space-3);
    list-style: none;
    padding: 0;

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

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

    &:hover {
      border-color: var(--color-text);
    }

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

  .objective-row--dragging {
    opacity: 0.4;
    border-style: dashed;
  }

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

    &:hover {
      color: var(--color-ink);
      text-decoration: underline;
      text-decoration-thickness: 1px;
      text-underline-offset: 0.2em;
    }
  }

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

  /* Archived: last in the list, faded, not draggable, still opens its page. */
  .objective-row--archived {
    background: var(--color-surface-2);
    cursor: default;

    & > :not(.objective-row__title) {
      opacity: 0.6;
    }

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

/*
 * The new objective card at the top of the strategic plan's list
 * (objectives/_new_form): hidden until the "Add objective" button targets
 * #new-objective, or until it holds an error.
 */
@layer components {
  .objective-row--new {
    display: none;
    /* The rows below are list items at reading width; the card matches them. */
    max-inline-size: var(--width-reading);
    margin-block-end: var(--space-3);
    /* Jumping to it keeps the banner and the "Add objective" row in view. */
    scroll-margin-block-start: calc(var(--app-header-height) + var(--control-height) + var(--space-9));
    border-style: dashed;
    border-color: var(--color-text);
    cursor: default;

    &:target,
    &:has([aria-invalid="true"]) {
      display: grid;
    }

    &:hover {
      border-color: var(--color-text);
    }
  }

  .objective-new-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3) var(--space-4);
    align-items: start;

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

    & textarea,
    & select {
      inline-size: 100%;
      max-inline-size: 100%;
    }

    & textarea {
      resize: none;
      field-sizing: content;
      min-block-size: 3lh;
    }
  }

  .objective-new-form__description,
  .objective-new-form__actions {
    grid-column: 1 / -1;
  }
}