/*
 * Tasks & Goals page — page-only tweaks. The header, cards, table,
 * chips, badges, buttons, meter and empty state are all components;
 * what lives here is the two-line title cell in the task table, the
 * goal item layout inside `.list`, and the shared `.pager` control
 * (partials/_pager.php) until it gets its own components/ file.
 */

/* A table that follows the filter chips / the schedules hint keeps the
   card's edge-to-edge bleed on three sides but not the top, so it does
   not ride up into the row above it. */
[data-page="tasks"] .card__body > .chips + .table-wrap,
[data-page="tasks"] .card__body > .tasks__sched-hint + .table-wrap { margin-top: 0; }

/* ── Task table: title + one-line description + collapsed plan ──── */
.tasks__title-cell { min-width: 24ch; max-width: 56ch; }
.tasks__title { display: block; font-weight: 500; overflow-wrap: anywhere; }
.tasks__desc {
    display: block;
    margin-top: var(--sp-half);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tasks__plan { margin-top: var(--sp-1); }
.tasks__plan-body { font-family: var(--font); }
.tasks__plan-body ol { margin: 0; padding-left: var(--sp-5); }
.tasks__plan-body ol + .muted, .tasks__plan-body .muted + ol { margin-top: var(--sp-2); }
.tasks__sched-badges { display: inline-flex; gap: var(--sp-1); margin-top: var(--sp-half); }
.tasks__sched-hint { margin: 0 0 var(--sp-3); }
.tasks__delete:hover { color: var(--color-danger); background: var(--color-danger-soft); }

/* ── Goals list ─────────────────────────────────────────────────── */
.goals { gap: 0; }
.goal { padding: var(--sp-3) 0; border-bottom: 1px solid var(--color-border); }
.goal:first-child { padding-top: 0; }
.goal:last-child { padding-bottom: 0; border-bottom: 0; }
.goal__text { font-weight: 500; line-height: 1.35; }
.goal__meta { display: flex; align-items: center; gap: var(--sp-1) var(--sp-2); flex-wrap: wrap; }
.goal__progress { margin-top: var(--sp-1); }
.goal__evidence, .goal .text-danger { font-size: var(--fs-xs); }
.goal__actions { margin-top: var(--sp-1); }

/* ── Shared pager (partials/_pager.php) ─────────────────────────── */
.pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2);
    width: 100%;
    flex-wrap: wrap;
}
.pager--more { justify-content: center; }
.pager__status {
    font-size: var(--fs-xs);
    color: var(--color-text-muted);
    white-space: nowrap;
}
.pager .btn[aria-disabled="true"] { opacity: 0.4; pointer-events: none; }
/* A pager rendered straight after a table (not in a card footer) gets
   its own breathing room. */
.table-wrap + .pager, .table + .pager, .list + .pager { margin-top: var(--sp-3); }