/* ==================================================================================================
   Tasks — task panel (drawer + full page), New task modal, Move modal, My tasks.  owner: tasks agent
   Everything is scoped: .task-panel / .tp-* (panel), .task-create / .tc-* (modal), .my-tasks /
   .mt-* (My tasks), [data-task-drawer] (drawer tweaks). Tokens only.
   ================================================================================================== */

/* -- Drawer chrome ------------------------------------------------------------------------------- */
.drawer[data-task-drawer] .drawer__panel {
  position: relative;
}
.drawer[data-task-drawer] .drawer__body {
  padding-top: 18px;
  scroll-padding-bottom: 24px;
}
.tp-crumbs {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.tp-crumbs .project-chip {
  min-width: 0;
  max-width: 42%;
}
.tp-crumbs__sep {
  flex-shrink: 0;
  color: var(--text-3);
}
.tp-crumbs__parent {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  max-width: 240px;
  height: 26px;
  padding: 0 8px;
  border-radius: var(--radius-sm);
  color: var(--text-2);
  font-size: var(--fs-sm);
}
.tp-crumbs__parent:hover {
  background: var(--fill-1);
  color: var(--text);
}
.tp-crumbs__title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tp-key {
  flex-shrink: 0;
  height: 26px;
  padding: 0 8px;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--text-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  cursor: copy;
  transition: background-color var(--dur-1) ease, color var(--dur-1) ease;
}
.tp-key:hover {
  background: var(--fill-1);
  color: var(--text);
}
.tp-follow.is-on {
  background: transparent;
  color: var(--accent-ink);
}
.tp-follow.is-on:hover {
  background: var(--accent-softer);
  color: var(--accent-ink);
}
@media (prefers-reduced-motion: no-preference) {
  .tp-follow.is-on .icon {
    animation: pop 380ms var(--ease-spring);
  }
}
@media (max-width: 639px) {
  .tp-crumbs__title {
    display: none;
  }
}

/* -- Panel layout -------------------------------------------------------------------------------- */
.task-panel {
  container: tpanel / inline-size;
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-width: 0;
}
.tp-body {
  display: flex;
  flex-direction: column;
  gap: 28px;
  min-width: 0;
}
.tp-page {
  max-width: 1180px;
  margin-inline: auto;
}
.tp-page-actions {
  display: flex;
  align-items: center;
  gap: 2px;
}
.task-panel--page {
  max-width: 780px;
  margin-inline: auto;
}
@media (min-width: 1100px) {
  .task-panel--page {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    grid-template-areas:
      "head props"
      "body props";
    align-items: start;
    gap: 22px 40px;
    max-width: none;
  }
  .task-panel--page > .tp-head {
    grid-area: head;
  }
  .task-panel--page > .tp-props {
    grid-area: props;
    position: sticky;
    top: calc(var(--topbar-h) + 16px);
  }
  .task-panel--page > .tp-body {
    grid-area: body;
  }
  .task-panel--page:has(> .tp-archived) {
    grid-template-areas:
      "notice notice"
      "head props"
      "body props";
  }
  .task-panel--page > .tp-archived {
    grid-area: notice;
  }
}

/* -- Header: complete toggle + title ------------------------------------------------------------- */
.tp-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
}
.tp-complete {
  --check: var(--success);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 30px;
  padding: 0 12px 0 7px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--text-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition:
    background-color var(--dur-2) ease,
    border-color var(--dur-2) ease,
    color var(--dur-2) ease,
    transform var(--dur-1) var(--ease-out);
}
.tp-complete__check {
  width: 18px;
  height: 18px;
  overflow: visible;
}
.tp-complete__check circle {
  fill: transparent;
  stroke: currentColor;
  stroke-width: 1.6;
  transition: fill var(--dur-2) ease, stroke var(--dur-2) ease;
}
.tp-complete__check path {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset var(--dur-3) var(--ease-out), stroke var(--dur-2) ease;
}
button.tp-complete:hover {
  border-color: color-mix(in srgb, var(--check) 55%, transparent);
  background: color-mix(in srgb, var(--check) 8%, transparent);
  color: var(--success-ink);
}
button.tp-complete:active {
  transform: scale(0.96);
}
button.tp-complete:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3.5px var(--focus-ring);
}
.tp-complete.is-done {
  border-color: transparent;
  background: color-mix(in srgb, var(--check) 15%, transparent);
  color: var(--success-ink);
}
.tp-complete.is-done .tp-complete__check circle {
  fill: var(--check);
  stroke: var(--check);
}
.tp-complete.is-done .tp-complete__check path {
  stroke: var(--text-on-accent);
}
.tp-complete.is-busy {
  pointer-events: none;
}
.tp-complete--static {
  cursor: default;
}
@media (prefers-reduced-motion: no-preference) {
  .tp-complete.is-celebrating {
    animation: pop 420ms var(--ease-spring);
  }
  .tp-complete.is-celebrating .tp-complete__check path {
    animation: tp-draw 420ms var(--ease-out) both;
  }
}
@keyframes tp-draw {
  from {
    stroke-dashoffset: 1;
  }
}

.tp-title {
  width: 100%;
  min-width: 0;
}
.tp-title__form {
  margin: 0;
}
.tp-title__input,
.tp-title__text {
  display: block;
  width: calc(100% + 16px);
  margin: 0 -8px;
  padding: 3px 8px;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text);
  font-family: var(--font-display);
  font-size: var(--fs-title-2);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-tight);
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.tp-title__input {
  min-height: calc(1.25em + 6px);
  resize: none;
  field-sizing: content;
  transition: background-color var(--dur-1) ease, box-shadow var(--dur-2) ease;
}
.tp-title__input:hover {
  background: var(--fill-1);
}
.tp-title__input:focus {
  outline: none;
  background: var(--surface);
  box-shadow:
    0 0 0 1px var(--accent),
    0 0 0 4px var(--focus-ring);
}
.tp-title__meta {
  margin-top: 4px;
  color: var(--text-3);
  font-size: var(--fs-xs);
}
@container tpanel (max-width: 480px) {
  .tp-title__input,
  .tp-title__text {
    font-size: var(--fs-title-3);
  }
}

/* -- Properties (iOS grouped rows) --------------------------------------------------------------- */
.tp-props {
  container: tprops / inline-size;
  min-width: 0;
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow:
    0 0 0 1px var(--card-ring),
    var(--shadow-xs);
}
.tp-props__list {
  margin: 0;
  padding: 2px 0;
}
.tp-prop {
  position: relative;
  display: grid;
  grid-template-columns: 136px minmax(0, 1fr);
  align-items: center;
  column-gap: 10px;
  min-height: 40px;
  padding: 3px 10px 3px 14px;
}
.tp-prop + .tp-prop::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 40px;
  height: 1px;
  background: var(--line);
}
.tp-prop--top {
  align-items: start;
}
.tp-prop--top .tp-prop__label {
  min-height: 32px;
}
.tp-prop__label {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  margin: 0;
  color: var(--text-2);
  font-size: var(--fs-sm);
  white-space: nowrap;
}
.tp-prop__label .icon {
  color: var(--text-3);
}
.tp-prop__label span {
  overflow: hidden;
  text-overflow: ellipsis;
}
.tp-prop__value {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  min-width: 0;
  margin: 0;
  font-size: var(--fs-md);
}
.tp-prop__value > .user-chip,
.tp-prop__value > .tp-status,
.tp-prop__value > .tp-type,
.tp-prop__value > .tp-date {
  min-height: 32px;
}
@container tprops (max-width: 420px) {
  .tp-prop {
    grid-template-columns: 116px minmax(0, 1fr); /* fits ky/ru labels ("Артыкчылык", "Исполнитель") */
    column-gap: 8px;
    padding-left: 12px;
  }
  .tp-prop + .tp-prop::before {
    left: 38px;
  }
  .tp-prop__label {
    gap: 8px;
  }
  .tp-prop .tp-link {
    display: none;
  }
  .tp-time__bar {
    flex-basis: 100%;
    order: 3;
  }
}

/* Field buttons (open pickers). The picker is pulled 8px left so the value's text lines up with
   the column while the hover background still has breathing room. */
.tp-picker {
  display: inline-flex;
  min-width: 0;
  max-width: calc(100% + 8px);
  margin-left: -8px;
}
.tp-picker--wrap {
  display: flex;
  width: calc(100% + 8px);
}
.tp-subtask__meta .tp-picker,
.tp-time .tp-picker {
  max-width: 100%;
  margin-left: 0;
}
.tp-field {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  max-width: 100%;
  min-height: 32px;
  padding: 2px 8px;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--text);
  font-size: var(--fs-md);
  text-align: left;
  cursor: pointer;
  transition: background-color var(--dur-1) ease;
}
.tp-field:hover,
.tp-field[aria-expanded="true"] {
  background: var(--fill-1);
}
.tp-field:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--focus-ring);
}
.tp-field.is-empty {
  color: var(--text-3);
}
.tp-field__text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tp-field__icon,
.tp-field__chevron {
  flex-shrink: 0;
  color: var(--text-3);
}
.tp-field__chevron {
  opacity: 0;
  transition: opacity var(--dur-1) ease;
}
.tp-field:hover .tp-field__chevron,
.tp-field:focus-visible .tp-field__chevron {
  opacity: 1;
}
.tp-field--wrap {
  flex-wrap: wrap;
  gap: 5px;
  width: 100%;
  padding-block: 5px;
}
.tp-field--icon {
  justify-content: center;
  width: 30px;
  min-height: 30px;
  margin: 0;
  padding: 0;
  border-radius: 50%;
}
.tp-field--compact {
  min-height: 28px;
  margin: 0;
  padding: 0 6px;
}
.tp-field .due {
  margin-left: -2px;
}
.tp-status,
.tp-type {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-weight: var(--fw-medium);
}
.tp-status .dot {
  width: 9px;
  height: 9px;
  box-shadow: 0 0 0 3px var(--tone-soft);
}
.tp-done-mark {
  color: var(--success);
}
.tp-link {
  flex-shrink: 0;
  height: 26px;
  padding: 0 8px;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--accent-ink);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  cursor: pointer;
  opacity: 0.9;
}
.tp-link:hover {
  background: var(--accent-softer);
  opacity: 1;
}
.tp-link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--focus-ring);
}
.tp-prop:not(:hover):not(:focus-within) .tp-link[data-assign-me] {
  opacity: 0;
}
@media (hover: none) {
  .tp-prop .tp-link[data-assign-me] {
    opacity: 0.9;
  }
}
.tp-inline-input {
  width: calc(100% + 8px);
  max-width: 300px;
  height: 32px;
  margin-left: -8px;
  padding: 0 8px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text);
  font-size: var(--fs-md);
  transition: background-color var(--dur-1) ease, box-shadow var(--dur-2) ease;
}
.tp-inline-input::placeholder {
  color: var(--text-3);
}
.tp-inline-input:hover {
  background: var(--fill-1);
}
.tp-inline-input:focus {
  outline: none;
  background: var(--surface);
  box-shadow:
    0 0 0 1px var(--accent),
    0 0 0 4px var(--focus-ring);
}
@media (pointer: coarse), (max-width: 767px) {
  .tp-inline-input {
    font-size: 16px;
  }
}
.tp-empty-text {
  color: var(--text-3);
  font-size: var(--fs-md);
}
.tp-follow-btn.is-on {
  background: var(--accent-soft);
  color: var(--accent-ink);
}
.tp-prop__value .avatar-stack {
  margin-right: 2px;
}

/* Time logged */
.tp-time {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  min-width: 0;
  width: 100%;
  min-height: 32px;
}
.tp-time__sum {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.tp-time__sum strong {
  font-weight: var(--fw-semibold);
}
.tp-time__bar {
  flex: 0 1 120px;
  min-width: 60px;
}
.tp-time .tp-picker {
  margin-left: auto;
}
.tp-time__btn {
  --btn-h: 28px;
}

/* Popover panels used by the pickers */
.tp-pop {
  min-width: 260px;
  max-width: min(320px, calc(100vw - 16px));
  padding: 6px;
}
.tp-pop__list {
  display: flex;
  flex-direction: column;
  max-height: min(44vh, 340px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.tp-pop .menu__item {
  flex-shrink: 0;
}
.tp-pop .menu__text .menu__sub {
  font-size: var(--fs-2xs);
}
.tp-people .menu__item {
  height: auto;
  min-height: var(--row-h);
  padding-block: 5px;
}
.tp-check {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 10px;
  min-height: var(--row-h);
  padding: 0 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.tp-check:hover,
.tp-check:focus-within {
  background: var(--fill-2);
}
.tp-check input {
  flex-shrink: 0;
}
.tp-check__text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tp-labelpop__create {
  margin-top: 4px;
  color: var(--accent-ink);
}
.tp-datepop {
  min-width: 250px;
}
.tp-datepop__pick {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 6px 10px 8px;
  color: var(--text-2);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
}
.tp-timepop {
  width: 300px;
  padding: 12px;
}
.tp-timepop__form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.tp-timepop__grid {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 8px;
}
.tp-mini-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  color: var(--text-2);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
}
.tp-entries {
  display: flex;
  flex-direction: column;
  max-height: 220px;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
}
.tp-entry {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 4px 4px 4px 8px;
  border-radius: var(--radius-sm);
}
.tp-entry:hover {
  background: var(--fill-1);
}
.tp-entry__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  font-size: var(--fs-sm);
}
.tp-entry__top {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tp-entry__meta {
  overflow: hidden;
  color: var(--text-2);
  font-size: var(--fs-xs);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tp-entry__delete {
  opacity: 0;
}
.tp-entry:hover .tp-entry__delete,
.tp-entry__delete:focus-visible {
  opacity: 1;
}
@media (hover: none) {
  .tp-entry__delete {
    opacity: 1;
  }
}

/* -- Sections ------------------------------------------------------------------------------------ */
.tp-section {
  min-width: 0;
}
.tp-section__head {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 30px;
  margin-bottom: 8px;
}
.tp-section__title {
  display: inline-flex;
  flex: 1;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-snug);
}
.tp-section__title .counter {
  font-size: var(--fs-sm);
}
.tp-section__action {
  margin-right: -6px;
  color: var(--text-2);
}
.tp-hint {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--text-3);
  font-size: var(--fs-xs);
  white-space: nowrap;
}
.tp-hint .kbd {
  font-size: var(--fs-2xs);
}

/* Description */
.tp-desc__body {
  margin: 0 -8px;
  padding: 2px 8px;
  border-radius: var(--radius-md);
}
.tp-desc__empty {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 46px;
  padding: 10px 14px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-md);
  background: none;
  color: var(--text-3);
  font-size: var(--fs-md);
  text-align: left;
  cursor: text;
  transition: background-color var(--dur-1) ease, color var(--dur-1) ease, border-color var(--dur-1) ease;
}
.tp-desc__empty:hover {
  border-color: var(--input-border-hover);
  background: var(--fill-1);
  color: var(--text-2);
}
.tp-desc__empty:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3.5px var(--focus-ring);
}
.tp-editor {
  overflow: hidden;
  border: 1px solid var(--input-border);
  border-radius: var(--radius-lg);
  background: var(--input-bg);
  transition: border-color var(--dur-1) ease, box-shadow var(--dur-2) ease;
}
.tp-editor:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3.5px var(--focus-ring);
}
.tp-editor__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  padding: 5px 6px;
  border-bottom: 1px solid var(--line);
}
.tp-tool {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 7px;
  background: none;
  color: var(--text-2);
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  cursor: pointer;
}
.tp-tool b {
  font-weight: var(--fw-bold);
}
.tp-tool i {
  font-style: italic;
}
.tp-tool:hover {
  background: var(--fill-1);
  color: var(--text);
}
.tp-tool:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--focus-ring);
}
.tp-tool__sep {
  width: 1px;
  height: 18px;
  margin: 0 4px;
  background: var(--line-strong);
}
.tp-editor__input {
  display: block;
  width: 100%;
  min-height: 150px;
  max-height: 55vh;
  padding: 12px 14px;
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: var(--fs-md);
  line-height: 1.6;
  resize: none;
  field-sizing: content;
}
.tp-editor__input:focus {
  outline: none;
}
.tp-editor__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 8px 10px;
  border-top: 1px solid var(--line);
  background: var(--surface-2);
}
.tp-editor__foot .tp-hint {
  margin-right: auto;
}
@media (pointer: coarse), (max-width: 767px) {
  .tp-editor__input,
  .tp-title__input {
    font-size: max(16px, 1em);
  }
}

/* Markdown checklists */
.prose li.md-task {
  position: relative;
  list-style: none;
}
.prose li.md-task > p {
  display: inline;
}
.md-check {
  display: inline-block;
  width: 17px;
  height: 17px;
  margin: 0 8px 0 calc(-1.4em + 1px);
  border: 1.5px solid var(--control-border);
  border-radius: 5px;
  vertical-align: -3px;
  transition: background-color var(--dur-1) ease, border-color var(--dur-1) ease;
}
.md-check[data-check-index] {
  cursor: pointer;
}
.md-check[data-check-index]:hover {
  border-color: var(--accent);
}
.md-check:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--focus-ring);
}
.md-check[aria-checked="true"] {
  position: relative;
  border-color: var(--accent);
  background: var(--accent);
}
.md-check[aria-checked="true"]::after {
  content: "";
  position: absolute;
  inset: 2px;
  background: var(--text-on-accent);
  -webkit-mask: var(--check-mask) center / contain no-repeat;
  mask: var(--check-mask) center / contain no-repeat;
}
.prose li.md-task.is-checked {
  color: var(--text-3);
  text-decoration: line-through;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
}

/* Subtasks */
.tp-subprogress {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 10px;
  color: var(--text-2);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
}
.tp-subprogress .progress {
  width: 84px;
  flex: none;
}
.tp-subprogress.is-complete {
  color: var(--success-ink);
}
.tp-sublist {
  display: flex;
  flex-direction: column;
  margin: 0 -6px;
  padding: 0;
  list-style: none;
}
.tp-subtask {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 2px 6px;
  border-radius: var(--radius-md);
  transition: background-color var(--dur-1) ease;
}
.tp-subtask:hover,
.tp-subtask:focus-within {
  background: var(--fill-1);
}
.tp-subtask + .tp-subtask::before {
  content: "";
  position: absolute;
  top: 0;
  right: 8px;
  left: 54px;
  height: 1px;
  background: var(--line);
}
.tp-subtask:hover::before,
.tp-subtask:hover + .tp-subtask::before {
  opacity: 0;
}
.tp-subtask__handle {
  display: grid;
  place-items: center;
  width: 14px;
  margin: 0 -2px 0 -4px;
  opacity: 0;
  transition: opacity var(--dur-1) ease;
}
.tp-subtask:hover .tp-subtask__handle {
  opacity: 1;
}
.tp-subtask__title {
  flex: 1;
  min-width: 0;
  height: 30px;
  padding: 0 6px;
  border: 0;
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--text);
  font-size: var(--fs-md);
  line-height: 30px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
input.tp-subtask__title:focus {
  outline: none;
  background: var(--surface);
  box-shadow:
    0 0 0 1px var(--accent),
    0 0 0 4px var(--focus-ring);
}
.tp-subtask:has(.check-circle[aria-checked="true"]) .tp-subtask__title {
  color: var(--text-3);
  text-decoration: line-through;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
}
.tp-subtask__meta {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 2px;
}
.tp-subtask__meta .tp-field.is-empty,
.tp-subtask__open,
.tp-subtask__delete {
  opacity: 0;
  transition: opacity var(--dur-1) ease;
}
.tp-subtask:hover .tp-subtask__meta .tp-field.is-empty,
.tp-subtask:focus-within .tp-subtask__meta .tp-field.is-empty,
.tp-subtask:hover .tp-subtask__open,
.tp-subtask:focus-within .tp-subtask__open,
.tp-subtask:hover .tp-subtask__delete,
.tp-subtask:focus-within .tp-subtask__delete {
  opacity: 1;
}
.tp-subtask__delete:hover {
  color: var(--danger-ink);
}
@media (hover: none) {
  .tp-subtask__meta .tp-field.is-empty,
  .tp-subtask__open,
  .tp-subtask__handle {
    opacity: 1;
  }
  .tp-subtask__delete {
    display: none;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .tp-subtask.is-new,
  .tp-comment.is-new,
  .tp-upload {
    animation: fade-up var(--dur-3) var(--ease-out) both;
  }
}
.tp-subadd {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  margin: 2px -6px 0;
  padding: 2px 10px 2px 22px;
  border-radius: var(--radius-md);
}
.tp-subadd:focus-within {
  background: var(--fill-1);
}
.tp-subadd__icon {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 1.5px dashed var(--control-border);
  border-radius: 50%;
  color: var(--text-3);
}
.tp-subadd__icon .icon {
  width: 12px;
  height: 12px;
}
.tp-subadd__input {
  flex: 1;
  min-width: 0;
  height: 32px;
  padding: 0 6px;
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: var(--fs-md);
}
.tp-subadd__input::placeholder {
  color: var(--text-3);
}
.tp-subadd__input:focus {
  outline: none;
}
.tp-subadd__hint {
  opacity: 0;
  transition: opacity var(--dur-1) ease;
}
.tp-subadd:has(.tp-subadd__input:not(:placeholder-shown):focus) .tp-subadd__hint {
  opacity: 1;
}
@media (pointer: coarse), (max-width: 767px) {
  .tp-subadd__input,
  .tp-subtask__title {
    font-size: 16px;
  }
}

/* Attachments */
.tp-uploads {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 0 8px;
  padding: 0;
  list-style: none;
}
.tp-uploads:empty {
  display: none;
}
.tp-upload {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-md);
  background: var(--accent-softer);
}
.tp-upload__icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--accent-soft);
  color: var(--accent-ink);
}
.tp-upload__body {
  display: grid;
  flex: 1;
  gap: 3px;
  min-width: 0;
}
.tp-upload__name {
  overflow: hidden;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tp-upload__meta {
  color: var(--text-2);
  font-size: var(--fs-xs);
}
.tp-thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 10px;
  margin: 0 0 10px;
  padding: 0;
  list-style: none;
}
.tp-thumb {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
  box-shadow: 0 0 0 1px var(--card-ring);
}
.tp-thumb__open {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}
.tp-thumb__open img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform var(--dur-3) var(--ease-out);
}
.tp-thumb__open:hover img {
  transform: scale(1.03);
}
.tp-thumb__open:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 3px var(--accent);
}
.tp-thumb__bar {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px 4px 4px 8px;
  background: var(--surface);
}
.tp-thumb__name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-size: var(--fs-xs);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tp-thumb__action {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 7px;
  background: none;
  color: var(--text-2);
  cursor: pointer;
}
.tp-thumb__action:hover {
  background: var(--fill-1);
  color: var(--text);
}
.tp-filelist {
  margin: 0;
  padding: 0;
  overflow: hidden;
  border-radius: var(--radius-md);
  box-shadow: 0 0 0 1px var(--card-ring);
  list-style: none;
}
.tp-file {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 6px 6px 6px 12px;
  background: var(--surface);
}
.tp-file + .tp-file::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 54px;
  height: 1px;
  background: var(--line);
}
.tp-file:hover {
  background: var(--surface-2);
}
.tp-file__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}
.tp-file__name {
  overflow: hidden;
  color: var(--text);
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tp-file__name:hover {
  color: var(--accent-ink);
}
.tp-file__meta {
  overflow: hidden;
  color: var(--text-2);
  font-size: var(--fs-xs);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tp-file__delete:hover {
  color: var(--danger-ink);
}
.tp-files__empty {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 64px;
  padding: 14px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-md);
  color: var(--text-3);
  font-size: var(--fs-sm);
  cursor: pointer;
  transition: background-color var(--dur-1) ease, color var(--dur-1) ease;
}
.tp-files__empty:hover,
.tp-files__empty:focus-within {
  background: var(--fill-1);
  color: var(--text-2);
}
.tp-files__browse {
  color: var(--accent-ink);
  font-weight: var(--fw-medium);
}

/* Drop overlay (drawer panel or the whole page) */
.tp-dropzone {
  position: absolute;
  z-index: 5;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 16px;
  border-radius: inherit;
  background: color-mix(in srgb, var(--surface-elevated) 72%, transparent);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-2) ease;
}
.task-panel > .tp-dropzone,
.tp-page .tp-dropzone {
  position: fixed;
  z-index: var(--z-overlay);
}
.tp-dropzone.is-visible {
  opacity: 1;
}
.tp-dropzone__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 100%;
  border: 2px dashed color-mix(in srgb, var(--accent) 60%, transparent);
  border-radius: var(--radius-xl);
  background: var(--accent-softer);
  color: var(--accent-ink);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
}

/* Lightbox */
.tp-lightbox {
  --lb-bg: light-dark(color-mix(in srgb, var(--surface-inverse) 94%, transparent), color-mix(in srgb, var(--bg) 94%, transparent));
  --lb-fg: light-dark(var(--text-inverse), var(--text));
  position: fixed;
  inset: 0;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) 64px;
  grid-template-rows: auto minmax(0, 1fr);
  width: 100vw;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0 0 24px;
  border: 0;
  background: var(--lb-bg);
  color: var(--lb-fg);
  opacity: 1;
  transition: opacity var(--dur-2) ease;
}
.tp-lightbox:not([open]) {
  display: none;
}
.tp-lightbox::backdrop {
  background: transparent;
}
@starting-style {
  .tp-lightbox[open] {
    opacity: 0;
  }
}
.tp-lightbox.is-closing {
  opacity: 0;
}
.tp-lightbox__bar {
  display: flex;
  grid-column: 1 / -1;
  align-items: center;
  gap: 8px;
  padding: calc(10px + var(--safe-top)) 12px 10px 20px;
}
.tp-lightbox__name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-weight: var(--fw-medium);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tp-lightbox__count {
  opacity: 0.7;
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
}
.tp-lightbox__btn {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--lb-fg) 12%, transparent);
  color: var(--lb-fg);
  cursor: pointer;
}
.tp-lightbox__btn:hover {
  background: color-mix(in srgb, var(--lb-fg) 22%, transparent);
}
.tp-lightbox__btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--focus-ring);
}
.tp-lightbox__nav {
  align-self: center;
  justify-self: center;
}
.tp-lightbox__nav[hidden] {
  visibility: hidden;
}
.tp-lightbox img {
  align-self: center;
  justify-self: center;
  max-width: 100%;
  max-height: 100%;
  border-radius: var(--radius-md);
  object-fit: contain;
  box-shadow: var(--shadow-xl);
}
@media (max-width: 639px) {
  .tp-lightbox {
    grid-template-columns: 0 minmax(0, 1fr) 0;
    padding: 0 8px 16px;
  }
  .tp-lightbox__nav {
    position: fixed;
    bottom: calc(18px + var(--safe-bottom));
  }
  .tp-lightbox__nav--prev {
    left: 18px;
  }
  .tp-lightbox__nav--next {
    right: 18px;
  }
}

/* -- Comments & activity ------------------------------------------------------------------------- */
.tp-feed__tabs {
  margin-bottom: 14px;
}
.tp-ccount {
  margin-left: 2px;
}
.tp-ccount[hidden] {
  display: none;
}
.tp-comments {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tp-comment {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  padding: 8px 0;
}
.tp-comment__main {
  min-width: 0;
}
.tp-comment__head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 28px;
}
.tp-comment__author {
  overflow: hidden;
  font-weight: var(--fw-semibold);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tp-comment__time,
.tp-comment__edited {
  flex-shrink: 0;
  color: var(--text-3);
  font-size: var(--fs-xs);
}
.tp-comment__edited {
  font-style: italic;
}
.tp-comment__menu {
  margin-left: auto;
  opacity: 0;
  transition: opacity var(--dur-1) ease;
}
.tp-comment:hover .tp-comment__menu,
.tp-comment:focus-within .tp-comment__menu,
.tp-comment__menu:has([aria-expanded="true"]) {
  opacity: 1;
}
@media (hover: none) {
  .tp-comment__menu {
    opacity: 1;
  }
}
.tp-comment__body {
  margin-top: 1px;
}
.tp-comment.is-editing .tp-comment__body,
.tp-comment:not(.is-editing) .tp-comment__edit {
  display: none;
}
.tp-comment__edit {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}
.tp-comment__edit-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
@media (prefers-reduced-motion: no-preference) {
  .tp-comment.is-new .tp-comment__main {
    animation: tp-flash 1400ms var(--ease-out);
  }
}
@keyframes tp-flash {
  from {
    border-radius: var(--radius-md);
    background: var(--accent-softer);
    box-shadow: 0 0 0 6px var(--accent-softer);
  }
}

.tp-reactions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
}
.tp-reactions:not(:has(.tp-reaction:not(.tp-reaction--add))) {
  margin-top: 2px;
}
.tp-reaction {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 26px;
  padding: 0 9px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--text-2);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition:
    background-color var(--dur-1) ease,
    border-color var(--dur-1) ease,
    transform var(--dur-1) var(--ease-out);
}
.tp-reaction:hover:not(:disabled) {
  background: var(--fill-1);
}
.tp-reaction:active:not(:disabled) {
  transform: scale(0.94);
}
.tp-reaction:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--focus-ring);
}
.tp-reaction:disabled {
  cursor: default;
}
.tp-reaction.is-mine {
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  background: var(--accent-softer);
  color: var(--accent-ink);
  font-weight: var(--fw-semibold);
}
.tp-reaction__emoji {
  font-size: 14px;
  line-height: 1;
}
.tp-reaction--add {
  width: 30px;
  padding: 0;
  justify-content: center;
  border-style: dashed;
  color: var(--text-3);
  opacity: 0;
}
.tp-comment:hover .tp-reaction--add,
.tp-comment:focus-within .tp-reaction--add,
.tp-reaction--add[aria-expanded="true"] {
  opacity: 1;
}
@media (hover: none) {
  .tp-reaction--add {
    opacity: 1;
  }
}
.tp-emoji-pop {
  display: flex;
  gap: 2px;
  min-width: 0;
  padding: 6px;
}
.tp-emoji {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 10px;
  background: none;
  font-size: 21px;
  cursor: pointer;
  transition: transform var(--dur-1) var(--ease-spring), background-color var(--dur-1) ease;
}
.tp-emoji:hover,
.tp-emoji:focus-visible {
  outline: none;
  background: var(--fill-2);
  transform: scale(1.12);
}
.tp-comments-empty {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: var(--radius-lg);
  background: var(--surface-2);
  font-size: var(--fs-sm);
}
.tp-feed:has(.tp-comment) .tp-comments-empty {
  display: none;
}

/* Activity timeline */
.tp-activity {
  margin: 0;
  padding: 0;
  list-style: none;
}
.tp-act {
  position: relative;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 10px;
  padding-bottom: 14px;
}
.tp-act:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 28px;
  bottom: 2px;
  left: 12.5px;
  width: 1px;
  background: var(--line-strong);
}
.tp-act__icon {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--tone-soft);
  color: var(--tone-ink);
}
.tp-act__body {
  min-width: 0;
  padding-top: 3px;
}
.tp-act__text {
  font-size: var(--fs-sm);
  overflow-wrap: anywhere;
}
.tp-act__text strong {
  font-weight: var(--fw-semibold);
}
.tp-act__time {
  margin-left: 4px;
  color: var(--text-3);
  font-size: var(--fs-xs);
  white-space: nowrap;
}
.tp-act__detail {
  margin-top: 2px;
  color: var(--text-2);
  font-size: var(--fs-xs);
  overflow-wrap: anywhere;
}
.tp-activity-loading {
  display: grid;
  gap: 10px;
  padding: 4px 0;
}

/* Composer (drawer footer / under the comments on the full page) */
.drawer__footer.tp-footer {
  padding: 10px 16px calc(10px + var(--safe-bottom));
  background: var(--surface-elevated);
}
.tp-composer {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.tp-feed .tp-composer {
  margin-top: 14px;
}
.tp-composer > .avatar {
  margin-top: 4px;
}
.tp-composer__field {
  position: relative;
  flex: 1;
  min-width: 0;
  border: 1px solid var(--input-border);
  border-radius: var(--radius-lg);
  background: var(--input-bg);
  transition: border-color var(--dur-1) ease, box-shadow var(--dur-2) ease;
}
.tp-composer__field:hover {
  border-color: var(--input-border-hover);
}
.tp-composer__field:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3.5px var(--focus-ring);
}
.tp-composer__input {
  display: block;
  width: 100%;
  min-height: 40px;
  max-height: 34vh;
  padding: 9px 12px 2px;
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: var(--fs-md);
  line-height: 1.5;
  resize: none;
  field-sizing: content;
}
.tp-composer__input:focus {
  outline: none;
}
.tp-composer__input::placeholder {
  overflow: hidden;
  color: var(--text-3);
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* The hint row is always there on desktop: the composer never changes height on focus (a
   collapsing footer would shift the scrolled panel under the pointer). */
.tp-composer__bar {
  display: flex;
  align-items: center;
  min-height: 36px;
  padding: 0 96px 4px 12px;
}
.tp-composer__send {
  --btn-h: 30px;
  position: absolute;
  right: 6px;
  bottom: 6px;
}
@media (max-width: 639px) {
  .tp-composer__input {
    padding: 9px 46px 9px 12px;
  }
  .tp-composer__bar {
    display: none;
  }
  .tp-composer__send {
    width: 30px;
    padding: 0;
  }
}
@media (pointer: coarse), (max-width: 767px) {
  .tp-composer__input {
    font-size: 16px;
  }
}

/* @mention suggestions (top layer) */
.tp-mentions {
  position: fixed;
  inset: auto;
  z-index: var(--z-overlay);
  display: none;
  flex-direction: column;
  max-height: 260px;
  margin: 0;
  padding: 4px;
  overflow-y: auto;
  border: 1px solid var(--glass-line);
  border-radius: var(--radius-lg);
  background: var(--surface-overlay);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  backdrop-filter: saturate(180%) blur(24px);
  box-shadow: var(--shadow-lg);
  color: var(--text);
}
.tp-mentions.is-open {
  display: flex;
}
.tp-mention {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 10px 0 8px;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--text);
  font-size: var(--fs-md);
  text-align: left;
  cursor: pointer;
}
.tp-mention[aria-selected="true"] {
  background: var(--fill-2);
}
.tp-mention__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tp-mention__handle {
  margin-left: auto;
  color: var(--text-3);
  font-size: var(--fs-sm);
}
.tp-mention__empty {
  padding: 8px 10px;
  color: var(--text-3);
  font-size: var(--fs-sm);
}

/* -- Move modal ---------------------------------------------------------------------------------- */
.tp-move {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0;
  border: 0;
}
.tp-move__option {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 46px;
  padding: 6px 12px;
  border-radius: var(--radius-md);
  cursor: pointer;
}
.tp-move__option:hover {
  background: var(--fill-1);
}
.tp-move__option:has(input:checked) {
  background: var(--accent-softer);
}
.tp-move__name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-weight: var(--fw-medium);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* -- New task modal ------------------------------------------------------------------------------ */
.task-create .modal__body {
  padding-top: 4px;
}
.tc {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.tc-title,
.tc-desc {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  resize: none;
  field-sizing: content;
}
.tc-title {
  min-height: 34px;
  font-family: var(--font-display);
  font-size: var(--fs-title-3);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-snug);
  line-height: 1.3;
}
.tc-desc {
  min-height: 48px;
  max-height: 36vh;
  margin-top: 8px;
  color: var(--text);
  font-size: var(--fs-md);
  line-height: 1.55;
}
.tc-title::placeholder,
.tc-desc::placeholder {
  color: var(--text-3);
}
.tc-title:focus,
.tc-desc:focus {
  outline: none;
}
.tc-title[aria-invalid="true"]::placeholder {
  color: var(--danger-ink);
}
.tc-error {
  margin-top: 6px;
}
.tc .form-errors {
  margin-bottom: 12px;
}
.tc-props {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 18px;
}
.tc-project-fields {
  display: contents;
}
.tc-pick {
  display: inline-flex;
  min-width: 0;
  max-width: 100%;
}
.tc-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
  height: 30px;
  padding: 0 11px 0 9px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur-1) ease, border-color var(--dur-1) ease;
}
.tc-pill:hover,
.tc-pill[aria-expanded="true"] {
  border-color: var(--input-border-hover);
  background: var(--fill-1);
}
.tc-pill:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--focus-ring);
}
.tc-pill.is-empty {
  color: var(--text-2);
}
.tc-pill__content,
.tc-opt {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.tc-opt {
  flex: 1;
}
.tc-pill__text {
  min-width: 0;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tc-pill__icon,
.tc-pill__chevron {
  flex-shrink: 0;
  color: var(--text-3);
}
.tc-pill .chip {
  max-width: 120px;
}
.tc-pill .icon-tile {
  --size: 18px;
}
.tc-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-2);
  font-size: var(--fs-sm);
  cursor: pointer;
}
.tc-kbd {
  display: inline-flex;
  margin-left: 4px;
}
@media (max-width: 639px) {
  .tc-more {
    flex: 1 1 100%;
    order: -1;
    margin-bottom: 4px;
  }
}

/* -- My tasks ------------------------------------------------------------------------------------ */
.my-tasks {
  max-width: 1040px;
  margin-inline: auto;
}
.mt-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 20px;
}
.mt-hello {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
.mt-hello__text {
  min-width: 0;
}
.mt-hello__title {
  font-family: var(--font-display);
  font-size: var(--fs-title-3);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
}
.mt-hello__sub {
  margin-top: 1px;
  color: var(--text-2);
  font-size: var(--fs-md);
}
.mt-hello__overdue {
  color: var(--danger-ink);
  font-weight: var(--fw-medium);
}
.mt-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 18px 0 14px;
}
.mt-toolbar__sep {
  width: 1px;
  height: 20px;
  margin: 0 2px;
  background: var(--line-strong);
}
.mt-count {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--radius-full);
  background: var(--accent);
  color: var(--text-on-accent);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
}
.mt-chip {
  gap: 6px;
  color: var(--text);
}
.mt-chip:hover {
  background: var(--fill-2);
}
.mt-quick {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  padding: 6px 6px 6px 14px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow:
    0 0 0 1px var(--card-ring),
    var(--shadow-xs);
  transition: box-shadow var(--dur-2) ease;
}
.mt-quick:focus-within {
  box-shadow:
    0 0 0 1.5px var(--accent),
    0 0 0 5px var(--focus-ring);
}
.mt-quick__icon {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 1.5px dashed var(--control-border);
  border-radius: 50%;
  color: var(--text-3);
}
.mt-quick__icon .icon {
  width: 12px;
  height: 12px;
}
.mt-quick__input {
  flex: 1;
  min-width: 0;
  height: 36px;
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: var(--fs-md);
}
.mt-quick__input::placeholder {
  color: var(--text-3);
}
.mt-quick__input:focus {
  outline: none;
}
.mt-quick__opts {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 6px;
}
.mt-quick__select {
  width: auto;
  max-width: 180px;
}
@media (max-width: 767px) {
  .mt-quick {
    flex-wrap: wrap;
    padding: 8px 10px 10px 14px;
  }
  .mt-quick__input {
    flex-basis: calc(100% - 40px);
    font-size: 16px;
  }
  .mt-quick__opts {
    flex: 1 1 100%;
    min-width: 0;
  }
  .mt-quick__select {
    flex: 1 1 0;
    max-width: none;
    min-width: 0;
  }
}

.mt-section {
  margin-top: 20px;
}
.mt-section.is-empty {
  display: none;
}
.mt-sections.is-dragging .mt-section.is-empty[data-drop] {
  display: block;
}
.mt-section__head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: var(--fs-lg);
}
.mt-section__toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  margin-left: -8px;
  padding: 0 10px 0 6px;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--text);
  cursor: pointer;
}
.mt-section__toggle:hover {
  background: var(--fill-1);
}
.mt-section__toggle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--focus-ring);
}
.mt-section__chevron {
  color: var(--text-3);
  transition: transform var(--dur-2) var(--ease-out);
}
.mt-section.is-collapsed .mt-section__chevron {
  transform: rotate(-90deg);
}
.mt-section__title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-snug);
}
.mt-section[data-section="overdue"] .mt-section__title {
  color: var(--danger-ink);
}
.mt-section[data-section="today"] .mt-section__title {
  color: var(--c-orange-ink);
}
.mt-section__count {
  color: var(--text-3);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  font-variant-numeric: tabular-nums;
}
.mt-section--static .mt-section__head {
  gap: 10px;
}
.mt-list {
  min-height: 0;
}
.mt-drop-hint {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  color: var(--text-3);
  font-size: var(--fs-sm);
}
.mt-sections.is-dragging .mt-list:not(:has(.task-row:not(.sortable-ghost))) .mt-drop-hint {
  display: flex;
}
.mt-sections.is-dragging .mt-section[data-drop] .mt-list {
  box-shadow:
    0 0 0 1.5px color-mix(in srgb, var(--accent) 35%, transparent),
    var(--shadow-sm);
}
.my-tasks .task-row__cell--assignee {
  display: none;
}
.my-tasks .task-row {
  cursor: default;
}
.my-tasks .mt-list .task-row {
  touch-action: pan-y;
}
@media (prefers-reduced-motion: no-preference) {
  .my-tasks .task-row.is-new {
    animation: tp-flash-row 1600ms var(--ease-out);
  }
}
@keyframes tp-flash-row {
  from {
    background: var(--accent-soft);
  }
}
.my-tasks .empty-state {
  margin-top: 28px;
}

/* Long conversations: the panel renders the newest comments; this loads the earlier ones. */
.tp-comments-more {
  display: inline-flex;
  align-items: center;
  align-self: center;
  gap: 6px;
  margin: 2px 0 6px;
  padding: 6px 12px;
  border: 0;
  border-radius: var(--radius-full);
  background: var(--fill-1);
  color: var(--text-2);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  cursor: pointer;
}
.tp-comments-more:hover {
  background: var(--fill-2);
  color: var(--text);
}
.tp-comments-more:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}