:root { color-scheme: light; --ink: #20262b; --muted: #586168; --line: #d7dee1; --accent: #006858; --paper: #fff; }
* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: #f4f6f6; font-family: "Trebuchet MS", "Segoe UI", sans-serif; font-size: 1rem; line-height: 1.6; letter-spacing: 0; }
header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem 2rem; padding: 1rem max(1.25rem, calc((100% - 64rem) / 2)); border-bottom: 1px solid var(--line); background: var(--paper); }
.brand { color: var(--ink); font-size: 1.15rem; font-weight: bold; text-decoration: none; }
.environment, footer { color: var(--muted); font-size: .875rem; }
main { max-width: 64rem; margin: 0 auto; padding: 2.5rem 1.25rem; }
h1 { margin: 0 0 1.5rem; font-size: 1.75rem; line-height: 1.25; }
h2 { margin: 0 0 .5rem; font-size: 1.125rem; }
dl { margin: 0; border-top: 1px solid var(--line); }
dl > div { display: grid; grid-template-columns: 12rem minmax(0, 1fr); gap: .5rem 1rem; padding: .9rem 0; border-bottom: 1px solid var(--line); }
dt { color: var(--muted); }
dd { margin: 0; overflow-wrap: anywhere; }
.state { color: var(--accent); font-weight: bold; }
.actions { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem 1rem; margin-top: 1.25rem; min-height: 3rem; }
.actions a, .actions button, .action-button { display: inline-block; padding: .55rem .85rem; color: var(--paper); background: var(--accent); border: 0; border-radius: 4px; text-decoration: none; font: inherit; font-weight: bold; cursor: pointer; }
.actions a:hover, .actions button:hover, .action-button:hover { background: #004f43; }
.actions a[disabled] { pointer-events: none; opacity: .65; }
a:focus-visible { outline: 3px solid #b34b12; outline-offset: 3px; }
.htmx-indicator { visibility: hidden; color: var(--muted); }
.htmx-request.htmx-indicator { visibility: visible; }
#request-error { color: #a12b24; }
.availability { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.availability p { margin: 0; color: var(--muted); }
footer { max-width: 64rem; margin: 0 auto; padding: 1rem 1.25rem; }
@media (max-width: 36rem) { main { padding-top: 1.75rem; } dl > div { grid-template-columns: minmax(0, 1fr); gap: .15rem; } }
@media (prefers-reduced-motion: no-preference) { .actions a { transition: background-color .15s; } }
.todo-workspace { padding-top: 1.5rem; }
.todo-heading { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 1rem; }
.todo-heading h1 { margin-bottom: 1rem; }
.create-link { color: var(--accent); font-weight: bold; }
.todo-filters { padding: 1rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem 1.5rem; }
fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
legend { font-weight: bold; margin-bottom: .25rem; }
fieldset label { display: inline-flex; align-items: center; gap: .3rem; margin-right: 1rem; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); width: 1.1rem; height: 1.1rem; }
.assignee-filter { display: flex; flex-wrap: wrap; gap: .3rem 1rem; align-items: baseline; }
.assignee-filter > span:first-child { font-weight: bold; }
.selected-assignee { overflow-wrap: anywhere; font-size: .875rem; }
.todo-filters .actions { margin-top: 0; }
.actions .secondary { background: transparent; color: var(--accent); border: 1px solid var(--line); }
button:disabled { opacity: .6; cursor: not-allowed; }
input:focus-visible, textarea:focus-visible, button:focus-visible, [tabindex]:focus-visible { outline: 3px solid #b34b12; outline-offset: 3px; }
.sort-order { color: var(--muted); font-size: .875rem; padding: .75rem 0; }
.todo-table table { width: 100%; border-collapse: collapse; background: var(--paper); table-layout: fixed; }
[data-retained="true"] .todo-table { overflow-x: auto; }
[data-retained="true"] .todo-table table { min-width: 58rem; }
[data-retained="true"] th:first-child { width: 32%; }
[data-retained="true"] th:nth-child(2) { width: 14%; }
[data-retained="true"] th:nth-child(3) { width: 12%; }
[data-retained="true"] th:nth-child(4), [data-retained="true"] th:nth-child(5) { width: 21%; }
th, td { text-align: left; padding: .7rem .65rem; border-bottom: 1px solid var(--line); vertical-align: top; overflow-wrap: anywhere; }
th { font-size: .875rem; color: var(--muted); }
th:first-child { width: 42%; }
th:nth-child(2) { width: 17%; }
th:nth-child(3) { width: 18%; }
.pagination { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; padding-top: 1rem; }
.pagination a, .assignee-filter a { color: var(--accent); }
.empty-state { padding: 1.25rem 0; color: var(--muted); border-bottom: 1px solid var(--line); }
.todo-form { max-width: 42rem; }
.todo-form label { display: block; font-weight: bold; margin: 1rem 0 .3rem; }
.todo-form input:not([type="hidden"]), .todo-form textarea { display: block; width: 100%; padding: .6rem .7rem; background: var(--paper); color: var(--ink); border: 1px solid #909c9f; border-radius: 4px; font: inherit; }
.todo-form textarea { resize: vertical; }
.todo-form #todo-date { max-width: 16rem; }
.required, .todo-form small { color: var(--muted); font-weight: normal; font-size: .875rem; }
.error-summary { border-left: 4px solid #a12b24; padding: .75rem 1rem; background: #fff1f0; margin-bottom: 1rem; }
.error-summary p { margin: .25rem 0; }
.error-summary a { display: block; color: #94251f; }
.field-error { color: #94251f; margin: .25rem 0; }
[aria-invalid="true"] { border-color: #a12b24 !important; }
.notice { border-left: 4px solid var(--accent); background: #eaf5ed; padding: .75rem 1rem; }
.user-choices { list-style: none; padding: 0; }
.user-choices li { border-bottom: 1px solid var(--line); padding: .65rem 0; }
.user-choices a { color: var(--accent); overflow-wrap: anywhere; }
.user-choices small { display: block; color: var(--muted); }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
#todo-loading { min-height: 1.6rem; margin: 0; }
.todo-description { white-space: pre-wrap; overflow-wrap: anywhere; }
.todo-status-form { margin-top: 1.5rem; max-width: 24rem; }
.todo-status-form label { display: block; font-weight: bold; }
.todo-status-form select { width: 100%; padding: .6rem; font: inherit; color: var(--ink); background: var(--paper); border: 1px solid #909c9f; border-radius: 4px; }
.todo-status-form select:focus-visible { outline: 3px solid #b34b12; outline-offset: 3px; }
.todo-assignments { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.assignment-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem 1rem; }
.assignment-row > span { min-width: 0; overflow-wrap: anywhere; }
.todo-assignment-form .actions { margin-top: 0; }
.todo-assignment-form button { max-width: 100%; overflow-wrap: anywhere; text-align: left; }
.assignment-selection { padding: 1rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.todo-comments { margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.comment-list { list-style: none; padding: 0; margin: 0; }
.comment-list > li { padding: 1rem 0; border-bottom: 1px solid var(--line); }
.comment-meta { display: flex; flex-wrap: wrap; gap: .25rem 1rem; color: var(--muted); font-size: .875rem; overflow-wrap: anywhere; }
.comment-author { color: var(--ink); font-weight: bold; }
.comment-text { white-space: pre-wrap; overflow-wrap: anywhere; margin: .5rem 0; }
.comment-deleted { color: var(--muted); font-style: italic; }
.comment-actions { margin-top: .5rem; }
.comment-editor, .comment-add, .comment-confirmation { margin-top: 1.5rem; }
.todo-comments .pagination button { padding: .3rem 0; border: 0; background: transparent; color: var(--accent); font: inherit; text-decoration: underline; cursor: pointer; }
.todo-comments button { overflow-wrap: anywhere; max-width: 100%; }
#comment-loading { min-height: 1.6rem; margin: 0; }
@media (max-width: 36rem) { .todo-filters { grid-template-columns: minmax(0, 1fr); } th, td { padding: .55rem .3rem; font-size: .875rem; } th:first-child { width: 35%; } th:nth-child(2) { width: 20%; } th:nth-child(3) { width: 23%; } }