/* =========================================================================
   Tasks: urgency and assigning (tasks-assign.js).
   The switches sit inside the New task panel, so they carry no blur of their own (blur lives on three levels only),
   as Social's compose switch does. Each is a set of native radios drawn as the app's glass switch.
   ========================================================================= */
.task-seg{margin-top:0;-webkit-backdrop-filter:none;backdrop-filter:none}
.task-seg .seg-tab{display:flex;align-items:center;justify-content:center;text-align:center;cursor:pointer;-webkit-tap-highlight-color:transparent}
.task-seg .seg-tab:has(input:checked){background:var(--tab-active);box-shadow:inset 0 0 0 1px var(--tab-edge);color:var(--text)}
.task-seg .seg-tab:has(input:focus-visible){outline:var(--ring-width) solid var(--ring);outline-offset:var(--ring-offset)}
/* The chosen urgency takes its badge's colour; the word is there too. */
/* Urgency and Due share one chosen look (the switch's); a chosen urgency adds only its colour on the edge and the word. */
.task-seg .seg-tab[data-value="urgent"]:has(input:checked){box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--crimson) 65%,var(--bad));color:var(--bad)}
.task-seg .seg-tab[data-value="high"]:has(input:checked){box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--warn) 70%,transparent);color:var(--warn)}
/* A manager's own department: a value, not a field. */
.task-fixed{margin:0 2px;font-size:16px;font-weight:600;line-height:1.4;color:var(--text);overflow-wrap:anywhere}
#taskAssignNote{margin-top:12px}

/* ---- The urgency badge on a row (Tasks, Home's Team tasks): filled, so it never reads as the outlined status chip.
   Urgent is red, High amber, Normal quiet, Low muted; the name is always written. ---- */
.task-urgency{flex:none;display:inline-block;padding:3px 9px;border:1px solid var(--line);border-radius:var(--r-pill);background:var(--fill-2);font-family:var(--font);font-size:11px;font-weight:600;line-height:1.3;letter-spacing:0;color:var(--text-2);white-space:nowrap}
.task-urgency.urgency-urgent{border-color:var(--crimson);background:var(--crimson);color:var(--text)}
.task-urgency.urgency-high{border-color:color-mix(in srgb,var(--warn) 55%,transparent);background:color-mix(in srgb,var(--warn) 16%,transparent);color:var(--warn)}
.task-urgency.urgency-low{background:var(--fill-1);color:var(--text-2)}
.task-meta .meta-part{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}
/* A row's second line (Tasks, Home's My tasks and Team tasks): the badge, then the rest of the line beside it. */
.task-sub{display:block;margin-top:6px}
/* The line flows as text after the badge, so a second line starts at the left edge, not under the badge's end. Every
   piece keeps 8px after it (the lead, 2026-10-06: the status tag sat on the due day): the badge, the meta line's last
   word, and a tag, which starts flush left when it wraps. */
.task-sub>.task-urgency{margin-right:8px;vertical-align:1px}
.task-sub>p,.task-sub>.task-meta{display:inline;margin:0}
.task-sub>:is(p,.task-meta):has(+ .tag){margin-right:8px}
.task-sub>.tag{margin:3px 8px 3px 0;vertical-align:1px}

/* ---- Proposals (a task offered to a whole department): above the lists, answered in place. Their sections and rows are in tasks-page.css. ---- */
#taskProposalsMessage{margin:0 0 6px}
.proposal .task-actions .btn{min-height:44px}