@layer screens {
  body#tasks_index {
    #main-content { padding-inline: var(--spacing-3); }

    /* ---- Status tabs: underline tabs (ink 3px underline on active) ---- */
    .task-tabs {
      width: 100%;
      overflow-x: auto;
    }

    .tabs-nav {
      display: flex;
      flex-wrap: wrap;
      gap: var(--spacing-1);
      border-block-end: var(--border-width) solid var(--border);
      padding: 0;
      margin: 0;
      list-style: none;
      width: 100%;
    }

    .tab-item { margin-block-end: -1px; }

    .tab-item a {
      display: inline-flex;
      align-items: center;
      gap: var(--spacing-2);
      min-height: var(--tap-min);
      padding-inline: var(--spacing-4);
      text-decoration: none;
      color: var(--text-muted);
      border-block-end: 3px solid transparent;
      transition: color var(--transition-fast), border-color var(--transition-fast);
    }

    .tab-item a:hover { color: var(--text); }

    .tab-item a:focus-visible {
      outline: 3px solid var(--focus-ring);
      outline-offset: -3px;
    }

    .tab-item.active a {
      color: var(--text);
      border-block-end-color: var(--border-strong);
      font-weight: var(--font-weight-bold);
    }

    .tab-count {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 1.5rem;
      padding: 0 var(--spacing-1);
      font-size: var(--font-size-xs);
      font-weight: var(--font-weight-bold);
      background: var(--gray-100);
      color: var(--text-muted);
    }

    .tab-item.active .tab-count {
      background: var(--accent);
      color: var(--on-accent);
    }

    /* ---- Card grid: 1-up mobile, kanban-style multi-column on desktop ---- */
    .tasks-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: var(--spacing-4);
      width: 100%;
    }

    @media (min-width: 600px) {
      .tasks-grid {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      }
    }

    .tasks-empty {
      padding: var(--spacing-8) var(--spacing-4);
      text-align: center;
      border: var(--border-width) solid var(--border);
      color: var(--text-subtle);
    }

    .tasks-empty p { margin: 0; }

    /* ---- Compact task card (ink-bordered) ---- */
    .index-task-card {
      display: flex;
      flex-direction: column;
      background: var(--surface);
      border: var(--border-width) solid var(--border-strong);
      margin: 0;
      overflow: visible;
    }

    .index-task-card__body {
      display: flex;
      flex-direction: column;
      gap: var(--spacing-3);
      padding: var(--spacing-4);
      text-decoration: none;
      color: var(--text);
    }

    .index-task-card__body:hover { background: var(--surface-sunken); }

    .index-task-card__body:focus-visible {
      outline: 3px solid var(--focus-ring);
      outline-offset: -3px;
    }

    .index-task-card__top {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: var(--spacing-3);
    }

    .index-task-card__title {
      margin: 0;
      font-size: var(--font-size-lg);
      font-weight: var(--font-weight-bold);
      line-height: var(--line-height-tight);
      color: var(--text);
    }

    .index-task-card__meta {
      margin: 0;
      font-size: var(--font-size-sm);
      color: var(--text-subtle);
      line-height: var(--line-height-base);
    }

    .index-task-card__meta .overdue {
      color: var(--text);
      font-weight: var(--font-weight-bold);
    }

    .index-task-card__assignee {
      display: flex;
      align-items: center;
      gap: var(--spacing-2);
    }

    .index-task-card__assignee-name {
      font-size: var(--font-size-sm);
      font-weight: var(--font-weight-medium);
      color: var(--text);
    }

    /* ---- Inline review / submission actions ---- */
    .index-task-card__actions {
      display: flex;
      flex-wrap: wrap;
      gap: var(--spacing-2);
      padding: var(--spacing-3) var(--spacing-4);
      border-block-start: var(--border-width) solid var(--border);
    }

    .index-task-card__actions .task-actions {
      display: flex;
      flex: 1 1 auto;
      gap: var(--spacing-2);
    }

    .index-task-card__actions .button { flex: 1 1 auto; }

    /* Colorblind-proof affordances matching the status convention */
    .index-task-card__actions .button--success::before {
      content: "✓";
      margin-inline-end: 0.4ch;
    }

    .index-task-card__actions .button--danger::before {
      content: "✕";
      margin-inline-end: 0.4ch;
    }
  }
}