/* =========================================================================
   Tasks page (tasks-page.js): the filters and search, the cards, New task and the task sheet, and the proposal
   cards drawn to match. Colours are the app's tokens only: --a for the person's own controls, urgency on the card's
   left edge (Urgent crimson, High amber, Normal quiet, Low a hairline) with the word written on the card too.
   ========================================================================= */
#tasksScreen{--bar:color-mix(in srgb,var(--text-2) 28%,transparent)}
.tasks-head-actions{display:flex;gap:8px;flex:none}

/* ---- The count tile look. The Tasks tiles are gone (the lead, 2026-10-05); the attendance totals (workspace.js) still
   wear it. ---- */
.tasks-count{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:0;min-height:44px;margin:0;padding:10px 12px;color:var(--text);font:inherit;text-align:left;cursor:pointer;transition:background-color .12s ease,opacity 120ms ease;border:1px solid var(--line);border-radius:var(--r-row);background:var(--gloss),var(--fog),var(--glass-panel);background-origin:border-box;-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur)}
.tasks-count b{font-family:var(--font);font-size:28px;font-weight:400;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.tasks-count span{font-size:12px;font-weight:600;line-height:1.3;letter-spacing:.01em;color:var(--eyebrow);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---- Filters and search. ---- */
.tasks-tools{position:relative;display:flex;align-items:flex-start;gap:6px;margin-top:12px}
.tasks-filters{display:flex;flex-wrap:wrap;gap:6px;flex:1 1 auto;min-width:0;transition:opacity .2s ease}
.tasks-chip{min-height:44px;padding:0 16px;border:1px solid var(--line);border-radius:var(--r-pill);background:var(--gloss),var(--fog),var(--glass-nav);background-origin:border-box;-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);color:var(--text);font-size:13.5px;font-weight:600;transition:background-color .12s ease}
.tasks-chip{transition:background-color .12s ease,opacity 120ms ease}
.tasks-chip[aria-pressed="true"]{border-color:transparent;background:var(--primary);color:var(--on-primary)}
/* The row is one line at 320 (the lead, 2026-10-01): the urgency select drawn as a chip with its chevron, pressed while
   an urgency is picked, then In progress, Sent back and Done, then the search icon. Up to 400px the chips tighten so
   all four fit from 375 up; narrower (320) they cannot (the select keeps 16px so iOS does not zoom), so the row slides
   sideways under the finger instead of wrapping or clipping a label; the search icon stays put. */
/* The scroll box clips, so it reaches 4px past the chips on every side (the focus ring: 2px offset, 2px wide) and the
   chips stay where they were. */
.tasks-filters{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;padding:4px;margin:-4px}
.tasks-filters::-webkit-scrollbar{display:none}
.tasks-filters .tasks-chip{flex:none;min-width:44px;padding:0 10px;white-space:nowrap}
/* The urgency, days and department chips open the glass menu (tasks-page.js tasksMenuOpen): a chip with its chevron,
   which keeps its own room at the right so the label never runs under it. */
.tasks-filters :is(.tasks-urgency,.tasks-pick){flex:none;max-width:128px;padding:0 26px 0 10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:var(--select-chevron) no-repeat right 8px center/13px 13px,var(--gloss),var(--fog),var(--glass-nav);cursor:pointer}
.tasks-filters .tasks-urgency.is-on{border-color:transparent;background:var(--select-chevron) no-repeat right 8px center/13px 13px,var(--primary);color:var(--on-primary)}
.tasks-filters .tasks-pick{max-width:170px}
/* Narrow: the chevron shrinks; the size and place are given per layer, as one value would tile the gloss into stripes. */
@media (max-width:400px){.tasks-tools,.tasks-filters{gap:4px}.tasks-filters .tasks-chip{padding:0 5px;font-size:12px}
  .tasks-filters :is(.tasks-urgency,.tasks-pick){padding:0 18px 0 6px;background-position:right 5px center,0 0,0 0;background-size:11px 11px,100% 100%,100% 100%}}
/* The menu: under its chip, the choice made ticked. */
.tasks-menu{transform-origin:top left;max-height:min(60vh,420px);overflow-y:auto}
.tasks-menu .hub-menu-item>span{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tasks-menu .tasks-menu-tick{visibility:hidden;color:var(--primary)}
.tasks-menu [aria-checked="true"] .tasks-menu-tick{visibility:visible}
/* The pager under a list of more than one page: ‹, the page numbers (this one filled), ›; 44px targets, one line. */
.tasks-pager{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:4px;margin-top:16px}
.tasks-pager .tasks-chip{display:grid;place-items:center;min-width:44px;padding:0 6px;font-family:var(--mono);font-variant-numeric:tabular-nums}
.tasks-pager .tasks-chip[aria-current="page"]{border-color:transparent;background:var(--primary);color:var(--on-primary)}
.tasks-pager .tasks-chip:disabled{opacity:.38;cursor:default}
.tasks-pager .icon{width:18px;height:18px}
.tasks-page-back{transform:rotate(180deg)}
.tasks-page-gap{min-width:16px;text-align:center;color:var(--text-2)}
/* Search: a round icon at the end of the chips. Open, the field grows out of it to the row's full width over the chips
   (a clip-path reveal from the icon's circle, so nothing reflows), and the icon stays on top at its right end. */
.tasks-search-open{display:grid;place-items:center;flex:none;width:44px;padding:0;position:relative;z-index:1}
.tasks-search-open .icon{width:20px;height:20px}
.tasks-search{position:absolute;inset:0 0 auto 0;height:44px;min-height:44px;border-radius:var(--r-pill);padding:0 56px 0 18px;font-size:16px;background:var(--fill-2);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  clip-path:inset(0 0 0 calc(100% - 44px) round 22px);opacity:0;visibility:hidden;
  transition:clip-path .34s var(--ease-out),opacity .18s ease,visibility 0s linear .34s}
.tasks-tools.is-searching .tasks-search,.task-to-bar.is-searching .tasks-search{clip-path:inset(0 0 0 0 round 22px);opacity:1;visibility:visible;transition:clip-path .34s var(--ease-out),opacity .18s ease,visibility 0s}
.tasks-tools.is-searching .tasks-filters{opacity:0;pointer-events:none}
.tasks-tools.is-searching .tasks-search-open,.task-to-bar.is-searching .tasks-search-open{border-color:transparent;background:none;-webkit-backdrop-filter:none;backdrop-filter:none}
@media (prefers-reduced-motion:reduce){.tasks-search,:is(.tasks-tools,.task-to-bar).is-searching .tasks-search{transition:opacity .15s ease,visibility 0s}.tasks-search{clip-path:none}}

/* ---- My tasks / Team tasks (admins and managers). Team tasks hide the person's own lists. ---- */
/* The full-width switch, each tab's icon beside its name (the lead, 2026-10-06: "keep the old tabs but with those icons"). */
.tasks-scope{margin-top:12px}
.tasks-scope .seg-tab{display:inline-flex;align-items:center;justify-content:center;gap:8px}
.tasks-scope .seg-tab .icon{flex:none;width:18px;height:18px}
/* Team tasks' badge: what waits for the caller's verification and the progress since they last looked (tasks-page.js). */
.tasks-scope-badge{min-width:18px;height:18px;padding:0 5px;border-radius:var(--r-pill);background:var(--pink);color:var(--night-floor);font-size:10.5px;font-weight:700;line-height:18px;text-align:center}
#tasksScreen.is-team :is(#taskLists,#tasksLaterNote,#taskProposals){display:none}
#tasksTeam .list{display:grid;gap:8px;margin-top:8px}
/* Team tasks' days: the same sections as My tasks, a little closer under the filters; Overdue in the overdue colour. */
#tasksScreen #tasksTeamList .task-section{margin-top:6px}
#tasksTeamList .task-section.is-overdue .task-group-toggle :is(.k,.count){color:var(--pink)}
/* Team tasks' header reads as a section's (below): the title, its count, and an admin's department picker at the end. */
#tasksTeamSummary{margin:0 4px}
#tasksTeamSummary:empty{display:none}
.task-card.team-task,.task-card.team-end-time{grid-template-columns:minmax(0,1fr);padding-left:14px}

/* ---- Sections: one list, a line and a small header per section (no panels), each foldable. Everything under the
   filters is drawn this way: My tasks' lists, the proposals, Team tasks and the empty state. ---- */
#tasksScreen .task-section{margin-top:14px;padding-top:4px;border-top:1px solid var(--hairline)}
#tasksScreen .task-section:empty{display:none}
#tasksScreen .task-section :is(.task-group-toggle,.task-section-head,.pulse-head) .k{font-size:13px;font-weight:600;letter-spacing:.01em;color:var(--eyebrow)}
/* The same header without the fold (proposals). */
.task-section-head{display:flex;align-items:center;gap:8px;width:100%;min-height:44px;padding:0 4px}
/* The count keeps the room a group's fold chevron takes (18px and the gap), so every count lines up clear of the profile button. */
.task-section-head .count{margin-left:auto;margin-right:26px;font-family:var(--mono);font-size:13px;font-weight:500}
h3.task-list-head{margin:0;font-size:inherit}
.task-group-toggle{display:flex;align-items:center;gap:8px;width:100%;min-height:44px;padding:0 4px;border:0;border-radius:var(--r-inner);background:none;color:inherit;text-align:left}
.task-group-toggle .count{margin-left:auto;font-family:var(--mono);font-size:13px;font-weight:500}
.task-group-chevron{width:18px;height:18px;color:var(--text-2);transform:rotate(90deg);transition:transform .15s ease}
.task-group-toggle[aria-expanded="false"] .task-group-chevron{transform:none}
@media (prefers-reduced-motion:reduce){.task-group-chevron{transition:none}}
.task-group-body{display:grid;gap:8px;margin-top:4px}
.task-group-body[hidden]{display:none}
.task-group-body>.task-empty{margin:2px 4px 4px}
/* An empty list: clear of the line above and of what follows, centred (the lead, 2026-10-01). */
.tasks-empty{padding:28px 20px 28px;text-align:center}
#tasksScreen .tasks-empty.task-section{padding-top:28px}
.tasks-empty b{display:block;font-size:16px}
.tasks-empty p{margin:6px 0 0;font-family:var(--mono);font-size:14px;line-height:1.5;color:var(--text-2)}

/* ---- A card: urgency edge, the one-tap box, then the title and its line; the rest opens the task sheet. ---- */
.task-card,.proposal{position:relative;overflow:hidden;border:1px solid var(--hairline);border-radius:var(--r-inner);background:var(--fill-1)}
.task-card::before,.proposal::before{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:var(--bar)}
/* The urgent edge is crimson lifted toward --bad, so the most urgent task has the most visible edge. */
[data-urgency="urgent"]{--bar:color-mix(in srgb,var(--crimson) 65%,var(--bad))}
[data-urgency="high"]{--bar:var(--warn)}
[data-urgency="low"]{--bar:var(--line)}
.task-card{display:grid;grid-template-columns:48px minmax(0,1fr);align-items:center;min-height:64px;padding:4px 8px 4px 6px;transition:opacity .15s ease}
.task-card.is-saving{opacity:.8}
.task-check{display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:var(--r-inner);background:none}
.task-check svg{width:24px;height:24px;padding:2px;border:1.75px solid color-mix(in srgb,var(--text-2) 65%,transparent);border-radius:8px;fill:none;stroke:transparent;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;transition:background-color .12s ease,border-color .12s ease}
@media (hover:hover) and (pointer:fine){.task-check:hover svg{border-color:var(--text)}}
.task-check[aria-checked="true"] svg{border-color:var(--primary);background:var(--primary);stroke:var(--on-primary)}
.task-body{display:block;width:100%;min-width:0;min-height:44px;padding:8px 4px;border:0;border-radius:var(--r-inner);background:none;color:inherit;text-align:left}
.task-card .task-title{font-size:15px;font-weight:600}
.task-card.task-done .task-title{text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--text-2) 60%,transparent)}
.task-card .task-sub{margin-top:4px}
.task-card .task-meta{margin:0}
/* The meta line keeps its 8px before a tag that follows it (tasks-assign.css .task-sub). */
.task-card .task-sub>.task-meta:has(+ .tag){margin-right:8px}
/* Overdue: the due day itself says so, in pink; the edge stays urgency's. */
.task-list[data-list="overdue"] .task-meta .meta-part:first-child,.home-task.is-overdue .task-meta .meta-part:first-child{color:var(--pink)}
/* Home's My tasks: the same card as a single tap target that opens the task's sheet. */
.task-card.home-task{display:block;width:100%;min-height:56px;padding:10px 12px 10px 16px;color:inherit;font:inherit;text-align:left;cursor:pointer}
/* The list's own row rules reach these buttons too; the id keeps the text 12px clear of the 4px edge. */
#homeTaskList .task-card.home-task{padding:10px 12px 10px 16px}
.home-task .task-title{display:block;font-size:15px;font-weight:600;line-height:1.35}
.home-task .task-sub{margin-top:4px}
.home-task .task-meta:empty{display:none}
/* Progress: a thin bar under the title while a task is 1-99% done (taskProgressBar, workspace.js). */
.task-progress{display:block;height:4px;margin-top:6px;overflow:hidden;border-radius:2px;background:var(--fill-2)}
.task-progress-fill{display:block;height:100%;background:var(--primary);transform:scaleX(var(--p,0));transform-origin:left;transition:transform .3s var(--ease-out)}
.team-task-note{margin:6px 0 0;font-size:13px;line-height:1.4;color:var(--text-2);overflow-wrap:anywhere}

/* ---- Proposals: the same card, answered in place, in one row per section that scrolls sideways. Each card is 80% of
   the column so the next one peeks (a lone card takes it all), and a swipe stops on a card. The row is the column's
   width, so the page never scrolls sideways; on touch its scrollbar is hidden. ---- */
#taskProposals .task-list-head{margin-bottom:4px}
.proposal-row{display:flex;gap:8px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:thin;padding-bottom:2px}
/* Side by side, a card's top edge is its own hairline, not the stacked list's row edge (workspace.css .task+.task). */
.proposal+.proposal{border-top-color:var(--hairline)}
@media (hover:none){.proposal-row{scrollbar-width:none}.proposal-row::-webkit-scrollbar{display:none}}
.proposal{display:flex;flex-direction:column;flex:0 0 80%;min-width:0;padding:12px 12px 12px 16px;scroll-snap-align:start}
.proposal:only-child{flex-basis:100%}
.proposal .task-title{overflow-wrap:anywhere}
.proposal .task-summary{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.proposal .task-actions{margin-top:auto;padding-top:10px}
/* A pending card's answer: a round X (Decline) and check (Accept, in --primary), 44px each, at the card's foot. */
.proposal-answer{justify-content:flex-end;gap:8px}
.proposal-icon{display:grid;place-items:center;flex:none;width:44px;height:44px;padding:0;border:1px solid var(--line);border-radius:var(--r-pill);background:var(--fill-2);color:var(--text);transition:opacity 120ms ease}
.proposal-icon.primary{border-color:transparent;background:var(--primary);color:var(--on-primary)}
.proposal-icon .icon{width:22px;height:22px;stroke-width:2.25;transition:transform 160ms var(--ease-out)}
.proposal-icon:active:not(:disabled) .icon{transform:scale(.88)}
.proposal-icon:disabled{opacity:.5}
@media (hover:hover) and (pointer:fine){.proposal-icon:not(.primary):hover{background:var(--fill-1)}.proposal-icon.primary:hover{background:var(--primary-hover)}}
@media (prefers-reduced-motion:reduce){.proposal-icon:active:not(:disabled) .icon{transform:none}.proposal-icon:active:not(:disabled){opacity:.72}}

/* ---- The floating New task button, above the tab bar. ---- */
.tasks-fab{position:fixed;right:max(16px,calc(50% - var(--phone) / 2 + 16px));bottom:calc(var(--nav-bottom) + 92px);z-index:40;display:grid;place-items:center;width:56px;height:56px;padding:0;border:0;border-radius:var(--r-compact);background:var(--primary);box-shadow:0 12px 28px -10px rgba(12,0,54,.55);color:var(--on-primary)}
.tasks-fab .icon{width:26px;height:26px;stroke-width:2.25}
/* The last card and its chips clear the button: the nav's 92px, the button, a gap. */
#tasksScreen.active{padding-bottom:calc(92px + 56px + 16px)}
body.sheet-open .tasks-fab{display:none}
/* Press feedback on the Tasks page, the house dim on rows, chips and toggles, a small scale on the round button and the
   check box (on its svg, so the 44px hit area stays put). A check turns only when the server says it saved. Reduced
   motion: the dim instead of the scale. */
.task-group-toggle,.task-body{transition:opacity 120ms ease}
.tasks-chip:active:not(:disabled),.task-group-toggle:active,.task-body:active:not(:disabled){opacity:.72}
.tasks-fab{transition:transform 160ms var(--ease-out),opacity 120ms ease}
.tasks-fab:active{transform:scale(.97)}
.task-check svg{transition:background-color .12s ease,border-color .12s ease,transform 160ms var(--ease-out)}
.task-check{transition:opacity 120ms ease}
.task-check:active:not(:disabled) svg{transform:scale(.92)}
@media (prefers-reduced-motion:reduce){.tasks-fab:active{transform:none;opacity:.72}.task-check:active:not(:disabled) svg{transform:none}.task-check:active:not(:disabled){opacity:.72}}

/* ---- The task sheet and New task. ---- */
.task-sheet-state{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:2px 2px 4px}
.task-sheet-state .task-meta{margin:0}
.task-sheet textarea.field{min-height:96px}
.task-sheet-actions{flex-wrap:nowrap;gap:6px}
.task-sheet-actions .btn{flex:1 1 0;min-width:0;padding:0 6px;font-size:13.5px;white-space:normal;line-height:1.15}
.task-sheet-actions .btn.task-missed{border-color:transparent;background:transparent;box-shadow:none;color:var(--text-2)}
.task-sheet-actions .btn[aria-pressed="true"]{border-color:transparent;background:var(--primary);color:var(--on-primary)}
/* A note field that grows with its text to about six lines, then scrolls (taskAutoGrow); no resize handle. */
.task-sheet textarea.task-grow{min-height:52px;resize:none;overflow-y:hidden}
.task-note-row{align-items:end}
.task-progress-range:disabled{opacity:.6}
.task-inline{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center;margin-top:10px}
.task-inline .btn{min-height:52px;border-radius:var(--r-inner)}
.task-sheet .task-notes{margin-top:0}
.task-notes-none{padding-left:0!important;border-left:0!important;color:var(--text-2)}
.task-sheet-danger{margin-top:22px;padding:14px 0 24px;border-top:1px solid var(--hairline)}
#taskNoteStatus{margin:8px 2px 0}
.task-progress-row{display:flex;align-items:baseline;justify-content:space-between}
#taskProgressOut{font-family:var(--mono);font-size:13px;font-variant-numeric:tabular-nums}
.task-progress-range{display:block;width:100%;min-height:44px;margin:0;accent-color:var(--primary)}
.task-note-review{font-weight:600}
#taskNoteStatus:empty{display:none}
/* How many people: typed, no spinner. */
#taskNewSeats{-moz-appearance:textfield;appearance:textfield}
#taskNewSeats::-webkit-inner-spin-button,#taskNewSeats::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
#taskNewDay{margin-top:10px}
/* How many people: − and + either side of the number (1 to everyone asked). */
.task-stepper{display:flex;align-items:center;gap:8px}
.task-stepper #taskNewSeats{flex:0 1 88px;min-width:0;min-height:44px;margin:0;text-align:center}
.task-step{flex:none;width:44px;height:44px;border:1px solid var(--line);border-radius:var(--r-pill);background:var(--fill-1);color:var(--text);font:inherit;font-size:20px;line-height:1}
.task-step:disabled{opacity:.4}
/* Add details: a text button that opens the description. */
.task-details-open{margin-top:10px}
#taskAssignNote{margin-top:14px}
/* Assign to: a department select (Me first) and the round search icon beside it, whose field opens over the row as
   Tasks' search does (the rules above); then the department's Whole department and its people as ticks. */
.task-to-hint{margin-top:0;margin-bottom:8px}
.task-to-bar{position:relative;display:flex;align-items:center;gap:6px;margin-bottom:8px}
.task-to-select{flex:1 1 auto;min-width:0;min-height:44px;margin:0;transition:opacity .2s ease}
.task-to-bar.is-searching .task-to-select{opacity:0;pointer-events:none}
.task-to-picked{margin:-2px 2px 8px}
.task-to{overflow:hidden;border:1px solid var(--hairline);border-radius:var(--r-inner);background:var(--fill-1)}
.task-to [hidden]{display:none!important}
.task-to-row{display:grid;grid-template-columns:20px minmax(0,1fr) auto;align-items:center;gap:12px;min-height:48px;padding:4px 14px;cursor:pointer}
.task-to-row+.task-to-row,.task-to>.task-to-row~.task-to-group .task-to-dept,.task-to-group+.task-to-group .task-to-dept{border-top:1px solid var(--hairline)}
.task-to-row input{width:20px;height:20px}
.task-to-row:has(input:checked){background:color-mix(in srgb,var(--a) 22%,transparent)}
.task-to-row:has(input:disabled){cursor:default;opacity:.5}
.task-to-row:has(input:focus-visible){outline:var(--ring-width) solid var(--ring);outline-offset:calc(-1 * var(--ring-width))}
.task-to-row input:focus-visible{outline:none}
.task-to-name{min-width:0;font-size:15px;font-weight:500;overflow-wrap:anywhere}
.task-to-row small{max-width:45vw;overflow:hidden;text-overflow:ellipsis;font-size:12.5px;color:var(--text-2);white-space:nowrap}
.task-to-dept{padding:12px 14px 6px;font-size:12px;font-weight:600;letter-spacing:.01em;color:var(--eyebrow)}
.task-to-none{margin:0;padding:12px 14px}

/* ---- Motion. The lists arrive once per open or full load (#taskLists[data-motion="in"], set by tasks-page.js): each
   group rises in, and its cards a beat after it, a short step apart and capped so a long list is never slow. A filter
   crossfades the lists ("swap"). Typing in search and the quiet reload after a write redraw in place with no motion.
   Only transform and opacity (and the tick's stroke) animate; every resting style is the final frame. ---- */
#tasksScreen.active>.tasks-scope{animation:tasks-rise .32s var(--ease-out) 40ms backwards}
/* On an open, the filters and the later-tasks line wait out of sight until the new read is drawn (data-arriving, workspace.js
   openTasks); the lists are emptied instead, so their placeholders can show, and everything rises once, with the data. */
#tasksScreen[data-arriving] :is(.tasks-tools,#tasksLaterNote){visibility:hidden}
#tasksTools[data-motion="in"]{animation:tasks-rise .42s var(--ease-out) backwards}
/* First load of the session only (openTasks.arrived); every offset together stays under 150 ms. */
#taskLists[data-motion="in"]>*{animation:tasks-rise .3s var(--ease-out) calc(min(var(--i,0),5) * 15ms) backwards}
#taskLists[data-motion="in"] .task-card{animation:tasks-rise .3s var(--ease-out) calc(min(var(--i,0),5) * 15ms + min(var(--j,0),8) * 9ms) backwards}
#taskLists[data-motion="swap"]>*{animation:tasks-fade .2s ease-out backwards}
/* A proposal card not drawn before rises in, a short step apart (tasks-assign.js); one answered in place keeps still. */
.proposal.is-arriving{animation:tasks-rise .42s var(--ease-out) calc(min(var(--j,0),5) * 50ms) backwards}
#tasksTeamList[data-motion="in"]>*{animation:tasks-rise .3s var(--ease-out) calc(min(var(--i,0),5) * 15ms) backwards}
#tasksTeamList[data-motion="in"] .task-card{animation:tasks-rise .3s var(--ease-out) calc(min(var(--i,0),5) * 15ms + min(var(--j,0),8) * 9ms) backwards}
#tasksTeamList[data-motion="swap"]>*{animation:tasks-fade .2s ease-out backwards}
/* Press feedback is above (dim, and a little give on the box and +). Ticking fills the box on a spring and draws the tick on the card tapped, before the
   lists redraw (.ticking, tasks-page.js); a reopened task's new card pops its empty box (.just-checked). */
.task-check path{stroke-dasharray:1;stroke-dashoffset:0}
.task-card.ticking .task-check svg{border-color:var(--primary);background:var(--primary);stroke:var(--on-primary);animation:tasks-pop .6s var(--spring)}
.task-card.ticking .task-check path{animation:tasks-tick .34s var(--ease-out) .06s backwards}
.task-card.ticking .task-title{animation:tasks-dim .4s ease-out forwards}
.task-card.just-checked .task-check svg{animation:tasks-pop .6s var(--spring)}
.task-card.task-done .task-title{color:var(--text-2)}
/* While the server answers, the box breathes instead of the whole card dimming at once. */
.task-card.is-saving .task-check svg{animation:tasks-wait .7s ease-in-out infinite alternate}
/* The + arrives once per session (workspace.js adds .fab-entered when it ends), with no delay, so it is never there to tap
   while unseen; reduced motion: it fades in, nothing moves (below). */
#tasksScreen.active:not(.fab-entered) .tasks-fab{animation:tasks-fab-in .36s var(--spring)}
/* With a pointer, cards, chips and the + light up under it. */
@media (hover:hover) and (pointer:fine){
  .task-body:hover{background:var(--fill-1)}
  .tasks-chip:not([aria-pressed="true"]):hover{background-color:var(--fill-2)}
  .tasks-fab:hover{background:var(--primary-hover)}
}
@keyframes tasks-rise{from{opacity:0;transform:translateY(10px)}}
@keyframes tasks-fade{from{opacity:0}}
@keyframes tasks-pop{from{transform:scale(.72)}}
@keyframes tasks-tick{from{stroke-dashoffset:1}}
@keyframes tasks-dim{to{color:var(--text-2)}}
@keyframes tasks-wait{to{opacity:.35}}
@keyframes tasks-fab-in{0%{opacity:0;transform:translateY(8px) scale(.9)}25%{opacity:1}}
/* Reduced motion: the filters and lists only fade; nothing moves. (The page-wide switch-off in index.html is beaten here
   so arrivals still don't pop.) */
@media (prefers-reduced-motion:reduce){
  #tasksTools[data-motion],:is(#taskLists[data-motion],#tasksTeamList[data-motion]) :is(.task-list,.task-card,.tasks-empty),.proposal.is-arriving{animation:tasks-fade .2s ease backwards!important}
  /* The + (Tasks, Documents, Hub) fades in once, without the rise. */
  :is(#tasksScreen,#documentsScreen).active:not(.fab-entered) .tasks-fab,#hubScreen.active:not(.hub-entered) .hub-create{animation:tasks-fade .2s ease}
  /* A tick or reopen fades instead of popping. */
  .task-card:is(.ticking,.just-checked) .task-check svg{animation:tasks-fade .2s ease}
}

/* Verify and Send back in the verification sheet (tasks-page.js, tasksTeamReview), never on a Team tasks row (2026-10-01). */
.team-task-decide{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.team-task-decide .btn{min-height:44px}
.team-task-review{margin-top:6px}
.team-task-review .task-seg{margin-bottom:10px}
.team-task-send{width:100%;min-height:48px;margin-top:10px}

/* ---- Task files and the verification sheet (2026-10-01). A picture is a thumbnail that opens full width in place. */
.task-files{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.task-file{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center}
.task-file-thumb{width:56px;height:56px;padding:0;border:1px solid var(--hairline);border-radius:var(--r-inner);overflow:hidden;background:var(--fill-1);cursor:zoom-in}
.task-file-thumb img{display:block;width:100%;height:100%;object-fit:cover}
.task-file.is-full{grid-template-columns:minmax(0,1fr) auto}
.task-file.is-full .task-file-thumb{grid-column:1/-1;width:100%;height:auto;cursor:zoom-out}
.task-file.is-full .task-file-thumb img{height:auto;object-fit:contain}
.task-file:not(:has(.task-file-thumb)){grid-template-columns:minmax(0,1fr) auto}
.task-file-info{display:flex;flex-direction:column;min-width:0}
.task-file-name{padding:0;border:0;background:none;color:var(--text);font:inherit;font-weight:600;text-align:left;overflow-wrap:anywhere;cursor:pointer;min-height:44px}
.task-file-info .task-meta{margin:0}
.task-file-add{margin-top:10px}
#taskReviewStatus:empty{display:none}
.task-review-summary{margin:0 2px;white-space:pre-wrap;overflow-wrap:anywhere}
.task-card.team-task{cursor:pointer}
/* The pencil beside the task sheet's title, and the details form it opens at the top (2026-10-01). */
.task-edit-open[aria-expanded="true"]{color:var(--primary)}
.task-edit{margin:0 0 14px;padding-bottom:14px;border-bottom:1px solid var(--hairline)}
.task-edit>.field-label:first-child{margin-top:1px}
.task-edit-actions{flex-wrap:wrap;justify-content:flex-end;margin-top:12px}
#taskEditStatus{margin:8px 2px 0}
#taskEditStatus:empty{display:none}
/* Progress Notes: each note's files under its text; the nested rows drop the note's rule. */
.task-note-text{display:block}
.task-notes .task-note-files{margin-top:8px}
.task-notes .task-note-files li{padding-left:0;border-left:0}
/* Add files: the picked files as chips, each with its remove, wrapping on a narrow phone. */
.task-pending{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 0;padding:0;list-style:none}
.task-pending:empty{display:none}
.task-pending-file{display:flex;align-items:center;gap:2px;min-width:0;max-width:100%;padding:4px 2px 4px 12px;border:1px solid var(--line);border-radius:var(--r-inner);background:var(--fill-1)}
.task-pending-info{display:flex;flex-direction:column;min-width:0}
.task-pending-name{font-size:13px;font-weight:600;line-height:1.3;overflow-wrap:anywhere}
.task-pending-info .task-meta{margin:0;font-size:11px}
.task-pending-remove{flex:none}
/* No sideways scroll on a phone (the lead, 2026-10-01): every row may shrink, long words wrap, and the body clips as a
   last guard. */
.task-sheet{min-width:0;max-width:100%}
.task-sheet .task-quote,.task-sheet .field-label{overflow-wrap:anywhere}
.task-sheet .field,.task-sheet input[type=date]{min-width:0;max-width:100%}
.task-sheet .task-seg{flex-wrap:wrap}
.task-sheet .task-seg .seg-tab{flex:1 1 60px}
.sheet-body:has(>.task-sheet){overflow-x:hidden}

/* Team tasks' Overdue head and filters, the person button on a card, and the person sheet (2026-10-06). */
#tasksTeamShow{display:contents}
.team-task.is-overdue .task-meta .meta-part:last-child{color:var(--pink)}
/* The person's name: the meta line's own type, a shade brighter, so the line reads as one (no underline, no bold block);
   the tap area reaches 6px above and below without moving the line. */
.team-task-person{display:inline;margin:-6px 0;padding:6px 0;border:0;background:none;color:var(--text);font:inherit;font-weight:600;cursor:pointer}
.team-task-person:active{opacity:.6}
.team-task-rest{display:inline-block;max-width:100%}
.person-row{cursor:pointer}
.person-figures{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:12px 0}
.person-figures>div{display:flex;flex-direction:column;gap:2px;padding:10px 8px;border:1px solid var(--line);border-radius:14px;min-width:0}
.person-figures b{font-family:var(--mono);font-size:18px;font-weight:600}
.person-figures small{font-size:12px;color:var(--text-2);overflow-wrap:anywhere}
.person-figures .is-overdue b{color:var(--pink)}
.person-tasks{list-style:none;margin:4px 0 12px;padding:0;display:flex;flex-direction:column;gap:6px}
.person-tasks li{display:flex;flex-direction:column;gap:2px;padding:8px 0;border-bottom:1px solid var(--line)}
.person-tasks li.is-overdue .meta-part:first-child{color:var(--pink)}
.person-task-title{overflow-wrap:anywhere}
.person-actions,.team-task-manage{flex-wrap:wrap;margin-top:8px}
#personMessageBox{margin-top:8px;display:flex;flex-direction:column;gap:8px}
@media (max-width:400px){.person-figures{grid-template-columns:repeat(2,minmax(0,1fr))}}