/* Tasks feature styles. Split out of theme.css; loaded via index.html.
 * Shared tokens/UI-kit/layout live in theme.css. */

.tasks-toolbar {
 display: flex;
 align-items: center;
 gap: 8px;
 min-width: 0;
}

.tasks-toolbar-status {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 height: 36px;
 padding: 0 12px;
 border: 1px solid var(--border);
 border-radius: var(--radius-md);
 background: var(--card);
 font-size: 13px;
 font-weight: 500;
 line-height: 1;
 color: var(--muted-foreground);
 white-space: nowrap;
 max-width: min(52vw, 28rem);
 overflow: hidden;
 text-overflow: ellipsis;
}

.tasks-toolbar-status-spinner {
 width: 14px;
 height: 14px;
 border-width: 1.5px;
 flex-shrink: 0;
}

.tasks-toolbar-status-synced svg {
 color: var(--message-success);
 flex-shrink: 0;
}

.tasks-toolbar-status-stale {
 background: color-mix(
  in srgb,
  var(--message-warning) 12%,
  var(--card)
 );
 border-color: color-mix(
  in srgb,
  #f59e0b 40%,
  transparent
 );
 color: var(--message-warning);
 max-width: min(70vw, 36rem);
}

.tasks-toolbar-status-stale svg {
 flex-shrink: 0;
}

.tasks-toolbar-status-stale-text {
 font-weight: 500;
}

.tasks-toolbar-status-stale .btn-link {
 font-size: inherit;
 font-weight: 600;
 padding: 0;
 min-height: 0;
 color: inherit;
 text-decoration: underline;
}

.tasks-toolbar-status-stale
 .btn-link:hover {
 opacity: 0.85;
}

/* ---- list: filter bar ---- */
.task-filters {
 display: flex;
 align-items: center;
 gap: 6px;
 flex-wrap: wrap;
 margin-top: 8px;
 color: var(--muted-foreground);
}

.task-filter {
 display: inline-flex;
 align-items: center;
 gap: 6px;
 padding: 4px 10px;
 border: 0;
 border-radius: var(--radius-md);
 background: transparent;
 color: var(--muted-foreground);
 font: inherit;
 font-size: 13px;
 font-weight: 500;
 cursor: pointer;
}

.task-filter:hover {
 color: var(--foreground);
}

.task-filter.active {
 background: var(--accent);
 color: var(--foreground);
}

.task-filter-count {
 color: var(--muted-foreground);
 font-size: 12px;
 padding-top: 1px;
}

.task-filter.active .task-filter-count {
 color: var(--primary);
}

/* ---- list: rows ---- */
.task-list {
 margin-top: 4px;
 padding: 0;
 overflow: hidden;
}

.task-row {
 display: flex;
 align-items: flex-start;
 gap: 14px;
 width: 100%;
 padding: 14px 16px;
 border: 0;
 border-top: 1px solid var(--border);
 background: transparent;
 color: inherit;
 font: inherit;
 text-align: left;
 cursor: pointer;
}

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

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

.task-row-main {
 flex: 1;
 min-width: 0;
}

.task-row-title {
 font-size: 14px;
 font-weight: 500;
 color: var(--foreground);
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}

.task-row.done .task-row-title {
 color: var(--muted-foreground);
 text-decoration: line-through;
}

.task-row-body {
 margin-top: 2px;
 font-size: 12px;
 color: var(--muted-foreground);
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}

.task-row-meta {
 display: flex;
 align-items: center;
 flex-wrap: wrap;
 gap: 12px;
 margin-top: 8px;
 font-size: 11px;
 color: var(--muted-foreground);
}

.task-row-due,
.task-row-files,
.task-row-list,
.task-row-parent {
 display: inline-flex;
 align-items: center;
 gap: 4px;
}

.task-row-list,
.task-row-parent {
 min-width: 0;
 max-width: min(100%, 28rem);
}

.task-row-meta-text,
.task-row-parent-link {
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
 max-width: min(100%, 40ch);
}

.task-detail-meta .task-row-list,
.task-detail-meta .task-row-parent {
 max-width: min(100%, 36rem);
}

.task-detail-meta .task-row-meta-text,
.task-detail-meta
 .task-row-parent-link {
 max-width: min(100%, 56ch);
}

.task-row-parent-link {
 color: inherit;
 text-decoration: underline;
 text-decoration-color: color-mix(
  in srgb,
  currentColor 35%,
  transparent
 );
}

.task-row-parent-link:hover {
 color: var(--primary);
 text-decoration-color: currentColor;
}

.task-detail-meta {
 display: flex;
 align-items: center;
 flex-wrap: wrap;
 gap: 12px;
 margin-top: 10px;
 font-size: 12px;
 color: var(--muted-foreground);
}

.task-detail-meta > span {
 display: inline-flex;
 align-items: center;
 gap: 4px;
}

.task-row-chevron {
 display: inline-flex;
 align-items: center;
 color: var(--border);
 margin-top: 2px;
}

/* ---- status dot ---- */
.task-dot {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 flex-shrink: 0;
 width: 16px;
 height: 16px;
 margin-top: 1px;
}

.task-dot.is-open {
 color: var(--border);
}

.task-dot.is-complete {
 color: #16a34a;
}

.task-dot.is-progress {
 box-sizing: border-box;
 border: 2px solid var(--primary);
 border-radius: 999px;
}

.task-dot.is-progress::after {
 content: '';
 width: 6px;
 height: 6px;
 border-radius: 999px;
 background: var(--primary);
}

/* ---- list: empty + footer ---- */
.task-empty {
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 10px;
 padding: 48px 16px;
 color: var(--muted-foreground);
 font-size: 14px;
}

.task-empty svg {
 color: var(--border);
}

.task-empty .muted {
 max-width: 360px;
 text-align: center;
 font-size: 13px;
}

/* ---- list: load error ---- */
/* task load errors use ui/message.mjs */

.task-foot {
 margin-top: 16px;
 font-size: 11px;
 line-height: 1.5;
}

/* ---- detail ---- */
.task-detail {
 display: flex;
 flex-direction: column;
 gap: 12px;
 max-width: 48rem;
 width: 100%;
 margin: 0 auto;
}

.task-detail-card {
 padding: 0;
 overflow: hidden;
 gap: 0;
}

.task-detail-head {
 display: flex;
 align-items: flex-start;
 justify-content: space-between;
 gap: 16px;
 padding: 20px;
 border-bottom: 1px solid var(--border);
}

.task-detail-head-main {
 min-width: 0;
}

.task-detail-status {
 display: flex;
 align-items: center;
 gap: 8px;
 margin-bottom: 8px;
}

.task-detail-title {
 font-size: 18px;
 font-weight: 600;
}

.task-description {
 padding: 20px;
 border-bottom: 1px solid var(--border);
}

.task-description-content {
 font-size: 14px;
 line-height: 1.6;
 color: var(--muted-foreground);
}

.task-description-content > * + * {
 margin-top: 0.75em;
}

.task-description-content h1,
.task-description-content h2,
.task-description-content h3,
.task-description-content h4,
.task-description-content h5,
.task-description-content h6 {
 color: var(--foreground);
 font-weight: 600;
 line-height: 1.3;
}

.task-description-content h1 {
 font-size: 1.25rem;
}
.task-description-content h2 {
 font-size: 1.125rem;
}
.task-description-content h3 {
 font-size: 1rem;
}

.task-description-content a {
 color: var(--primary);
 text-decoration: underline;
}

.task-description-content a:hover {
 text-decoration: none;
}

.task-description-content ul,
.task-description-content ol {
 padding-left: 1.25rem;
}

.task-description-content
 .task-md-checklist {
 list-style: none;
 padding-left: 0;
}

.task-description-content
 .task-md-check-item {
 display: flex;
 align-items: flex-start;
 gap: 8px;
}

.task-description-content
 .task-md-check-item
 input {
 margin-top: 3px;
 flex-shrink: 0;
}

.task-description-content
 .task-md-quote {
 margin: 0;
 padding-left: 12px;
 border-left: 3px solid var(--border);
 color: var(--foreground);
}

.task-description-content .task-md-pre {
 overflow-x: auto;
 padding: 10px 12px;
 border-radius: var(--radius-md);
 background: var(--muted);
}

.task-description-content
 .task-md-code {
 font-family: ui-monospace, monospace;
 font-size: 0.9em;
 padding: 1px 4px;
 border-radius: var(--radius-sm);
 background: var(--muted);
}

.task-description-content
 .task-md-image {
 max-width: 100%;
 height: auto;
 border-radius: var(--radius-md);
}

.task-description-content .task-md-hr {
 border: 0;
 border-top: 1px solid var(--border);
 margin: 1em 0;
}

/* ---- linked docs ---- */
.task-linked-docs {
 padding: 0 20px 20px;
 border-bottom: 1px solid var(--border);
}

.task-linked-docs-toggle {
 display: flex;
 align-items: center;
 gap: 8px;
 width: 100%;
 padding: 0;
 border: none;
 background: none;
 color: inherit;
 font: inherit;
 cursor: pointer;
 text-align: left;
}

.task-linked-docs-toggle:hover
 .task-section-label {
 color: var(--foreground);
}

.task-linked-docs-count {
 font-size: 12px;
}

.task-linked-docs-chevron {
 margin-left: auto;
 color: var(--muted-foreground);
 display: inline-flex;
 transition: transform 0.15s ease;
}

.task-linked-docs-chevron.is-open {
 transform: rotate(180deg);
}

.task-linked-docs-panel {
 margin-top: 12px;
 display: flex;
 flex-direction: column;
 gap: 8px;
}

.task-linked-doc {
 border: 1px solid var(--border);
 border-radius: var(--radius);
 overflow: hidden;
}

.task-linked-doc-title {
 display: flex;
 align-items: center;
 gap: 8px;
 padding: 10px 12px;
 font-size: 13px;
 font-weight: 500;
 cursor: pointer;
 list-style: none;
}

.task-linked-doc-title::-webkit-details-marker {
 display: none;
}

.task-linked-doc-body {
 padding: 0 12px 12px;
 border-top: 1px solid var(--border);
}

.task-linked-doc-page
 + .task-linked-doc-page {
 margin-top: 16px;
 padding-top: 16px;
 border-top: 1px solid var(--border);
}

.task-linked-doc-page-title {
 font-size: 12px;
 font-weight: 600;
 margin-bottom: 8px;
 color: var(--foreground);
}

.task-section-label {
 font-size: 11px;
 font-weight: 600;
 letter-spacing: 0.06em;
 text-transform: uppercase;
 color: var(--muted-foreground);
 margin-bottom: 8px;
}

/* ---- detail: files ---- */
.task-files {
 padding: 20px;
 border-bottom: 1px solid var(--border);
}

.task-file {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 10px;
 padding: 8px 10px;
 border-radius: var(--radius-md);
 background: var(--muted);
}

.task-file + .task-file {
 margin-top: 6px;
}

.task-file-main {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 min-width: 0;
 font-size: 14px;
}

.task-file-name {
 font-weight: 500;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}

.task-file-actions {
 display: inline-flex;
 align-items: center;
 gap: 6px;
 flex-shrink: 0;
}

.task-file-preview,
.task-file-dl {
 display: inline-flex;
 align-items: center;
 color: var(--muted-foreground);
}

button.task-file-preview {
 border: 0;
 background: transparent;
 padding: 0;
 cursor: pointer;
}

button.task-file-preview:hover,
a.task-file-dl:hover {
 color: var(--foreground);
}

.dialog:has(.task-preview-body) {
 max-width: min(96vw, 52rem);
}

.task-preview-body {
 display: flex;
 justify-content: center;
}

.task-preview-img {
 display: block;
 max-width: min(90vw, 48rem);
 max-height: min(80vh, 40rem);
 width: auto;
 height: auto;
 border-radius: var(--radius-md);
}

.task-preview-pdf {
 display: block;
 width: min(90vw, 48rem);
 height: min(80vh, 40rem);
 border: 0;
 border-radius: var(--radius-md);
 background: var(--background);
}

/* ---- detail: conversation ---- */
.task-convo {
 padding: 20px;
 background: var(--muted);
}

.task-convo-empty {
 font-size: 14px;
 font-style: italic;
}

.task-thread {
 gap: 16px;
}

.task-comment {
 display: flex;
 gap: 12px;
}

.task-comment-main {
 flex: 1;
 min-width: 0;
}

.task-comment-head {
 display: flex;
 align-items: center;
 gap: 8px;
 font-size: 12px;
 margin-bottom: 2px;
}

.task-comment-who {
 font-weight: 500;
 color: var(--foreground);
}

.task-comment-text {
 font-size: 14px;
 line-height: 1.5;
 color: var(--foreground);
 white-space: pre-wrap;
}

/* ---- detail: composer ---- */
.task-composer {
 margin-top: 16px;
 background: var(--card);
 border: 1px solid var(--border);
 border-radius: var(--radius-md);
 overflow: hidden;
}

.task-composer .textarea {
 border: 0;
 border-radius: 0;
 resize: none;
}

.task-composer .textarea:focus-visible {
 outline: none;
 box-shadow: none;
}

.task-composer-bar {
 display: flex;
 justify-content: flex-end;
 gap: 8px;
 padding: 8px;
 border-top: 1px solid var(--border);
}

.task-composer-file-input {
 display: none;
}

.task-composer-files {
 display: flex;
 flex-wrap: wrap;
 gap: 6px;
 padding: 0 8px 8px;
}

.task-composer-files:empty {
 display: none;
}

.task-composer-chip {
 display: inline-flex;
 align-items: center;
 gap: 4px;
 max-width: 220px;
 padding: 2px 6px 2px 8px;
 font-size: 12px;
 border: 1px solid var(--border);
 border-radius: 999px;
 background: var(--muted);
}

.task-composer-chip > span {
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}

.task-composer-chip-x {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 width: 16px;
 height: 16px;
 padding: 0;
 border: 0;
 border-radius: 999px;
 line-height: 1;
 font-size: 14px;
 cursor: pointer;
 color: var(--muted-foreground);
 background: transparent;
}

.task-composer-chip-x:hover {
 color: var(--foreground);
}

@media (max-width: 720px) {
 .task-detail-head {
  flex-direction: column;
  align-items: stretch;
 }
}
.task-detail-actions {
 display: flex;
 flex-shrink: 0;
 flex-wrap: wrap;
 gap: 8px;
 align-items: flex-start;
}

.task-detail-clickup {
 text-decoration: none;
}