/* The task page (apps/tasks/admin.py; templates/admin/tasks/task/). Back-office pages only, so it
   uses Django admin's colours, which follow light and dark. Badges are tasks.css's. */

/* Under the title: [Ready] · From Don, 12 Oct · For Jack · Due Fri 14 Oct */
.task-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; margin: 0 0 14px;
                color: var(--body-quiet-color); font-size: 14px; }
.task-summary > * + *::before { content: "·"; margin: 0 8px; color: var(--body-quiet-color); font-weight: 400; }
.task-summary .task-due { font-size: 14px; }

/* For: tick boxes of everyone on staff, a few to a row. */
form .aligned div.task-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
                                gap: 0 14px; flex: 1; min-width: 0; }
form .aligned div.task-people label { display: flex; align-items: center; gap: 6px; width: auto; min-width: 0;
                                      padding: 3px 0; font-weight: 400; cursor: pointer; }
form .aligned div.task-people input { flex: none; width: auto; margin: 0; }  /* not stretched on phones */
form .aligned div.task-people label:has(input:disabled) { color: var(--body-quiet-color); cursor: default; }

.task-state-note { margin-top: 4px; color: var(--body-quiet-color); overflow-wrap: anywhere; }
.task-quiet, .task-kind { color: var(--body-quiet-color); font-size: 12px; }
.task-error { color: var(--error-fg); }
.task-chip { display: inline-flex; align-items: baseline; gap: 6px; padding: 2px 10px; border-radius: 999px;
             border: 1px solid var(--hairline-color); background: var(--darkened-bg); font-size: 13px; }

/* The right-hand panels: About, Waits for, Files and links. */
.task-panel { padding-bottom: 6px; }
.task-panel .task-rows { margin: 0; padding: 0; list-style: none; }
.task-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; padding: 7px 10px;
            border-bottom: 1px solid var(--hairline-color); font-size: 13px; list-style: none; }
.task-row a { font-weight: 600; overflow-wrap: anywhere; }
.task-row-cancelled a { color: var(--body-quiet-color); text-decoration: line-through; }
.task-x { margin-left: auto; padding: 0 6px; border: 0; border-radius: 4px; background: none; cursor: pointer;
          color: var(--body-quiet-color); font-size: 18px; line-height: 1.1; }
.task-x:hover, .task-x:focus-visible { color: var(--delete-button-bg, #ba2121); background: var(--darkened-bg); }
.task-panel .task-subhead { margin: 14px 10px 2px; padding: 0; font-size: 12px; font-weight: 500;
                color: var(--body-quiet-color); }
.task-panel .side-empty { margin: 8px 10px; padding: 0; }
.task-panel .help { margin: 0 10px 6px; padding: 0; }
.task-panel .task-panel-error { margin: 6px 10px; padding: 0; color: var(--error-fg); font-size: 13px; }

/* "2 of 5 complete" */
.task-progress { display: block; width: calc(100% - 20px); height: 8px; margin: 10px 10px 4px; border: 0;
                 border-radius: 999px; background: var(--darkened-bg); overflow: hidden;
                 -webkit-appearance: none; appearance: none; }
.task-progress::-webkit-progress-bar { background: var(--darkened-bg); border-radius: 999px; }
.task-progress::-webkit-progress-value { background: var(--primary); border-radius: 999px; }
.task-progress::-moz-progress-bar { background: var(--primary); border-radius: 999px; }

/* One-line adds (a task it waits for, files, a link) and the searches. */
.task-add { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 8px 10px; }
.task-add input[type=text], .task-add input[type=url] { flex: 1 1 140px; min-width: 0; box-sizing: border-box; }
.task-add input[type=file] { flex: 1 1 180px; min-width: 0; font-size: 13px; }
.task-search { position: relative; margin: 8px 10px; }
.task-search input { width: 100%; box-sizing: border-box; }
.task-search .task-results { position: absolute; z-index: 30; top: 100%; left: 0; right: 0; max-height: 320px;
                             overflow-y: auto; margin: 2px 0 0; padding: 4px 0; list-style: none;
                             background: var(--body-bg); border: 1px solid var(--border-color); border-radius: 6px;
                             box-shadow: 0 6px 18px rgb(0 0 0 / .14); }
.task-search .task-results li { margin: 0; padding: 0; list-style: none; }
.task-results button { display: block; width: 100%; padding: 6px 10px; border: 0; background: none; cursor: pointer;
                       text-align: left; font: inherit; font-size: 13px; color: var(--body-fg); }
.task-results button:hover, .task-results button:focus { background: var(--selected-row); outline: none; }
.task-results button:disabled { color: var(--body-quiet-color); cursor: default; background: none; }
.task-results-empty { padding: 6px 10px; color: var(--body-quiet-color); font-size: 13px; }

/* A move's note page (Blocked…, Hold…, Send back…). */
.task-note-form textarea { width: 100%; max-width: 640px; box-sizing: border-box; }
.task-note-form .help { margin: 6px 0 0; padding: 0; }

@media (max-width: 767px) {
  form .aligned div.task-people { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
  .task-row { padding: 8px 6px; }
}

/* The status line, first in the record bar (change_form.html, views_task.status_line): Blocked
   → Ready → Started → Held → Pending review → Complete as one row of arrows. The current status
   is filled in its colour; one the person can move it to is a button (the one the page suggests
   next in bold); the rest are quiet. On a phone it has a row of its own and scrolls sideways,
   the current status in view (task_page.js 5). */
.task-line { --arrow: 9px; display: flex; flex: 0 1 auto; max-width: 100%; margin: 0 8px 0 0; padding: 0;
             list-style: none; overflow-x: auto; scrollbar-width: none; }
.task-line::-webkit-scrollbar { display: none; }
.task-step { flex: 0 0 auto; margin: 0 0 0 calc(2px - var(--arrow)); padding: 0; list-style: none; }
.task-step:first-child { margin-left: 0; }
.task-step > :is(button, span) {
  display: flex; align-items: center; box-sizing: border-box; min-height: 2rem; margin: 0;
  padding: 0 calc(var(--arrow) + 9px) 0 calc(var(--arrow) + 12px); border: 0; border-radius: 0;
  background: var(--darkened-bg, #f2f2f2); color: var(--body-quiet-color, #666); font: inherit;
  font-size: 13px; font-weight: 500; line-height: 1; white-space: nowrap;
  clip-path: polygon(0 0, calc(100% - var(--arrow)) 0, 100% 50%, calc(100% - var(--arrow)) 100%, 0 100%,
                     var(--arrow) 50%);
}
.task-step:first-child > * { padding-left: 14px; border-radius: 4px 0 0 4px;
  clip-path: polygon(0 0, calc(100% - var(--arrow)) 0, 100% 50%, calc(100% - var(--arrow)) 100%, 0 100%); }
.task-step > span { opacity: .7; }
.task-step > button { color: var(--body-fg, #333); cursor: pointer; }
.task-step > button:hover { background: color-mix(in srgb, var(--darkened-bg, #f2f2f2) 82%, var(--body-fg, #333)); }
.task-step > button:focus-visible { outline: 2px solid var(--link-fg, #2f5d50); outline-offset: -4px; }
.task-step.main > button { color: var(--link-fg, #2f5d50); font-weight: 600; }
.task-step.current > span { opacity: 1; background: var(--step, #555); color: #fff; font-weight: 600; }
.task-step.st-blocked { --step: #c0392b; }
.task-step.st-ready { --step: #2a6aa3; }
.task-step.st-in_progress { --step: #23875a; }
.task-step.st-on_hold { --step: #a87512; }
.task-step.st-for_review { --step: #7a4fc0; }
.task-step.st-complete { --step: #2f5d50; }
.task-step.st-cancelled { --step: #7a7a7a; }
.task-line.more-right { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent);
                         mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); }
.task-line.more-left { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 36px), transparent);
                        mask-image: linear-gradient(to left, #000 calc(100% - 36px), transparent); }
.task-line.more-left.more-right {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 36px, #000 calc(100% - 36px), transparent);
  mask-image: linear-gradient(to right, transparent, #000 36px, #000 calc(100% - 36px), transparent); }
@media (max-width: 767px) {
  .task-line { flex-basis: 100%; margin: 0; }
}

/* "Review when done" unticked: no reviewer to choose. */
.form-row:has(input[name="review_required"]:not(:checked)) .fieldBox.field-reviewer { display: none; }

/* For (forms.PeoplePicker, task_page.js 4; tasks/_people.html where it can't be changed): who
   it's for as chips, each person in their own colour (models.hue_of), × to take them off;
   "Add someone…" under them finds people to put on. */
.people-picker { position: relative; max-width: 24rem; }
.form-row:has(.people-picker) { overflow: visible; }  /* the suggestions hang below it */
.people-picker .people-chips, .people-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0;
                                              list-style: none; }
.people-picker .people-chips { margin-bottom: 8px; }
.people-picker .people-chips:not(:has(> .person-chip:not([hidden]))) { display: none; }
.person-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; box-sizing: border-box;
               margin: 0; padding: 2px 11px 2px 2px; border-radius: 999px; list-style: none;
               background: hsl(var(--hue, 200) 65% 92%); color: hsl(var(--hue, 200) 50% 22%);
               font-size: 13px; line-height: 1.3; }
.person-chip[hidden], .person-chip input { display: none; }
.person-chip:has(.person-x) { padding-right: 2px; }
.person-dot { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
              background: hsl(var(--hue, 200) 50% 40%); color: #fff; font-size: 10.5px; font-weight: 600;
              letter-spacing: .02em; line-height: 1; }
.person-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.person-x { flex: none; display: grid; place-items: center; width: 24px; height: 24px; margin: 0; padding: 0;
            border: 0; border-radius: 50%; background: none; color: inherit; font-size: 17px; line-height: 1;
            opacity: .65; cursor: pointer; }
.person-x:is(:hover, :focus-visible) { opacity: 1; background: hsl(var(--hue, 200) 50% 82%); }
.people-none { list-style: none; color: var(--body-quiet-color); }
.people-find { position: relative; }
.people-picker .people-find input.people-search { width: 100%; max-width: 100%; box-sizing: border-box; }
.people-picker .people-results { position: absolute; z-index: 40; top: calc(100% + 2px); left: 0; right: 0;
  max-height: 15rem; overflow-y: auto; margin: 0; padding: 4px; list-style: none; background: var(--body-bg);
  border: 1px solid var(--border-color); border-radius: 6px; box-shadow: 0 8px 20px rgba(0, 0, 0, .18); }
.people-results [role="option"] { display: flex; align-items: center; gap: 8px; padding: 6px 8px;
                                  border-radius: 4px; list-style: none; font-size: 13px; cursor: pointer; }
.people-results [role="option"]:is(:hover, .active) { background: var(--selected-bg, #e4eef5); }
.people-results .people-none { padding: 6px 8px; font-size: 13px; }
@media (pointer: coarse) {
  .person-chip { padding-top: 3px; padding-bottom: 3px; font-size: 14px; }
  .person-x { width: 30px; height: 30px; }
  .people-results [role="option"] { padding: 10px 8px; font-size: 15px; }
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .person-chip { background: hsl(var(--hue, 200) 28% 25%); color: hsl(var(--hue, 200) 70% 88%); }
  :root:not([data-theme="light"]) .person-dot { background: hsl(var(--hue, 200) 45% 45%); }
  :root:not([data-theme="light"]) .person-x:is(:hover, :focus-visible) { background: hsl(var(--hue, 200) 28% 35%); }
}
:root[data-theme="dark"] .person-chip { background: hsl(var(--hue, 200) 28% 25%); color: hsl(var(--hue, 200) 70% 88%); }
:root[data-theme="dark"] .person-dot { background: hsl(var(--hue, 200) 45% 45%); }
:root[data-theme="dark"] .person-x:is(:hover, :focus-visible) { background: hsl(var(--hue, 200) 28% 35%); }

/* Its number over its title, with the status chip beside it (change_form.html): the chip keeps
   its own case and size in the small capitals of the number. */
#content .task-kind { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-bottom: 4px; }
#content .task-kind .task-state { font-size: 13px; letter-spacing: 0; text-transform: none; padding: 2px 10px; }