/* Tasks (Work), and the pieces the Work pages share (tasks.js): the owner's cards, tabs, tables, forms, avatars and
   department dots, in the frame's tokens. My Day, Inbox, Projects and Goals use these beside their own sheet. */
:root { --tasks-violet: #6d4fd8; --tasks-violet-bg: rgba(109,79,216,.1); }
:root[data-theme="dark"] { --tasks-violet: #a78bfa; --tasks-violet-bg: rgba(167,139,250,.14); }
.pill.tasks-violet { color: var(--tasks-violet); background: var(--tasks-violet-bg); }
.pill.tasks-accent { color: var(--red2); background: var(--sel); }
.pill.tasks-nodot::before { content: none; }
.tasks-hint { color: var(--text3); font-size: 13px; }
.tasks-av.none { background: var(--chip); color: var(--text3); }
.tasks-dept { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text3); white-space: nowrap; }
.tasks-dept i, .tasks-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex: none; }
.tasks-card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; min-width: 0; }
.tasks-card-h { display: flex; align-items: center; gap: 9px; padding: 13px 16px; border-bottom: 1px solid var(--line); font-weight: 700; color: var(--head); }
.tasks-card-h > svg.i { color: var(--red); }
.tasks-sub { margin-left: auto; font-weight: 500; color: var(--text3); font-size: 12px; }
.tasks-card-b { padding: 14px 16px; }
.tasks-input { height: 34px; border: 1px solid var(--line2); background: var(--raise); border-radius: 8px; padding: 0 10px; outline: 0; min-width: 0; font: inherit; color: var(--text); }
.tasks-input:focus-visible { border-color: var(--red); outline: 0; }
.tasks-input::placeholder { color: var(--text3); }
select.tasks-input { padding-right: 6px; }
/* a form of the Work pages: small capital labels over their fields, two to a row */
.tasks-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 10px; padding: 14px 16px; }
.tasks-form label { display: block; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); margin-bottom: 6px; }
.tasks-form .tasks-input { width: 100%; }
.tasks-form .tasks-wide, .tasks-form .tasks-acts { grid-column: 1 / -1; }
.tasks-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.tasks-new { margin-bottom: 16px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tasks-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 18px; overflow-x: auto; }
.tasks-tabs button { padding: 9px 12px; color: var(--text3); font-weight: 600; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; display: flex; align-items: center; gap: 7px; }
.tasks-tabs button:hover { color: var(--text); }
.tasks-tabs button[aria-pressed="true"] { color: var(--text); border-color: var(--red); }
.tasks-bar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; align-items: center; }
.tasks-bar .seg { background: var(--raise); border-color: var(--line2); height: 34px; align-items: center; }
.tasks-bar .seg button { height: 28px; font-weight: 600; font-size: 13px; }
.tasks-bar .seg button[aria-pressed="true"] { background: var(--chip); box-shadow: none; }
.tasks-bar .btn { height: 34px; }
.tasks-bar .btn[aria-pressed="true"] { border-color: var(--bad); color: var(--bad); background: var(--bad-bg); }
.tasks-age { margin-left: auto; }
.tasks-banner { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--bad); background: var(--bad-bg); margin-bottom: 16px; font-weight: 600; }
.tasks-banner > svg.i { color: var(--bad); }
.tasks-banner button { margin-left: auto; color: var(--bad); font-weight: 700; white-space: nowrap; }
.tasks-banner.warn { border-color: var(--note-line); background: var(--note-bg); font-weight: 400; align-items: flex-start; }
.tasks-banner.warn > svg.i { color: var(--warn); margin-top: 3px; }
.tasks-tw { background: var(--panel); }
.tasks-tw td.tasks-name { white-space: normal; min-width: 240px; }
.tasks-name { font-weight: 600; }
.tasks-name a { color: inherit; text-decoration: none; } .tasks-name a:hover { text-decoration: underline; }
.tasks-prog { height: 6px; border-radius: 6px; background: var(--chip); overflow: hidden; min-width: 80px; }
.tasks-prog i { display: block; height: 100%; background: var(--red); border-radius: 6px; }
/* the board: a column per status, each task a card; a task moves by its own "Move to…" */
.tasks-board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 1fr); gap: 14px; overflow-x: auto; padding-bottom: 8px; }
.tasks-col { background: var(--side); border: 1px solid var(--line); border-radius: 12px; padding: 10px; min-height: 200px; }
.tasks-col-h { display: flex; align-items: center; justify-content: space-between; padding: 2px 4px 10px; }
.tasks-col-h b { font: 12px var(--mono); color: var(--faint); }
.tasks-kcard { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 11px 12px; margin-bottom: 8px; display: flex; flex-direction: column; gap: 8px; }
.tasks-kcard:hover { border-color: var(--line2); }
.tasks-kcard .tasks-hint { font-size: 12px; margin-top: -4px; }
.tasks-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tasks-meta .tasks-av { margin-left: auto; width: 22px; height: 22px; font-size: 9px; }
.tasks-kempty { border: 1px dashed var(--line2); border-radius: 10px; padding: 18px; text-align: center; color: var(--faint); font-size: 13px; }
.tasks-move { appearance: none; border: 0; background: none; font: 600 12px var(--sans); color: var(--text3); cursor: pointer; padding: 2px 0; align-self: flex-start; border-radius: 4px; }
.tasks-move:hover { color: var(--text); } .tasks-move option { background: var(--raise); color: var(--text); }
/* a list row's Move shows on its hover or focus; it keeps its place, so the column holds its width */
.tasks-tw .tasks-move { margin-left: 10px; opacity: 0; }
.tasks-tw tr:is(:hover, :focus-within) .tasks-move { opacity: 1; }
@media (hover: none) { .tasks-tw .tasks-move { opacity: 1; } }
@media (max-width: 900px) { .tasks-new { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tasks-age { margin-left: 0; } }
@media (max-width: 760px) { .tasks-form { grid-template-columns: minmax(0, 1fr); } .tasks-bar form, .tasks-bar form .tasks-input { width: 100%; }
  /* a phone's list keeps Task, Status and Due */
  .page[data-page="tasks"] .tasks-tw :is(th, td):is(:nth-child(2), :nth-child(3), :nth-child(5), :nth-child(6)) { display: none; }
  .page[data-page="tasks"] .tasks-tw td.tasks-name { min-width: 0; }
  .page[data-page="tasks"] .tasks-tw .tasks-move { display: block; margin: 4px 0 0; opacity: 1; } }