/*
 * KeyResultComponent inside a .key-result-list: each key result a card row,
 * light orange while open, light green once the goal is reached.
 */
@layer components {
  .key-result-list {
    display: grid;
    gap: var(--space-2);
    list-style: none;
    padding: 0;

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

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

  .key-result-list__item[draggable="true"] {
    cursor: grab;
  }

  .key-result-list__item--dragging {
    opacity: 0.4;
  }

  .key-result {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-1) var(--space-6);
    padding: var(--space-4) var(--space-5);
    border: var(--border);
    border-radius: var(--radius-m);

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

  .key-result--open {
    background: var(--color-attention-surface);
    border-color: color-mix(in srgb, var(--color-attention) 40%, transparent);
  }

  .key-result--complete {
    background: var(--color-positive-surface);
    border-color: color-mix(in srgb, var(--color-positive) 30%, transparent);
  }

  /*
   * The goal and description, edited in place: they read as the card's title
   * until hovered or focused (as .title-form does for an objective).
   */
  .key-result-title-form {
    display: flex;
    align-items: start;
    gap: var(--space-1);
    margin: 0;

    & .field_with_errors {
      display: contents;
    }

    & :where(input[type="number"], textarea) {
      min-inline-size: 0;
      min-block-size: auto;
      padding: var(--space-1) var(--space-2);
      border: 1px solid transparent;
      background: transparent;
      font: var(--text-body);
      color: var(--color-ink);
      cursor: text;

      &:hover {
        border-color: color-mix(in srgb, var(--color-text) 25%, transparent);
      }

      &:focus {
        border-color: var(--color-text);
        background: var(--color-paper);
        outline: 0;
      }
    }

    /* Save appears while editing, so it takes no room otherwise. */
    & input[type="submit"] {
      display: none;
    }

    &:focus-within input[type="submit"],
    &:has([aria-invalid="true"]) input[type="submit"] {
      display: inline-flex;
    }
  }

  /* As wide as its figure, like the text it replaces. */
  .key-result-title-form__goal {
    field-sizing: content;
    min-inline-size: 3ch;
    margin-inline-start: calc(-1 * var(--space-2));
    font-weight: 600;
    appearance: textfield;

    &::-webkit-inner-spin-button {
      appearance: none;
    }
  }

  .key-result-title-form__dash {
    padding-block: var(--space-1);
    border-block: 1px solid transparent;
    color: var(--color-muted);
  }

  /* Wraps and grows with long wording instead of cutting it off. */
  .key-result-title-form__description {
    flex: 1;
    max-inline-size: none;
    resize: none;
    field-sizing: content;
  }

  /*
   * The new key result card at the top of the list: hidden until the
   * "Add key result" link targets #new-key-result, an anchor at the top of
   * the objective page (so the page does not scroll), or until it holds an
   * error.
   */
  .key-result--new {
    display: none;
    background: var(--color-paper);
    border-style: dashed;
    border-color: var(--color-text);

    :has(#new-key-result:target) &,
    &:has([aria-invalid="true"]) {
      display: block;
    }
  }

  .key-result-new-form {
    display: grid;
    grid-template-columns: 8rem minmax(0, 1fr) 8rem;
    gap: var(--space-3) var(--space-4);
    align-items: start;

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

    & > p:last-child {
      grid-column: 1 / -1;
    }

    /* Controls never outgrow their grid cell. */
    & input:not([type="submit"]) {
      inline-size: 100%;
      min-inline-size: 0;
      max-inline-size: 100%;
    }
  }

  /* The card sits above the list, spaced like a list item. */
  .key-result--new + .key-result-list {
    margin-block-start: var(--space-2);
  }

  /* Right of the title on the first row, whatever follows the title. */
  .key-result__progress {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font: var(--text-body-strong);
    white-space: nowrap;
  }

  .key-result__actions {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-block-start: var(--space-2);

    & > * + * {
      margin: 0;
    }
  }

  /* The title as plain text: archived, or under an archived objective. */
  .key-result__title {
    font: var(--text-body);
    color: var(--color-ink);
  }

  /* Archived: listed last, faded, read-only; the badge and Unarchive stay legible. */
  .key-result--archived {
    background: var(--color-surface-2);
    border-color: var(--color-line);

    & > :not(.key-result__actions) {
      opacity: 0.55;
    }
  }

  /* "Baseline: 10" or "No baseline" under the title; clicking it edits in place. */
  .key-result__baseline {
    grid-column: 1 / -1;
    margin: 0;
    padding: 0;
    border: 0;
    font: var(--text-small);
    color: var(--color-muted);

    & > summary {
      display: inline;
      list-style: none;
      font: inherit;
      text-decoration: underline dotted;
      text-underline-offset: 0.2em;
      cursor: pointer;

      &::-webkit-details-marker {
        display: none;
      }

      &:hover {
        color: var(--color-ink);
      }
    }

    &[open] > summary {
      margin-block-end: var(--space-2);
    }
  }

  .baseline-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);

    & input[type="number"] {
      inline-size: 8rem;
      min-inline-size: 0;
      min-block-size: auto;
      padding: var(--space-1) var(--space-2);
      background: var(--color-paper);
    }
  }

  .baseline-form__hint {
    flex-basis: 100%;
    font: var(--text-caption);
    color: var(--color-muted);
  }
}