/* tasks — page-scoped styles. Owned by this page only.
   Shared primitives live in planner/planner.css and are READ-ONLY from here.
   Scope every rule under [data-view="tasks"] so it cannot leak to another page.

   The shape of this page:
     stats band  →  panel { head → column labels → [group heading, rows]* }

   One idea runs through it. A 30-row checklist that spans two years is a
   timeline, so the rows are grouped by month with Overdue pulled to the top,
   and the group heading carries the status in WORDS. That is what lets the
   rows themselves stay quiet: only the overdue ones get a red edge, nothing
   else is tinted, and the page never becomes a wall of red.

   The other idea: a field label repeated on 30 rows is 30 copies of the same
   sentence. Above 768px the per-row labels are moved to the accessibility
   layer and one sticky column header does the job for all of them. Below that
   there is no room for columns, so the labels come back and each row becomes
   a card. */

/* ── page rhythm ─────────────────────────────────────────────────────────
   .view sets a gap between ITS children, and a feature root is a single
   child, so the gap never reaches the blocks inside. Restate it here. */
[data-view="tasks"]{
  display:flex;
  flex-direction:column;
  gap:var(--s5);

  /* One grid, three shapes. Rows and the column header both read these. */
  --t-areas:"check title owner cat due notes del";
  --t-cols:2.75rem minmax(9rem,2.4fr) minmax(5.5rem,1fr) minmax(6.5rem,1.1fr) 9.75rem minmax(8rem,1.9fr) 2.25rem;
  --t-gap:var(--s3);
}

/* ── stats: four tiles, so they land 4-across or 2×2 with no orphan ───── */
[data-view="tasks"] .stats{grid-template-columns:repeat(4,minmax(0,1fr))}
[data-view="tasks"] .stat{padding:var(--s3) var(--s4)}
[data-view="tasks"] .stat .bar{margin-top:.5rem;max-width:12rem}
@media (max-width:639px){
  [data-view="tasks"] .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  [data-view="tasks"] .stat b{font-size:1.35rem}
}

/* ── panel head: three things, reading as three ───────────────────────────
   what the screen is (title + one sentence) · what is shown (filter) ·
   what you can do (actions). Never one run-on block. */
[data-view="tasks"] .panel__head{align-items:flex-start;gap:var(--s3) var(--s5)}
[data-view="tasks"] .thead{flex:1 1 15rem}
[data-view="tasks"] .thead .note{margin-top:.15rem}

/* the four filters are one control, not four buttons */
[data-view="tasks"] .tfilter{
  display:inline-flex;flex:0 0 auto;
  border:1px solid var(--line-strong);border-radius:2px;overflow:hidden;background:#fff}
[data-view="tasks"] .tfilter .chip{
  border:0;border-right:1px solid var(--line-strong);border-radius:0;
  gap:.4rem;padding:0 .7rem;color:var(--muted);font-size:var(--ft-meta)}
[data-view="tasks"] .tfilter .chip:last-child{border-right:0}
[data-view="tasks"] .tfilter .chip i{
  font-style:normal;font-size:var(--ft-label);font-variant-numeric:tabular-nums;
  color:var(--muted)}
[data-view="tasks"] .tfilter .chip:hover{background:var(--sand);color:var(--ink)}
[data-view="tasks"] .tfilter .chip[aria-pressed=true],
[data-view="tasks"] .tfilter .chip[aria-pressed=true]:hover{background:var(--rust);color:#fff}
[data-view="tasks"] .tfilter .chip[aria-pressed=true] i{color:#fff}
/* the control clips, so the focus ring has to sit inside it */
[data-view="tasks"] .tfilter .chip:focus-visible{outline-offset:-3px}
/* under ~400px the four joined chips are wider than the panel and push the
   document sideways. Below 640 they stop being one welded control and become
   a 2×2 block of separate chips — same buttons, same states, no overflow, and
   an even split rather than three-then-one. */
@media (max-width:639px){
  [data-view="tasks"] .tfilter{
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s2);
    border:0;overflow:visible;background:none;flex:1 1 100%}
  [data-view="tasks"] .tfilter .chip{
    border:1px solid var(--line-strong);border-radius:2px;justify-content:center}
  [data-view="tasks"] .tfilter .chip:focus-visible{outline-offset:2px}
}

/* ── column header: the labels, once, over their columns ───────────────── */
[data-view="tasks"] .tcols{
  display:grid;grid-template-columns:var(--t-cols);grid-template-areas:var(--t-areas);
  gap:0 var(--t-gap);align-items:center;
  padding:var(--s2) var(--s4);
  background:var(--surface-2);border-bottom:1px solid var(--line-strong);
  font-size:var(--ft-label);font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted)}
[data-view="tasks"] .tcols > *:nth-child(1){grid-area:check}
[data-view="tasks"] .tcols > *:nth-child(2){grid-area:title}
[data-view="tasks"] .tcols > *:nth-child(3){grid-area:owner}
[data-view="tasks"] .tcols > *:nth-child(4){grid-area:cat}
[data-view="tasks"] .tcols > *:nth-child(5){grid-area:due}
[data-view="tasks"] .tcols > *:nth-child(6){grid-area:notes}
[data-view="tasks"] .tcols > *:nth-child(7){grid-area:del}

/* ── group heading: this is the status key, next to what it describes ──── */
[data-view="tasks"] .tgroup{
  display:flex;align-items:baseline;gap:var(--s3);
  margin:0;padding:var(--s2) var(--s4);
  background:var(--sand);border-bottom:1px solid var(--line);
  font-family:var(--ui);font-size:var(--ft-label);font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
/* the count sits against the label, not flung to the far right of a 1384px
   band where the two stop reading as one thing */
[data-view="tasks"] .tgroup span{
  font-weight:400;letter-spacing:.04em;font-variant-numeric:tabular-nums;
  padding:0 .45rem;border:1px solid currentColor;border-radius:999px}
[data-view="tasks"] .tgroup[data-kind=bad]{
  background:#FDF4F0;color:var(--bad);border-bottom-color:var(--bad-line)}
[data-view="tasks"] .tgroup[data-kind=soon]{
  background:#FDFAF0;color:var(--gold-ink);border-bottom-color:var(--gold)}
/* Sticky headings are what makes a 2400px timeline navigable, but the sticky
   topbar's height is content-driven and this page cannot read it: --h-topbar
   (56px) is its MINIMUM, and with the title plus the summary line it measures
   69px at 768 and 76px at 1680. 5rem clears the tallest of those.
   ponytail: a measured constant, not a computed one. If the topbar ever grows
   a third line this needs a real number — see the report's shared-file ask for
   exposing the measured height as a custom property. Below 768 the topbar
   wraps to two or three lines and the offset would be a guess, so no sticky. */
@media (min-width:768px){
  [data-view="tasks"] .tgroup{position:sticky;top:5rem;z-index:3}
}

/* ── the rows ──────────────────────────────────────────────────────────── */
[data-view="tasks"] .tlist > .recs:last-of-type > .rec:last-child{border-bottom:0}
[data-view="tasks"] .recs > .rec:last-child{border-bottom:1px solid var(--line)}

[data-view="tasks"] .rec{
  display:grid;grid-template-columns:var(--t-cols);grid-template-areas:var(--t-areas);
  gap:var(--s2) var(--t-gap);align-items:center;
  padding:var(--s2) var(--s4)}

/* placement by field, not by position — self-documenting and it survives a
   reordering of FIELDS */
[data-view="tasks"] .rec > .field--check{grid-area:check}
[data-view="tasks"] .rec > .field:has([data-k=title]){grid-area:title}
[data-view="tasks"] .rec > .field:has([data-k=owner]){grid-area:owner}
[data-view="tasks"] .rec > .field:has([data-k=category]){grid-area:cat}
[data-view="tasks"] .rec > .field:has([data-k=due]){grid-area:due}
[data-view="tasks"] .rec > .field:has([data-k=notes]){grid-area:notes}
[data-view="tasks"] .rec > .x{grid-area:del}

/* the shared per-content caps are for a wrapping flex row; in a grid the
   track already does that job, and a cap here would strand whitespace */
[data-view="tasks"] .rec .field{max-width:none;min-width:0;gap:.15rem}

/* controls: quiet at rest, obviously editable on approach. Six bordered boxes
   × 30 rows is the noise the old layout was made of. */
/* background-COLOR, never the shorthand: the shared select carries its dropdown
   arrow as a background-image and `background:#fff` would wipe it */
[data-view="tasks"] .rec input,
[data-view="tasks"] .rec select{height:var(--h-ctl);border-color:var(--line);background-color:#fff}
[data-view="tasks"] .rec input:hover,
[data-view="tasks"] .rec select:hover{border-color:var(--line-strong)}
[data-view="tasks"] .rec input:focus,
[data-view="tasks"] .rec select:focus{border-color:var(--terracotta)}
[data-view="tasks"] .rec [data-k=title]{font-size:var(--ft-body)}
/* notes is the long field: it never shares a track with the short ones at a
   width where that would squeeze it, and it stays the quietest thing in the
   row until you touch it */
[data-view="tasks"] .rec [data-k=notes]{
  border-color:transparent;background-color:transparent;color:var(--muted)}
[data-view="tasks"] .rec [data-k=notes]:hover{border-color:var(--line-strong);background-color:#fff}
[data-view="tasks"] .rec [data-k=notes]:focus{color:var(--ink);background-color:#fff}

/* the checkbox is the control this page exists for: a real target at every
   width, and the widest thing in its column */
[data-view="tasks"] .rec > .field--check{
  display:flex;align-items:center;justify-content:center;
  padding:0;min-width:2.75rem;min-height:2.75rem;align-self:stretch;cursor:pointer;
  border-radius:2px}
[data-view="tasks"] .rec > .field--check:hover{background:var(--row-active)}
[data-view="tasks"] .rec > .field--check:focus-within{outline:2px solid var(--terracotta);outline-offset:-2px}
[data-view="tasks"] .rec input[type=checkbox]{width:20px;height:20px}
/* a checkbox at the head of a checklist row needs no visible word next to it;
   the <span> stays for the accessible name */
[data-view="tasks"] .rec .field--check > span{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap}

[data-view="tasks"] .rec > .x{
  margin:0;align-self:center;justify-self:center;
  width:2.25rem;height:2.25rem;padding:0;display:grid;place-items:center}

/* status. Never colour alone: the group heading above these rows says
   "Overdue" in words, and the row carries a solid edge as well as a tint. */
[data-view="tasks"] .rec[data-when=overdue]{box-shadow:inset 3px 0 0 var(--bad)}
[data-view="tasks"] .rec[data-when=overdue] [data-k=due]{color:var(--bad);font-weight:700}
[data-view="tasks"] .rec[data-when=soon] [data-k=due]{color:var(--gold-ink)}

/* ── ≥768px: columns. The 30 repeated labels move to the a11y layer. ───── */
@media (min-width:768px){
  [data-view="tasks"] .rec .field > span{
    position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
    clip-path:inset(50%);white-space:nowrap}
}

/* ── 768–1399px: not enough width for six columns without squeezing notes
      (at 1280 it would get 196px against the title's 248). Notes takes its
      own line instead, label inline so the line costs one control height. ── */
@media (min-width:768px) and (max-width:1399px){
  [data-view="tasks"]{
    --t-cols:2.75rem minmax(7rem,2.6fr) minmax(5rem,1fr) minmax(6rem,1.1fr) 9.75rem 2.25rem;
    --t-areas:"check title owner cat due del" "check notes notes notes notes del";
  }
  [data-view="tasks"] .tcols > *:nth-child(6){display:none}
  /* check and delete span both lines; pin them to the line the title is on */
  [data-view="tasks"] .rec > .field--check,
  [data-view="tasks"] .rec > .x{align-self:start}
  [data-view="tasks"] .rec > .field:has([data-k=notes]){
    display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:var(--s2)}
  [data-view="tasks"] .rec .field:has([data-k=notes]) > span{
    position:static;width:auto;height:auto;margin:0;overflow:visible;clip-path:none}
  /* on its own line an unbordered notes input reads as a label with nothing
     after it, so here it looks like the field it is */
  [data-view="tasks"] .rec [data-k=notes]{border-color:var(--line);background-color:#fff}
}

/* ── <768px: no columns fit. Each row becomes a card and the labels come
      back, because there is no header to carry them. ────────────────────── */
@media (max-width:767px){
  [data-view="tasks"]{
    --t-cols:2.75rem minmax(0,1fr) minmax(0,1fr) 2.75rem;
    --t-areas:
      "check title title del"
      "check owner cat   cat"
      "check due   due   due"
      "check notes notes notes";
    --t-gap:var(--s2);
  }
  [data-view="tasks"] .tcols{display:none}
  [data-view="tasks"] .rec{padding:var(--s3) var(--s3);align-items:start}
  [data-view="tasks"] .rec > .field--check{align-self:start;min-height:2.75rem}
  [data-view="tasks"] .rec > .x{align-self:start}
  [data-view="tasks"] .rec .field > span{font-size:.625rem;letter-spacing:.1em}
  [data-view="tasks"] .rec .field:has([data-k=title]){align-self:center}
  /* the title is the row's headline on a phone, not one field among six, so it
     needs no label above it — the <span> stays for the accessible name */
  [data-view="tasks"] .rec .field:has([data-k=title]) > span{
    position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
    clip-path:inset(50%);white-space:nowrap}
  [data-view="tasks"] .rec [data-k=title]{font-size:var(--ft-name);font-weight:700}
  /* an untouched notes field must still look tappable when there is no hover */
  [data-view="tasks"] .rec [data-k=notes]{border-color:var(--line);background-color:#fff}
  [data-view="tasks"] .rec input[type=checkbox]{width:24px;height:24px}
  [data-view="tasks"] .rec > .x{width:2.75rem;height:2.75rem}
  [data-view="tasks"] .tgroup{padding:var(--s3) var(--s3)}
}

/* ── empty state: explanation is prose, the action is a button, and they
      are not the same paragraph ─────────────────────────────────────────── */
[data-view="tasks"] .tempty{
  padding:var(--s7) var(--s5);display:flex;flex-direction:column;align-items:flex-start;
  gap:var(--s3);max-width:var(--w-prose)}
[data-view="tasks"] .tempty > p:first-child{font-family:var(--display);font-size:1.125rem}
[data-view="tasks"] .tempty .btn{margin-top:var(--s2)}
@media (max-width:639px){
  [data-view="tasks"] .tempty{padding:var(--s6) var(--s4);align-items:stretch;text-align:left}
  [data-view="tasks"] .tempty .btn{align-self:flex-start}
}