/* Tasks: a list column and a detail column, both on Graphide's panel + hairline treatment. */
.todo-page-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:20px}
.todo-page-heading h1{font-size:22px;line-height:1.2;letter-spacing:-.02em;margin:7px 0 6px}
.todo-page-heading p{font-size:13px;color:var(--muted);margin:0}
.todo-workspace{display:flex;border:1px solid var(--line);border-radius:var(--r-panel);background:var(--panel);overflow:hidden;min-height:560px}
.todo-list-panel{flex:0 0 clamp(260px,38%,460px);background:var(--field);border-right:1px solid var(--line);display:flex;flex-direction:column;min-width:0;overflow:hidden;transition:flex-basis var(--t-pop) var(--ease-out),opacity var(--t-fade) var(--ease-out),border-right-width var(--t-pop) var(--ease-out),visibility 0s}
.todo-list-panel>*{min-width:260px}
.todo-detail-panel{flex:1 1 0;min-width:0;display:flex;flex-direction:column}
.todo-detail-panel>[data-todo-detail]{flex:1;min-width:0}
/* Folded away: the list shrinks to nothing, the detail takes the width, and a slim strip keeps you oriented. */
.todo-workspace.list-collapsed .todo-list-panel{flex-basis:0;opacity:0;border-right-width:0;visibility:hidden;transition:flex-basis var(--t-pop) var(--ease-out),opacity var(--t-fade) var(--ease-out),border-right-width var(--t-pop) var(--ease-out),visibility 0s linear var(--t-pop)}
.todo-rail{display:flex;align-items:center;gap:2px;height:0;padding:0 14px;overflow:hidden;opacity:0;visibility:hidden;border-bottom:1px solid transparent;background:var(--field);transition:height var(--t-pop) var(--ease-out),opacity var(--t-fade) var(--ease-out),border-color var(--t-fade) var(--ease-out),visibility 0s linear var(--t-pop)}
.list-collapsed .todo-rail{height:44px;opacity:1;visibility:visible;border-bottom-color:var(--line);transition:height var(--t-pop) var(--ease-out),opacity var(--t-fade) var(--ease-out),border-color var(--t-fade) var(--ease-out),visibility 0s}
.todo-rail-title{flex:1;min-width:0;margin:0 8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;font-weight:500;color:var(--bright)}
.todo-rail-pos{flex:none;font:400 10.5px var(--mono);color:var(--muted)}
.todo-rail .icon-button:disabled{opacity:.35}
.todo-list-tools{display:flex;align-items:center;gap:6px}
.todo-collapse .icon{transition:transform var(--t-pop) var(--ease-out)}
.list-collapsed .todo-collapse .icon{transform:rotate(180deg)}
.todo-list-toolbar{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:10px 10px 4px}
.todo-list-toolbar .filter-tabs{gap:1px}
.todo-list-toolbar .filter-tab{padding:4px 8px;font-size:12px}
.todo-list-toolbar .filter-tab span{font:400 10.5px var(--mono);margin-left:3px;color:var(--muted)}
.todo-search{margin:8px 10px 10px;width:calc(100% - 20px);border:1px solid var(--line);border-radius:var(--r-field);height:30px;padding:0 10px;background:var(--sunken);font-size:12.5px;color:var(--bright)}
.todo-list{flex:1}
.todo-list-item{position:relative;display:flex;gap:10px;align-items:flex-start;border-top:0;padding:9px 12px;margin:0 6px;border-radius:var(--r-field)}
.todo-list-item:hover{background:var(--hover)}
.todo-list-item.selected{background:var(--select)}
.todo-list-item.selected::before{content:'';position:absolute;left:-6px;top:7px;bottom:7px;width:2px;border-radius:0 2px 2px 0;background:var(--accent)}
.todo-list-select{padding:0;min-width:0;flex:1;text-align:left}
.todo-list-select strong{display:block;font-size:13px;line-height:1.4;font-weight:500;color:var(--bright);overflow-wrap:anywhere}
.todo-list-select strong.done{text-decoration:line-through;color:var(--muted)}
.todo-list-select span{display:block;margin-top:3px;font:400 10.5px/1.5 var(--mono);color:var(--muted)}
.todo-priority-mark{color:var(--warning);font:700 13px var(--mono)}
.todo-storage-note{padding:14px;font:400 10.5px var(--mono);color:var(--muted)}
.todo-list-empty{padding:40px 20px;color:var(--muted);text-align:center;font-size:12.5px;line-height:1.7}
.todo-list-empty::before{content:'';display:block;width:44px;height:38px;background:var(--accent);opacity:.45;-webkit-mask:var(--mark) center/contain no-repeat;mask:var(--mark) center/contain no-repeat;margin:0 auto 14px}
.todo-detail-empty{min-height:500px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:30px;text-align:center}
.todo-empty-symbol{display:none}
.todo-detail-empty h2{font-size:18px;letter-spacing:-.02em;max-width:300px;margin:0 0 8px}
.todo-detail-empty p{font-size:12.5px;color:var(--muted);line-height:1.6;margin:0 0 20px}
.todo-detail{padding:18px 22px 26px}
.todo-detail-heading{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:14px}
.todo-file-actions{display:flex;align-items:center;gap:14px}
.todo-delete{color:var(--error)}
.todo-detail label{display:flex;justify-content:space-between;font-size:12px;font-weight:500;color:var(--text);margin:14px 0 6px}
.todo-detail label span{font:400 10.5px var(--mono);color:var(--muted)}
.todo-detail input,.todo-detail textarea,.todo-detail select{width:100%;border:1px solid var(--line);background:var(--sunken);border-radius:var(--r-field);color:var(--bright);padding:0 10px;height:32px;font-size:13px}
.todo-detail textarea{height:auto;padding:8px 10px;resize:vertical;line-height:1.55}
.todo-detail input:disabled,.todo-detail textarea:disabled,.todo-detail select:disabled{opacity:.6}
.todo-fields{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.todo-fields input,.todo-fields select{font-size:12px;padding:0 8px}
.todo-save{display:flex;align-items:center;justify-content:space-between;margin-top:18px}
.todo-comments{margin-top:26px;border-top:1px solid var(--line);padding-top:16px}
.todo-comments-heading{display:flex;align-items:center;justify-content:space-between}
.todo-comments-heading h2{font:600 9.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0}
.todo-no-comments{font-size:12.5px;color:var(--muted);margin:14px 0}
.todo-comment{margin:16px 0;padding:11px 14px;background:var(--field);border-left:3px solid var(--accent);border-radius:0 var(--r-field) var(--r-field) 0;overflow-wrap:anywhere}
.todo-comment-date{font:400 10.5px var(--mono);color:var(--muted);margin-bottom:6px}
.markdown-content{font-size:13px;line-height:1.65;color:var(--text);overflow-wrap:anywhere}
.markdown-content p{margin:6px 0}
.markdown-content h1,.markdown-content h2,.markdown-content h3,.markdown-content h4{line-height:1.35;margin:14px 0 6px;font-size:14px;font-weight:600}
.markdown-content ul,.markdown-content ol{padding-left:20px;margin:6px 0}
.markdown-content pre{overflow:auto;white-space:pre;padding:10px 12px;background:var(--sunken);border:1px solid var(--line);border-radius:var(--r-field);font:400 12px/1.6 var(--mono)}
.markdown-content code{font:400 12px var(--mono);background:var(--sunken);padding:1px 5px;border-radius:var(--r-chip)}
.markdown-content pre code{padding:0;background:none}
.markdown-content a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.markdown-content blockquote{border-left:3px solid var(--accent-soft);padding-left:14px;margin-left:0;color:var(--muted)}
.markdown-content input{width:auto!important;margin-right:6px}
.todo-preview{border:1px dashed var(--line);background:var(--field);padding:10px 14px;margin-top:10px;border-radius:var(--r-field)}
.todo-comment-footer{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:10px}
.todo-comment-footer>span,.todo-date-note{font-size:11.5px;color:var(--muted);line-height:1.6}
.todo-notice{font-size:12px;line-height:1.6;padding:10px 12px;background:var(--warning-wash);box-shadow:inset 3px 0 var(--warning);color:var(--warning);border-radius:var(--r-field)}
.todo-root[aria-busy=true]{cursor:progress}
.todo-root[aria-busy=true] .primary-button,.todo-root[aria-busy=true] .secondary-button{opacity:.6;pointer-events:none}
.todo-import-dialog{width:min(490px,calc(100vw - 24px));padding:22px}
.todo-import-dialog h2{font-size:20px;letter-spacing:-.02em;margin:12px 0 14px}
.todo-import-dialog p,.todo-import-dialog li{font-size:13px;line-height:1.6;color:var(--muted)}
.todo-import-dialog ul{max-height:35vh;overflow:auto;padding-left:20px}
.todo-import-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:20px}
.todo-repeat-fields{grid-template-columns:2fr 1fr}
.todo-history{margin-top:22px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-field);font-size:12.5px;color:var(--text);background:var(--field)}
.todo-history ul{padding-left:18px;line-height:1.9;max-height:220px;overflow:auto}
.todo-posting-dialog label{display:block;margin:14px 0 6px;font-size:12px;font-weight:500;color:var(--text)}
.todo-posting-dialog textarea,.todo-posting-dialog input{display:block;width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:var(--r-field);background:var(--sunken);color:var(--bright);font:13px/1.55 var(--sans)}
.todo-root button:disabled{opacity:.5;cursor:default;pointer-events:none}
@media(max-width:1100px){
  .todo-list-panel{flex-basis:clamp(220px,40%,460px)}
  .todo-list-panel>*{min-width:220px}
  .todo-detail{padding:18px}
  .todo-fields{grid-template-columns:1fr 1fr}
  .todo-fields>div:last-child{grid-column:span 2}
  .todo-page-heading{align-items:flex-start}
  .todo-page-heading .heading-actions{max-width:250px;flex-wrap:wrap;justify-content:flex-end}
  .todo-list-toolbar{flex-wrap:wrap}
  .todo-list-tools{margin-left:7px}
}
@media(max-width:800px){
  .todo-workspace{flex-direction:column}
  .todo-list-panel{flex:none;max-height:560px;border-right:0;border-bottom:1px solid var(--line);transition:max-height var(--t-pop) var(--ease-out),opacity var(--t-fade) var(--ease-out),border-bottom-width var(--t-pop) var(--ease-out),visibility 0s}
  .todo-list-panel>*{min-width:0}
  .todo-workspace.list-collapsed .todo-list-panel{flex:none;max-height:0;border-bottom-width:0;transition:max-height var(--t-pop) var(--ease-out),opacity var(--t-fade) var(--ease-out),border-bottom-width var(--t-pop) var(--ease-out),visibility 0s linear var(--t-pop)}
  .todo-collapse .icon{transform:rotate(90deg)}
  .list-collapsed .todo-collapse .icon{transform:rotate(-90deg)}
  .todo-rail{padding:0 10px}
  .todo-prop{grid-template-columns:84px minmax(0,1fr)}
  .todo-list{max-height:300px;overflow:auto}
  .todo-detail-empty{min-height:280px}
  .todo-page-heading{gap:10px}
  .todo-page-heading h1{font-size:21px}
  .todo-page-heading .heading-actions{gap:7px;max-width:210px}
  .todo-page-heading p{max-width:210px;line-height:1.6}
  .todo-list-toolbar{flex-wrap:nowrap}
  .todo-detail{padding:16px 16px 20px}
  .todo-detail-heading{align-items:flex-start}
  .todo-file-actions{gap:10px}
  .todo-list-tools{margin-left:0}
  .todo-fields{grid-template-columns:1fr 1fr 1fr}
  .todo-fields>div:last-child{grid-column:auto}
}

/* ---------- the task as a display: values to read, with a pencil beside each that opens just that element */
.todo-view-head{display:flex;gap:12px;align-items:flex-start;margin:2px 0 16px}
.todo-done{flex:none;width:24px;height:24px;margin-top:3px;border:1.5px solid var(--faint);border-radius:50%;background:var(--sunken);display:inline-flex;align-items:center;justify-content:center;color:transparent;transition:background var(--t-hover) var(--ease-out),border-color var(--t-hover) var(--ease-out),color var(--t-hover) var(--ease-out)}
.todo-done .icon{width:14px;height:14px;stroke-width:2.2}
.todo-done:hover{border-color:var(--accent);color:var(--accent)}
.todo-done.checked{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.todo-title-field{flex:1;min-width:0;display:flex;align-items:flex-start;gap:6px}
.todo-title{flex:0 1 auto;margin:0;font-size:20px;line-height:1.3;letter-spacing:-.02em;overflow-wrap:anywhere}
.todo-title.done{color:var(--muted);text-decoration:line-through}
.todo-title-field .todo-edit{margin-top:1px}
.todo-title-field .todo-edit-form{flex:1}
.todo-title-field .todo-edit-form input{height:38px;font-size:17px;font-weight:600;letter-spacing:-.01em}
.todo-edit{flex:none;width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--r-field);color:var(--muted);transition:opacity var(--t-fade) var(--ease-out),background var(--t-hover) var(--ease-out),color var(--t-hover) var(--ease-out)}
.todo-edit .icon{width:13px;height:13px}
.todo-edit:hover{background:var(--hover-strong);color:var(--bright)}
@media (hover:hover) and (pointer:fine){
  .todo-edit{opacity:0}
  .todo-field:hover .todo-edit,.todo-field:focus-within .todo-edit,.todo-edit:focus-visible{opacity:1}
}
.todo-props{margin:0 0 16px;display:grid;gap:1px}
.todo-prop{display:grid;grid-template-columns:110px minmax(0,1fr);gap:10px;align-items:start;margin:0 -8px;padding:5px 8px;border-radius:var(--r-field)}
.todo-prop:hover{background:var(--hover)}
.todo-prop dt{padding-top:5px;font:600 9.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.todo-prop dd{margin:0;min-width:0}
.todo-prop-value{display:flex;align-items:center;gap:6px;min-height:24px;font-size:13px;color:var(--bright);overflow-wrap:anywhere}
.todo-prop .todo-date-note{margin:2px 0 0}
.todo-empty-value,.todo-no-notes{color:var(--muted)}
.todo-due strong{font-weight:500}
.todo-due-when{margin-left:6px;font-size:12px;color:var(--muted)}
.todo-due.overdue strong,.todo-due.overdue .todo-due-when{color:var(--error)}
.todo-due.overdue strong{font-weight:600}
.todo-page-link{font-size:13px;color:var(--accent)}
.tag.muted{background:var(--sunken);color:var(--muted)}
.todo-view .todo-date-note+.secondary-button{margin-top:4px}
.todo-notes{margin-top:12px;padding-top:12px;border-top:1px solid var(--line-soft)}
.todo-notes-head{display:flex;align-items:center;gap:6px;min-height:24px}
.todo-notes-head h3{margin:0;font:600 9.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.todo-no-notes{margin:6px 0;font-size:12.5px}
.todo-notes .markdown-content{margin-top:2px}
/* the in-place editors */
.todo-edit-form{display:grid;gap:8px;min-width:0}
.todo-detail .todo-edit-label{display:block;margin:2px 0 6px;font-size:12px}
.todo-edit-actions{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.todo-edit-actions .primary-button,.todo-edit-actions .secondary-button{height:28px;padding:0 11px}
.todo-edit-hint{margin-left:auto;font:400 10.5px var(--mono);color:var(--muted)}
.todo-edit-error{margin:0;font-size:12px;line-height:1.5;color:var(--error)}
.todo-edit-form .date-chips{margin-top:0}
.todo-repeat-edit{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:10px;align-items:center}
.todo-detail .todo-every{display:flex;justify-content:flex-start;align-items:center;gap:8px;margin:0;font-weight:400;color:var(--muted)}
.todo-every input{width:72px}
@media(prefers-reduced-motion:reduce){
  .todo-list-panel,.todo-rail,.todo-collapse .icon,.todo-edit,.todo-done{transition:none!important}
}
/* Comment attachments: image previews for safe types, file chips for everything else */
.todo-comment-buttons{display:flex;align-items:center;gap:8px}
.todo-comment-footer>span[data-comment-status]{min-width:0}
.todo-attachments,.todo-pending{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.todo-attachment{display:flex;flex-direction:column;gap:6px;max-width:100%}
.todo-attachment-row{display:inline-flex;align-items:center;gap:2px;max-width:100%}
.todo-chip{display:inline-flex;align-items:center;gap:7px;min-width:0;max-width:min(320px,100%);height:28px;padding:0 10px;border:1px solid var(--line);border-radius:var(--r-chip);background:var(--sunken);color:var(--text);font-size:12px;text-decoration:none}
a.todo-chip:hover{border-color:var(--faint);color:var(--bright);background:var(--hover-strong)}
.todo-chip .icon,.todo-pending-item .icon{width:13px;height:13px;flex:none;color:var(--muted)}
.todo-attachment-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.todo-attachment-size{flex:none;font:400 10.5px var(--mono);color:var(--muted)}
.todo-attachment-remove{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:var(--r-chip);color:var(--muted)}
.todo-attachment-remove:hover{color:var(--error);background:var(--error-wash)}
.todo-attachment-remove .icon{width:12px;height:12px;color:inherit}
.todo-attachment-thumb{display:block;border:1px solid var(--line);border-radius:var(--r-field);overflow:hidden;background:var(--sunken);line-height:0;width:fit-content;max-width:100%}
.todo-attachment-thumb img{display:block;max-width:100%;max-height:200px;object-fit:contain}
.todo-attachment.is-image{width:100%}
.todo-pending-item{display:inline-flex;align-items:center;gap:7px;max-width:100%;padding:3px 3px 3px 9px;border:1px solid var(--line);border-radius:var(--r-chip);background:var(--sunken);font-size:12px}
.todo-pending-thumb{width:22px;height:22px;object-fit:cover;border-radius:3px;flex:none}
.todo-attach-error{margin:8px 0 0;font-size:12px;line-height:1.5;color:var(--error)}
.todo-detail form.dropping{outline:2px dashed var(--accent);outline-offset:6px;border-radius:var(--r-field);background:var(--accent-wash)}
.todo-task-attachments{margin-top:22px}
.todo-task-attachments h3{font:600 9.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0}