/*
 * Stetworth /app — the Your-tasks screen (new-ux lane 08, B4).
 *
 * Every rule here styles the `tl-` vocabulary app_ctrl_tasks.js
 * emits: the title row with the filter pills, the display-status
 * groups, and the task rows with their stretched-link surface.
 * Token vocabulary only, and the media set is the split-sheet pair —
 * one narrow-viewport block and one reduced-motion block — nothing
 * else.  Geometry follows the mockup (dc.html :299-319; the fidelity
 * audit, 2026-09-11): the h1 and the pills share one flex-end row,
 * the list card is a flush 8px-radius surface whose rows carry their
 * own 14px 20px padding, and the marks are the brand squares.
 */

/* Title row (dc.html :301): h1 and pills on one line, bottoms
   aligned, 16px apart; the gap below is the mockup's 22px section gap
   (dc.html :300). */
.tl-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--s-4);
    margin: 0 0 22px;
}

/* The shared .page-title measure (880px, centred) belongs to the home
   family; here the h1 is a flex item at the mockup's 40px / 1.1
   (dc.html :302). */
.tl-head .page-title {
    width: auto;
    max-width: none;
    margin: 0;
    flex: 1 1 auto;
    font-size: var(--fs-hero);
    line-height: 1.1;
}

/* The filter pills (dc.html :303-305): 13px / 500, 6px 12px, a 6px
   run; the count sits 8px after the label at 11px faint.  The selected
   pill reads as a pressed control on the card surface; the rest stay
   quiet outlines that warm to gold on hover (the mockup's #957340). */
.tl-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.tl-pill {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    font: inherit;
    font-size: var(--fs-13);
    font-weight: 500;
    color: var(--c-ink-muted);
    background: transparent;
    border: 1px solid var(--c-sand-rule);
    border-radius: var(--radius-pill);
    padding: 6px var(--s-3);
    cursor: pointer;
}

/* dc.html :305 hovers the filter pill's border to the mockup's hover
   rung, `--c-gold-hover`. */
.tl-pill:hover {
    border-color: var(--c-gold-hover);
}

.tl-pill-on {
    border-color: var(--c-accent);
    background: var(--c-sand-card);
    color: var(--c-ink);
}

.tl-pill-count {
    font-size: var(--fs-micro);
    color: var(--c-ink-faint);
}

/* The list card (dc.html :309): a flush surface — no padding, the 8px
   radius, overflow hidden — so each row's hover tint and hairline run
   edge to edge.  The status groups (CONTRACTS §4.2 :413) keep their
   headings, indented to the rows' 20px gutter. */
.tl-list {
    border: 1px solid var(--c-sand-rule);
    border-radius: var(--radius);
    background: var(--c-sand-card);
    padding: 0;
    overflow: hidden;
}

.tl-group-title {
    font-size: var(--fs-meta);
    color: var(--c-ink-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: var(--s-4) 0 var(--s-2);
    padding: 0 20px;
}

.tl-rows {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* One row (dc.html :311): the mockup's five-column grid, 16px between
   columns, 14px 20px padding and a #efe4cf hairline.  The title cell's
   anchor stretches over the whole row through the class-only
   pseudo-element below, and every interactive sibling is raised above
   that stretch, so the row surface navigates while the badges and
   controls keep their own targets — no handler swallows anything.  The
   last column is the mockup's fixed 110px so every row's columns line
   up with its neighbours'. */
.tl-row {
    position: relative;
    /* The row is its own stacking context, so the ladder rung its
       raised siblings borrow below never competes with the sticky
       header or any other fixed chrome outside the row. */
    isolation: isolate;
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) 150px 120px 110px;
    gap: var(--s-1) var(--s-4);
    align-items: center;
    padding: 14px 20px;
    border-top: 1px solid var(--c-soft);
    transition: background-color 0.2s ease;
}

.tl-row:hover {
    background-color: var(--c-sand-page);
}

/* The origin mark: the foundation's brand square at the mockup's
   28px (dc.html :312). */
.tl-marks {
    grid-column: 1;
}

.tl-marks .fs-mark {
    width: 28px;
    height: 28px;
}

.tl-main {
    grid-column: 2;
    min-width: 0;
}

/* Status (dc.html :314; STATUS :1145): 12.5px / 500, 7px from the dot,
   coloured by status.  The mockup gives needs_input #6b1f1f and
   in_progress #9c7f4a — two different colours — so the LABELS are two
   different colours here: oxblood is the accent verbatim, while gold as
   text is the burnished rung (#9c7f4a fails AA at this size).  The
   quiet statuses sit on ink-muted (the mockup's #a89e92 is below the
   text floor).  The DOT reads `--c-status-needs-input`, which is the
   accent (style.css :169), so needs_input's dot is oxblood like its
   label — the product owner's decision of 2026-09-12
   (CONTRACTS §7.7 :670). */
.tl-status {
    grid-column: 3;
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: var(--fs-12-5);
    font-weight: 500;
    color: var(--c-ink-muted);
}

.tl-status[data-display-status="needs_input"] {
    color: var(--c-accent);
}

.tl-status[data-display-status="in_progress"] {
    color: var(--c-burnished-text);
}

.tl-status[data-display-status="complete"] {
    color: var(--c-status-complete);
}

.tl-status[data-display-status="failed"] {
    color: var(--c-status-failed);
}

/* Time (dc.html :315): 13px muted. */
.tl-when {
    grid-column: 4;
    font-size: var(--fs-13);
    color: var(--c-ink-muted);
}

/* The sanctioned chips — spend, pending decisions, lineage, the
   conversation chip and Cancel (spec 08 B4 :129-:135) — form one muted
   line under the time and the badges, right-aligned to the row's edge,
   so the right column itself holds only the badges as in the mockup. */
.tl-meta {
    grid-column: 4 / -1;
    grid-row: 2;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: var(--s-1) var(--s-2);
    font-size: var(--fs-micro);
    color: var(--c-ink-muted);
    white-space: nowrap;
}

.tl-meta:empty {
    display: none;
}

.tl-side {
    grid-column: 5;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: nowrap;
    white-space: nowrap;
    gap: var(--s-1);
}

.tl-side:empty {
    display: none;
}

.tl-progress {
    grid-column: 2;
    grid-row: 2;
    font-size: var(--fs-meta);
    color: var(--c-ink-muted);
}

.tl-progress:empty {
    display: none;
}

/* The 3px bar (spec 08 B4 :127) painted as the sand track with a gold
   fill rather than the UA's dark hairline — `appearance: none` plus the
   engine parts; `color` is the legacy fill for engines without them. */
.tl-progress-bar {
    display: block;
    width: 100%;
    height: 3px;
    margin-top: var(--s-1);
    -webkit-appearance: none;
    appearance: none;
    border: 0;
    border-radius: 2px;
    overflow: hidden;
    background: var(--c-soft);
    color: var(--c-gold);
    accent-color: var(--c-gold);
}

.tl-progress-bar::-webkit-progress-bar {
    background: var(--c-soft);
}

.tl-progress-bar::-webkit-progress-value {
    background: var(--c-gold);
}

.tl-progress-bar::-moz-progress-bar {
    background: var(--c-gold);
}

.tl-row-open {
    text-decoration: none;
    color: var(--c-ink);
}

/* The stretch itself: class-only, over the relative row. */
.tl-row-open::after {
    position: absolute;
    inset: 0;
    content: "";
}

/* Title 17px Caslon and the 12.5px muted sub-line (dc.html :313). */
.tl-row-title {
    display: block;
    font-family: var(--font-accent);
    font-size: var(--fs-lede);
    color: var(--c-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tl-row-sub {
    display: block;
    font-size: var(--fs-12-5);
    color: var(--c-ink-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* The 7px status dot, coloured by the row's display status (STATUS
   :1145; needs_input keeps `--c-status-needs-input`, CONTRACTS §7.7
   :670); the live pulse rides only queued / in-progress rows.  The
   three quiet rows — queued, cancelled and the app-only stopped_early
   — share `--c-status-quiet`, the STATUS table's quiet stone (review
   round 6, R6-V2-2: stopped_early used to take the hairline colour). */
.tl-dot {
    width: 7px;
    height: 7px;
    flex: none;
    border-radius: 50%;
    background: var(--c-rule-strong);
}

.tl-status[data-display-status="needs_input"] .tl-dot {
    background: var(--c-status-needs-input);
}

.tl-status[data-display-status="in_progress"] .tl-dot {
    background: var(--c-gold);
}

.tl-status[data-display-status="queued"] .tl-dot {
    background: var(--c-status-quiet);
}

.tl-status[data-display-status="complete"] .tl-dot {
    background: var(--c-status-complete);
}

.tl-status[data-display-status="failed"] .tl-dot {
    background: var(--c-status-failed);
}

.tl-status[data-display-status="cancelled"] .tl-dot {
    background: var(--c-status-quiet);
}

.tl-status[data-display-status="stopped_early"] .tl-dot {
    background: var(--c-status-quiet);
}

.tl-dot-live {
    animation: tl-pulse 1.6s ease-in-out infinite;
}

@keyframes tl-pulse {
    50% { opacity: 0.35; }
}

/* The raised siblings of the stretched anchor.  The raise is routed
   through the z ladder — the design-token discipline allowlists no
   new literal rung — and .tl-row's isolated stacking context keeps
   the borrowed value local to the row. */
.tl-link,
.tl-conv,
.tl-cancel,
.tl-spend,
.tl-pending,
.tl-lineage {
    position: relative;
    z-index: var(--z-nav);
}

/* "Where it worked" badges (dc.html :316): 24px brand squares, 5px
   radius, no border, the cream glyph at 60%, 4px apart, resting at
   .85 and lifting on hover.  The foundation's mark supplies the
   ground and the glyph; only the size and radius are the badge's. */
.tl-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: 0;
    border-radius: 5px;
    background: var(--c-gold);
    overflow: hidden;
    opacity: 0.85;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.tl-link .fs-mark {
    width: 24px;
    height: 24px;
    border-radius: 5px;
}

.tl-link:hover {
    opacity: 1;
    transform: translateY(-1px);
}

.tl-lineage {
    font-size: var(--fs-micro);
    color: var(--c-ink-muted);
}

.tl-conv {
    appearance: none;
    font: inherit;
    font-size: var(--fs-micro);
    color: var(--c-ink-muted);
    background: transparent;
    border: 1px solid var(--c-sand-rule);
    border-radius: var(--radius-pill);
    padding: 0 var(--s-2);
    max-width: 110px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}

.tl-spend,
.tl-pending {
    font-size: var(--fs-micro);
    color: var(--c-ink-muted);
}

/* Cancel keeps its visible word (CONTRACTS §11 row 481, Label in Name)
   at the badges' 24px height. */
.tl-cancel {
    appearance: none;
    font: inherit;
    font-size: var(--fs-micro);
    font-weight: 500;
    line-height: 1;
    height: 24px;
    color: var(--c-status-failed);
    background: transparent;
    border: 1px solid var(--c-sand-rule);
    border-radius: var(--r-6);
    padding: 0 var(--s-2);
    white-space: nowrap;
    cursor: pointer;
}

/* The empty state (dc.html :319): centred, 28px 20px, 14.5px muted,
   the inline "Describe a task" link; the filtered-empty state (spec 08
   B4 :137) shares the block. */
.tl-empty {
    margin: 0;
    padding: 28px 20px;
    font-size: var(--fs-14-5);
    color: var(--c-ink-muted);
    text-align: center;
}

.tl-empty-link {
    color: var(--c-accent);
}

.tl-show-all {
    appearance: none;
    font: inherit;
    font-size: var(--fs-ui);
    color: var(--c-ink);
    background: transparent;
    border: 1px solid var(--c-sand-rule);
    border-radius: var(--radius-pill);
    padding: var(--s-1) var(--s-3);
    cursor: pointer;
}

/* The cancel dialog's body, rendered into the shared surface. */
.tl-confirm-body {
    margin: 0 0 var(--s-4);
    color: var(--c-ink-soft);
    font-size: var(--fs-body);
}

.tl-confirm-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--s-2);
}

/* Phone (§7.8): the pills scroll in one row; rows collapse to the
   two-line block with the sibling chips wrapping beneath and the
   cancel control full-width. */
@media (max-width: 720px) {
    [data-task-filter-bar] {
        flex-wrap: nowrap;
        overflow-x: auto;
    }

    [data-task-filter-bar] .tl-pill {
        flex: none;
        min-height: 44px;
    }

    [data-task-row] {
        grid-template-columns: 28px minmax(0, 1fr) auto;
    }

    [data-task-row] .tl-marks {
        grid-column: 1;
    }

    [data-task-row] .tl-main {
        grid-column: 2;
    }

    [data-task-row] .tl-status {
        grid-column: 3;
        justify-content: flex-end;
    }

    /* Line 2 (spec 08 B4 Phone): the progress line beside the relative
       time, never the time under the 28 px mark column, where "2 hours
       ago" wrapped one word per line. */
    [data-task-row] .tl-progress {
        grid-column: 2;
        grid-row: 2;
    }

    [data-task-row] .tl-when {
        grid-column: 3;
        grid-row: 2;
        justify-self: end;
        white-space: nowrap;
    }

    /* Line 3: the chips line, when present, under the title; the chips
       wrap and Cancel takes the full width below them. */
    [data-task-row] .tl-meta {
        grid-column: 2 / -1;
        grid-row: 3;
        justify-content: flex-start;
        white-space: normal;
    }

    [data-task-row] .tl-side {
        grid-column: 1 / -1;
        grid-row: 4;
        flex-wrap: wrap;
        white-space: normal;
        justify-content: flex-start;
    }

    [data-task-row] .tl-cancel {
        flex: 1 1 100%;
        min-height: 44px;
    }
}

/* Reduced motion: the live dot holds still; the row keeps its tint
   without the transition. */
@media (prefers-reduced-motion: reduce) {
    .tl-dot-live {
        animation: none;
    }

    .tl-row,
    .tl-link {
        transition: none;
    }
}