/* 子任务：详情里的分组、任务表里展开的行、卡片上的数量。颜色都用系统变量，深色跟着走。 */

/* 圆圈 */
.item-circle {
  flex: none; display: inline-grid; place-items: center; width: 18px; height: 18px; padding: 0; border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--label-3); color: #fff; cursor: pointer; transition: background .12s, box-shadow .12s;
}
.item-circle:hover:not(:disabled) { box-shadow: inset 0 0 0 1.5px var(--green); }
.item-circle:disabled { cursor: default; opacity: .6; }
.item-circle svg { width: 12px; height: 12px; stroke-width: 2.6; }
.item-circle.doing { box-shadow: inset 0 0 0 1.5px var(--blue), inset 0 0 0 4px var(--blue-soft); }
.item-circle.done { background: var(--green); box-shadow: none; }

/* 标题：平时像文字，点进去才像输入框 */
.item-title-box { flex: 1; min-width: 0; display: block; }
.input.item-title { display: block; width: 100%; min-height: 0; padding: 2px 4px; border-radius: 5px; background: transparent; color: var(--label); font-size: 14px; text-overflow: ellipsis; }
.input.item-title:hover:not(:disabled) { background: var(--fill-soft); }
.input.item-title:focus { background: var(--fill-soft); text-overflow: clip; }
.input.item-title:disabled { opacity: 1; color: var(--label); -webkit-text-fill-color: currentColor; }
.done > .item-title-box .input.item-title, .item-tr.done .input.item-title { color: var(--label-3); -webkit-text-fill-color: currentColor; text-decoration: line-through; }

/* 负责人：头像和名字，上面盖一层透明的下拉，点哪里都能改 */
.item-owner { position: relative; display: flex; align-items: center; gap: 4px; min-width: 0; border-radius: 6px; font-size: 13px; color: var(--label-2); }
.item-owner .av { flex: none; width: 22px; height: 22px; font-size: 11px; font-weight: 500; }
.item-owner-name { min-width: 0; }
.item-owner.gone { color: var(--label-3); }
.item-owner.gone .av { opacity: .5; }
.select.item-owner-select { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; padding: 0; border: 0; opacity: 0; cursor: pointer; }
.select.item-owner-select:disabled { cursor: default; }
.item-owner:hover:has(.item-owner-select:not(:disabled)) { background: var(--fill-soft); }

.icon-btn.item-more { flex: none; width: 24px; height: 24px; min-width: 0; min-height: 0; padding: 0; color: var(--label-3); }
.icon-btn.item-more svg { width: 16px; height: 16px; }
.item-more-space { flex: none; width: 24px; }

/* 详情里的一行 */
.items-section .group { overflow: visible; }
.item-row { position: relative; display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 4px 8px 4px 16px; box-shadow: inset 0 -1px 0 var(--sep); }
.items-section .group > :last-child { box-shadow: none; }
.item-row .grip { left: 4px; }
.item-row:hover .grip { opacity: 1; }
.item-row.dragging { opacity: .4; }
.item-meta { flex: none; display: flex; align-items: center; gap: 6px; }
.item-row .item-owner { width: 84px; }
.item-row .cell-date { flex: none; width: 58px; text-align: right; font-size: 13px; }
.item-add-row { min-height: 44px; }
.item-add-icon { flex: none; display: inline-grid; place-items: center; width: 18px; height: 18px; color: var(--label-3); }
.item-add-icon svg { width: 14px; height: 14px; }
.input.item-add-input { flex: 1; min-width: 0; min-height: 0; padding: 2px 4px; background: transparent; font-size: 14px; }
.item-hint { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 4px 8px 4px 16px; box-shadow: inset 0 -1px 0 var(--sep); font-size: 14px; color: var(--label-2); }
.item-hint .btn { margin-left: auto; }

/* “…”菜单 */
.status-pick.item-status-pick { grid-template-columns: repeat(3, 1fr); }
.floating .menu-body + .menu-list { padding-top: 0; }

/* 任务表：小三角放在单元格左边的留白里（和拖动的点点同一个位置），不占任务名的宽度 */
.item-caret {
  position: absolute; left: 1px; top: 50%; display: grid; place-items: center; width: 14px; height: 22px; margin-top: -11px; padding: 0; color: var(--label-3); cursor: pointer;
}
.item-caret:hover { color: var(--label); }
.item-caret svg { width: 11px; height: 11px; stroke-width: 2.4; transition: transform .12s; }
.item-caret[aria-expanded="true"] svg { transform: rotate(90deg); }
table.matrix td.name:has(> .name-cell > .item-caret) > .grip { display: none; }

/* 数量在任务名右边：放不下时任务名先省略，它不让 */
.item-count {
  flex: none; padding: 1px 3px; border-radius: 4px; color: var(--label-3); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; cursor: pointer;
}
.item-count:hover { background: var(--fill); color: var(--label); }
.item-count.all-done { color: var(--green); }

/* “+”：鼠标移到行上才出现，盖在单元格右边，不占宽度 */
.item-plus {
  position: absolute; right: 4px; top: 50%; display: none; place-items: center; width: 22px; height: 22px; margin-top: -11px; padding: 0; border-radius: 6px;
  background: var(--fill-strong, var(--surface)); box-shadow: 0 0 0 1px var(--sep); color: var(--label-2); cursor: pointer;
}
.item-plus svg { width: 13px; height: 13px; }
.item-plus:hover { color: var(--accent-text); }
table.matrix tr:hover .item-plus, .item-plus:focus-visible { display: grid; }
@media (hover: none) { table.matrix tr:hover .item-plus { display: none; } }

/* 任务表里的子任务行：列宽和任务行一样，只是矮一点、标题缩进 */
table.matrix tbody tr.item-tr td { height: 36px; padding-top: 0; padding-bottom: 0; background: color-mix(in srgb, var(--surface) 96%, var(--label) 4%); }
table.matrix tbody tr.item-tr td.name { padding-left: 14px; }
.item-name-cell { display: flex; align-items: center; gap: 4px; min-width: 0; padding-left: 4px; }
.item-tr .item-circle { width: 15px; height: 15px; }
.item-tr .item-circle svg { width: 10px; height: 10px; }
.item-tr .input.item-title { padding: 1px 2px; font-size: 13px; }
.item-tr .icon-btn.item-more { position: absolute; right: 2px; top: 50%; width: 22px; height: 22px; margin-top: -11px; background: var(--surface); opacity: 0; }
.item-tr:hover .icon-btn.item-more, .item-tr .icon-btn.item-more:focus-visible, .item-tr .icon-btn.item-more[aria-expanded="true"] { opacity: 1; }
.item-tr .item-more-space { display: none; }
.item-tr .item-owner { max-width: 100%; }
/* 子任务行的端：和主任务一样点格子选人。没选的平时不显示，鼠标移到这一行才露出“+” */
.item-line-pick-box { position: relative; display: block; }
.item-line-pick-box .line-cell { pointer-events: none; }
.select.item-line-pick { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; padding: 0; border: 0; opacity: 0; cursor: pointer; }
.item-line-add { opacity: 0; color: var(--accent-text); }
.item-tr:hover .item-line-add, .item-line-pick-box:focus-within .item-line-add { opacity: 1; }
.item-line-pick-box:hover .line-cell { filter: brightness(.94); }
.item-tr .select.status { font-size: 12px; }
.item-line-td { text-align: center; }
.item-line-dot { display: inline-block; line-height: 1; }
.item-add-tr .input.item-add-input { font-size: 13px; }

/* 卡片和列表上的数量 */
.mark.item-mark svg { width: 12px; height: 12px; }

/* “我的” */
.my-item .my-item-task { min-width: 0; color: var(--label-3); }

@media (max-width: 760px) {
  /* 手机：标题一行，负责人和截止放第二行。每个能点的地方至少 44 高；圆圈看着还是小的，点击区往外扩到 44 */
  .item-row { flex-wrap: wrap; gap: 0 10px; padding: 0 0 2px 12px; }
  .item-row .grip { display: none; }
  .item-circle { position: relative; width: 22px; height: 22px; }
  .item-circle::after { content: ""; position: absolute; inset: -11px; }
  .item-circle svg { width: 14px; height: 14px; }
  .item-row .item-title-box { flex: 1 1 calc(100% - 90px); }
  .input.item-title, .input.item-add-input { font-size: 16px; }
  .input.item-title { min-height: 44px; }
  .item-meta { order: 3; flex: 1 1 100%; flex-wrap: wrap; padding-left: 32px; }
  .item-row .item-owner { width: auto; flex: 0 1 auto; min-height: 44px; padding-right: 8px; }
  .item-row .cell-date { display: flex; align-items: center; justify-content: flex-end; width: auto; min-width: 58px; min-height: 44px; }
  .icon-btn.item-more { width: 44px; height: 44px; }
  .item-add-row { min-height: 44px; }
}

/* 提示里的按钮：撤销、标完成、打开。提示层本身不挡点击，按钮要单独打开 */
.toast-action { margin-left: 12px; padding: 0; color: #64D2FF; font: inherit; font-weight: 600; pointer-events: auto; cursor: pointer; }
.toast-action:hover { text-decoration: underline; }

/* “+”盖在单元格右边。移到行上时给它让出位置，数量不能被盖住：任务名先省略 */
@media (hover: hover) {
  table.matrix tr:hover .name-cell:has(.item-plus) { padding-right: 24px; }
}

/* 阻塞：红色圆圈，原因写在标题下面 */
.item-circle.blocked { background: var(--red); box-shadow: none; color: #fff; font-size: 12px; font-weight: 600; line-height: 1; }
.item-title-box .item-reason { display: block; padding: 0 4px; font-size: 12px; }

/* 详情一行里的端：平时是灰字，点一下选。没选端时更淡 */
.select.item-line-select { flex: none; width: 76px; min-height: 26px; padding: 0 16px 0 6px; border: 0; border-radius: 6px; background-color: transparent; color: var(--label-2); font-size: 12px; }
.select.item-line-select.none { color: var(--label-3); }
.select.item-line-select:hover:not(:disabled) { background-color: var(--fill-soft); }
.select.item-line-select:disabled { opacity: 1; background-image: none; }
@media (max-width: 760px) { .select.item-line-select { min-height: 44px; } }

/* 详情里由子任务决定的端：只读汇总 */
.sub-row.derived-line { gap: 8px; }
.derived-summary { flex: 1; min-width: 0; color: var(--label-2); font-size: 13px; }
.derived-count { color: var(--label); font-variant-numeric: tabular-nums; font-weight: 500; }
.derived-line .sub-reason { flex-basis: 100%; }

/* 任务表里由子任务决定的端：和直接选的端一样的颜色，点一下是展开 */
.line-cell.derived { cursor: pointer; }
/* 格子窄，名字放不下时先省略名字，“+1”一直在 */
.line-cell.derived .derived-owner { display: flex; justify-content: center; max-width: 100%; }
.derived-owner-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.derived-owner-more { flex: none; white-space: pre; }

/* 我的看板：子任务卡片，第二行是所属任务 */
.item-card .tmeta .my-item-task { max-width: 100%; }

/* 详情里自己这条子任务的下一步：“开始”“做完”，比普通按钮小一号，主按钮只在顶部有一个 */
.btn.item-next { flex: none; min-height: 28px; padding: 2px 10px; font-size: 13px; }

/* 详情顶部的“下一步”：左边写是什么事，右边是按钮，主按钮最右 */
.next-step { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; font-size: 15px; }
.next-step:not(.banner) { padding: 8px 10px 8px 16px; border-radius: 12px; background: var(--surface); box-shadow: var(--shadow-card); }
.next-step:not(.banner).quiet { padding: 0 4px; border-radius: 0; background: none; box-shadow: none; color: var(--label-2); font-size: 13px; }
.next-step-text { flex: 1 1 200px; min-width: 0; font-weight: 500; }
.next-step-text strong { margin-right: 8px; color: var(--label-3); font-weight: 400; }
.next-step.quiet .next-step-text { font-weight: 400; }
.next-step-reason { display: block; margin-top: 2px; font-size: 13px; font-weight: 400; }
.next-step-actions { flex: none; display: flex; align-items: center; gap: 8px; margin-left: auto; }
.banner .next-step-actions .btn { margin-left: 0; }

@media (max-width: 760px) {
  /* 手机：第一行圆圈、标题、“…”，第二行端、负责人、截止和这个按钮 */
  .btn.item-next { order: 4; min-height: 44px; margin-right: 8px; }
  .item-row:has(.item-next) .item-meta { flex-basis: calc(100% - 80px); }
  .next-step-actions { flex: 1 1 100%; justify-content: flex-end; }
  .next-step-actions .btn { min-height: 44px; }
}