/* Task workspace: readable fields, explicit actions, one scrolling surface. */
#taskDetails.task-card-v2,
#taskDetails.task-card-v2[aria-hidden="false"] {
  --task-accent: #6357d9;
  width: min(800px, calc(100vw - 48px)) !important;
  max-width: 800px !important;
  border-radius: 20px !important;
  border: 1px solid #e3e5ed !important;
  box-shadow: 0 28px 90px #1c244333 !important;
  scrollbar-width: thin;
  overscroll-behavior: contain;
  scroll-padding-block: 80px 24px;
}
#taskDetails, #taskDetails :is(input, textarea, select, button, summary) { font-family: var(--app-font) !important; }
#taskDetails .details-head {
  padding: 14px 26px !important; min-height: 68px !important;
  grid-template-columns: auto minmax(0, 1fr) 34px 34px !important;
  gap: 12px !important; border-bottom: 1px solid #eef0f5 !important;
  background: #fffffffa !important; backdrop-filter: blur(12px);
}
#taskDetails .complete-toggle {
  position: relative; display: inline-flex !important; align-items: center;
  width: auto !important; min-width: 126px !important; height: 34px !important; min-height: 34px !important;
  padding: 0 12px 0 34px !important; border-radius: 8px !important;
  border: 1px solid #dce0e8 !important; background: #fff !important;
  color: #566174 !important; font-size: 12px !important; font-weight: 600;
}
#taskDetails .complete-toggle::before { content: ""; position: absolute; left: 12px; width: 13px; height: 13px; border: 1.5px solid #a2aaba; border-radius: 50%; }
#taskDetails .complete-toggle::after { content: none !important; }
#taskDetails .complete-toggle:hover { background: #f3f8f5 !important; border-color: #94c3a9 !important; }
#taskDetails .complete-toggle.done { background: #eaf7ef !important; color: #258051 !important; border-color: #b9dfc8 !important; }
#taskDetails .complete-toggle.done::before { background: #278b57; border-color: #278b57; }
#taskDetails .complete-toggle.done::after { content: "" !important; position: absolute; left: 16px; top: 10px; width: 4px; height: 7px; border: solid white; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
#taskDetails .autosave-status { font-size: 11px !important; font-weight: 400 !important; color: #7f8899 !important; }
#taskDetails .autosave-status.error { color: #b54450 !important; }
#taskDetails .ghost-icon { border-radius: 8px !important; width: 34px !important; min-width: 34px !important; height: 34px !important; min-height: 34px !important; }
#taskDetails .details-section { margin-inline: 32px !important; padding-block: 18px !important; }
#taskDetails > .details-head { margin: 0 !important; padding: 14px 26px !important; }
#taskDetails .task-main-fields { gap: 18px !important; padding-top: 24px !important; padding-bottom: 16px !important; }
.task-context { display: flex; gap: 10px; align-items: center; min-width: 0; color: #8a92a2; font-size: 11px; }
.task-context > span:first-child { font-size: 10px; letter-spacing: 1.2px; font-weight: 650; }
#taskProjectContext { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #6d638f; }
#taskDetails .task-title-field textarea,
#taskDetails .task-title-field textarea:focus,
#taskDetails .task-title-field textarea:focus-visible { font-size: 28px !important; line-height: 1.3 !important; font-weight: 650 !important; color: #242b3b !important; min-height: 38px !important; }
#taskDetails .task-title-field:focus-within { box-shadow: 0 2px 0 #c7c0ee; }
#taskDetails .task-state-row { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 14px !important; }
#taskDetails .task-state-row .field {
  display: grid !important; grid-template-columns: 1fr !important; gap: 5px !important;
  border: 1px solid #e8eaf1 !important; border-radius: 9px !important;
  background: #fafbfe !important; padding: 10px 12px !important; min-width: 0 !important;
  color: #4e5870 !important;
}
#taskDetails .task-state-row .field::before { content: none !important; }
#taskDetails .task-state-row .field > span { display: block !important; font-size: 11px !important; color: #7a8495 !important; font-weight: 450 !important; }
#taskDetails .task-state-row select { width: 100% !important; min-height: 26px !important; font-size: 14px !important; font-weight: 550 !important; appearance: auto !important; padding: 0 !important; }
#taskDetails[data-priority="urgent"] .task-priority-chip select { color: #b53d55 !important; }
#taskDetails[data-priority="high"] .task-priority-chip select { color: #b07130 !important; }
#taskDetails .task-deadline-row { min-height: 40px !important; padding: 0 !important; border: 0 !important; gap: 12px !important; }
#taskDetails .task-due-field { min-width: 0 !important; gap: 16px !important; padding-left: 0 !important; flex: 1; }
#taskDetails .task-due-field::before, #taskDetails .task-due-field::after { content: none !important; }
#taskDetails .task-due-field > span { font-size: 12px !important; color: #7a8495 !important; font-weight: 400 !important; }
#taskDetails .task-due-field input { width: 155px !important; min-height: 36px !important; padding: 6px 10px !important; border: 1px solid #e6e9f0 !important; border-radius: 7px !important; font-size: 13px !important; font-weight: 500 !important; }
#taskDetails .task-due-field input::-webkit-calendar-picker-indicator { position: static !important; width: 16px !important; height: 16px !important; opacity: .6 !important; }
#taskDetails .task-due-remaining { min-height: 28px !important; border: 0 !important; font-size: 11px !important; padding: 4px 8px !important; border-radius: 6px !important; }
#taskDetails .task-header-summary { display: flex !important; flex-wrap: wrap; align-items: center !important; gap: 14px !important; padding: 0 !important; margin: 0 !important; min-height: 48px !important; }
#taskDetails .task-people-summary { flex: 1; min-width: 0; gap: 6px !important; }
#taskDetails .task-owner-avatar { display: flex !important; align-items: center; gap: 10px; padding: 5px !important; border: 0 !important; border-radius: 8px !important; min-width: 0; text-align: left; }
#taskDetails .task-owner-avatar:hover { background: #f4f2fc !important; }
#taskDetails .task-header-summary .task-owner-avatar .avatar { width: 34px !important; min-width: 34px !important; height: 34px !important; min-height: 34px !important; flex: 0 0 34px !important; font-size: 12px !important; outline: none !important; }
.task-owner-copy { display: grid; gap: 3px; min-width: 0; }
.task-owner-copy small { color: #8790a0; font-size: 10px; font-weight: 400; }
.task-owner-copy strong { font-size: 12px; font-weight: 550; color: #414d65; overflow-wrap: anywhere; }
.task-person-placeholder { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 34px; background: #f0eef9; color: #887bb9; border: 1px dashed #c8bfdc; border-radius: 50%; font-size: 20px; }
#taskDetails .task-collaborator-avatars { padding-left: 4px !important; }
#taskDetails .task-header-summary .task-collaborator-avatars .avatar { width: 26px !important; min-width: 26px !important; height: 26px !important; min-height: 26px !important; flex: 0 0 26px !important; font-size: 10px !important; }
#taskDetails .task-activity-summary { gap: 6px !important; }
#taskDetails .task-activity-summary button { display: flex !important; align-items: center; gap: 6px !important; width: auto !important; min-width: 0 !important; min-height: 34px !important; border-radius: 7px !important; border: 1px solid #e8eaf1 !important; padding: 6px 9px !important; font-size: 11px !important; color: #778093 !important; }
#taskDetails .task-activity-summary img { width: 14px !important; height: 14px !important; opacity: .55; }
#taskDetails .task-activity-summary strong { font-size: 11px !important; color: #73678f; }
#taskDetails .task-description-field { border: 0 !important; padding: 12px 0 0 !important; gap: 10px !important; }
#taskDetails .task-description-field > span { display: block !important; font-size: 13px !important; font-weight: 600 !important; color: #434c60 !important; }
#taskDetails .task-main-fields > label.task-description-field.field textarea,
#taskDetails .task-main-fields > label.task-description-field.field textarea:focus,
#taskDetails .task-main-fields > label.task-description-field.field textarea:focus-visible { min-height: 76px !important; max-height: 260px !important; padding: 12px 14px !important; border: 1px solid #e9ecf2 !important; background: #fbfcfe !important; border-radius: 9px !important; color: #5a6578 !important; font-size: 14px !important; line-height: 1.65 !important; }
#taskDetails .task-description-field:focus-within textarea { border-color: #b4a9e5 !important; background: #fff !important; }
#taskDetails .task-card-progress { padding: 10px 12px !important; min-height: 42px !important; background: #f5f4fb !important; border: 0 !important; border-radius: 9px !important; gap: 10px !important; }
#taskDetails .task-card-progress .subtask-progress-ring { width: 24px !important; height: 24px !important; min-width: 24px !important; border: 1px solid #b0a4db !important; color: #8373b8 !important; font-size: 13px !important; }
#taskDetails .subtask-progress-copy strong, #taskDetails .subtask-progress-copy b { font-size: 12px !important; font-weight: 500 !important; }
#taskDetails .subtask-progress-copy b { color: #8574be !important; }
#taskDetails .task-card-progress { grid-template-columns: 24px minmax(0, 1fr) !important; }
#taskDetails .task-card-progress > div { display: block !important; min-width: 0; }
#taskDetails .task-card-progress .subtask-progress-ring::after { content: none !important; }
#taskDetails .task-card-progress[data-empty="true"] .subtask-progress-ring::after { content: "" !important; width: 14px; height: 14px; }
#taskDetails .task-card-progress i { display: block !important; width: 100%; height: 4px !important; margin-top: 8px !important; background: #e4e0f2 !important; }
#taskDetails .task-card-progress i > span { background: #9a88cf !important; }
#taskDetails .task-properties:not([open]), #taskDetails .task-work-panel:not([open]) { display: block !important; }
#taskDetails .task-properties { border-top: 1px solid #eef0f5 !important; padding-top: 10px !important; }
#taskDetails .task-properties > summary { color: #80788f !important; font-size: 12px !important; min-height: 34px !important; }
#taskDetails .task-work-panel { padding-block: 12px !important; border: 0 !important; border-top: 1px solid #eef0f5 !important; border-radius: 0 !important; background: #fff !important; scroll-margin-top: 80px; }
#taskDetails .task-work-panel > summary { font-size: 13px !important; font-weight: 600 !important; color: #434d63 !important; min-height: 32px !important; }
#taskDetails .task-work-panel > summary:hover, #taskDetails .task-properties > summary:hover { color: #7865b5 !important; }
#taskDetails .task-work-panel > summary::after, #taskDetails .task-properties > summary::after { width: 14px !important; height: 14px !important; flex-basis: 14px !important; opacity: .6; }
#taskDetails .task-options-grid { gap: 14px !important; }
#taskDetails .task-options-grid :is(input, select) { font-size: 13px !important; min-height: 36px !important; border-radius: 7px !important; }
#taskDetails .task-danger-zone { margin-top: 16px !important; padding-top: 12px !important; border-top: 1px solid #eef0f5 !important; }
#taskDetails #deleteTask { color: #af5863 !important; border: 0 !important; background: #fff7f7 !important; border-radius: 7px !important; padding: 8px 12px !important; font-size: 12px !important; }
#taskDetails .task-quick-comment { margin: 12px 32px 0 !important; min-height: 58px !important; grid-template-columns: 18px minmax(0, 1fr) 34px !important; gap: 10px !important; padding: 10px 12px !important; border: 1px solid #e3e5ee !important; border-radius: 10px !important; background: #fafbfe !important; }
#taskDetails .task-quick-comment::before { width: 18px !important; height: 18px !important; background: #959baa !important; }
#taskDetails .task-quick-comment textarea { font-size: 13px !important; line-height: 1.6 !important; min-height: 24px !important; }
#taskDetails .task-quick-comment button { width: 34px !important; min-width: 34px !important; height: 34px !important; min-height: 34px !important; border-radius: 8px !important; background: #7967bb !important; }
#taskDetails .task-quick-comment:focus-within { border-color: #b4a9db !important; background: #fff !important; }
.task-composer-hint { margin: 8px 34px 20px; text-align: right; color: #929aab; font-size: 10px; }
#taskDetails :is(button, input, textarea, select, summary, [tabindex]):focus-visible { outline: 2px solid #aa9cda !important; outline-offset: 2px !important; }
#taskDetails button:disabled { cursor: default !important; opacity: .55; }
#taskDetails .task-owner-copy { display: grid !important; width: auto !important; max-width: none !important; min-height: 0 !important; height: auto !important; flex: 1; gap: 3px !important; }
#taskDetails .task-owner-copy small { display: block !important; font-size: 10px !important; line-height: 1.3 !important; grid-column: auto !important; grid-row: auto !important; }
#taskDetails .task-owner-copy strong { display: block !important; max-width: none !important; width: auto !important; white-space: normal !important; font-size: 12px !important; line-height: 1.4 !important; grid-column: auto !important; grid-row: auto !important; }
#taskDetails .task-activity-summary button > :is(span, strong) { position: static !important; display: inline !important; width: auto !important; min-height: 0 !important; max-width: none !important; flex: 0 0 auto; white-space: nowrap !important; }
#taskDetails .task-person-placeholder { display: grid !important; width: 34px !important; height: 34px !important; min-width: 34px !important; border: 1px dashed #c8bfdc !important; border-radius: 50% !important; background: #f0eef9 !important; }
#taskDetails .subtask { min-height: 44px !important; border-bottom: 1px solid #eef0f5 !important; padding: 6px 4px !important; }
#taskDetails .subtask-name-input { font-size: 13px !important; font-weight: 450 !important; color: #4d5870 !important; }
#taskDetails .subtask.done .subtask-name-input { color: #9098a8 !important; }
#taskDetails .subtask button { color: #a0a6b4 !important; opacity: .75 !important; }
#taskDetails .subtask button:hover { color: #b9495a !important; background: #fff1f3 !important; }
#taskDetails .quick-subtask { border: 1px dashed #dad6e9 !important; border-radius: 8px !important; background: #fcfbff !important; min-height: 42px !important; }
#taskDetails .quick-subtask input { font-size: 13px !important; }
#taskDetails .attachment-dropzone { border: 1px dashed #d9d5e8 !important; border-radius: 8px !important; font-size: 12px !important; font-weight: 450 !important; line-height: 1.6 !important; padding: 16px !important; color: #8b83a3 !important; }
#taskDetails #addAttachment { border: 1px solid #ded8ef !important; border-radius: 7px !important; font-size: 12px !important; color: #8875b7 !important; padding: 7px 12px !important; }
@media (max-width: 560px) {
  #taskDetails.task-card-v2, #taskDetails.task-card-v2[aria-hidden="false"] { width: 100vw !important; max-width: 100vw !important; height: 100dvh !important; max-height: 100dvh !important; inset: 0 !important; border-radius: 0 !important; }
  #taskDetails > .details-head { padding: 12px 16px !important; gap: 8px !important; grid-template-columns: auto minmax(0, 1fr) 30px 30px !important; }
  #taskDetails .complete-toggle { min-width: 112px !important; font-size: 11px !important; }
  #taskDetails .autosave-status { font-size: 9px !important; line-height: 1.3 !important; }
  #taskDetails .details-section { margin-inline: 20px !important; }
  #taskDetails > .details-head { margin: 0 !important; }
  #taskDetails .task-main-fields { gap: 14px !important; }
  #taskDetails .task-title-field textarea, #taskDetails .task-title-field textarea:focus, #taskDetails .task-title-field textarea:focus-visible { font-size: 24px !important; }
  #taskDetails .task-state-row { gap: 8px !important; }
  #taskDetails .task-state-row select { font-size: 13px !important; }
  #taskDetails .task-deadline-row { flex-direction: row !important; flex-wrap: wrap; align-items: center !important; gap: 8px !important; }
  #taskDetails .task-due-field { flex: 0 1 auto; gap: 10px !important; }
  #taskDetails .task-due-field input { width: 142px !important; }
  #taskDetails .task-header-summary { flex-direction: column !important; align-items: stretch !important; gap: 10px !important; }
  #taskDetails .task-activity-summary { width: auto !important; align-self: flex-start; }
  #taskDetails .task-activity-summary button { min-height: 36px !important; }
  #taskDetails .task-options-grid { grid-template-columns: 1fr !important; }
  #taskDetails .task-quick-comment { margin-inline: 20px !important; }
  .task-composer-hint { margin-inline: 22px; }
}