/*
 * One task on its own page (task-page.js; the Founder, 3 October 2026, 23:30). One column and one
 * left edge: the title, subtitle, facts, description and who set it all start where the card's
 * text does. The title is the size of every page's title (terminal-app.css h1, terminal-next.css
 * .page-heading h1 at 700px and under), never larger. Every control is at least 44px.
 */
/*
 * The task's page, Harmony's task-detail spec (15 October 2026, after the Founder: "a dump of information… nothing is
 * clear"): one centred container at most 960px, its text 16px in from the card's edge on a phone and 24px wide; every
 * heading, the description, the facts and the actions start on that one edge. 24px between sections.
 */
/*
 * The task's page (the Founder, 22 October 2026, on his iPhone: "Revert to regular font and make the titles slightly
 * bigger. Make it more spaced. Everything is too dense"). One centred container at most 960px. Every section is two
 * columns: its icon in a 24px column of its own, its title and its body on the one text column beside it ("The title
 * always starts with the body aligned vertically"). Every title one size, 17px semibold, larger than the 16px regular
 * body; a thin line and 20px of air between sections. Every control is at least 44px.
 */
.task-page{max-width:960px;width:100%;margin-inline:auto;display:grid;gap:12px;min-width:0;box-sizing:border-box;--task-ink:var(--ink,#24212d);--task-col:38px}
[data-theme=dark] .task-page{--task-ink:#ece9f4}
.task-page-top{display:flex;align-items:center;justify-content:flex-end;gap:12px;min-width:0}
.task-page-top>.task-page-back{margin-inline-end:auto}
.task-page-back{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-weight:600;font-size:.875rem;justify-self:start;padding-inline-end:8px}
.task-page-back .icon{width:18px;height:18px}
/* Plain | Notes, as List | Grid: one capsule, each half its mark and its word. */
.task-page .task-look-toggle{flex:none;padding:3px;gap:2px;border-radius:999px}
/* Plain or Notes: a neutral grey choice, on the plain card and on the yellow pad alike (the Founder, 23 October 2026). */
.task-page .task-look-toggle button{color:var(--muted)}
.task-page .task-look-toggle button[aria-pressed=true]{background:rgba(120,120,128,.14);color:var(--ink,#24212d)}
[data-theme=dark] .task-page .task-look-toggle button[aria-pressed=true]{background:rgba(255,255,255,.12);color:var(--ink,#f0f1f5)}
.task-page .task-look-toggle button{width:auto;height:38px;display:inline-flex;align-items:center;gap:6px;padding:0 14px;border-radius:999px;font-size:.875rem;font-weight:600}
.task-page .task-look-toggle button .icon{width:17px;height:17px}
.task-page-card{display:grid;gap:0;padding:8px 24px 24px;margin:0;min-width:0;overflow:visible}
.task-page-head{display:grid;gap:0;min-width:0}
.task-sec{display:grid;grid-template-columns:24px minmax(0,1fr);column-gap:14px;row-gap:8px;align-items:center;padding:20px 0;border-top:1px solid var(--line);min-width:0}
.task-fields>.task-sec:first-of-type{border-top:0}
.task-sec-icon{grid-column:1;grid-row:1;display:grid;place-items:center;width:24px;height:24px;color:var(--muted)}
.task-sec-icon .icon{width:20px;height:20px}
.task-page .task-sec-title{grid-column:2;grid-row:1;margin:0;font-size:1.0625rem;line-height:1.35;font-weight:600;letter-spacing:-.005em;text-transform:none;color:var(--task-ink)}
.task-sec-body{grid-column:2;min-width:0;font-size:1rem;line-height:1.55;font-weight:400;color:var(--task-ink)}
/* The Subject is the page's one h1, whole and wrapping, in the body's size and weight: the titles are the larger type.
   The shell's rule that keeps a page's h1 for screen readers only (primary-face.css, item 29) gives way here. */
.app-shell>.topbar+main#main .task-page-head h1.task-page-title,.task-page-title{position:static;width:auto;height:auto;margin:0;padding:0;overflow:visible;clip:auto;white-space:normal;border:0;font-size:1rem;line-height:1.55;font-weight:400;letter-spacing:0;color:var(--task-ink);overflow-wrap:anywhere}
.task-page-subtitle{color:var(--muted);font-size:1rem;line-height:1.5;overflow-wrap:anywhere;margin:2px 0 0}
.task-page-text{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.6;margin:0}
.task-page-description{margin:0;font-size:1rem}
/* Priority and Status: each its own section, the mark and the word under the title, plain, never a pill. */
.task-page-facts{display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-width:0}
.task-page .task-page-facts :is(.task-priority-mark,.task-state){min-height:0;margin:0;padding:0;border:0;border-radius:0;background:none;font-size:1rem;font-weight:400;gap:8px}
.task-page .task-page-facts .task-state{color:var(--task-ink)}
.task-page .task-page-facts :is(.task-state-word,.task-priority-word){font-weight:400}
.task-page .task-page-facts .task-priority-icon,.task-page .task-page-facts .task-state>svg{width:18px;height:18px}
/* The attention note: on the text column, amber words, the time after a middle dot. */
.task-page-note{display:grid;gap:4px;margin:0 0 20px var(--task-col);padding:10px 12px;border-radius:12px;background:color-mix(in srgb,var(--amber,#b45309) 9%,transparent);min-width:0}
.task-sheet-view .task-page-note{margin:0}
.task-page-note p{margin:0;line-height:1.45;overflow-wrap:anywhere}
.task-page-late{color:var(--amber,#b45309);font-weight:600;font-size:.9375rem}
.task-page-why{font-size:.9375rem}
/* Assigned to: one row per agent, its face and its name, no band and no tint (the Founder, 22 October 2026). */
.task-on-agents{display:grid;gap:10px;list-style:none;margin:0;padding:0;min-width:0}
.task-on-agent{display:grid;grid-template-columns:28px minmax(0,1fr) auto;align-items:center;column-gap:10px;min-width:0;min-height:28px;padding:0;background:none;border:0}
.task-on-agent.task-on-none{grid-template-columns:minmax(0,1fr)}
.task-on-none .task-on-name{white-space:normal}
.task-on-name{min-width:0;font-weight:400;font-size:1rem;color:var(--task-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.task-on-state{font-size:.9375rem;color:var(--muted);white-space:nowrap}
.task-on-state:empty{display:none}
.task-page .task-on-face{width:28px;height:28px;min-width:28px;border-radius:24%;overflow:hidden}
/* Details: a table on the text column, the label column muted, the value column in ink, a hairline between rows. */
.task-facts{display:grid;margin:0;min-width:0}
.task-fact{display:grid;grid-template-columns:minmax(0,9rem) minmax(0,1fr);column-gap:12px;align-items:baseline;min-width:0;padding:10px 0}
.task-fact+.task-fact{border-top:1px solid var(--line)}
.task-fact:first-child{padding-top:2px}
.task-fact dt{font-weight:400;font-size:.9375rem;line-height:1.45;color:var(--muted)}
.task-fact dd{margin:0;font-weight:400;font-size:.9375rem;line-height:1.45;color:var(--task-ink);overflow-wrap:anywhere;min-width:0}
.task-fact dd>time{display:block}
/* Requested by: the face and the name, as Assigned to draws an agent. */
.task-requester{display:inline-flex;align-items:center;gap:8px;min-width:0}
.task-requester>:first-child{flex:none;width:24px;height:24px;min-width:24px;font-size:.75rem}
.task-requester .portrait-box{border-radius:30%}
.task-fact-line{display:block;margin-top:2px;color:var(--muted);white-space:pre-wrap;overflow-wrap:anywhere}
.task-facts-zone{margin:6px 0 0;font-size:.8125rem;color:var(--muted)}
/* History, in the Working sheet: newest first, one face, the name and a compact time, the line whole and wrapping. */
.task-activity{list-style:none;margin:0;padding:0;display:grid}
.task-activity-row{display:grid;grid-template-columns:32px minmax(0,1fr);align-items:start;column-gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.task-activity-row:last-child{border-bottom:0}
.task-page .task-activity-face{width:32px;height:32px;min-width:32px;border-radius:24%;overflow:hidden}
.task-page .task-face-letter{border-radius:50%}
.task-face-letter{display:grid;place-items:center;background:var(--soft,#f2ecfa);color:var(--purple,#6d28b5);font-weight:700;font-size:14px;line-height:1}
.task-activity-copy{min-width:0;display:grid;gap:2px}
.task-activity-top{display:flex;align-items:baseline;gap:8px;min-width:0}
.task-activity-name{flex:1;min-width:0;font-size:.9375rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.task-activity-time{flex:none;font-size:.8125rem;color:var(--muted)}
.task-activity-line{display:block;min-width:0;color:var(--muted);font-size:.875rem;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}
.task-activity-link{display:block;min-width:0;font-size:.8125rem;line-height:1.5;overflow-wrap:anywhere}
/* An agent with no picture: one letter, round and centred, never the name wrapped in a square (terminal-portraits.js
   paints the name; this page shows its initial instead). */
.task-page :is(.task-on-face,.task-activity-face):has(.portrait-name){border-radius:50%!important;background:var(--soft,#f2ecfa)}
.task-page [data-portrait][data-initial].portrait-name{display:grid!important;place-items:center;width:100%;height:100%}
.task-page [data-portrait][data-initial].portrait-name>*{display:none}
.task-page [data-portrait][data-initial].portrait-name::after{content:attr(data-initial);color:var(--purple,#6d28b5);font-weight:700;font-size:14px;line-height:1}
/* The actions, after Details with a line above them (the Founder, 22 October 2026): Reassign filled in the accent, Edit
   filled soft, then Cancel task greyed and Delete a trash button. Wide, one row; on a phone two. */
.task-page-bar{border-top:1px solid var(--line);padding-top:20px;min-width:0}
.task-page-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;min-width:0}
.task-page-main{display:flex;flex-wrap:wrap;gap:10px;flex:1 1 280px;min-width:0}
.task-page-main>*{flex:1 1 0;min-width:max-content}
.task-page-ends{display:flex;gap:10px;flex:1 1 200px;min-width:0}
.task-page .btn,.task-confirm .btn{min-height:44px}
.task-page .task-page-actions .btn{white-space:nowrap;justify-content:center;font-size:.9375rem}
.task-page .btn.task-btn-soft{border-color:transparent;background:var(--soft,#f2ecfa);color:var(--purple-dark,#541c91)}
.task-page .btn.task-btn-quiet{flex:1 1 auto;border-color:transparent;background:#f0eff3;color:var(--muted,#686577)}
/* Stop and Delete: two small icons at the top of the card, at its end; Edit alone at the bottom (the Founder, 22 October
   2026, 21:31). Each is 44px to press. */
.task-page-tools{display:flex;justify-content:flex-end;padding-top:12px;min-width:0}
.task-page-tools .task-page-ends{flex:none;gap:6px}
.task-page-tools .task-confirm{flex:1 1 auto;min-width:0}
.task-page .btn.task-btn-tool{flex:none;width:44px;min-width:44px;height:44px;padding:0;justify-content:center;border-color:transparent;background:#f0eff3;color:var(--muted,#686577)}
.task-page .btn.task-btn-tool .icon{width:20px;height:20px}
.task-page .btn.task-btn-tool.task-btn-trash{color:var(--red,#bd3551)}
.task-page .task-page-actions>.btn.primary{flex:1 1 auto}
/* The edit sheet in the page's regular style: each field a row, its icon in a 24px column, its title 17px semibold over
   its control, in the page's type (the Founder, 22 October 2026, 21:31). */
.task-edit-sheet .task-edit-row{display:grid;grid-template-columns:24px minmax(0,1fr);column-gap:14px;row-gap:8px;align-items:center;padding:14px 0;border-top:1px solid var(--line);min-width:0;font-family:inherit}
.task-edit-sheet .task-edit-row>.task-sec-icon{grid-column:1;grid-row:1}
.task-edit-sheet .task-edit-row>.task-edit-title{grid-column:2;grid-row:1;margin:0;font-size:1.0625rem;line-height:1.35;font-weight:600;color:var(--ink,#24212d);text-transform:none;letter-spacing:-.005em}
.task-edit-sheet .task-edit-row>:not(.task-sec-icon):not(.task-edit-title){grid-column:2;min-width:0}
.task-edit-sheet .task-edit-row :is(input,select,textarea){font-family:inherit;font-weight:400}
.task-edit-sheet .task-edit-row[hidden]{display:none}
[data-theme=dark] .task-edit-sheet .task-edit-row>.task-edit-title{color:#ece9f4}
[data-theme=dark] .task-page .btn.task-btn-soft{background:#2f2640;color:#e4d4fb}
[data-theme=dark] .task-page :is(.btn.task-btn-quiet,.btn.task-btn-tool){background:#2a2733;color:#bdb8c9}
[data-theme=dark] .task-page .btn.task-btn-trash{color:#ff8a9a}
.task-bar-menu{position:relative}
.task-bar-menu>summary{list-style:none;cursor:pointer;width:100%}
.task-bar-menu>summary::-webkit-details-marker{display:none}
.task-bar-pop{position:absolute;bottom:calc(100% + 8px);inset-inline:0 auto;z-index:31;display:grid;gap:6px;min-width:200px;padding:8px;border:1px solid var(--line);border-radius:14px;background:var(--surface,#fff);box-shadow:0 12px 32px #1c142b29}
.task-bar-pop .btn{width:100%;justify-content:flex-start}
.task-confirm{display:grid;gap:12px;border:1px solid #edd3da;background:#fdf7f9;border-radius:12px;padding:16px}
[data-theme=dark] .task-confirm{border-color:#5a3440;background:#2a1d23}
.task-confirm p{line-height:1.5;overflow-wrap:anywhere;margin:0}
.task-confirm-error{color:var(--red);font-size:.875rem}
.task-confirm-actions{display:flex;flex-wrap:wrap;gap:10px}
.task-edit-agents{border:1px solid var(--line);border-radius:12px;padding:10px 14px;margin:0;display:grid;gap:4px}
.task-edit-agents legend{font-size:.875rem;font-weight:600;padding:0 4px}
.task-edit-agent{display:flex;align-items:center;gap:10px;min-height:44px}
@media(max-width:700px){
  .task-page-card{padding:4px 16px 16px}
  .task-confirm-actions .btn{flex:1 1 0;min-width:calc(50% - 5px)}
}

/* One card for every task, list and grid (Harmony's corrections to #223, 4 October 2026), laid out as the Feed's task row
   in its own block (the Founder, 24 October 2026: "more like how it looks in the feed… it has its own block, so it has a
   little bit more space"): the round 52px face on the left; the title in the agent's colour (agent-colour.css) with the
   day and the time at the right, the title up to two lines; where it stands and its priority under it, each its own
   icon; the due date (or the alert) · who has it under that, and the unread dot at the right end of that line, as the
   Feed has it. 12px padding, 12px corners, 10px between cards,
   the agent's tint where its colour reaches (agent-colour.css [data-agent-mark]). Selectors outrank .relation-task
   (terminal-collaboration.css) and faces.css. */
a.relation-task.task-line{display:flex;align-items:center;gap:12px;min-width:0;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--surface,#fff);color:inherit;text-align:start;overflow:hidden}
a.relation-task.task-line:last-child{border-bottom:1px solid var(--line)}
a.relation-task.task-line+a.relation-task.task-line{margin-top:10px}
a.relation-task.task-line:focus-visible{outline:3px solid var(--purple);outline-offset:2px}
a.relation-task.task-line .task-line-face,a.relation-task.task-line .portrait-box.tiny.task-line-face{flex:0 0 52px;width:52px;height:52px;min-width:52px;border-radius:50%!important;overflow:hidden;font-size:16px}
a.relation-task.task-line .task-line-face [data-portrait]{border-radius:50%!important;overflow:hidden}
/* No agent yet (Vinci, R&D 1470; Harmony, R&D 1471): the same round slot, a neutral empty silhouette; never initials. */
.task-line .task-line-face-empty{display:flex;align-items:center;justify-content:center;box-sizing:border-box;border:1px solid var(--line);background:#eef1f5;color:#9aa1ae}
.task-line .task-line-face-empty>svg{width:26px;height:26px}
[data-theme=dark] .task-line .task-line-face-empty{background:#2a2533;color:#8d86a0}
.task-line-copy{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.task-line-top,.task-line-meta,.task-line-bottom{display:flex;align-items:center;gap:8px;min-width:0}
/* The title wraps to a second line before it is cut (Primy's review, 24 October 2026). */
a.relation-task.task-line .task-line-title{flex:1;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;min-width:0;margin:0;font-size:16px;font-weight:600;line-height:22px;white-space:normal;overflow:hidden;overflow-wrap:anywhere}
.task-line-time{flex:none;align-self:flex-start;font-size:13px;line-height:22px;color:var(--muted);white-space:nowrap}
/* Not opened yet (the Founder, 16 October 2026; 24 October 2026: "the dot… needs to be on the right side, like in the
   feed"): the title in full bold, the time in the accent, and the dot at the right of the last line. Opening the task's
   page reads it (task-read.js). */
a.relation-task.task-line[data-task-unread] .task-line-title{font-weight:700}
.task-line[data-task-unread] .task-line-time{color:var(--purple);font-weight:700}
.task-line-unread{flex:none;width:12px;height:12px;margin-inline-start:auto;border-radius:50%;background:var(--purple)}
.task-line-state{flex:none;display:flex;align-items:center;max-width:100%;overflow:hidden}
.task-line-state :is(.task-state,.needs-you),.task-line-when .task-priority-mark{font-size:13px}
.task-line-when{display:flex;align-items:center;gap:8px;min-width:0}
.task-line-due{flex:none;font-size:14px;color:var(--muted)}
.task-line-sep{flex:none;color:var(--muted)}
.task-line-who{flex:1;min-width:0;font-size:14px;line-height:20px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.task-line-bottom .task-accountability-alert{flex:none;font-size:14px;line-height:20px;white-space:nowrap}
/* List: one column of the cards. Grid: tiles side by side, two on a phone (the Founder, 16 October 2026: Grid on a
   phone still drew the list); a tile is the face on top and the same lines under it, the title in up to three lines
   and the day and time under it.
   The heading spans the row. */
[data-collection-items=tasks][data-view]{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
[data-collection-items=tasks][data-view=grid]{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:700px){[data-collection-items=tasks][data-view=grid]{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}}
[data-collection-items=tasks][data-view=grid]>a.relation-task.task-line{flex-direction:column;align-items:stretch;min-height:128px}
[data-collection-items=tasks][data-view=grid] .task-line-top{flex-direction:column;align-items:stretch;gap:2px}
[data-collection-items=tasks][data-view=grid] .task-line-time{align-self:auto;line-height:18px;overflow:hidden;text-overflow:ellipsis}
[data-collection-items=tasks][data-view=grid] :is(.task-line-meta,.task-line-bottom){flex-wrap:wrap;row-gap:4px}
[data-collection-items=tasks][data-view=grid] a.relation-task.task-line .task-line-title{-webkit-line-clamp:3;line-height:20px}
[data-collection-items=tasks][data-view]>:not(.task-line){grid-column:1/-1}
[data-collection-items=tasks][data-view]>a.relation-task.task-line,[data-collection-items=tasks][data-view]>a.relation-task.task-line+a.relation-task.task-line{margin:0}

/* When a task is due, the same on the card and on the task's page (dueMark, task-priority.js): the calendar 16px, 6px
   from the words, its centre on the words' centre. The words' box is trimmed to the capitals and the baseline, so the
   box's centre is where the eye reads the line's middle; a browser without text-box keeps the line box, centred too. */
.task-due{display:inline-flex;align-items:center;gap:6px;min-width:0;line-height:1.25}
.task-due>.icon{width:16px;height:16px;flex:0 0 16px;margin:0;color:var(--muted)}
.task-due-said{display:block;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-box:trim-both cap alphabetic}
/* A priority is its own icon and its level (the Founder, 7 October 2026; 8 October 2026, 03:47, 07:30 and 18:30): four
   bars stacked like a list and the arrow up beside them, one shape for every level. ONE bar is the level's colour; the
   other three bars and the arrow are grey (--priority-rest, neutral in both themes), so the level is read from the bar
   alone. Urgent the top bar in bright red, High the second in pink, Medium the third in bright yellow, Low the bottom
   one in soft light blue. No edge on any of them (18:30: the yellow's stroke "looks a little bit bad"). The word beside
   it in its level's colour (below). Never a dot, never a word in a box. */
:root{--priority-rest:#bdbac6}
[data-theme=dark]{--priority-rest:#5d5a68}
.task-priority-mark{flex:0 0 auto;display:inline-flex;align-items:center;gap:5px;padding:0;border:0;background:none;color:var(--muted,#686577);font-size:12px;font-weight:600;line-height:1;white-space:nowrap}
.task-priority-mark[data-task-priority-mark=urgent]{color:var(--red,#bd3551)}
.task-priority-icon{flex:none;width:16px;height:16px;overflow:visible;color:var(--level);fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}
.task-priority-icon .task-priority-bar{stroke:var(--priority-rest);stroke-width:2}
.task-priority-icon .task-priority-bar.task-priority-lit{stroke:var(--level)}
.task-priority-icon .task-priority-arrow{stroke:var(--priority-rest);stroke-width:1.75}
.task-priority-icon[data-level=urgent]{--level:#e5191f}
.task-priority-icon[data-level=high]{--level:#ec4899}
.task-priority-icon[data-level=medium]{--level:#facc15}
.task-priority-icon[data-level=low]{--level:#4a90d9}
[data-theme=dark] .task-priority-icon[data-level=urgent]{--level:#ff4d4d}
[data-theme=dark] .task-priority-icon[data-level=high]{--level:#ff5fa8}
[data-theme=dark] .task-priority-icon[data-level=medium]{--level:#fde047}
[data-theme=dark] .task-priority-icon[data-level=low]{--level:#8ccbff}
.task-priority-mark::before,.task-priority-mark::after{content:none;display:none}
[data-theme=dark] .task-priority-mark[data-task-priority-mark=urgent]{color:#ff9aaa}
/* The word in its level's colour too (the Founder, 8 October 2026, 19:20: "you write Urgent in red, High in pink, Medium
   yellow, Low blue, the text itself also, so it becomes really easy to identify"): on task rows, a task's page and Home's
   tiles. On a light card the words take a deeper shade of the icon's colour so they stay readable. */
.task-priority-mark[data-task-priority-mark=high],.home-task-stat[data-level=high] .home-stat-text>span{color:#db2777}
.task-priority-mark[data-task-priority-mark=medium],.home-task-stat[data-level=medium] .home-stat-text>span{color:#c99400}
.task-priority-mark[data-task-priority-mark=low],.home-task-stat[data-level=low] .home-stat-text>span{color:#2f7fc4}
.home-task-stat[data-level=urgent] .home-stat-text>span{color:var(--red,#bd3551)}
[data-theme=dark] .task-priority-mark[data-task-priority-mark=high],[data-theme=dark] .home-task-stat[data-level=high] .home-stat-text>span{color:#ff7ab8}
[data-theme=dark] .task-priority-mark[data-task-priority-mark=medium],[data-theme=dark] .home-task-stat[data-level=medium] .home-stat-text>span{color:#fde047}
[data-theme=dark] .task-priority-mark[data-task-priority-mark=low],[data-theme=dark] .home-task-stat[data-level=low] .home-stat-text>span{color:#8ccbff}
[data-theme=dark] .home-task-stat[data-level=urgent] .home-stat-text>span{color:#ff9aaa}
/* Where a task stands and its priority on one line under its title (the Founder, 8 October 2026: the two sat on
   different lines): each mark's words trimmed to their capitals and baseline, so its icon is centred on the letters,
   and the facts row centres the marks themselves, never a line box around them. */
.task-page-facts>.task-page-status{display:inline-flex;align-items:center;min-width:0}
@supports (text-box:trim-both cap alphabetic){
 .task-state-word,.task-priority-word{display:block;text-box:trim-both cap alphabetic}
}
/* The View: how the whole list is laid out (date added, priority, status), beside New task in the heading. */
.task-view{display:inline-flex;align-items:center;gap:8px;font-size:.875rem;font-weight:600;color:var(--muted);margin:0;min-width:0}
.task-view .input{width:auto;min-height:44px;padding:9px 10px;font-weight:400;color:inherit}
.page-heading .task-view .input{color:var(--ink,#24212d)}
.task-group-head{margin:18px 0 2px;font-size:.75rem;line-height:1.4;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.card-head+.task-group-head{margin-top:0}
.task-group-count{font-weight:600;letter-spacing:0;margin-inline-start:2px}
[data-collection-items=tasks][data-view]>.task-group-head{margin:8px 0 0}
/* A task an agent started at home (0112): how far along the agent says it is. */
.task-progress-bar{height:6px;border-radius:999px;background:var(--soft);overflow:hidden}
.task-progress-bar>span{display:block;height:100%;border-radius:inherit;background:var(--purple)}

/* Accountability is about owed work, separate from an agent's connection pill. */
.agent-owed,.task-accountability-part{display:block;font-size:.8125rem;line-height:1.5;white-space:normal;overflow-wrap:anywhere;color:var(--muted)}
.task-on-person{display:grid;gap:4px;min-width:0}
.task-on-person .task-accountability-part{font-weight:400}
.task-accountability-alert{display:block;color:var(--amber);font-size:.8125rem;overflow-wrap:anywhere}
.task-deadline-fields{display:grid;gap:8px;min-width:0}
.task-deadline-fields input{min-width:0;width:100%;max-width:100%;box-sizing:border-box}
.task-line[data-exact-accountability] .task-line-when,.task-line[data-exact-accountability] .task-due-said,.task-page-due .task-due-said{min-width:0;white-space:normal;overflow-wrap:anywhere}

.task-line[data-exact-accountability] .task-line-bottom{flex-wrap:wrap;row-gap:2px}
/* The task inside the Working sheet: the page's sections, compact. */
.task-sheet-view{display:grid;gap:0;padding:4px 0 8px}
.task-sheet-view .task-sec{padding:14px 0}
.task-page.task-sheet-view .task-sec-title{font-size:1rem}
.working-task-nav{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 0}
.task-steps{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.task-step{display:flex;align-items:flex-start;gap:10px;min-height:28px}
.task-step input{width:20px;height:20px;margin:2px 0 0;flex:none;accent-color:var(--accent,var(--purple,#6d28b5))}
.task-step-text{overflow-wrap:anywhere;line-height:1.6}
/* TASK NOTES and the task's number head the card in Notes only. */

/* Notes: a sheet with faint ruled lines, a margin line and punch holes. The margin line is neutral grey, never red (the
   Founder, 22 October 2026: "make it just neutral"). Every value is handwriting and only the titles and the Details
   labels keep the page's type: who it is assigned to, Subject, Priority's and Status's words, the Description, the Next
   steps, the Details values and the updates' words. One size for all of them, the Subject no larger than the
   Description, never bold, in a soft pencil grey (graphite on paper, a light pencil in dark); Priority keeps its coloured
   icon (the Founder, 22 October 2026, 21:31). Without the web font the system's handwriting faces answer; the register
   serves no font from outside (font-src 'self'). */
.task-page.task-look-notes .task-page-card{--rule:color-mix(in srgb,var(--muted,#686577) 16%,transparent);--margin:color-mix(in srgb,var(--muted,#686577) 38%,transparent);position:relative;padding-inline-start:64px;background-color:var(--paper,#fffdf6);background-image:linear-gradient(to right,transparent 47px,var(--margin) 47px,var(--margin) 49px,transparent 49px);box-shadow:0 1px 0 var(--line),0 10px 24px #1c142b14}
[data-theme=dark] .task-page.task-look-notes .task-page-card{--paper:#24202c}
.task-page.task-look-notes .task-page-card::before{content:"";position:absolute;inset-inline-start:14px;top:28px;bottom:28px;width:16px;background:radial-gradient(circle,var(--bg,#e9e4f1) 0 7px,transparent 7.5px) center top/16px 25% repeat-y;pointer-events:none}
.task-page.task-look-notes{--pencil:#55525f}
[data-theme=dark] .task-page.task-look-notes{--pencil:#cfcbd8}
.task-page.task-look-notes :is(.task-field-subject .task-field-value,.task-field-description .task-field-value,.task-step-text,.task-on-name,.task-on-state,.task-priority-word,.task-state-word,.task-fact dd,.task-activity-name,.task-activity-line){font-family:Caveat,Kalam,'Segoe Print','Bradley Hand','Comic Sans MS',cursive;font-size:1.125rem;line-height:26px;font-weight:400;color:var(--pencil)}
.task-page.task-look-notes :is(.task-field-subject .task-field-value,.task-field-description .task-field-value,.task-step-text){background-image:repeating-linear-gradient(transparent 0 25px,var(--rule) 25px 26px)}
/* A ruled line only between rows a value fills: none under a value of one row (the Founder, 23 October 2026: "Title doesn't
   need to have a line under it unless it's more than one line"). The lines stop one row short of the value's height. */
.task-page.task-look-notes :is(.task-field-subject .task-field-value,.task-field-description .task-field-value,.task-step-text){background-size:100% calc(100% - 26px);background-repeat:no-repeat}
.task-page.task-look-notes .task-fact dd :is(time,span,a){font:inherit;color:inherit}
.app-shell>.topbar+main#main .task-page.task-look-notes .task-page-head h1.task-page-title{font-size:1.125rem;line-height:26px;font-weight:400;color:var(--pencil)}
.task-page.task-look-notes .task-step{align-items:center}
@media(max-width:700px){
  .task-page.task-look-notes .task-page-card{padding-inline-start:44px;background-image:linear-gradient(to right,transparent 31px,var(--margin) 31px,var(--margin) 33px,transparent 33px)}
  .task-page.task-look-notes .task-page-card::before{inset-inline-start:6px}
}

/* Stop task and Delete task at the foot of the edit sheet (the Founder, 23 October 2026). */
.task-edit-ends{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 6px;padding-top:16px;border-top:1px solid var(--line,#e7e5ee)}
.task-edit-ends .btn.task-edit-end{display:inline-flex;align-items:center;gap:8px;min-height:44px}
.task-edit-ends .btn.task-edit-end .icon,.task-edit-ends .btn.task-edit-end svg{width:18px;height:18px}
.task-edit-ends .btn.task-edit-delete{color:var(--red,#bd3551)}

/* Plain / Notes: a small pill on the Assigned to line, at its right (the Founder, 23 October 2026), not above the card. */
.task-sec.task-page-assigned{position:relative}
.task-sec-aside{position:absolute;inset-inline-end:0;top:10px;display:flex;align-items:center}
.task-page .task-sec-aside .task-look-toggle{padding:2px;gap:2px}
.task-page .task-sec-aside .task-look-toggle button{height:32px;padding:0 10px;font-size:.8125rem;gap:5px}
.task-page .task-sec-aside .task-look-toggle button .icon{width:15px;height:15px}