.tasks-view {
  height: calc(100vh - 75px);
  padding: clamp(22px, 4vw, 52px);
  overflow: auto;
  background:
    linear-gradient(rgba(244, 232, 202, 0.73), rgba(225, 203, 158, 0.77)),
    url('/assets/images/parchment.png') center / 630px repeat;
}

.app-shell.tasks-active .search-box,
.app-shell.tasks-active .filter-control,
.app-shell.tasks-active .generation-filter,
.app-shell.tasks-active .share-button {
  display: none;
}

.tasks-shell {
  width: min(1060px, 100%);
  margin: 0 auto;
}

.tasks-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 22px;
  border-bottom: 1px solid rgba(92, 66, 29, 0.28);
}

.tasks-header h1 {
  margin: 1px 0 7px;
  font-family: var(--font-display);
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 500;
  line-height: 1;
}

.tasks-header p:not(.eyebrow) {
  max-width: 610px;
  margin: 0;
  color: var(--ink-soft);
  line-height: 1.45;
}

.tasks-add-button {
  flex: 0 0 auto;
  min-height: 44px;
  font-weight: 600;
}

.tasks-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 19px 0 16px;
}

.tasks-filters {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid rgba(91, 66, 31, 0.28);
  border-radius: 12px;
  background: rgba(255, 242, 207, 0.27);
}

.tasks-filters button {
  min-height: 34px;
  padding: 0 15px;
  border-radius: 8px;
  color: #59442b;
  background: transparent;
}

.tasks-filters button:hover,
.tasks-filters button.active {
  background: rgba(169, 127, 53, 0.23);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.28);
}

.tasks-filters button.active {
  color: #3f301e;
  font-weight: 600;
}

.tasks-total {
  color: #735d3d;
  font-size: 13px;
}

.tasks-list {
  display: grid;
  gap: 12px;
  padding-bottom: 40px;
}

.task-card {
  position: relative;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: start;
  min-height: 116px;
  padding: 18px 18px 17px 16px;
  border: 1px solid rgba(93, 67, 31, 0.34);
  border-left: 5px solid #9b7a43;
  border-radius: 14px;
  background:
    linear-gradient(rgba(246, 228, 187, 0.76), rgba(235, 211, 164, 0.8)),
    url('/assets/images/parchment.png') center / 500px;
  box-shadow: 0 6px 16px rgba(69, 49, 23, 0.12), inset 0 0 0 3px rgba(255, 243, 212, 0.17);
}

.task-card.priority-high { border-left-color: #a64e34; }
.task-card.priority-low { border-left-color: #697052; }
.task-card.overdue { box-shadow: 0 6px 18px rgba(116, 48, 31, 0.17), inset 0 0 0 3px rgba(255, 238, 201, 0.22); }
.task-card.completed { opacity: 0.72; }
.task-card.completed h2 { text-decoration: line-through; text-decoration-thickness: 1px; }

.task-toggle {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin: 1px auto 0;
  border: 2px solid rgba(92, 69, 34, 0.48);
  border-radius: 50%;
  color: #f8e9c2;
  background: rgba(255, 245, 218, 0.26);
}

.task-toggle:hover,
.completed .task-toggle {
  border-color: #67704e;
  background: #68704f;
}

.task-card-body { min-width: 0; }

.task-card h2 {
  margin: 0;
  overflow-wrap: anywhere;
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 500;
}

.task-card-body > p {
  margin: 7px 0 0;
  color: #655137;
  line-height: 1.42;
  overflow-wrap: anywhere;
  white-space: pre-line;
}

.task-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 13px;
}

.task-pill {
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  padding: 3px 9px;
  border: 1px solid rgba(95, 69, 31, 0.23);
  border-radius: 13px;
  color: #645036;
  font-size: 11px;
  line-height: 1.2;
  text-transform: capitalize;
  background: rgba(255, 243, 214, 0.32);
}

.task-pill.priority.high,
.task-pill.due.overdue { color: #873c2b; border-color: rgba(137, 57, 39, 0.36); background: rgba(165, 70, 48, 0.08); }
.task-pill.person::before { margin-right: 5px; content: '♧'; }

.task-actions {
  display: flex;
  gap: 5px;
}

.task-action {
  min-height: 32px;
  padding: 0 10px;
  border-radius: 8px;
  color: #5b472d;
  font-size: 12px;
  background: transparent;
}

.task-action:hover { background: rgba(130, 94, 43, 0.12); }
.task-action.task-delete { color: #7b4135; }
.task-action.confirming { color: #f8e9c2; background: #88483b; }

.tasks-empty {
  padding: clamp(42px, 8vw, 80px) 20px;
  border: 1px dashed rgba(92, 66, 29, 0.37);
  border-radius: 16px;
  text-align: center;
  background: rgba(250, 235, 198, 0.2);
}

.tasks-empty h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 500;
}

.tasks-empty p { margin: 9px auto 20px; color: var(--ink-soft); }
.tasks-message { padding: 48px 12px; color: var(--ink-soft); text-align: center; }
.tasks-message.error { color: #8d2f25; }

.task-dialog textarea {
  width: 100%;
  min-height: 112px;
  padding: 11px 13px;
  resize: vertical;
  border: 1px solid rgba(86, 63, 27, 0.38);
  border-radius: 9px;
  outline: none;
  color: inherit;
  font: inherit;
  line-height: 1.4;
  background: rgba(255, 248, 222, 0.58);
  box-shadow: inset 0 2px 4px rgba(71, 50, 23, 0.08);
}

.task-dialog textarea:focus,
.task-dialog select:focus {
  border-color: #9c762f;
  box-shadow: 0 0 0 3px rgba(156, 118, 47, 0.15);
}

@media (max-width: 700px) {
  .tasks-view { height: calc(100vh - 64px); padding: 24px 16px; }
  .tasks-header { align-items: stretch; flex-direction: column; gap: 17px; }
  .tasks-add-button { width: 100%; }
  .tasks-toolbar { align-items: stretch; flex-direction: column; }
  .tasks-filters { display: grid; grid-template-columns: repeat(3, 1fr); }
  .tasks-filters button { padding: 0 8px; }
  .tasks-total { padding-left: 4px; }
  .task-card { grid-template-columns: 34px minmax(0, 1fr); padding: 15px 14px 15px 10px; }
  .task-toggle { width: 28px; height: 28px; }
  .task-actions { grid-column: 2; justify-content: flex-end; }
  .task-action { border: 1px solid rgba(92, 66, 29, 0.2); }
}

@media (prefers-reduced-motion: reduce) {
  .task-card, .task-action, .task-toggle { scroll-behavior: auto; transition: none; }
}