:root{font-family:Inter,Segoe UI,sans-serif;color:#20312d;background:#f4f6f4;font-size:15px}*{box-sizing:border-box}body{margin:0}header{background:#fff;border-bottom:1px solid #dde5df;padding:20px 24px;display:flex;align-items:center;justify-content:space-between}a{color:#176e53;text-decoration:none}.brand{font-size:24px;font-weight:800;color:#20312d}.brand span{font-weight:400;color:#77877f}nav{display:flex;align-items:center;gap:24px}main{width:100%;margin:28px auto;padding:0 24px 24px}h1{font-size:42px;letter-spacing:-1.4px;margin:8px 0}h2{font-size:20px;margin:8px 0}p{color:#66756d;line-height:1.6}.heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:28px}.eyebrow{font-size:11px;letter-spacing:2px;font-weight:700;color:#358063}.card{background:#fff;border:1px solid #dde5df;border-radius:14px;padding:24px}.filters{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:24px}.filters input{flex:1 1 320px;min-width:0}.filters input,.filters select{margin-top:0}.filters select{width:auto;max-width:100%;flex:0 1 200px}.filters button{flex-shrink:0}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:24px}.stats strong{font-size:28px;margin-right:12px}.task{display:flex;justify-content:space-between;gap:24px;margin:12px 0;color:inherit;transition:border-color .2s}.task:hover{border-color:#176e53}.task p{white-space:pre-wrap;overflow-wrap:anywhere;margin:8px 0;max-width:750px}.task small{color:#6b8274}.meta{display:flex;flex-direction:column;align-items:flex-end;gap:12px;min-width:130px;font-size:13px;color:#66756d}.badge{background:#e7f3ed;border-radius:20px;padding:6px 12px;color:#176e53}.work{border-left:3px solid #bddaca;padding-left:12px}label{display:block;font-size:13px;font-weight:600;margin-bottom:18px}input,select,textarea{display:block;width:100%;border:1px solid #ccd8d0;border-radius:8px;background:#fff;padding:12px;margin-top:7px;font:inherit;color:inherit}input:focus,textarea:focus,select:focus{outline:2px solid #86bba3;outline-offset:1px}button,.button{display:inline-block;background:#176e53;color:white;border:0;border-radius:8px;padding:12px 20px;font:inherit;cursor:pointer}button.quiet{background:#eef3ef;color:#385849}.danger{margin-top:24px;background:#fbeceb;color:#a43e37}.error{color:#a43e37}.grid{display:grid;grid-template-columns:1fr 1fr;gap:0 24px}.editor{max-width:800px}.login{max-width:440px;margin:70px auto}.muted{font-size:13px}.empty{text-align:center;padding:60px}.project{margin-bottom:20px;max-width:800px}nav form{margin:0}@media(max-width:700px){header,nav,.heading,.task{flex-wrap:wrap}nav{gap:12px}.filters{flex-direction:column;align-items:stretch}.filters input,.filters select{flex:auto;width:100%}.stats{gap:8px}.stats .card{padding:15px}.stats strong{display:block}.grid{grid-template-columns:1fr}.meta{align-items:flex-start}h1{font-size:34px}main{margin-top:28px}}
/* Theme surfaces and project/priority accents. */
:root{color-scheme:light;--page:#f4f6f4;--surface:#fff;--text:#20312d;--muted:#66756d;--border:#ccd8d0;--link:#176e53;--soft:#e7f3ed;--error:#a43e37}
:root[data-theme="dark"]{color-scheme:dark;--page:#080808;--surface:#161616;--text:#dddddd;--muted:#a0a0a0;--border:#383838;--link:#c4c4c4;--soft:#262626;--error:#ffaaa2}
[data-theme="dark"] button:not(.quiet):not(.danger),[data-theme="dark"] .button{background:#525252;color:#fff}
[data-theme="dark"] input:focus,[data-theme="dark"] textarea:focus,[data-theme="dark"] select:focus{outline-color:#a3a3a3}
html{min-height:100%;background:var(--page);color:var(--text)}body{min-height:100vh;min-height:100dvh;display:flow-root;background:var(--page);color:var(--text)}header,.card,input,select,textarea{background:var(--surface);border-color:var(--border)}a{color:var(--link)}.brand{color:var(--text)}p,.brand span,.task small,.meta{color:var(--muted)}.eyebrow{color:var(--link)}.badge,button.quiet{background:var(--soft);color:var(--link)}.error{color:var(--error)}.work{border-color:var(--border)}.danger{background:var(--soft);color:var(--error)}button:focus-visible,.button:focus-visible,a:focus-visible{outline:2px solid var(--link);outline-offset:3px}
.task,.project[style]{border-left:5px solid var(--project-color)}.task .project-label{display:inline-block;color:var(--project-text);font-weight:700}.task:hover{border-color:color-mix(in srgb,var(--project-color) 30%,var(--border))}.task>div:first-child{min-width:0}.task h2{overflow-wrap:anywhere}
.priority{display:inline-block;border-radius:20px;padding:6px 12px;font-weight:600;font-size:13px}.priority[data-priority="Low"]{background:#e4f2eb;color:#256547}.priority[data-priority="Normal"]{background:#fff0ca;color:#79530b}.priority[data-priority="High"]{background:#fbe4e3;color:#a12e35}
[data-theme="dark"] .priority[data-priority="Low"]{background:#244b36;color:#a4e2bc}[data-theme="dark"] .priority[data-priority="Normal"]{background:#514121;color:#f7d58a}[data-theme="dark"] .priority[data-priority="High"]{background:#552c32;color:#ffb0b7}

.task{background:color-mix(in srgb,var(--project-color) 10%,var(--surface));color:var(--text)}.task p,.task small,.task .meta,.task .project-label{color:var(--text)}.task .work{border-color:var(--text)}.task .error{background:#fbe4e3;color:#a12e35;border-radius:8px;padding:4px 8px}.task:focus-visible{outline:3px solid var(--text);outline-offset:3px}input[type=color]{width:96px;height:48px;padding:4px;cursor:pointer}
/* Full-width board with capped task tiles and scrollable content. */
.task-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));gap:16px;align-items:stretch}
.task-grid .task{flex-direction:column;flex-wrap:nowrap;justify-content:space-between;gap:20px;margin:0;min-width:0;min-height:0;max-height:360px;aspect-ratio:1;align-self:stretch;overflow:hidden}
.task-grid .meta{flex-direction:row;flex-wrap:wrap;flex-shrink:0;align-items:center;justify-content:flex-start;min-width:0;gap:8px}
.task-grid .meta>span:last-child{flex-basis:100%;overflow-wrap:anywhere}
@media(max-width:700px){header{padding:16px}main{padding:0 16px 16px}.task-grid .task{padding:20px}}/* Compact task toolbar; wrap controls as available width decreases. */
.task-toolbar{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:16px;margin-bottom:24px}
.task-toolbar .heading{margin:0;flex:none}.task-toolbar h1{font-size:30px;letter-spacing:-.8px;margin:0}
.task-toolbar .filters{grid-column:1 / -1;grid-row:2;display:grid;grid-template-columns:minmax(180px,2fr) repeat(3,minmax(150px,1fr)) minmax(160px,1fr) auto;margin:0;gap:8px;min-width:0}
.task-toolbar .filters input,.task-toolbar .filters select{width:100%;min-width:0;max-width:100%;margin:0}
.task-toolbar .stats{display:flex;flex-wrap:wrap;gap:12px;margin:0;font-size:12px;color:var(--muted)}
.task-toolbar .stats>div{white-space:nowrap}.task-toolbar .stats strong{display:inline;font-size:20px;margin-right:4px;color:var(--text)}
.task-toolbar>.button{grid-column:2;grid-row:1;white-space:nowrap}
.task-toolbar .stats{grid-column:1 / -1;grid-row:3}
@media(max-width:1200px){.task-toolbar .filters{grid-template-columns:repeat(3,minmax(0,1fr))}.task-toolbar .filters input[name=q]{grid-column:span 2}}
@media(max-width:700px){.task-toolbar .filters{grid-template-columns:repeat(2,minmax(0,1fr))}.task-toolbar .filters input[name=q]{grid-column:1 / -1}.task-toolbar .filters button{width:100%}.task-toolbar .stats{gap:8px 16px}}
@media(max-width:380px){.task-toolbar .filters{grid-template-columns:minmax(0,1fr)}.task-toolbar>.button{padding:10px 12px}}
.task-toolbar .calendar-month-picker{display:none}
.task-toolbar .filters:has(select[name=view] option[value=calendar]:checked) .calendar-month-picker{display:block}
.calendar-scroll{overflow-x:auto;border:1px solid var(--border);border-radius:12px;background:var(--surface)}
.calendar-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));min-width:700px}
.calendar-weekday{padding:12px;text-align:center;background:var(--soft);font-size:12px;font-weight:700}
.calendar-day{position:relative;min-height:140px;padding:10px;border-top:1px solid var(--border);border-right:1px solid var(--border);min-width:0}
.calendar-navigation{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.calendar-navigation h2{margin:0;text-align:center}
.calendar-navigation .button{padding:10px 14px;font-size:13px}
.calendar-add{position:absolute;inset:0;display:flex;align-items:flex-end;padding:12px;color:var(--muted);font-size:12px;border-radius:4px}
.calendar-add:hover{background:var(--soft);color:var(--link)}
.calendar-day>time{position:relative;z-index:1;pointer-events:none}
.calendar-day:nth-child(7n){border-right:0}
.calendar-day>time{display:inline-block;padding:4px 7px;font-size:12px;font-weight:700;color:var(--muted)}
.calendar-today>time{background:var(--text);color:var(--surface);border-radius:50%}
.outside-month{background:var(--page)}
.calendar-task{display:block;padding:8px;margin-top:10px;border:1px solid transparent;border-radius:8px;background:color-mix(in srgb,var(--project-color) 10%,var(--surface));color:var(--text);font-size:12px;overflow-wrap:anywhere}
.calendar-task small{display:block;margin-top:4px;color:inherit}
.calendar-task .due-cue{margin-top:6px;font-size:11px}
.calendar-task:hover{outline:2px solid var(--text);outline-offset:1px}
.calendar-undated{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.calendar-undated h2{flex-basis:100%}.calendar-undated .calendar-task{flex:0 1 240px;margin:0}
.task-grid .task { position: relative; user-select: none; }
.task-grid .task>div:not(.meta) { min-width:0;min-height:0;overflow:hidden;padding-right:1.5rem; }
.task h2{font-size:17px;line-height:1.3;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.task p{font-size:13px;line-height:1.45;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.task p.work{-webkit-line-clamp:2}
.calendar-task strong{font-size:11px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.task-drag-handle { position: absolute; top: .65rem; right: .65rem; cursor: grab; font-size: 1.4rem; line-height: 1; padding: .25rem; touch-action: none; }
.task-drag-handle:active { cursor: grabbing; }
.task-drag-handle:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.task-dragging { opacity: .45; }
.task-grid[aria-busy="true"] .task-drag-handle { cursor: wait; }
.task-table-wrap{max-width:1400px;margin-inline:auto;overflow-x:auto;border:1px solid var(--border);border-radius:14px;background:var(--surface)}
.task-table{width:100%;border-collapse:collapse;text-align:left;font-size:13px}
.task-table th,.task-table td{padding:14px 16px;border-bottom:1px solid var(--border);vertical-align:top}
.task-table th{background:var(--soft);font-weight:700;white-space:nowrap}
.task-table tbody tr:last-child td{border-bottom:0}
.task-table tbody tr:hover{background:var(--soft)}
.task-table td:nth-child(2){min-width:220px;max-width:420px;overflow-wrap:anywhere}
.task-table tbody tr.task-table-row,.task-table tbody tr.task-table-row:hover{background:color-mix(in srgb,var(--project-color) 10%,var(--surface))}
.task-table-row.overdue{outline:1px solid color-mix(in srgb,#ef4444 40%,var(--border));outline-offset:-1px}
.task-table-row.due-soon{outline:1px solid color-mix(in srgb,#eab308 40%,var(--border));outline-offset:-1px}
.task-table-wrap:has(.task-table-row){padding:12px}
.table-task-item{padding:8px;border:1px solid transparent;border-radius:8px;background:transparent}
.table-task-item>a{font-size:15px;font-weight:700;color:var(--text)}
.task-table .table-description{margin:6px 0 0;font-size:12px;line-height:1.45;white-space:pre-wrap;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.task-table .task-drag-handle{position:static;background:transparent;color:var(--muted);padding:0}
.task-table [aria-busy="true"] .task-drag-handle{cursor:wait}
.task .badge,.task-table-row .badge{display:inline-block;background:transparent;color:var(--project-color);border:1px solid color-mix(in srgb,var(--project-color) 30%,var(--border))}
.table-project{display:inline-block;padding:6px 10px;border-radius:8px;background:var(--project-color);color:var(--project-text);font-weight:600}
.table-date{display:block;margin-top:4px;white-space:nowrap}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.task.overdue,.task.overdue:hover,.calendar-task.overdue,.task-table-row.overdue { border-color:color-mix(in srgb,#ef4444 40%,var(--border));box-shadow:0 0 0 1px rgba(239,68,68,.2);animation:overdue-border-pulse 2s ease-in-out infinite; }
@keyframes overdue-border-pulse {
 0%{box-shadow:0 0 0 0 rgba(239,68,68,.3)}
 80%,100%{box-shadow:0 0 0 12px rgba(239,68,68,0)}
}
.task.due-soon,.task.due-soon:hover,.calendar-task.due-soon,.task-table-row.due-soon { border-color:color-mix(in srgb,#eab308 40%,var(--border));box-shadow:0 0 0 1px rgba(234,179,8,.2);animation:due-soon-border-pulse 2s ease-in-out infinite; }
@keyframes due-soon-border-pulse {
 0%{box-shadow:0 0 0 0 rgba(234,179,8,.3)}
 80%,100%{box-shadow:0 0 0 12px rgba(234,179,8,0)}
}
@media(prefers-reduced-motion:reduce){.task.overdue,.task.due-soon,.calendar-task.overdue,.calendar-task.due-soon,.task-table-row.overdue,.task-table-row.due-soon{animation:none}}
.due-cue { display: inline-block; border-radius: 6px; padding: 4px 8px; margin-right: 4px; font-weight: 700; }
.due-cue.overdue { background: #fee4e2; color: #912018; }
.due-cue.due-soon { background: #fff0c2; color: #754600; }
.header-identity{display:flex;align-items:center;flex-wrap:wrap;gap:16px;min-width:0}
.account-name{display:inline-flex;align-items:center;gap:8px;max-width:260px;padding:7px 12px;border:1px solid var(--border);border-radius:999px;background:var(--soft);color:var(--link);font-size:12px;font-weight:600;overflow-wrap:anywhere}
.account-dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0}
.app-icon{margin-inline-end:.4em}
.task{border:1px solid color-mix(in srgb,var(--project-color) 30%,var(--border))}
textarea{resize:none}
.user-flags{display:flex;flex-wrap:wrap;gap:16px 24px;margin-bottom:18px}
.user-flags label{display:flex;align-items:center;gap:8px;margin:0}
.user-flags input[type=checkbox]{display:inline-block;width:18px;height:18px;margin:0;accent-color:var(--link)}
header{flex-wrap:wrap;gap:16px}header nav{flex-wrap:wrap;min-width:0}
.statistics-filters{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px;margin-bottom:20px}
.statistics-filters label{flex:1 1 180px;margin:0;min-width:0}.statistics-filters button{flex:none}
.statistics-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:16px;margin:24px 0}
.statistics-metric span{display:block;font-size:12px;color:var(--muted)}.statistics-metric strong{display:block;font-size:30px;margin-top:12px}
.statistics-breakdowns{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:16px;margin-bottom:24px}
.statistics-values{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;margin-bottom:0}.statistics-values dt{color:var(--muted)}.statistics-values dd{margin:0;font-weight:700}
.statistics-table th:first-child{min-width:160px}.statistics-table td:nth-child(2){min-width:0;max-width:none}.statistics-table th{white-space:normal}
.statistics-total{font-weight:700;background:var(--soft)}.statistics-section-heading{margin-top:28px}
.statistics-bar{display:block;max-width:100%;height:6px;border-radius:4px;background:var(--link);margin-bottom:6px}
@media(max-width:500px){.statistics-filters label,.statistics-filters button{flex:1 1 100%}}
.project-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:20px;align-items:stretch}
.project-grid .project{min-width:0;max-width:none;margin:0}
.project-grid .project form>a{display:inline-block;margin-top:12px}
@media(max-width:700px){.header-identity{gap:8px}.account-name{max-width:100%}}
#theme-toggle .app-icon,#sign-out .app-icon{margin-inline-end:0}

/* Print the visible task view without application controls. */
@page{margin:12mm}
@media print{
    :root,:root[data-theme="dark"]{
        --page:#fff;--surface:#fff;--soft:#f2f2f2;--text:#000;--muted:#444;--border:#bbb;--link:#000;
        background:#fff;color:#000;font-size:10pt;
    }
    body,main{background:#fff;color:#000}
    main{width:100%;max-width:none;margin:0;padding:0}
    header,.task-toolbar .filters,.task-toolbar>.button,.task-drag-handle,
    #task-order-token,#task-order-message,.calendar-navigation .button,.calendar-add,
    .task-calendar>.muted,button,.button,.statistics-filters{display:none!important}
    a,p,small,.meta{color:#000}
    .task-toolbar{display:block;margin-bottom:12pt}
    .task-toolbar .heading{margin-bottom:8pt}
    .task-toolbar .stats{margin-bottom:8pt}
    .card,.task,.calendar-task,.table-task-item,.task-table tbody tr.task-table-row{background:#fff!important;box-shadow:none!important;animation:none!important}
    .task-table-wrap:has(.task-table-row){padding:0}
    .task-table-row{outline:none!important}
    .task-grid{display:block}
    .task{break-inside:avoid;padding:10pt;margin:0 0 8pt}
    .task-grid .task>div:not(.meta){overflow:visible;padding-right:0}
    .task h2,.task p,.task p.work,.task-table .table-description,.calendar-task strong{
        display:block;overflow:visible;-webkit-line-clamp:unset;
    }
    .task-table-wrap,.calendar-scroll{max-width:none;overflow:visible;border-radius:0}
    .task-table{width:100%;font-size:9pt;table-layout:fixed}
    .task-table th,.task-table td{padding:5pt;min-width:0!important;max-width:none!important;overflow-wrap:anywhere}
    .task-table th{white-space:normal}
    .task-table:not(.statistics-table) th:first-child,.task-table:not(.statistics-table) td:first-child{display:none}
    .task-table:not(.statistics-table) th:nth-child(2){width:32%}
    .task-table thead{display:table-header-group}
    .task-table tr{break-inside:avoid}
    .table-task-item{padding:4pt}
    .table-task-item>a{font-size:10pt}
    .table-date{white-space:normal}
    .table-project,.badge,.priority,.due-cue{background:transparent!important;color:#000!important}
    .calendar-grid{min-width:0}
    .calendar-day{min-height:70pt;padding:4pt}
    .calendar-task{padding:4pt;break-inside:avoid}
    .calendar-weekday{padding:5pt}
}

/* Fragment targets open task details without JavaScript. */
.task-preview{display:none;position:fixed;inset:0;z-index:1000;padding:24px;overflow-y:auto;overscroll-behavior:contain}
.task-preview:target{display:flex;align-items:flex-start;justify-content:center}
body:has(.task-preview:target){overflow:hidden}
.task-preview-backdrop{position:fixed;inset:0;background:transparent;cursor:default}
.task-preview-panel{background:color-mix(in srgb,var(--project-color) 10%,var(--surface));border-color:color-mix(in srgb,var(--project-color) 30%,var(--border));position:relative;width:100%;max-width:760px;margin:auto;box-shadow:0 16px 60px rgba(0,0,0,.3);overflow-wrap:anywhere}
.task-preview-header{display:flex;justify-content:space-between;align-items:center;gap:16px}
.task-preview-header .eyebrow{margin:0}
.task-preview-close{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;font-size:20px;border-radius:8px;background:var(--soft)}
.task-preview-panel h2{font-size:24px;margin:12px 0 20px}
.task-preview-meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:0 0 24px}
.task-preview-meta dt{font-size:12px;color:var(--muted);margin-bottom:4px}
.task-preview-meta dd{margin:0}
.task-preview-content{white-space:pre-wrap;color:var(--text)}
.task-preview-actions{display:flex;align-items:center;gap:20px;margin-top:24px}
@media(max-width:500px){.task-preview{padding:12px}.task-preview-panel{padding:18px}.task-preview-meta{grid-template-columns:1fr}}
@media print{
    .task-preview{display:none!important}
    body:has(.task-preview:target){overflow:visible}
    body:has(.task-preview:target) main>*{display:none!important}
    body:has(.task-preview:target) #task-list{display:block!important}
    #task-list:has(.task-preview:target)>:not(.task-preview:target){display:none!important}
    .task-preview:target{display:block!important;position:static;padding:0;overflow:visible}
    .task-preview-backdrop,.task-preview-close,.task-preview-actions{display:none!important}
    .task-preview-panel{max-width:none;padding:0;border:0;box-shadow:none}
}

/* Stretch the task title link across its row; keep reordering above it. */
.task-table-row{position:relative}
.task-row-link::after{content:"";position:absolute;inset:0;z-index:1;cursor:pointer}
.task-row-link:focus-visible::after{outline:2px solid var(--link);outline-offset:-2px}
.task-table-row .task-drag-handle{position:relative;z-index:2}
@media print{.task-row-link::after{display:none}}
.task-table .task-sort{display:inline-flex;align-items:center;gap:8px;background:transparent;color:inherit;padding:0;font-weight:700;text-align:left}
.task-sort i{font-size:11px;color:var(--muted)}
.task-table th[aria-sort="ascending"] .task-sort,.task-table th[aria-sort="descending"] .task-sort{color:var(--link)}
.task-table .task-drag-handle:disabled{opacity:.35;cursor:default}
@media print{.task-table .task-sort{display:inline-flex!important}.task-sort i{display:none}}
header a,header a:hover,header a:focus,header nav button.quiet,header nav button.quiet:hover,header nav button.quiet:focus{background:transparent}

.task-table:not(.statistics-table) thead th{background:transparent}
.task-table thead button.task-sort,.task-table thead button.task-sort:hover,.task-table thead button.task-sort:focus,.task-table thead button.task-sort:active{background:transparent;color:inherit}

header nav>a,header nav button.quiet{border:1px solid var(--border);border-radius:8px;padding:10px 14px}