dd-work-context, dd-work-editor { display: block; color: var(--dd-text, #e6e6e6); font-family: var(--dd-font, ui-monospace, SFMono-Regular, Consolas, monospace); --work-indent: 22px; }
.dd-work-breadcrumbs, .dd-work-footer, .dd-work-row-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.dd-work-breadcrumbs { border-bottom: 1px solid #2a3035; padding-bottom: 12px; }
.dd-work-breadcrumbs button + button::before { content: '› '; color: #8a9299; }
.dd-work-context-header { display: flex; align-items: flex-start; gap: 12px; margin-top: 20px; }
.dd-work-heading { font-size: 21px; line-height: 1.5; margin: 0; overflow-wrap: anywhere; flex: 1; }
.dd-work-context-metadata, .dd-work-description { color: #8a9299; white-space: pre-wrap; overflow-wrap: anywhere; }
.dd-work-section { margin: 24px 0; }
.dd-work-section h2 { color: #8a9299; font-size: 12px; font-weight: 400; text-transform: uppercase; letter-spacing: .08em; }
.dd-work-list { list-style: none; margin: 0; padding: 0; }
.dd-work-row:not(.todo-row) { padding: 10px 4px; border-bottom: 1px solid #2a3035; border-radius: 3px; }
.dd-work-row.dd-depth-1 { margin-left: var(--work-indent); }
.dd-work-row.dd-depth-2 { margin-left: calc(var(--work-indent) * 2); }
.dd-work-row.dd-depth-3 { margin-left: calc(var(--work-indent) * 3); }
.dd-work-row.dd-depth-4 { margin-left: calc(var(--work-indent) * 4); }
.dd-work-row.dd-depth-5 { margin-left: calc(var(--work-indent) * 5); }
.dd-work-row.dd-depth-6 { margin-left: calc(var(--work-indent) * 6); }
.dd-work-row.is-indented { border-left: 1px solid #2a3035; padding-left: 10px; }
.dd-work-row-primary { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-width: 0; }
.dd-work-title-button { flex: 1 1 160px; text-align: left; border: 0; background: transparent; color: inherit; font: inherit; padding: 4px; overflow-wrap: anywhere; min-width: 0; cursor: pointer; }
.dd-work-row.is-completed .dd-work-title-button { text-decoration: line-through; color: #8a9299; }
.dd-work-row-metadata { padding: 4px 0 0 32px; display: flex; gap: 18px; flex-wrap: wrap; color: #8a9299; font-size: 12px; }
.dd-work-row[data-kind="project"] > .dd-work-row-metadata,
.dd-work-row[data-kind="goal"] > .dd-work-row-metadata { padding-left: 4px; }
.dd-work-button, .dd-work-dialog button { color: #e6e6e6; background: #101315; border: 1px solid #2a3035; border-radius: 3px; font: inherit; padding: 6px 8px; cursor: pointer; }
.dd-work-button:hover, .dd-work-dialog button:hover { border-color: #7cff6b; }
dd-work-context :focus-visible, dd-work-context .dd-work-row:focus, .dd-work-dialog :focus-visible { outline: 2px solid #b7ffb0; outline-offset: 2px; }
.dd-work-row:focus-within { background: #121b14; }
.dd-work-empty { color: #8a9299; font-size: 13px; }
.dd-work-dialog { color: #e6e6e6; background: #101315; border: 1px solid #2a3035; border-radius: 4px; width: min(560px, calc(100vw - 48px)); max-height: calc(100dvh - 48px); padding: 20px; overflow: auto; font: inherit; box-sizing: border-box; }
.dd-work-dialog::backdrop { background: rgb(0 0 0 / 78%); }
.dd-work-dialog h2 { font-size: 18px; }
.dd-work-field { display: grid; gap: 6px; margin-bottom: 16px; }
.dd-work-field span { font-size: 12px; color: #8a9299; }
.dd-work-field input, .dd-work-field textarea, .dd-work-field select { background: #0b0d0e; color: #e6e6e6; border: 1px solid #2a3035; border-radius: 3px; padding: 8px; min-width: 0; width: 100%; box-sizing: border-box; font: inherit; }
.dd-work-field textarea { resize: vertical; }
.dd-work-field small { color: #8a9299; font-size: 11px; }
.dd-work-error { color: #ff6b6b; overflow-wrap: anywhere; }
.todo-row.dd-work-row .work-project-home { color: #8a9299; font-size: 12px; font-weight: 400; }
.todo-row.dd-work-row > .row-primary > .row-actions > [data-todo-control="focus"] { width: auto; min-width: 44px; padding-inline: 6px; }
@media (max-width: 480px) { dd-work-context { --work-indent: 12px; } .dd-work-button, .dd-work-title-button, .dd-work-dialog button { min-height: 40px; } .dd-work-row-actions { width: 100%; } .dd-work-dialog { padding: 12px; width: calc(100vw - 24px); } }
@media (max-width: 480px) {
  .todo-row.dd-work-row > .row-primary { flex-wrap: wrap; }
  .todo-row.dd-work-row > .row-primary > .row-actions { flex: 1 1 100%; max-width: 100%; flex-wrap: wrap; justify-content: flex-end; }
}