/* Card columns respond to the list's available width, including dashboard rails. */
.task-list.task-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); align-items: stretch; gap: 12px; }
.task-card-grid > .task-tree-node { min-width: 0; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.task-card-grid > .task-tree-node:focus-within { border-color: var(--accent); }
.task-card-grid > .task-tree-node > .task-row:is(.schedule-task, .project-task) { min-height: 104px; margin: 0; padding: 14px; border: 0; border-radius: var(--radius); background: transparent; grid-template-columns: 21px minmax(0, 1fr) auto; }
.task-card-grid > .task-tree-node:not(:has(> .task-tree-children)) > .task-row { height: 100%; }
.task-card-grid .task-title { line-height: 1.5; overflow-wrap: anywhere; }
.task-card-grid .task-meta { margin-top: 7px; gap: 5px 8px; }
.task-card-grid .task-row-actions { align-self: start; }
/* A parent and its descendants stay together, spanning the card grid. */
.task-card-grid > .task-tree-node:has(> .task-tree-children) { grid-column: 1 / -1; }
.task-card-grid > .task-tree-node:has(> .task-tree-children) > .task-row { min-height: 0; }
.task-card-grid > .task-tree-node > .task-tree-children { margin: 0 14px 14px 24px; padding-left: 12px; gap: 8px; border-left: 1px solid var(--border-strong); }
.task-card-grid .task-tree-children > .task-tree-node > .task-row:is(.schedule-task, .project-task) { margin: 0; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); }
.task-card-grid .task-tree-children .task-tree-children { margin-top: 8px; }
.task-card-grid > .time-block-group { background: var(--bg-soft); border-style: dashed; }
.task-card-grid > .time-block-group > .task-tree-children { border-left-color: var(--accent); }
.task-card-grid > .time-block-group > .task-tree-children > .task-tree-node > .task-row { background: var(--surface); }
.task-card-grid > :is(.schedule-date-heading, .schedule-block-heading, .empty) { grid-column: 1 / -1; }
.task-card-grid > .schedule-date-heading { margin: 8px 0 0; }
.task-card-grid > .schedule-block-heading { margin: 8px 0 0; padding-top: 12px; }
[data-appearance='paper'] .task-card-grid > .task-tree-node { box-shadow: 2px 2px 0 var(--bg-soft); }
[data-appearance='play'] .task-card-grid > .task-tree-node { border-color: var(--border-strong); box-shadow: 2px 2px 0 var(--border); }
@media (max-width: 600px) {
  .task-list.task-card-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .task-card-grid > .task-tree-node > .task-row:is(.schedule-task, .project-task) { min-height: 96px; padding: 12px; }
  .task-card-grid > .task-tree-node:has(> .task-tree-children) > .task-row { min-height: 0; }
  .task-card-grid > .task-tree-node > .task-tree-children { margin: 0 10px 12px 18px; padding-left: 8px; }
  .task-card-grid .task-tree-children > .task-tree-node > .task-row:is(.schedule-task, .project-task) { padding: 10px; }
}

.schedule-title-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
.schedule-title-row > h3 { margin: 0; }
.schedule-title-row + p { margin-top: 5px; }
.task-view-toggle { display: inline-flex; flex: none; align-items: center; gap: 2px; padding: 2px; border: 1px solid var(--border); border-radius: var(--button-radius); background: var(--surface-2); }
.task-view-toggle > button { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: max(3px, calc(var(--button-radius) - 2px)); background: transparent; color: var(--muted); cursor: pointer; }
.task-view-toggle > button[aria-pressed="true"] { background: var(--surface); color: var(--accent-text); }
@media (pointer: coarse), (max-width: 600px) {
  .task-view-toggle > button { width: 44px; height: 44px; }
}
.project-toolbar { flex-wrap: wrap; }
.project-toolbar .project-name { flex: 1 1 120px; width: auto; }