/* Tasks list (spec §5.5) — view-specific rules. Colours and sizes come from tokens.css; shared rules live in components.css / views.css. */

/* Head: h1 at left, search at right (desktop); the h1 is visually hidden on phones (the header shows the title). */
.tasks-page { display: flex; flex-direction: column; gap: var(--s4); }
.tasks-head { align-items: center; margin-bottom: 0; }
.tasks-head .page-actions { flex: 1 1 auto; justify-content: flex-end; }
.tasks-search { width: 100%; }
.tasks-search .field { width: 100%; }
.tasks-search input[type="search"] { width: 100%; }

/* The sticky scope/chip block is a direct child of .tasks-page so it can stick for the whole list (sticky only travels inside its parent). */
.tasks-page > .tasks-sticky { margin-top: 0; }
/* Chips: context chips (removable) and status chips share one block so they scroll together on phones. */
.tasks-chips .ctx-row .chip.ctx .i { color: inherit; }

/* Verification cards (spec §5.4 compact variant) */
.verify-card .vc-title .tag { margin-left: 6px; vertical-align: middle; }
.verify-card .vc-warn { display: inline-flex; align-items: center; gap: 6px; font: var(--t-sm); color: var(--warning-700); font-weight: 700; }
.verify-card .vc-warn .i { color: var(--warning-700); }

/* Finished tasks collapsed under the time groups */
.finished-toggle .i { color: var(--text-3); }

@media (min-width: 720px) {
  /* Inline search: 240px, expands to 360px while focused (spec §5.5 desktop 1). */
  .tasks-search { width: 240px; transition: width .15s ease; }
  .tasks-search:focus-within { width: 360px; }
  /* Desktop: chips wrap; context chips sit on their own row under the status chips. */
  .tasks-chips.chip-scroll { overflow: visible; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s2); }
  .tasks-chips .chip-row { flex-wrap: wrap; width: auto; }
  .tasks-chips .ctx-row { order: 2; }
}

@media (max-width: 719px) {
  /* The search field is revealed by the 44px header icon (or "/"), or when the hash already carries q. */
  .tasks-search:not(.open) { display: none; }
  .tasks-head { margin-bottom: 0; }
  .tasks-head:has(.tasks-search:not(.open)) { display: none; }
  /* One horizontal scroll row: context chips first, then status chips (spec §5.5 phone 4). */
  .tasks-chips.chip-scroll { display: flex; gap: var(--s2); align-items: center; }
  .tasks-chips .chip-row { flex: 0 0 auto; }
  /* Time-group eyebrows stick just below the sticky scope/chip block (36px, --bg background; spec §4.10). */
  .tasks-page .section-head.sticky { top: calc(var(--header-h-phone) + var(--safe-top) + 3px + var(--tasks-sticky-h, 0px)); min-height: 36px; }
  .verify-card .vc-actions .btn { height: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  .tasks-search { transition: none; }
}