/**
 * Aufgabe: Eckdaten in einer Zeile (.task-meta), Status mit Menü (.task-status,
 * .status-menu), Zeilen als zusammenhängende Karte (.task-rows, .task-row) und
 * Gruppen auf „Meine Aufgaben“ (.task-group). Nur Tokens, keine festen Werte.
 */
@layer components {
  .task-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1) var(--space-4);
    margin: 0;
    color: var(--theme-meta-color);
    font-size: var(--font-size-small);
    line-height: var(--line-height-small);
  }

  .task-repeat {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    margin: 0;
  }

  .task-meta__item dd {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    margin: 0;
    overflow-wrap: anywhere;
  }

  .task-status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
  }

  .status-menu {
    position: relative;
  }

  .status-menu__toggle {
    list-style: none;
    cursor: pointer;
  }

  .status-menu__toggle::-webkit-details-marker {
    display: none;
  }

  .status-menu[open] > .status-menu__toggle {
    background-color: var(--theme-btn-secondary-bg-hover);
    border-color: var(--theme-btn-secondary-border-hover);
  }

  .status-menu__panel {
    position: absolute;
    inset-block-start: calc(100% + var(--space-1));
    inset-inline-start: 0;
    z-index: var(--z-header);
    display: grid;
    inline-size: max-content;
    min-inline-size: 10rem;
    max-inline-size: calc(100vw - 2 * var(--gutter));
    padding: var(--space-1);
    border: var(--border-width-thin) solid var(--theme-floating-border);
    border-radius: var(--radius-lg);
    background-color: var(--theme-floating-bg);
    box-shadow: var(--shadow-overlay);
  }

  .status-menu__option {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    inline-size: 100%;
    min-block-size: 2rem;
    padding: var(--space-1) var(--space-3);
    border: 0;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--theme-nav-text);
    font: inherit;
    font-size: var(--font-size-small);
    text-align: start;
    cursor: pointer;
  }

  @media (hover: hover) and (pointer: fine) {
    .status-menu__option:hover {
      background-color: var(--theme-nav-hover);
    }
  }

  button.status-menu__option {
    padding-inline-start: calc(var(--space-3) + 1rem + var(--space-2));
  }

  .status-menu__option--current {
    background-color: var(--theme-nav-active);
    font-weight: var(--font-weight-medium);
    cursor: default;
  }

  @media (hover: hover) and (pointer: fine) {
    .status-menu__option--current:hover {
      background-color: var(--theme-nav-active);
    }
  }

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

  .task-rows {
    margin: 0;
    padding: 0;
    border: var(--border-width-thin) solid var(--theme-card-border);
    border-radius: var(--theme-card-radius);
    background-color: var(--theme-card-bg);
    list-style: none;
  }

  .task-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2) var(--space-4);
    padding: var(--space-3) var(--space-5);
  }

  .task-row + .task-row {
    border-block-start: var(--border-width-thin) solid var(--border-subtle);
  }

  .task-row__main {
    display: grid;
    flex: 1 1 18rem;
    gap: var(--space-1);
    min-inline-size: 0;
  }

  .task-row__title {
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-body);
    letter-spacing: var(--letter-spacing-normal);
    overflow-wrap: anywhere;
  }

  .task-row__title a {
    text-decoration: none;
  }

  @media (hover: hover) and (pointer: fine) {
    .task-row__title a:hover {
      text-decoration: underline;
    }
  }

  .task-group {
    display: grid;
    gap: var(--space-2);
  }

  .task-group__title {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    color: var(--theme-meta-color);
    font-size: var(--font-size-label);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-ui);
    letter-spacing: var(--letter-spacing-normal);
  }

  .task-group__count {
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-regular);
  }
}