/* Tasks: what every tasks screen shares (state and due badges). Loaded on back-office and
   working pages alike, so it uses only colours both define, with fallbacks, and its own amber
   (due today, the Tasks panel's hints), lighter on a dark page so it stays readable. */
:root { --task-amber: #8a5a00; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --task-amber: #e0a640; }
}
:root[data-theme="dark"] { --task-amber: #e0a640; }
.task-state {
  display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 12px; line-height: 1.6;
  font-weight: 600; white-space: nowrap; background: #e8eceb; color: #33413d;
}
.task-state-ready { background: #e3effa; color: #1d4f7c; }
.task-state-in_progress { background: #dff3e8; color: #1f6a43; }
.task-state-blocked { background: #fde8e6; color: #9b2c22; }
.task-state-on_hold { background: #fbf1d9; color: #7a5a12; }
.task-state-for_review { background: #efe7fb; color: #5b3a92; }
.task-state-complete { background: #e2f1ea; color: #2f5d50; }
.task-state-cancelled { background: #eeeeee; color: #6b6b6b; text-decoration: line-through; }
.task-due { font-size: 12px; white-space: nowrap; color: var(--body-quiet-color, var(--muted, #666)); }
.task-due-today { color: var(--task-amber); font-weight: 600; }
.task-due-overdue { color: var(--error-fg, #b3261e); font-weight: 600; }
/* The count on the header's Tasks link (task_badge.py): shaped like the Messages badge, which it
   can't share a class with (chat.js takes the first .chat-badge for its unread count). Red when
   something of yours is overdue. */
.tasks-badge {
  display: inline-block; min-width: 16px; padding: 0 5px; margin-left: 4px; border-radius: 999px;
  background: rgba(255, 255, 255, .28); color: #fff; font-size: 11px; font-weight: 600; line-height: 16px;
  text-align: center;
}
.tasks-badge.overdue { background: #d64545; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .task-state { filter: brightness(.85) saturate(1.1); }
}
:root[data-theme="dark"] .task-state { filter: brightness(.85) saturate(1.1); }

/* A map of tasks and their links (tasks/_map.html, apps/tasks/maps.py): Tasks' Map view and a
   task's Waits for panel. Boxes coloured by status down their left edge; the task whose page it
   is outlined; faded, those outside the tab and filters. Wider than the screen, it scrolls. */
.task-map-scroll { overflow: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }
/* Tasks' Map view takes the window's width: a plan runs wide. */
body > main:has(.task-results .task-map) { max-width: none; }
.task-map { display: block; font-family: inherit; }
.task-map-line { fill: none; stroke: #8fa79e; stroke-width: 1.6; }
.task-map-line.faded { opacity: .5; }
.task-map marker path, .task-map-key marker path { fill: #8fa79e; }
#task-map-arrow path { fill: #8fa79e; }
.task-map-box .box { fill: var(--body-bg, var(--surface, #fff)); stroke: var(--hairline-color, var(--border, #d9dcd7)); stroke-width: 1; }
.task-map-box:hover .box, .task-map-box:focus .box { stroke: var(--primary, #2f5d50); stroke-width: 1.5; }
.task-map-box.focus .box { stroke: var(--primary, #2f5d50); stroke-width: 2.5; }
.task-map-box.faded { opacity: .55; }
.task-map-box text { fill: var(--body-fg, var(--text, #1d1d1b)); font-size: 13px; }
.task-map-box .num { font-size: 12px; font-weight: 500; font-family: ui-monospace, Menlo, monospace; fill: var(--body-quiet-color, var(--muted, #6b6b66)); }
.task-map-box .state { font-size: 11.5px; font-weight: 600; }
.task-map-box .meta { font-size: 11.5px; fill: var(--body-quiet-color, var(--muted, #6b6b66)); }
.task-map-box.overdue .meta { fill: #b3261e; font-weight: 600; }
.task-map-box .stripe { fill: #9aa3ab; }
.task-map-box.st-ready .stripe, .task-map-box.st-ready .state { fill: #2a6aa3; }
.task-map-box.st-in_progress .stripe, .task-map-box.st-in_progress .state { fill: #23875a; }
.task-map-box.st-blocked .stripe, .task-map-box.st-blocked .state { fill: #c0392b; }
.task-map-box.st-on_hold .stripe, .task-map-box.st-on_hold .state { fill: #b07d12; }
.task-map-box.st-for_review .stripe, .task-map-box.st-for_review .state { fill: #7a4fc0; }
.task-map-box.st-complete .stripe, .task-map-box.st-complete .state { fill: #2f5d50; }
.task-map-box.st-cancelled .stripe, .task-map-box.st-cancelled .state { fill: #8a8a8a; }
.task-map-box.st-cancelled .title { text-decoration: line-through; }
/* A record a task waits for: dashed, green once it's done. */
.task-map-record .box { stroke-dasharray: 6 4; stroke: var(--body-quiet-color, var(--muted, #8a8a85)); }
.task-map-record .state { fill: var(--body-quiet-color, var(--muted, #6b6b66)); font-weight: 600; }
.task-map-record.done .box { stroke: #2f8a5b; }
.task-map-record.done .meta { fill: #2f8a5b; font-weight: 600; }
.task-row-done a { text-decoration: line-through; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .task-map-box :is(.stripe, .state) { filter: brightness(1.35); } }
:root[data-theme="dark"] .task-map-box :is(.stripe, .state) { filter: brightness(1.35); }
.task-map-key { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 8px 0 0; font-size: 12.5px;
                color: var(--body-quiet-color, var(--muted, #6b6b66)); }
.task-map-key span { display: inline-flex; align-items: center; gap: 6px; }
.task-map-note { margin: 8px 0 0; font-size: 13px; }
.task-map-empty { margin: 24px 0; }
/* On a task's page, folded away until asked for. */
.task-map-details { margin-top: 12px; }
.task-map-details > summary { cursor: pointer; color: var(--link-fg, var(--accent, #2f5d50)); font-size: 13px; font-weight: 600; }
.task-map-details[open] > summary { margin-bottom: 8px; }
.task-held { margin: 2px 0 10px; padding: 8px 10px; border-radius: 8px; background: #fde8e6; color: #9b2c22; font-size: 13px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .task-held { background: #43201d; color: #ff8a80; } }
:root[data-theme="dark"] .task-held { background: #43201d; color: #ff8a80; }

/* What a task waits for, under its title (Tasks' list and board, a task's Waits for panel):
   each one links to it; done ones are ticked and quieter. */
.task-waits { flex-basis: 100%; margin-top: 3px; font-size: 12.5px; line-height: 1.4;
              color: var(--body-quiet-color, var(--muted, #6b6b66)); }
.task-waits a.task-wait { font-weight: 600; color: #a5372c; text-decoration: none; }
.task-waits a.task-wait:hover { text-decoration: underline; }
.task-waits a.task-wait.done { font-weight: 400; color: #2f8a5b; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .task-waits a.task-wait { color: #ff8a80; }
  :root:not([data-theme="light"]) .task-waits a.task-wait.done { color: #6fcf97; } }
:root[data-theme="dark"] .task-waits a.task-wait { color: #ff8a80; }
:root[data-theme="dark"] .task-waits a.task-wait.done { color: #6fcf97; }
.task-project-links { margin: 6px 0 4px; font-size: 13px; }
.task-project-links .task-quiet { margin-left: 4px; }