.tasks-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: var(--space-8); }
@media (max-width: 900px) { .tasks-layout { grid-template-columns: 1fr; } }

.tasks-updates__header { display: flex; align-items: baseline; margin-bottom: var(--space-2); }
.tasks-updates__toggle { margin-left: auto; font-size: var(--text-sm); color: var(--color-text-muted); }
.task-event { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); row-gap: 2px;
  padding: var(--space-2) 0; border-bottom: 1px solid var(--color-border); font-size: var(--text-sm); }
.task-event:last-child { border-bottom: none; }
.task-event__title { font-weight: 600; }
.task-event__title--gone { color: var(--color-text-muted); }
.task-event__where { width: 100%; color: var(--color-text-muted); font-size: var(--text-sm); }
.task-event__dismiss-form { margin-left: auto; align-self: center; }
.task-event__dismiss { background: none; border: 1px solid var(--color-border);
  border-radius: var(--radius-pill); width: 18px; height: 18px; cursor: pointer;
  color: var(--color-text-muted); font-size: 10px; line-height: 1; padding: 0; display: block; }
.task-event__dismiss:hover { color: var(--color-danger); }
.task-event--read { opacity: .55; }

.tasks-rail { display: flex; flex-direction: column; gap: 2px; align-self: start; }
.tasks-rail__item { display: flex; align-items: baseline; gap: var(--space-2);
  padding: var(--space-2) var(--space-3); text-decoration: none;
  border: 1px solid transparent; border-radius: var(--radius-md); }
.tasks-rail__item:hover { border-color: var(--color-border); }
.tasks-rail__item--active { background: var(--color-surface); border-color: var(--color-border);
  box-shadow: var(--shadow-1); }
.tasks-rail__name { flex: 1; }
.tasks-rail__item .t-data { white-space: nowrap; }

.tasks-toolbar { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap;
  margin: 0 0 var(--space-4); }
.tasks-toolbar__sort { margin-left: auto; }
.filter-chips { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.filter-chip { padding: var(--space-1) var(--space-4); border-radius: var(--radius-pill);
  text-decoration: none; color: var(--color-text);
  border: var(--control-border-w) solid var(--color-border); background: var(--color-surface);
  transition: border-color 120ms ease, background-color 120ms ease, color 120ms ease; }
.filter-chip:hover { border-color: var(--color-text); }
.filter-chip--active { background: var(--color-text); border-color: var(--color-text);
  color: var(--color-primary-contrast); }

.tasks-pane__divider { display: flex; margin: var(--space-6) 0 var(--space-1); }
.tasks-pane__divider:first-of-type { margin-top: 0; }

.task-index-row { display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2) 0; border-bottom: 1px solid var(--color-border); }
.task-index-row__title { flex: 1; }
.task-index-row__title a { text-decoration: none; }
.task-index-row__title a:hover { text-decoration: underline; }
.task-index-row__room { white-space: nowrap; }
.task-index-row__date { white-space: nowrap; }
.task-index-row__date--overdue { color: var(--color-danger); }
.task-index-row__cost { min-width: var(--size-shopping-total-col); text-align: right; white-space: nowrap; }

.task-quick-form { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap;
  margin: 0 0 var(--space-4); padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border); }
.task-quick-form input[type="text"] { padding: var(--space-1) var(--space-3); }
.task-quick-form select { padding-block: var(--space-1); padding-left: var(--space-3); }
.task-quick-form input[name="task[title]"] { flex: 1; min-width: 10rem; }
.task-quick-form__cost { max-width: 9rem; }
.form-errors { margin: 0 0 var(--space-4); }

.task-index-row__inline-form { display: inline-flex; }
.badge--button { cursor: pointer; border: 1px solid transparent; }
.badge--button:hover { border-color: var(--color-text); }
.badge--button.badge--neutral { border-color: var(--color-border); }
.badge--button.badge--neutral:hover { border-color: var(--color-text); }

.task-index-row__action { text-decoration: none; color: var(--color-text-muted); }
.task-index-row__action:hover { color: var(--color-text); }
button.task-index-row__action { background: none; border: none; cursor: pointer;
  padding: 0; color: var(--color-text-muted); }
.task-index-row__action--danger:hover { color: var(--color-danger); }

@media (max-width: 700px) {
  .tasks-rail { display: flex; flex-direction: row; overflow-x: auto; gap: var(--space-2); padding-bottom: var(--space-2); }
  .tasks-rail__item { flex: 0 0 auto; display: inline-flex; align-items: center; gap: var(--space-2);
    white-space: nowrap; min-height: 44px;
    padding: var(--space-1) var(--space-4); border-radius: var(--radius-pill);
    border: var(--control-border-w) solid var(--color-border); }
  .tasks-rail__item .t-data { display: none; }
}