/* Task detail panel (column on desktop, drawer on tablets, bottom sheet on phones — see mobile.css). */
.detail { --drag: 0px; display: flex; flex-direction: column; width: 100%; min-height: 0; height: 100%; background: var(--surface); outline: none; }
.detail-head {
  display: flex; align-items: center; gap: 6px; padding: 10px 10px 8px 16px; padding-top: calc(10px + var(--safe-top));
  border-bottom: 1px solid var(--separator); position: relative;
}
.detail-head-actions { display: flex; gap: 2px; margin-left: auto; }
.crumb {
  display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 70%; border: 0; background: var(--fill-4); color: var(--label);
  border-radius: var(--r-pill); padding: 5px 10px; font: 500 13px/1 var(--font-text); white-space: nowrap; overflow: hidden;
}
.crumb > span { overflow: hidden; text-overflow: ellipsis; }
.crumb-sec { color: var(--label-2); }
.crumb:disabled { cursor: default; opacity: 1; }
.detail-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 18px calc(28px + var(--safe-bottom)); overscroll-behavior: contain; }
.detail-titlebar { display: flex; align-items: flex-start; gap: 10px; }
.detail-check { padding-top: 7px; }
.detail-check .check { width: 24px; height: 24px; }
.detail-title {
  flex: 1; border: 0; background: transparent; padding: 2px 4px; resize: none; overflow: hidden; min-height: 0;
  font: var(--t-title3); letter-spacing: var(--tr-title3); line-height: 1.35; border-radius: var(--r-sm);
}
.detail-title:focus { box-shadow: 0 0 0 2px color-mix(in srgb, var(--tint) 40%, transparent); }
.detail-notes {
  margin: 8px 0 12px 34px; width: calc(100% - 34px); border: 0; background: var(--fill-4); border-radius: var(--r-md);
  padding: 10px 12px; resize: none; overflow: hidden; min-height: 64px; font: var(--t-callout);
}
.detail-notes:focus { background: var(--field-bg); }
.props { display: flex; flex-direction: column; margin: 4px 0 8px; border-radius: var(--r-lg); background: var(--fill-4); padding: 4px 0; }
.prop { display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 4px 12px; }
.prop + .prop { border-top: 1px solid var(--separator); }
.prop-label { display: inline-flex; align-items: center; gap: 8px; width: 118px; flex: none; color: var(--label-2); font: var(--t-subhead); }
.prop-value {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; border: 0; background: transparent; padding: 6px 8px; margin: 0 -8px;
  border-radius: var(--r-sm); text-align: left; color: var(--label); font: var(--t-body); min-height: 34px;
}
.prop-value:disabled { cursor: default; opacity: 1; }
@media (hover: hover) { .prop-value:not(:disabled):hover { background: var(--fill-3); } }
.due-value { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.due-value.tone-overdue { color: var(--red); } .due-value.tone-today { color: var(--green-text); }
.recur-note { display: inline-flex; align-items: center; gap: 4px; color: var(--label-2); font: var(--t-footnote); }
.due-quick { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 12px 10px 140px; }
.prio-value, .assignee-value { display: inline-flex; align-items: center; gap: 6px; }
.prop-labels { align-items: flex-start; padding-block: 8px; }
.prop-labels .prop-label { padding-top: 5px; }
.labels-edit { flex: 1; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-width: 0; }
.labels-edit .chip-label { background: color-mix(in srgb, var(--c6) 14%, transparent); padding: 3px 4px 3px 9px; border-radius: var(--r-pill); }
.label-input { flex: 1 1 120px; width: auto; min-height: 30px; padding: 4px 8px; background: transparent; border-color: transparent; }

.detail-section { margin-top: 18px; display: flex; flex-direction: column; gap: 8px; }
.detail-h { display: flex; align-items: center; gap: 8px; font: var(--t-headline); color: var(--label); }
.detail-count { margin-left: auto; color: var(--label-2); font-weight: 500; }
.progress { height: 4px; border-radius: 2px; background: var(--fill-3); overflow: hidden; }
.progress-bar { display: block; height: 100%; background: var(--green); border-radius: 2px; transition: width var(--dur-3) var(--ease-out); }
.sub-list { display: flex; flex-direction: column; }
.sub-row .task-inner { background: var(--surface); padding-block: 8px; align-items: center; }
.sub-row .drag-handle { margin-left: 0; }
.sub-title { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; border: 0; background: transparent; padding: 0; text-align: left; color: var(--label); font: var(--t-body); }
.sub-row.is-done .sub-title > span:first-child { text-decoration: line-through; color: var(--label-2); }
.sub-row .check { width: 20px; height: 20px; }
@media (hover: hover) { .sub-row:hover .task-inner { background: var(--fill-4); } }
.sub-add { display: flex; align-items: center; gap: 8px; color: var(--tint); padding-left: 2px; }
.sub-input { border-color: transparent; background: transparent; padding-left: 4px; }
.sub-input:focus { background: var(--field-bg); }

.thread { display: flex; flex-direction: column; gap: 12px; }
.comment { display: flex; gap: 10px; }
.comment-main { flex: 1; min-width: 0; }
.comment-head { display: flex; align-items: center; gap: 8px; font: var(--t-subhead); }
.comment-head time { color: var(--label-2); font: var(--t-footnote); }
.comment-del { margin-left: auto; opacity: .6; }
.comment-body { font: var(--t-callout); white-space: pre-wrap; overflow-wrap: anywhere; margin-top: 2px; user-select: text; }
.mention { color: var(--tint-text); font-weight: 600; }
.comment-form { display: flex; align-items: flex-end; gap: 8px; margin-top: 6px; }
.comment-field { flex: 1; position: relative; min-width: 0; }
.comment-input { resize: none; overflow: hidden; min-height: 38px; border-radius: 19px; padding: 8px 14px; }
.send-btn { color: var(--tint); }
.mention-box {
  position: absolute; bottom: calc(100% + 4px); left: 0; z-index: 5; min-width: 220px; background: var(--surface); border-radius: var(--r-md);
  box-shadow: var(--shadow-pop); padding: 4px; display: flex; flex-direction: column;
}
.mention-opt { display: flex; align-items: center; gap: 8px; border: 0; background: transparent; padding: 7px 8px; border-radius: var(--r-sm); text-align: left; color: var(--label); }
.mention-opt.is-on { background: var(--accent-fill); color: #fff; }
.mention-opt.is-on .muted { color: rgb(255 255 255 / 75%); }
.detail-foot { margin-top: 22px; padding-top: 12px; border-top: 1px solid var(--separator); display: flex; flex-direction: column; gap: 4px; color: var(--label-2); font: var(--t-footnote); }