/* ============================================================================
   Tasks page (/tasks, /garden/{key}/tasks)
   One agenda surface: band header (search · filters · New task) + TasksList.razor
   (timeline / by-plant / stage views over the open tasks).
   ============================================================================ */

:root {
  --gsf-tasks-surface: rgba(20, 28, 22, 0.85);
  --gsf-tasks-surface-2: rgba(28, 38, 30, 0.65);
  --gsf-tasks-border: rgba(255, 255, 255, 0.08);
  --gsf-tasks-border-strong: rgba(255, 255, 255, 0.16);
  --gsf-tasks-text-faint: rgba(255, 255, 255, 0.55);
  --gsf-tasks-text-mute: rgba(255, 255, 255, 0.72);
  --gsf-tasks-accent: var(--gsf-green-400, #5cd07a);
  --gsf-tasks-danger: #e15858;
  --gsf-tasks-warn: #e6a23c;
  --gsf-tasks-radius: 14px;
  --gsf-tasks-radius-sm: 10px;
}

/* ---------- "Growing now" ambient header line ---------- */

.gsf-tasks-signals {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  margin-top: 0.45rem;
  font-size: 0.8rem;
  color: var(--gsf-tasks-text-faint);
}
.gsf-tasks-signals i { color: var(--gsf-tasks-accent); font-size: 0.78rem; }

/* ---------- List frame ---------- */

.gsf-tasks-list {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin-top: 1.1rem;
}

/* Full container width — the same discipline as Garden/Calendar/Log. */

/* Count badge next to list/section titles */
.gsf-tasks-section-sub {
  font-weight: 500;
  font-size: 0.78rem;
  color: var(--gsf-tasks-text-faint);
  margin-left: 0.35rem;
}

.gsf-tasks-linkbtn {
  background: transparent;
  border: 0;
  color: var(--gsf-tasks-text-faint);
  font-size: 0.8rem;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.15rem 0.35rem;
  border-radius: 6px;
  cursor: pointer;
}
.gsf-tasks-linkbtn:hover { color: #fff; background: var(--gsf-tasks-border); }

/* ---------- "You're clear" resting strip ---------- */

.gsf-tasks-clear {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.7rem 0.95rem;
  border-radius: var(--gsf-tasks-radius);
  border: 1px dashed var(--gsf-tasks-border-strong);
  color: var(--gsf-tasks-text-mute);
  font-size: 0.88rem;
  font-weight: 600;
}
.gsf-tasks-clear i { color: var(--gsf-tasks-accent); }
.gsf-tasks-clear__next { color: var(--gsf-tasks-text-faint); font-weight: 500; }
.gsf-tasks-clear__next strong { color: var(--gsf-tasks-text-mute); font-weight: 700; }

/* ---------- Row layout (compact, ~40px) ---------- */

.gsf-tasks-rows {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.gsf-tasks-row {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 0.65rem;
  align-items: center;
  background: var(--gsf-tasks-surface-2);
  border: 1px solid var(--gsf-tasks-border);
  border-radius: var(--gsf-tasks-radius-sm);
  padding: 0.4rem 0.6rem 0.4rem 0.45rem;
  min-height: 40px;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
  position: relative;
}

.gsf-tasks-row:hover {
  background: rgba(40, 55, 42, 0.85);
  border-color: var(--gsf-tasks-border-strong);
}

.gsf-tasks-row:focus-visible {
  outline: 2px solid var(--gsf-tasks-accent);
  outline-offset: 1px;
}

/* Date / icon cell (leading) */

.gsf-tasks-row-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gsf-tasks-text-mute);
  line-height: 1.05;
  text-align: center;
  font-variant-numeric: tabular-nums;
  padding: 0.1rem 0.25rem;
  border-right: 1px solid var(--gsf-tasks-border);
  height: 100%;
}

/* Body */

.gsf-tasks-row-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.gsf-tasks-row-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gsf-tasks-row-sub {
  font-size: 0.8rem;
  color: var(--gsf-tasks-text-faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Meta (right side: pin, ×N, complete button) */

.gsf-tasks-row-meta {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.gsf-tasks-row-pin {
  color: var(--gsf-tasks-warn);
  font-size: 0.85rem;
}

.gsf-tasks-row-pill {
  font-size: 0.75rem;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--gsf-tasks-border);
  color: var(--gsf-tasks-text-mute);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.gsf-tasks-row-pill--focus {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  border: 1px solid rgba(251, 191, 36, 0.32);
  background: rgba(251, 191, 36, 0.12);
  color: #fde68a;
  font-weight: 800;
}

.gsf-tasks-row-complete {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 1px solid var(--gsf-tasks-border-strong);
  background: rgba(92, 208, 122, 0.10);
  color: var(--gsf-tasks-accent);
  font-size: 0.95rem;
  cursor: pointer;
  transition: background 120ms ease;
}
.gsf-tasks-row-complete:hover { background: rgba(92, 208, 122, 0.25); }
.gsf-tasks-row-complete:focus-visible {
  outline: 2px solid var(--gsf-tasks-accent);
  outline-offset: 2px;
}

/* Snooze / skip: same footprint as the complete button, but neutral so the
   green check stays the row's one primary action. */
.gsf-tasks-row-snooze,
.gsf-tasks-row-skip {
  background: rgba(255, 255, 255, 0.04);
  color: var(--gsf-tasks-text-faint);
}
.gsf-tasks-row-snooze:hover { background: rgba(230, 162, 60, 0.22); color: #fde68a; }
.gsf-tasks-row-skip:hover { background: rgba(255, 255, 255, 0.14); color: #fff; }

/* ---------- Snooze menu (clock button → Tomorrow / +3 days / Next week / date) ---------- */

.gsf-tasks-snooze-wrap { position: relative; display: inline-flex; }

.gsf-tasks-snoozemenu-backdrop {
  position: fixed;
  inset: 0;
  z-index: 48;
  background: transparent;
}

.gsf-tasks-snoozemenu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 50;
  width: 200px;
  padding: 6px;
  border-radius: 12px;
  border: 1px solid var(--gsf-tasks-border-strong);
  background: #1c2620;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.45);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.gsf-tasks-snoozemenu > button {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--gsf-tasks-text-mute);
  font-size: 0.84rem;
  font-weight: 650;
  text-align: left;
  cursor: pointer;
}
.gsf-tasks-snoozemenu > button span {
  color: var(--gsf-tasks-text-faint);
  font-size: 0.74rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.gsf-tasks-snoozemenu > button:hover,
.gsf-tasks-snoozemenu > button:focus-visible {
  background: rgba(230, 162, 60, 0.16);
  color: #fde68a;
}

.gsf-tasks-snoozemenu__date {
  display: grid;
  gap: 4px;
  padding: 8px 10px 6px;
  margin-top: 2px;
  border-top: 1px dashed var(--gsf-tasks-border);
}
.gsf-tasks-snoozemenu__date span {
  color: var(--gsf-tasks-text-faint);
  font-size: 0.72rem;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.gsf-tasks-snoozemenu__date input {
  min-height: 34px;
  border-radius: 8px;
  border: 1px solid var(--gsf-tasks-border-strong);
  background: rgba(0, 0, 0, 0.25);
  color: var(--gsf-tasks-text-mute);
  padding: 4px 8px;
  font-size: 0.82rem;
  color-scheme: dark;
}

/* State variants */

.gsf-tasks-row.is-overdue { border-left: 3px solid var(--gsf-tasks-danger); }
/* Lighter than the raw danger token — #e15858 sat at ~4.5:1 on the row surface. */
.gsf-tasks-row.is-overdue .gsf-tasks-row-date { color: hsl(6 88% 74%); }
.gsf-tasks-row.is-completed { opacity: 0.55; }
.gsf-tasks-row.is-completed .gsf-tasks-row-title { text-decoration: line-through; }

/* ---------- Swipe-to-act: right = complete, left = snooze ---------- */

.gsf-tasks-swipe {
  position: relative;
  border-radius: var(--gsf-tasks-radius-sm);
  overflow: hidden;
  touch-action: pan-y;
}

/* While a row's snooze menu is open, lift the clip (the menu hangs below the row)
   and float the row above its siblings. Swipe visuals are dormant (opacity 0). */
.gsf-tasks-swipe.has-menu {
  overflow: visible;
  z-index: 60;
}

.gsf-tasks-swipe .gsf-tasks-row {
  position: relative;
  z-index: 1;
}

.gsf-tasks-swipe:not(.is-swiping) .gsf-tasks-row {
  transition: transform 180ms ease;
}

/* While dragging, make the row opaque so the action layer only shows in the gap it opens */
.gsf-tasks-swipe.is-swiping .gsf-tasks-row {
  background-color: #18211b;
}

.gsf-tasks-swipe__action {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0 20px;
  font-weight: 800;
  font-size: 0.86rem;
  letter-spacing: 0.02em;
  opacity: 0;
  pointer-events: none;
  z-index: 0;
}

.gsf-tasks-swipe__action i { font-size: 1.1rem; }

.gsf-tasks-swipe__action--complete {
  justify-content: flex-start;
  background: linear-gradient(90deg, rgba(53, 195, 107, 0.96), rgba(53, 195, 107, 0.30));
  color: #062611;
}

.gsf-tasks-swipe__action--snooze {
  justify-content: flex-end;
  background: linear-gradient(270deg, rgba(230, 162, 60, 0.96), rgba(230, 162, 60, 0.28));
  color: #2a1c05;
}

.gsf-tasks-swipe.is-right .gsf-tasks-swipe__action--complete,
.gsf-tasks-swipe.is-left .gsf-tasks-swipe__action--snooze {
  opacity: 1;
}

.gsf-tasks-swipe.is-armed .gsf-tasks-swipe__action--complete,
.gsf-tasks-swipe.is-armed .gsf-tasks-swipe__action--snooze {
  font-size: 0.96rem;
}

/* ---------- Header control row (search + filters; view tabs are GsfSegmented) ---------- */

/* One row at every size: search does the flexing (shrinks first), funnel and
   New task keep their width — wrap here would drop the primary action onto a
   second line inside the pinned band. */
.gsf-tasks-headctl {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  justify-content: flex-end;
  min-width: 0;
}

.gsf-tasks-headctl__filters {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}

/* Keep the whole control cluster on one line next to the view tabs: long planting
   labels would otherwise inflate the selects until the cluster wraps. */
.gsf-tasks-headctl .gsf-ctl-search { flex: 0 1 220px; }
.gsf-tasks-headctl .gsf-ctl-select { max-width: 180px; }

/* Primary "New task" rides the band next to the funnel (same convention as
   /garden's Add plant in .gsf-gp-headctl): search does the flexing, funnel and
   New task stay auto-width, and everything shares the row's 36px control height. */
.gsf-tasks-headctl .gsf-tasks-headctl__new {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* Phone-only disclosure for the filter selects */
.gsf-tasks-mobile-filter-toggle { display: none; }

.gsf-tasks-mobile-filter-count {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  border-radius: 999px;
  background: rgba(92, 208, 122, 0.22);
  color: #d9ffe1;
  font-size: 0.68rem;
  font-weight: 900;
}

.gsf-tasks-filter-clear {
  background: transparent;
  border: 1px solid var(--gsf-tasks-border);
  color: var(--gsf-tasks-text-faint);
  font-size: 0.78rem;
  font-weight: 650;
  min-height: 36px;
  padding: 5px 10px;
  border-radius: 8px;
  cursor: pointer;
}
.gsf-tasks-filter-clear:hover,
.gsf-tasks-filter-clear:focus-visible {
  color: #fff;
  border-color: var(--gsf-tasks-border-strong);
}

@media (max-width: 767.98px) {
  .gsf-tasks-headctl {
    width: 100%;
    justify-content: stretch;
  }

  .gsf-tasks-headctl .gsf-ctl-search {
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
  }

  .gsf-tasks-mobile-filter-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 40px;
    padding: 5px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.78rem;
    font-weight: 750;
  }

  .gsf-tasks-headctl__filters { display: none; }
  .gsf-tasks-headctl__filters.is-open {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
    width: 100%;
  }
  .gsf-tasks-headctl__filters .gsf-ctl-select { max-width: none; width: 100%; }
}

/* ---------- Group headers (plant or timeline day) ---------- */

.gsf-tasks-group {
  background: var(--gsf-tasks-surface);
  border: 1px solid var(--gsf-tasks-border);
  border-radius: var(--gsf-tasks-radius);
  overflow: hidden;
}

.gsf-tasks-group + .gsf-tasks-group { margin-top: 0.6rem; }

.gsf-tasks-group-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.85rem;
  cursor: pointer;
  user-select: none;
  background: transparent;
  border: 0;
  width: 100%;
  text-align: left;
  color: inherit;
}
.gsf-tasks-group-head:hover { background: rgba(255, 255, 255, 0.03); }

/* Urgent groups: red left stripe (matches rows/banner), no fill wash. */
.gsf-tasks-group--urgent {
  border-left: 3px solid var(--gsf-tasks-danger);
}

.gsf-tasks-group-chevron {
  font-size: 0.8rem;
  color: var(--gsf-tasks-text-faint);
  transition: transform 150ms ease;
}
.gsf-tasks-group.is-collapsed .gsf-tasks-group-chevron {
  transform: rotate(-90deg);
}

/* Shrink + ellipsis instead of exploding the header into three wrapped lines when a
   garden/plant name is long ("Test Garden Long garden name test - garden tasks"). */
.gsf-tasks-group-name {
  font-weight: 700;
  font-size: 0.97rem;
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gsf-tasks-group-meta {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--gsf-tasks-text-faint);
  font-size: 0.8rem;
  flex: 1 1 auto;
}

.gsf-tasks-group-overdue {
  background: rgba(225, 88, 88, 0.14);
  /* Lightened from the raw danger red — 3.94:1 on this pill bg failed AA. */
  color: hsl(6 90% 76%);
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 700;
  white-space: nowrap;
}

.gsf-tasks-group-action {
  background: rgba(92, 208, 122, 0.10);
  color: var(--gsf-tasks-accent);
  border: 1px solid rgba(92, 208, 122, 0.30);
  font-size: 0.74rem;
  padding: 0.2rem 0.55rem;
  border-radius: 7px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}
.gsf-tasks-group-action:hover { background: rgba(92, 208, 122, 0.22); }
.gsf-tasks-group-action:disabled { opacity: 0.5; cursor: default; }

/* Never offer "Complete all" on a collapsed group — bulk-completing tasks you can't
   see is a footgun; expanding the group reveals the action. */
.gsf-tasks-group.is-collapsed .gsf-tasks-group-action { display: none; }

.gsf-tasks-group-head:focus-visible {
  outline: 2px solid var(--gsf-tasks-accent);
  outline-offset: -2px;
}

.gsf-tasks-group-body {
  padding: 0.45rem 0.6rem 0.6rem;
  border-top: 1px solid var(--gsf-tasks-border);
}

.gsf-tasks-group.is-collapsed .gsf-tasks-group-body { display: none; }

/* ---------- Recently completed disclosure ---------- */

.gsf-tasks-recent {
  background: transparent;
  border: 1px dashed var(--gsf-tasks-border);
  border-radius: var(--gsf-tasks-radius);
  padding: 0.5rem 0.85rem;
}

.gsf-tasks-recent-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--gsf-tasks-text-faint);
  background: transparent;
  border: 0;
  width: 100%;
  text-align: left;
  padding: 0.15rem 0;
  cursor: pointer;
}
.gsf-tasks-recent-head:hover { color: #fff; }

.gsf-tasks-recent-body {
  margin-top: 0.55rem;
}

.gsf-tasks-recent.is-collapsed .gsf-tasks-recent-body { display: none; }

/* ---------- Empty states ---------- */

.gsf-tasks-empty {
  text-align: center;
  padding: 1.5rem 1rem;
  color: var(--gsf-tasks-text-faint);
}
.gsf-tasks-empty i { font-size: 1.6rem; display: block; margin-bottom: 0.4rem; opacity: 0.7; }

.gsf-task-completion-toast {
  position: sticky;
  /* --gsf-mobile-sticky-top is the app-wide token (app.css:96). This rule used to
     read --gsf-sticky-top, which is defined nowhere, so it always fell back to
     72px and pinned the notice underneath the header band. */
  top: calc(var(--gsf-mobile-sticky-top) + 8px);
  z-index: 30;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  width: fit-content;
  max-width: min(520px, 100%);
  margin: 0 0 0.75rem;
  padding: 0.65rem 0.85rem;
  border-radius: 999px;
  border: 1px solid rgba(92, 208, 122, 0.42);
  background: rgba(13, 45, 25, 0.96);
  color: #e8ffec;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  font-size: 0.88rem;
  font-weight: 800;
}

/* Skip variant: neutral chrome (nothing was accomplished), with inline Undo. */
.gsf-task-skip-toast {
  border-color: var(--gsf-tasks-border-strong);
  background: rgba(24, 32, 26, 0.97);
  color: var(--gsf-tasks-text-mute);
}
.gsf-task-skip-toast i { color: var(--gsf-tasks-text-faint); }
.gsf-task-skip-toast .gsf-btn { margin-left: 0.2rem; }

.gsf-task-completion-toast i {
  color: var(--gsf-tasks-accent, #5cd07a);
  font-size: 1.05rem;
}

@media (max-width: 767.98px) {
  /* The m4 header band pins at (--gsf-mobile-sticky-top - 42px) and is ~135px
     of rows, so its bottom edge is ~173px. It is opaque and sits at z-index
     1010: anything beneath it is invisible AND swallows taps meant for Undo.
     Sit below it, and stack above it so a taller band can never bury the only
     undo affordance again. */
  .gsf-task-completion-toast {
    top: calc(var(--gsf-mobile-sticky-top) - 42px + 135px + 8px);
    z-index: 1011;
    /* icon + message + Undo + Change date + dismiss cannot fit one 375px row */
    flex-wrap: wrap;
    width: 100%;
    max-width: 100%;
    border-radius: 14px;
  }
  .gsf-task-completion-toast > span {
    flex: 1 1 100%;
    min-width: 0;
  }
}

/* ---------- Skeleton (reuse calendar's pattern) ---------- */

.gsf-cal2-skeleton {
  background: linear-gradient(90deg, rgba(255,255,255,0.04), rgba(255,255,255,0.10), rgba(255,255,255,0.04));
  background-size: 200% 100%;
  animation: gsf-tasks-shimmer 1.4s ease-in-out infinite;
  border-radius: var(--gsf-tasks-radius);
}
@keyframes gsf-tasks-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ============================================================================
   Task modal — Garden-style sectioned form
   ============================================================================ */

.gsf-task-modal-form {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.gsf-task-modal-context {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  padding: 0.2rem 0.1rem 0.5rem;
}

.gsf-field-error {
  margin-top: 0.35rem;
  color: #ffb4b4;
  font-size: 0.8rem;
  font-weight: 650;
}

.gsf-task-modal-scope {
  padding: 0.65rem 0.75rem;
  border-radius: 10px;
  border: 1px solid rgba(92, 208, 122, 0.22);
  background: rgba(92, 208, 122, 0.08);
}

.gsf-task-modal-scope__title {
  color: rgba(245, 255, 246, 0.95);
  font-size: 0.86rem;
  font-weight: 800;
}

.gsf-task-modal-scope__text {
  margin-top: 0.1rem;
  color: rgba(255, 255, 255, 0.58);
  font-size: 0.78rem;
}

/* ============================================================================
   Task form field system — bespoke, mirrors the harvest basket form quality bar
   (stacked accent-icon labels · one input token · one button language)
   ============================================================================ */

.gsf-task-modal-section.gsf-card-soft--dense {
  padding: 16px !important;
}

.gsf-task-modal-section__head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.9rem;
}
.gsf-task-modal-section__hint {
  color: rgba(255, 255, 255, 0.45);
  font-size: 0.76rem;
}

.gsf-tf-stack { display: grid; gap: 14px; }

.gsf-tf-field {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.gsf-tf-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.gsf-tf-label i { color: var(--gsf-tasks-accent, #5cd07a); font-size: 0.9rem; }
.gsf-tf-label .gsf-tf-req { color: #ff9f9f; }
.gsf-tf-label .gsf-tf-opt {
  margin-left: auto;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  color: rgba(255, 255, 255, 0.4);
}

.gsf-tf-input {
  width: 100%;
  min-height: 42px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.22);
  color: rgba(255, 255, 255, 0.92);
  padding: 9px 12px;
  font-size: 0.9rem;
  color-scheme: dark;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.gsf-tf-input::placeholder { color: rgba(255, 255, 255, 0.4); }
.gsf-tf-input:focus,
.gsf-tf-input:focus-visible {
  outline: none;
  border-color: rgba(92, 208, 122, 0.6);
  box-shadow: 0 0 0 3px rgba(92, 208, 122, 0.18);
}
.gsf-tf-input.is-invalid {
  border-color: rgba(225, 88, 88, 0.65);
  box-shadow: 0 0 0 3px rgba(225, 88, 88, 0.15);
}
.gsf-tf-input--textarea { min-height: 84px; resize: vertical; line-height: 1.5; }
/* Option colors come from the global dark select rules in app.css. */
select.gsf-tf-input { cursor: pointer; }
.gsf-tf-input[type="date"] { cursor: pointer; }
.gsf-tf-input[type="date"]::-webkit-calendar-picker-indicator { opacity: 0.75; cursor: pointer; }

.gsf-tf-help {
  color: rgba(255, 255, 255, 0.45);
  font-size: 0.76rem;
  margin-top: 2px;
}

/* Green variant: surfaces a quiet positive side effect (journal-on-complete). */
.gsf-tf-help--ok {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: rgba(170, 236, 190, 0.78);
  margin-top: 6px;
}
.gsf-tf-help--ok i { font-size: 0.85rem; }

/* Dashed hairline between the What / Where / When groups inside the one form card. */
.gsf-task-modal-rule {
  border: 0;
  border-top: 1px dashed rgba(255, 255, 255, 0.1);
  margin: 2px 0;
}

/* Collapsed disclosure rows ("+ Add note") — card-shaped ghost buttons. */
.gsf-task-modal-collapsed {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  padding: 10px 16px;
  border-radius: 14px;
  border: 1px dashed rgba(255, 255, 255, 0.16);
  background: transparent;
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.85rem;
  font-weight: 650;
  text-align: left;
  cursor: pointer;
  transition: border-color 120ms ease, color 120ms ease;
}
.gsf-task-modal-collapsed:hover,
.gsf-task-modal-collapsed:focus-visible {
  border-color: rgba(92, 208, 122, 0.4);
  color: rgba(255, 255, 255, 0.85);
}
.gsf-task-modal-collapsed i { color: var(--gsf-tasks-accent, #5cd07a); }

/* "Every N days" row for the custom repeat interval. */
.gsf-task-modal-repeat-custom {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

/* One button language for quick-picks (dates, recurrence) */
.gsf-tf-chiprow {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.gsf-tf-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 34px;
  padding: 4px 13px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease, color 120ms ease;
}
.gsf-tf-chip:hover:not(:disabled) { border-color: rgba(92, 208, 122, 0.4); color: #fff; }
.gsf-tf-chip.is-active {
  border-color: rgba(92, 208, 122, 0.55);
  background: rgba(92, 208, 122, 0.16);
  color: rgba(237, 255, 241, 0.98);
}
.gsf-tf-chip--ghost { border-style: dashed; color: rgba(255, 255, 255, 0.55); }
.gsf-tf-chip:disabled { opacity: 0.5; cursor: default; }

/* Inline checkbox row */
.gsf-tf-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.86rem;
  cursor: pointer;
}
.gsf-tf-check input {
  width: 18px; height: 18px;
  accent-color: var(--gsf-accent, #35c36b);
  cursor: pointer;
}

/* Attachment dropzone + thumbnails (mirrors harvest upload) */
.gsf-tf-drop {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border-radius: 12px;
  border: 1px dashed rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.03);
}
.gsf-tf-drop:hover { border-color: rgba(92, 208, 122, 0.4); }
.gsf-tf-drop input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.gsf-tf-drop__icon {
  width: 40px; height: 40px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 10px;
  background: rgba(92, 208, 122, 0.14);
  color: var(--gsf-tasks-accent, #5cd07a);
  font-size: 1.2rem;
}
.gsf-tf-drop__copy strong { display: block; color: #fff; font-size: 0.88rem; font-weight: 700; }
.gsf-tf-drop__copy span { color: rgba(255, 255, 255, 0.5); font-size: 0.76rem; }

.gsf-tf-thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.gsf-tf-thumb {
  position: relative;
  width: 64px; height: 64px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.gsf-tf-thumb img { width: 100%; height: 100%; object-fit: cover; }
.gsf-tf-thumb__file {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.6);
}
.gsf-tf-thumb__del {
  position: absolute; top: 2px; right: 2px;
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 6px; border: 0;
  background: rgba(0, 0, 0, 0.62); color: #ffd9d9;
  cursor: pointer; font-size: 0.75rem;
}

@media (max-width: 575.98px) {
  /* 16px keeps iOS from zooming on focus */
  .gsf-tf-input { min-height: 44px; font-size: 16px; }
}

/* Green pill matching the Garden modal's "Step 1" pill */
.gsf-task-modal-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 2px 10px;
  border-radius: 999px;
  background: rgba(92, 208, 122, 0.14);
  border: 1px solid rgba(92, 208, 122, 0.30);
  color: var(--gsf-tasks-accent, #5cd07a);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Advanced disclosure */
.gsf-task-modal-advanced__toggle {
  display: flex;
  align-items: center;
  width: 100%;
  background: transparent;
  border: 0;
  padding: 0;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.gsf-task-modal-advanced.is-open .gsf-task-modal-advanced__toggle { margin-bottom: 0.85rem; }

.gsf-task-modal-advanced__body {
  display: flex;
  flex-direction: column;
  gap: 0.95rem;
  padding-top: 0.35rem;
  border-top: 1px dashed rgba(255, 255, 255, 0.08);
}

.gsf-task-modal-subgroup { }

.gsf-task-modal-subgroup__title {
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 0.5rem;
}

/* Sticky footer for the task modal (rendered by ToDoList/Log in StickyActions slot).
   Actions only — the modal header owns the context. */
.gsf-tasks-modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  width: 100%;
}
.gsf-tasks-modal-footer__actions {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  flex: 0 0 auto;
}

.gsf-tasks-modal-footer__delete {
  color: #ffd9d9;
  border-color: rgba(225, 88, 88, 0.45);
}

.gsf-tasks-modal-footer__delete:hover,
.gsf-tasks-modal-footer__delete:focus-visible {
  color: #fff;
  background: rgba(225, 88, 88, 0.18);
  border-color: rgba(225, 88, 88, 0.75);
}

@media (max-width: 575.98px) {
  /* The actions row takes the full width and cannot shrink, so the context
     sibling has to wrap onto its own line above it — otherwise flex-end
     packing pushes it off the left edge, where it is clipped by .gsf-fsm. */
  .gsf-tasks-modal-footer { flex-wrap: wrap; }
  .gsf-tasks-modal-footer__context { flex: 1 1 100%; min-width: 0; }
  .gsf-tasks-modal-footer__context:empty { display: none; }
  .gsf-tasks-modal-footer__actions { width: 100%; justify-content: space-between; flex-wrap: wrap; }
  .gsf-tasks-modal-footer__actions > button {
    min-height: 44px;
    flex: 1 1 30%;
  }

  /* Delete sat between Cancel and the primary Save with 6px either side —
     an irreversible action one thumb-width from the button you actually want.
     Drop it onto its own row underneath, away from the primary. */
  .gsf-tasks-modal-footer__delete {
    order: 10;
    flex: 1 1 100%;
    margin-top: 6px;
  }
}

/* ---------- Responsive ---------- */

/* Phone — header chrome is owned by the shared m4 rules in app.css (eyebrow and
   subtitle collapse, nowrap title row); the old per-page overrides that wrapped
   the title row and stretched the context cell broke the m4 layout and are gone. */
@media (max-width: 575.98px) {
  /* The "Growing now" line stays quiet under the header */
  .gsf-tasks-signals { font-size: 0.75rem; }

  /* Rows */
  .gsf-tasks-row {
    grid-template-columns: 48px 1fr auto;
    padding: 0.45rem 0.5rem 0.45rem 0.4rem;
    min-height: 48px;
  }
  .gsf-tasks-row-date { font-size: 0.78rem; padding: 0.1rem 0.15rem; }
  .gsf-tasks-row-title { font-size: 0.95rem; }
  .gsf-tasks-row-sub { font-size: 0.8rem; }

  /* Phones: the task title wins the width fight — the stage pill was crushing titles
     to one word ("Continue h..."). The stage still shows in the edit sheet. */
  .gsf-tasks-row-pill--stage { display: none; }

  /* Beefier touch targets on mobile */
  .gsf-tasks-row-complete { width: 44px; height: 44px; font-size: 1.1rem; }
  .gsf-tasks-row-meta { gap: 0.35rem; }

  /* Swipe-left already snoozes on touch; the snooze button + menu are the desktop
     affordance (the wrap hides so no empty flex slot remains). */
  .gsf-tasks-snooze-wrap { display: none; }

  /* Group heads — let "Complete all" sit below on its own line if needed.
     flex-basis 0 (not auto) so a long garden/plant name shrinks to ellipsis on the
     header line instead of wrapping the head into a three-line block. */
  .gsf-tasks-group-head { flex-wrap: wrap; }
  .gsf-tasks-group-name { flex: 1 1 0; }
  .gsf-tasks-group-meta { flex: 0 0 auto; }
  .gsf-tasks-group-action { width: 100%; justify-content: center; margin-top: 0.25rem; }
}