/* Task editor and related task form surfaces. */

.task-editor__help-list {
  display: grid;
  gap: 0.75rem;
  margin-block-start: 1rem;
  padding: 0;
  list-style: none;
}

.task-editor__help-item {
  padding-block: 0.75rem;
  border-block-start: 1px solid var(--color-border);
  color: var(--color-ink-light);
  font-size: var(--text-small);
  line-height: 1.35;
}

.task-editor__help-item:first-child {
  border-block-start: 0;
}

.task-form.form-frame {
  padding-inline: 0;
}

.task-form__section:first-of-type {
  margin-block-start: 0;
  padding-block-start: 0;
  border-block-start: 0;
}

.task-form__section-title {
  margin: 0 0 0.25rem;
  color: var(--color-ink-light);
  font-size: var(--text-small);
  font-weight: 600;
  line-height: 1.2;
}

.task-form__hint {
  margin-block-start: 0;
}

.task-modal {
  inline-size: min(72rem, calc(100vw - 2rem));
  max-inline-size: 72rem;
  max-block-size: calc(100vh - 2rem);
  overflow: auto;
}

.task-modal .turbo-modal__content {
  margin-block: 1rem 0;
}

.task-modal-form-shell {
  display: grid;
  gap: 1.5rem;
}

.task-modal-form__aside {
  padding: 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-surface-muted);
}

.task-modal-form__aside-title {
  margin: 0;
  color: var(--color-ink);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.25;
}

.task-modal-form__aside-intro {
  max-inline-size: 42rem;
  margin: 0.5rem 0 0;
  color: var(--color-ink-light);
  font-size: var(--text-small);
  line-height: 1.4;
}

.task-modal-form__help-list {
  display: grid;
  gap: 0.65rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}

.task-modal-form__help-item {
  padding-block-start: 0.65rem;
  border-block-start: 1px solid var(--color-border);
  color: var(--color-ink-light);
  font-size: var(--text-small);
  line-height: 1.35;
}

.task-modal-form__help-item:first-child {
  padding-block-start: 0;
  border-block-start: 0;
}

.task-modal-form__employee-field .employee-search {
  margin-block-start: 0.5rem;
}

.task-modal-form__employee-field .form-field__hint {
  margin-block-start: 0.35rem;
}

.task-list-modal {
  max-inline-size: 64rem;
}

.task-list-form .swatch-picker {
  margin-block-start: 0.5rem;
}

.task-list-form .swatch-picker__label {
  color: var(--color-ink);
  font-size: 1rem;
  font-weight: 500;
}

.task-list-form .swatch-picker__list {
  margin: 0.35rem -0.35rem 0;
}

.task-list-form .swatch-picker__swatch {
  margin: 0.35rem;
}

.task-list-form__options {
  display: grid;
  gap: 1rem;
}

.task-list-form__options .main-task-list-form__option {
  margin-block-start: 0;
}

.task-list-form__colour-hint {
  margin-block-start: 0.5rem;
}

@media (min-width: 768px) {
  .task-editor__aside {
    position: sticky;
    inset-block-start: 1rem;
    align-self: start;
  }
}

@media (min-width: 900px) {
  .task-modal-form-shell {
    grid-template-columns: minmax(15rem, 0.45fr) minmax(0, 1fr);
    align-items: start;
  }
}

@media (max-width: 639px) {
  .task-modal {
    inline-size: calc(100vw - 1rem);
    padding-inline: 1rem;
  }
}

/* Task-first workspace. */

.task-workspace {
  inline-size: 100%;
}

.task-workspace__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.task-workspace__title {
  margin: 0;
  color: var(--color-ink);
  font-size: clamp(1.5rem, 2vw, 2rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.task-workspace__subtitle {
  max-inline-size: 44rem;
  margin: 0.35rem 0 0;
  color: var(--color-ink-light);
  font-size: var(--text-small);
}

.task-workspace__views {
  display: flex;
  gap: 1.25rem;
  margin-block-start: 1.5rem;
  border-block-end: 1px solid var(--color-border);
}

.task-workspace__view {
  margin-block-end: -1px;
  padding-block: 0.625rem;
  border-block-end: 2px solid transparent;
  color: var(--color-ink-light);
  font-size: var(--text-small);
  font-weight: 600;
  text-decoration: none;
}

.task-workspace__view:hover {
  color: var(--color-ink);
}

.task-workspace__view--active {
  border-block-end-color: var(--color-brand);
  color: var(--color-brand-strong);
}

.task-workspace__view:focus-visible,
.task-row__title:focus-visible,
.task-row__parent:focus-visible,
.task-row__quick-view:focus-visible,
.task-card__quick-view:focus-visible {
  border-radius: var(--radius-xs);
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

.task-workspace__filters {
  display: grid;
  grid-template-columns: minmax(14rem, 1fr) repeat(3, minmax(9rem, auto)) auto;
  align-items: center;
  gap: 0.5rem;
  padding-block: 1rem;
}

.task-workspace__search {
  position: relative;
  min-inline-size: 0;
}

.task-workspace__search-icon {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 0.75rem;
  display: inline-flex;
  inline-size: 1rem;
  block-size: 1rem;
  translate: 0 -50%;
  color: var(--color-ink-lighter);
  pointer-events: none;
}

.task-workspace__search-input {
  inline-size: 100%;
  padding-inline-start: 2.25rem;
}

.task-stream {
  display: grid;
  gap: 1.5rem;
}

.task-stream-group {
  min-inline-size: 0;
}

.task-stream-group__header {
  padding-block-end: 0.5rem;
  border-block-end: 1px solid var(--color-border-medium);
}

.task-stream-group__title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  color: var(--color-ink);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.task-stream-group__marker {
  inline-size: 0.5rem;
  block-size: 0.5rem;
  border-radius: var(--radius-pill);
  background-color: var(--color-ink-lighter);
}

.task-stream-group--overdue .task-stream-group__marker {
  background-color: var(--color-danger);
}

.task-stream-group--today .task-stream-group__marker {
  background-color: var(--color-warning);
}

.task-stream-group--upcoming .task-stream-group__marker {
  background-color: var(--color-info);
}

.task-stream-group--completed .task-stream-group__marker {
  background-color: var(--color-success-strong);
}

.task-stream-group__count {
  min-inline-size: 1.4rem;
  padding: 0.1rem 0.4rem;
  border-radius: var(--radius-pill);
  background-color: var(--color-surface-subtle);
  color: var(--color-ink-light);
  font-size: 0.6875rem;
  line-height: 1.35;
  text-align: center;
}

.task-stream-group__rows {
  border-block-end: 1px solid var(--color-border);
}

.task-row {
  display: grid;
  grid-template-columns: minmax(16rem, 1.7fr) minmax(7rem, 0.6fr) minmax(7rem, 0.55fr) minmax(10rem, 0.8fr) 2.75rem;
  align-items: center;
  min-block-size: 4.25rem;
  border-block-start: 1px solid var(--color-border);
  background-color: var(--color-surface);
}

.task-row:first-child {
  border-block-start: 0;
}

.task-row:hover {
  background-color: var(--color-surface-muted);
}

.task-row__identity,
.task-row__due,
.task-row__signals,
.task-row__assignee {
  min-inline-size: 0;
  padding: 0.625rem 0.75rem;
}

.task-row__title {
  display: block;
  overflow: hidden;
  color: var(--color-brand-strong);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.35;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-row__title:hover {
  color: var(--color-brand-strong);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.task-row__context {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-block-start: 0.2rem;
  overflow: hidden;
  color: var(--color-ink-lighter);
  font-size: 0.75rem;
  white-space: nowrap;
}

.task-row__parent {
  overflow: hidden;
  color: inherit;
  text-overflow: ellipsis;
}

.task-row__status {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.3rem;
}

.task-row__status::before {
  inline-size: 0.3rem;
  block-size: 0.3rem;
  border-radius: var(--radius-pill);
  background-color: var(--color-ink-lighter);
  content: "";
}

.task-row__due {
  color: var(--color-ink-light);
  font-size: 0.8125rem;
}

.task-stream-group--overdue .task-row__due {
  color: var(--color-danger-strong);
  font-weight: 600;
}

.task-row__signals {
  display: flex;
  gap: 0.75rem;
  color: var(--color-ink-light);
}

.task-row__signal {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
}

.task-row__signal svg {
  inline-size: 0.9rem;
  block-size: 0.9rem;
}

.task-row__assignee {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.task-row__assignee-name {
  overflow: hidden;
  color: var(--color-ink-light);
  font-size: 0.8125rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-row__assignee-more {
  color: var(--color-ink-lighter);
  font-size: 0.75rem;
}

.task-row__quick-view,
.task-card__quick-view {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  border-radius: var(--radius-md);
  color: var(--color-ink-light);
  text-decoration: none;
}

.task-row__quick-view:hover,
.task-card__quick-view:hover {
  background-color: var(--color-surface-subtle);
  color: var(--color-brand-strong);
}

.task-row__quick-view svg,
.task-card__quick-view svg {
  inline-size: 1rem;
  block-size: 1rem;
}

.task-card__title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
}

.task-card__quick-view {
  flex: 0 0 auto;
  margin-block-start: -0.5rem;
  margin-inline-end: -0.5rem;
}

.task-workspace__empty {
  display: grid;
  justify-items: center;
  padding: 4rem 1rem;
  border-block: 1px solid var(--color-border);
  color: var(--color-ink-light);
  text-align: center;
}

.task-workspace__empty h2 {
  margin: 0.75rem 0 0;
  color: var(--color-ink);
  font-size: 1rem;
}

.task-workspace__empty p {
  margin: 0.35rem 0 0;
  font-size: var(--text-small);
}

.task-workspace__empty-icon {
  inline-size: 1.5rem;
  block-size: 1.5rem;
  color: var(--color-success-strong);
}

.task-global-new {
  max-inline-size: 56rem;
  margin-inline: auto;
}

.task-global-new__header {
  margin-block-end: 1.5rem;
}

.task-global-new__parent {
  display: inline-block;
  margin-block-end: 0.25rem;
  color: var(--color-brand-strong);
  font-size: var(--text-small);
  font-weight: 600;
  text-decoration: none;
}

.task-global-new__parent:hover {
  text-decoration: underline;
}

.task-global-new__parent-form {
  max-inline-size: 40rem;
}

.task-global-new__parent-form .form-field {
  padding-block-start: 0;
}

.task-global-new__parent-controls {
  display: grid;
  grid-template-areas:
    "select submit"
    "hint .";
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  column-gap: 0.75rem;
  row-gap: 0.25rem;
  margin-block-start: 0.5rem;
}

.task-global-new__parent-controls .search-picker {
  grid-area: select;
  min-inline-size: 0;
}

.task-global-new__parent-controls .btn {
  grid-area: submit;
}

.task-global-new__parent-controls .form-field__hint {
  grid-area: hint;
  margin-block-start: 0;
}

.task-global-new__empty {
  padding-block: 2rem;
  border-block: 1px solid var(--color-border);
}

.task-global-new__form.form-frame {
  max-inline-size: none;
}

.task-global-new__form > .task-form__section {
  margin-block-start: var(--block-space-double);
  padding-block-start: 1.25rem;
  border-block-start: 1px solid var(--color-border-medium);
}

.task-global-new__form > fieldset.task-form__section:first-of-type {
  margin-block-start: 0;
  padding-block-start: 0;
  border-block-start: 0;
}

.task-global-new__fields + .task-global-new__fields {
  margin-block-start: 1.5rem;
}

.task-quick-view-frame {
  overflow-y: auto;
}

.task-quick-view {
  display: grid;
  gap: 0;
}

.task-quick-view__header {
  position: sticky;
  z-index: 2;
  inset-block-start: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem;
  border-block-end: 1px solid var(--color-border);
  background-color: var(--color-surface);
}

.task-quick-view__parent {
  margin: 0;
  color: var(--color-ink-lighter);
  font-size: 0.75rem;
}

.task-quick-view__title {
  margin: 0.2rem 0 0;
  color: var(--color-ink);
  font-size: 1.125rem;
  line-height: 1.3;
}

.task-quick-view__section {
  padding: 1rem;
  border-block-end: 1px solid var(--color-border);
}

.task-quick-view__section-title {
  margin: 0 0 0.75rem;
  color: var(--color-ink);
  font-size: 0.875rem;
  font-weight: 650;
}

.task-quick-view__status-form {
  display: grid;
  grid-template-columns: minmax(10rem, 1fr) minmax(10rem, 1fr) auto;
  align-items: end;
  gap: 0.75rem;
}

.task-quick-view__progress-control {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-block-size: 2.5rem;
}

.task-quick-view__range {
  flex: 1 1 auto;
}

.task-quick-view__progress-value {
  min-inline-size: 2.75rem;
  color: var(--color-ink-light);
  font-size: 0.8125rem;
  text-align: end;
}

.task-quick-view__errors {
  padding: 1rem;
  border-block-end: 1px solid color-mix(in oklch, var(--color-danger) 28%, var(--color-border));
  background-color: color-mix(in oklch, var(--color-danger) 8%, var(--color-surface));
}

.task-quick-view-state {
  display: grid;
  justify-items: center;
  align-content: center;
  min-block-size: 20rem;
  padding: 2rem;
  text-align: center;
}

.task-quick-view-state__icon {
  inline-size: 1.5rem;
  block-size: 1.5rem;
  color: var(--color-danger-strong);
}

.task-quick-view-state h2 {
  margin: 0.75rem 0 0;
  font-size: 1rem;
}

.task-quick-view-state p {
  margin: 0.35rem 0 1rem;
  color: var(--color-ink-light);
  font-size: var(--text-small);
}

.task-detail-identity {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-block-end: 1.5rem;
  padding-block-end: 1rem;
  border-block-end: 1px solid var(--color-border);
}

.task-detail-identity__context {
  display: flex;
  gap: 0.75rem;
  color: var(--color-ink-lighter);
  font-size: var(--text-small);
}

.task-detail-identity__context a {
  color: var(--color-brand-strong);
}

.task-detail-identity__title {
  margin: 0.3rem 0 0;
  color: var(--color-ink);
  font-size: clamp(1.5rem, 2vw, 2rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

@media (max-width: 1023px) {
  .task-workspace__filters {
    grid-template-columns: minmax(12rem, 1fr) repeat(2, minmax(9rem, auto));
  }

  .task-row {
    grid-template-columns: minmax(14rem, 1.5fr) minmax(7rem, 0.65fr) minmax(7rem, 0.6fr) 2.75rem;
  }

  .task-row__assignee {
    display: none;
  }
}

@media (max-width: 639px) {
  .task-workspace__header {
    align-items: stretch;
    flex-direction: column;
  }

  .task-workspace__header .btn {
    justify-content: center;
  }

  .task-workspace__views {
    overflow-x: auto;
  }

  .task-workspace__view {
    flex: 0 0 auto;
  }

  .task-workspace__filters {
    grid-template-columns: 1fr;
  }

  .task-global-new__parent-controls {
    grid-template-areas:
      "select"
      "hint"
      "submit";
    grid-template-columns: 1fr;
  }

  .task-global-new__parent-controls .btn {
    margin-block-start: 0.5rem;
  }

  .task-quick-view__header {
    align-items: stretch;
    flex-direction: column;
  }

  .task-quick-view__status-form {
    grid-template-columns: 1fr;
  }

  .task-stream {
    gap: 1.25rem;
  }

  .task-row {
    grid-template-columns: minmax(0, 1fr) 2.75rem;
    min-block-size: 5.25rem;
    padding-block: 0.35rem;
  }

  .task-row__identity {
    grid-column: 1;
  }

  .task-row__due,
  .task-row__signals {
    grid-row: 2;
    padding-block: 0 0.625rem;
  }

  .task-row__due {
    grid-column: 1;
  }

  .task-row__signals {
    grid-column: 1;
    justify-self: end;
  }

  .task-row__quick-view {
    grid-column: 2;
    grid-row: 1 / span 2;
    inline-size: 2.75rem;
    block-size: 2.75rem;
  }
}