/* Life V324 — Figma-faithful desktop Tasks workspace + loading-state hardening.
   Desktop browser only. No rule in this file applies to Capacitor Android or mobile widths. */

@media (min-width: 1024px) {
  html:not(.capacitor-android) body.app-authed[data-active-route="tasks"] {
    --task-ref-topbar:68px;
    --task-ref-app-column:312px;
    --task-ref-sidebar-width:288px;
    --task-ref-task-nav:290px;
    --task-ref-gap:8px;
    --task-ref-canvas:#f5f7fa;
    --task-ref-surface:#fff;
    --task-ref-border:#e2e7ee;
    --task-ref-border-soft:#eef1f5;
    --task-ref-text:#191c22;
    --task-ref-muted:#7b8492;
    --task-ref-blue:#2f6fe4;
  }

  /* Figma proportions: navigation card + task navigator + one selected list. */
  html:not(.capacitor-android) body.app-authed[data-active-route="tasks"] #tasksPage .tasks-shell {
    grid-template-columns:290px minmax(0,1fr)!important;
    gap:8px!important;
    margin:18px 14px!important;
  }
  html:not(.capacitor-android) body.app-authed[data-active-route="tasks"] #tasksPage .tasks-desktop-nav,
  html:not(.capacitor-android) body.app-authed[data-active-route="tasks"] #tasksPage .tasks-list-card {
    border:1px solid var(--task-ref-border)!important;
    border-radius:13px!important;
    background:#fff!important;
    box-shadow:0 1px 2px rgba(15,23,42,.025)!important;
  }

  /* Left Tasks navigator closely follows the reference hierarchy. */
  html:not(.capacitor-android) body.app-authed[data-active-route="tasks"] #tasksPage .tasks-desktop-nav {
    padding:18px 22px 20px!important;
  }
  html:not(.capacitor-android) body.app-authed[data-active-route="tasks"] #tasksPage .tasks-desktop-brand {
    min-height:50px!important;margin-bottom:8px!important;
  }
  html:not(.capacitor-android) body.app-authed[data-active-route="tasks"] #tasksPage .tasks-desktop-create {
    height:46px!important;min-height:46px!important;margin:0 0 16px!important;border-radius:7px!important;
  }
  html:not(.capacitor-android) body.app-authed[data-active-route="tasks"] #tasksPage .tasks-desktop-search {
    height:42px!important;min-height:42px!important;margin-bottom:7px!important;border-radius:8px!important;
  }
  html:not(.capacitor-android) body.app-authed[data-active-route="tasks"] #tasksPage .tasks-desktop-nav-item {
    display:grid!important;grid-template-columns:24px minmax(0,1fr) auto!important;align-items:center!important;
    width:100%!important;height:46px!important;min-height:46px!important;padding:0 13px!important;border-radius:8px!important;text-align:left!important;
  }
  html:not(.capacitor-android) body.app-authed[data-active-route="tasks"] #tasksPage .tasks-desktop-nav-count {
    min-width:25px!important;height:24px!important;padding:0 7px!important;display:grid!important;place-items:center!important;
    border-radius:999px!important;background:#f2f4f7!important;color:#737d8b!important;font-size:.68rem!important;font-weight:760!important;
  }
  html:not(.capacitor-android) body.app-authed[data-active-route="tasks"] #tasksPage .tasks-desktop-nav-count.hidden {display:none!important;}
  html:not(.capacitor-android) body.app-authed[data-active-route="tasks"] #tasksPage .tasks-desktop-list-button {
    width:100%!important;grid-template-columns:14px minmax(0,1fr) auto!important;column-gap:4px!important;
  }

  /* Never present an unexplained blank list area while auth/cloud hydration runs. */
  html:not(.capacitor-android) body.app-authed[data-active-route="tasks"] #tasksPage .tasks-desktop-nav-loading {
    display:grid!important;gap:8px!important;padding:5px 8px 8px!important;
  }
  html:not(.capacitor-android) body.app-authed[data-active-route="tasks"] #tasksPage .tasks-desktop-nav-loading span {
    display:block!important;height:34px!important;border-radius:8px!important;
    background:linear-gradient(90deg,#f3f5f8 20%,#e9edf3 45%,#f3f5f8 70%)!important;background-size:220% 100%!important;
    animation:tasks-v324-shimmer 1.15s linear infinite!important;
  }
  @keyframes tasks-v324-shimmer {to{background-position:-220% 0}}

  /* Selected-list card header. */
  html:not(.capacitor-android) body.app-authed[data-active-route="tasks"] #tasksPage .tasks-list-card-header {
    flex:0 0 96px!important;height:96px!important;min-height:96px!important;padding:21px 30px 17px 31px!important;
  }
  html:not(.capacitor-android) body.app-authed[data-active-route="tasks"] #tasksPage #tasks-list-heading {
    font-size:1.42rem!important;font-weight:840!important;line-height:1.12!important;
  }
  html:not(.capacitor-android) body.app-authed[data-active-route="tasks"] #tasksPage .tasks-list-summary {
    display:block!important;margin:4px 0 0!important;color:#7d8694!important;font-size:.78rem!important;font-weight:520!important;
  }
  html:not(.capacitor-android) body.app-authed[data-active-route="tasks"] #tasksPage .tasks-reference-column-head {
    grid-template-columns:minmax(0,1fr) 140px 42px!important;height:45px!important;min-height:45px!important;padding:0 18px 0 64px!important;
  }

  /* Figma task rows: quiet separators, visible drag affordance, large click targets. */
  html:not(.capacitor-android) body.app-authed[data-active-route="tasks"] #tasksPage .task-row,
  html:not(.capacitor-android) body.app-authed[data-active-route="tasks"] #tasksPage .task-row:has(> .task-drag-handle:not(.hidden)) {
    min-height:66px!important;padding:9px 18px!important;grid-template-columns:26px 38px minmax(0,1fr) 42px!important;column-gap:7px!important;
    border-bottom:1px solid var(--task-ref-border-soft)!important;background:#fff!important;
  }
  html:not(.capacitor-android) body.app-authed[data-active-route="tasks"] #tasksPage .task-row:not(:has(> .task-drag-handle:not(.hidden)))::before {
    content:"⠿"!important;grid-column:1!important;align-self:center!important;justify-self:center!important;color:#9aa2ad!important;font-size:16px!important;line-height:1!important;
  }
  html:not(.capacitor-android) body.app-authed[data-active-route="tasks"] #tasksPage .task-row:hover {background:#fbfcfe!important;}
  html:not(.capacitor-android) body.app-authed[data-active-route="tasks"] #tasksPage .task-check {width:38px!important;height:38px!important;}
  html:not(.capacitor-android) body.app-authed[data-active-route="tasks"] #tasksPage .task-check-mark {width:24px!important;height:24px!important;border-width:1.8px!important;}
  html:not(.capacitor-android) body.app-authed[data-active-route="tasks"] #tasksPage .task-title {
    font-size:.86rem!important;font-weight:540!important;line-height:1.38!important;color:#232830!important;
  }
  html:not(.capacitor-android) body.app-authed[data-active-route="tasks"] #tasksPage .task-meta {font-size:.67rem!important;color:#7d8694!important;}
  html:not(.capacitor-android) body.app-authed[data-active-route="tasks"] #tasksPage .task-star {width:38px!important;height:38px!important;}
  html:not(.capacitor-android) body.app-authed[data-active-route="tasks"] #tasksPage .task-star .material-symbols-rounded {font-size:22px!important;}
  html:not(.capacitor-android) body.app-authed[data-active-route="tasks"] #tasksPage .task-row-subtask,
  html:not(.capacitor-android) body.app-authed[data-active-route="tasks"] #tasksPage .task-row-subtask:has(> .task-drag-handle:not(.hidden)) {
    min-height:62px!important;padding-left:54px!important;background:#fff!important;
  }
  html:not(.capacitor-android) body.app-authed[data-active-route="tasks"] #tasksPage .task-parent-completed-toggle,
  html:not(.capacitor-android) body.app-authed[data-active-route="tasks"] #tasksPage .task-inline-add-subtask {
    width:100%!important;margin:0!important;padding-left:62px!important;border-radius:0!important;border-bottom:1px solid var(--task-ref-border-soft)!important;background:#fff!important;
  }
  html:not(.capacitor-android) body.app-authed[data-active-route="tasks"] #tasksPage .task-parent-completed-toggle {min-height:42px!important;}
  html:not(.capacitor-android) body.app-authed[data-active-route="tasks"] #tasksPage .task-inline-add-subtask {min-height:39px!important;height:39px!important;color:#2f6fe4!important;}

  /* Loading/error/empty states occupy the list workspace instead of disappearing. */
  html:not(.capacitor-android) body.app-authed[data-active-route="tasks"] #tasksPage .tasks-loading,
  html:not(.capacitor-android) body.app-authed[data-active-route="tasks"] #tasksPage .tasks-empty,
  html:not(.capacitor-android) body.app-authed[data-active-route="tasks"] #tasksPage .tasks-section-empty {
    min-height:240px!important;color:#7b8492!important;background:#fff!important;
  }
  html:not(.capacitor-android) body.app-authed[data-active-route="tasks"] #tasksPage .tasks-loading span {width:8px!important;height:8px!important;}

  /* Desktop reference deliberately uses one flat selected-list stream. */
  html:not(.capacitor-android) body.app-authed[data-active-route="tasks"] #tasksPage .tasks-overview-block {display:none!important;}
}

@media (min-width: 1440px) {
  html:not(.capacitor-android) body.app-authed[data-active-route="tasks"] #tasksPage .tasks-shell {
    grid-template-columns:290px minmax(0,1fr)!important;
  }
}