/* ==========================================================================
   EVAL · css/pages/tasks.css — the Tasks page. Owner: pages agent.
   Composition only: .card / .card-head / .list / .row / .rank / .pill /
   .avatar / .donebox / .empty come from components.css. Tokens only.
   Prefix .pgtk- — the task curtain owns .tk-, the followups curtain .fu-.
   ========================================================================== */

.pgtk { display: flex; flex-direction: column; gap: var(--gap); width: 100%; min-width: 0; }

/* ---------- the walk ----------------------------------------------------- */
.pgtk-tasks { flex: 1; min-height: 0; gap: 4px; }

/* the count is stated ONCE, in the pill; the head carries no gauge of its own */
.pgtk-head { gap: 14px; padding-bottom: 6px; }
.pgtk-head h2 { font-size: var(--fs-h1); letter-spacing: var(--ls-tight); }
.pgtk-hpills { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }

.pgtk-list { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.pgtk-row {
  flex: 1 0 auto; min-height: 74px; gap: 12px;
  transition: transform var(--dur-liftUp) var(--ease), opacity var(--dur-pill) var(--ease);
}
.pgtk-main {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px;
  text-align: left; padding: 0; min-height: 56px;
  transition: transform var(--dur-liftUp) var(--ease);
}
.pgtk-row .body { gap: 6px; }
/* the meta line: who owns it on the left, what it costs on the right — the same
   line Home's task row carries under its evidence */
.pgtk-meta { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pgtk-meta .sp { flex: 1; }
.pgtk-cost { flex: 0 0 auto; display: flex; justify-content: flex-end; }
.pgtk-who { flex: 0 0 auto; display: flex; align-items: center; gap: 9px; min-width: 0; }
.pgtk-who .who { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pgtk-row .t1 .tt { font-size: var(--fs-h2); }
.pgtk-row .t2 .det { font-size: var(--fs-row); }
.pgtk-row .avatar { width: 24px; height: 24px; }
.pgtk-none { padding: 16px 0 8px; }

/* ---------- the accountability column ------------------------------------ */
.pgtk-side { display: flex; flex-direction: column; gap: var(--gap); min-width: 0; min-height: 0; }
.pgtk-checks { gap: 6px; }
.pgtk-checks .sec-head { margin-top: 0; }
.pgtk-kvs { display: flex; flex-direction: column; }
.pgtk-kvs .kv { min-height: 50px; }
.pgtk-kvs .kv .k { font-size: var(--fs-row); color: var(--ink2); font-weight: 600; }

/* ---------- follow-ups --------------------------------------------------- */
.pgtk-fu { gap: 12px; }
.pgtk-fu .sec-head { margin-top: 0; }
.pgtk-fuopen {
  display: flex; flex-direction: column; gap: 14px; width: 100%;
  text-align: left; min-height: 0;
  transition: transform var(--dur-liftUp) var(--ease);
}
.pgtk-fulist { min-height: 0; }
.pgtk-furow { min-height: 62px; }
.pgtk-furow .t1 .tt { font-size: var(--fs-h3); }
/* ONE composition for a follow-up row, here and on Home: the verdict pill sits
   TOP-RIGHT against the title. `.fu-narrow` (followups.css) gives the title a
   full-width line in the 372px column, which dropped the pill onto a second line
   at the far left — the same row drawn two ways on two surfaces. The title still
   takes the width it needs and wraps to two lines; the pill keeps the corner. */
.pgtk-furow.fu-narrow .t1 { flex-wrap: nowrap; align-items: flex-start; gap: 10px; }
.pgtk-furow.fu-narrow .t1 .tt {
  flex: 1 1 auto; min-width: 0; white-space: normal; overflow: hidden;
  text-overflow: clip; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.pgtk-furow.fu-narrow .t1 > .pill { flex: 0 0 auto; margin-top: 1px; }

/* the first walk: the two figures today produced, then the three verdicts one
   of them earns tomorrow — real numbers off EVAL.data, never a wireframe */
.pgtk-first { display: flex; flex-direction: column; gap: 11px; }
.pgtk-ftiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pgtk-fverdict { margin-top: 0; flex-wrap: wrap; row-gap: 8px; }
.pgtk-fverdict .ln { min-width: 12px; }
.pgtk-fpills { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }

/* ==========================================================================
   iPad: the walk on the left at full height, follow-ups on the right at the
   height of its own content (a card is never stretched around a void)
   ========================================================================== */
@media (min-width: 1000px) {
  #page-tasks.on { display: flex; }
  .pgtk {
    display: grid; grid-template-columns: minmax(0, 1fr) 372px;
    grid-template-rows: minmax(0, 1fr); flex: 1; min-height: 0;
  }
  /* The title IS the instruction (laws §6: a verb with a number), so it is the
     one string on the row that may not be cut. At 1024x768 — a frame SPEC §2
     names — every one of the ten walk titles was ellipsised, "Get 19 customers
     on the myCadillac app" by 124px and "Report 20 more retail to reach
     Standard" by 120px; at 1180 none were, so nothing here changes at the
     design size. The title takes a second line when it needs one, exactly as
     the phone and the Home card already let it, and the clamp keeps the row
     from growing past two. */
  .pgtk-row .t1 .tt {
    white-space: normal; text-overflow: clip; line-height: 1.28;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  /* the owner and the cost share their own line now, so neither needs a fixed
     column: the title has the row's full width back */
  .pgtk-who { max-width: 60%; }
  /* the column is one screen tall: the follow-up list scrolls inside its card
     rather than running the third row off the bottom of the page */
  .pgtk-fu { flex: 0 1 auto; min-height: 0; }
  .pgtk-fu .pgtk-fulist { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
  .pgtk-checks { flex: 0 1 auto; min-height: 0; }
  .pgtk-checks .pgtk-kvs { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
  .pgtk-side { align-self: start; max-height: 100%; }
}

/* ==========================================================================
   Phone: one column, the page scrolls, titles wrap, owner stays on screen
   ========================================================================== */
@media (max-width: 999px) {
  .pgtk-tasks { flex: 0 0 auto; }
  .pgtk-list { overflow: visible; }
  .pgtk-row { flex: 0 0 auto; min-height: 84px; padding: 11px 0; gap: 10px; }
  .pgtk-main { gap: 10px; align-items: flex-start; }
  .pgtk-main .rank { margin-top: 2px; }
  .pgtk-row .t1 { flex-wrap: wrap; gap: 8px; }
  .pgtk-row .t1 .tt {
    flex: 1 0 100%; white-space: normal; overflow: hidden; text-overflow: clip;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    line-height: 1.3; font-size: var(--fs-h3);
  }
  .pgtk-row .t2 .det {
    white-space: normal; display: -webkit-box; -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; line-height: 1.35; font-size: var(--fs-sub);
  }
  .pgtk-row .t2 { align-items: flex-start; }
  /* the pill keeps the corner on the phone too — one composition, every frame */
  .pgtk-furow.fu-narrow .t1 { gap: 8px; }
  .pgtk-head { gap: 10px; flex-wrap: wrap; }
  .pgtk-head h2 { font-size: var(--fs-h1); white-space: nowrap; flex: 1 0 auto; }
  .pgtk-head .sp { display: none; }
  .pgtk-hpills { flex: 1 0 100%; }
  .pgtk-fu, .pgtk-checks { flex: 0 0 auto; }
  .pgtk-kvs .kv { min-height: 46px; }
}