/**
 * Checkliste einer Aufgabe (AP-41): Karte mit Kopf („3 von 5“, Balken), Punkten mit Häkchen,
 * „Mehr“-Menü (.row-menu aus table.css) und Eingabe darunter. Erledigt = durchgestrichen
 * und gedämpft, nicht nur Farbe. Nur Tokens, kein eigenes JavaScript.
 */
@layer components {
  .checklist {
    --checklist-gap: var(--space-3);
  }

  .checklist__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
  }

  .checklist__title {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
  }

  .checklist__count {
    color: var(--theme-meta-color);
    font-size: var(--font-size-small);
  }

  .checklist__items {
    display: grid;
    gap: var(--space-1);
  }

  .checklist__item {
    display: flex;
    align-items: center;
    gap: var(--checklist-gap);
    min-block-size: 2.25rem;
  }

  .checklist__toggle {
    margin: 0;
    flex: none;
  }

  .checklist__check {
    display: grid;
    flex: none;
    place-items: center;
    inline-size: 1.75rem;
    block-size: 1.75rem;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--theme-page-bg);
    transition: transform var(--press-duration, var(--motion-duration-ui)) var(--motion-ease);
  }

  button.checklist__check {
    cursor: pointer;
  }

  @media (prefers-reduced-motion: no-preference) {
    button.checklist__check:active {
      --press-duration: var(--motion-duration-press);
      transform: scale(0.97);
    }
  }

  .checklist__circle {
    display: grid;
    place-items: center;
    inline-size: 1.25rem;
    block-size: 1.25rem;
    border: var(--border-width-medium) solid var(--border-strong);
    border-radius: var(--radius-sm);
    color: transparent;
    transition:
      border-color var(--motion-duration-ui) var(--motion-ease),
      background-color var(--motion-duration-ui) var(--motion-ease),
      color var(--motion-duration-ui) var(--motion-ease);
  }

  .checklist__circle .icon {
    inline-size: 0.75rem;
    block-size: 0.75rem;
    stroke-width: 3;
  }

  @media (hover: hover) and (pointer: fine) {
    button.checklist__check:hover .checklist__circle {
      border-color: var(--theme-badge-done-text);
    }
  }

  .checklist__item--done .checklist__circle {
    border-color: var(--theme-badge-done-text);
    background-color: var(--theme-badge-done-text);
    color: var(--theme-page-bg);
  }

  .checklist__text {
    flex: 1 1 auto;
    min-inline-size: 0;
    overflow-wrap: anywhere;
  }

  .checklist__item--done .checklist__text {
    color: var(--theme-meta-color);
    text-decoration: line-through;
  }

  .checklist__menu {
    flex: none;
  }

  .checklist__panel {
    inline-size: min(18rem, calc(100vw - 2 * var(--gutter)));
  }

  .checklist__rename {
    display: grid;
    gap: var(--space-2);
    padding: var(--space-2);
  }

  .checklist__add-row {
    display: flex;
    gap: var(--space-2);
  }

  .checklist__add-row .field__input {
    flex: 1 1 auto;
    min-inline-size: 0;
  }

  .checklist__panel .icon {
    flex: none;
  }

  @media (max-width: 48.75em) {
    .checklist__item {
      min-block-size: 2.75rem;
    }

    .checklist__check {
      inline-size: 2.75rem;
      block-size: 2.75rem;
      margin-inline: calc(-1 * var(--space-2));
    }

    .checklist__rename .field__input,
    .checklist__add-row .field__input,
    .checklist__add-row .btn,
    .checklist__rename .btn {
      min-block-size: 2.75rem;
    }
  }
}