.plane-shell.plane-refresh[data-pa-route=task-overview]{--td-text:var(--cs-ink,#202632);--td-muted:var(--cs-muted,#626d7d);--td-line:var(--cs-line,#e6e8ed);--td-surface:var(--cs-paper,#fff);--td-soft:var(--cs-tray,#f2f3f5)}
.plane-shell .td-workspace{padding:26px 28px 24px!important;max-width:1700px;margin:0 auto;color:var(--td-text);font-size:13px}
.plane-shell .td-workspace :is(h2,h3,p){margin:0}.plane-shell .td-workspace h2{font-size:18px!important;font-weight:600!important;line-height:1.55!important;color:var(--td-text)!important}.plane-shell .td-workspace h3{font-size:16px!important;font-weight:600!important;line-height:1.65!important;color:var(--td-text)!important}
.td-header-date{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--cs-muted)}.td-header-date .icon{width:16px;height:16px}.td-intro{display:flex;justify-content:space-between;align-items:center;gap:24px}.plane-shell .td-intro h2{font-size:22px!important;letter-spacing:-.025em}.td-intro p{font-size:13px;line-height:1.85;color:var(--td-muted);margin-top:7px!important}.plane-shell.plane-refresh .td-workspace .btn{height:auto;min-height:32px;border:1px solid var(--td-line)!important;border-radius:8px;padding:5px 11px!important;font-size:12px!important;line-height:1.5;color:var(--td-text);background:var(--td-surface);box-shadow:0 4px 9px -7px #28374b55;white-space:nowrap;transition:background 140ms,border-color 140ms,box-shadow 140ms}.plane-shell.plane-refresh .td-workspace .btn .icon{width:14px;height:14px}.plane-shell.plane-refresh .td-workspace .btn:hover{border-color:#aebbc4!important;box-shadow:0 5px 12px -8px #26374655}.plane-shell.plane-refresh .td-workspace .btn:active{box-shadow:inset 0 1px 3px #26374622}.plane-shell.plane-refresh .td-workspace .btn.primary{background:#006399!important;border-color:#006399!important;color:#fff!important;padding:9px 14px!important;min-height:38px}.plane-shell.plane-refresh .td-workspace .btn.primary:hover{background:#005580!important}.td-intro .btn.primary>span{background:#ffffff25;border-radius:4px;padding:0 5px}.td-workspace button:disabled{color:var(--td-muted)!important;opacity:.6;cursor:not-allowed}.td-workspace button:focus-visible,.td-workspace a:focus-visible{outline:2px solid #006399!important;outline-offset:3px}.td-workspace h2:focus{outline:none}
.td-progress{display:flex;align-items:center;gap:16px;margin:23px 0 32px;padding-bottom:22px;border-bottom:1px solid var(--td-line);font-size:12px;color:var(--td-muted)}.td-progress-track{width:140px;height:7px;border-radius:3px;background:var(--td-line);overflow:hidden;flex:none}.td-progress-track span{display:block;height:100%;background:#789d8b;border-radius:3px}.td-progress>strong{font-size:17px;font-weight:600;color:var(--td-text);font-variant-numeric:tabular-nums;white-space:nowrap}.td-progress>strong small{font-size:12px;color:var(--td-muted);font-weight:400;margin-left:4px}.td-progress>span{display:flex;align-items:center;gap:6px;white-space:nowrap}.td-progress i,.td-state i{display:inline-block;width:5px;height:5px;border-radius:50%;background:#9babb1;flex:none}.td-progress i[data-state=running],.td-state[data-state=running] i{background:#58859a}.td-progress i[data-state=attention],.td-state[data-state=attention] i{background:#b17f50}.td-progress-note{margin-left:auto;font-size:12px}.td-section-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:18px}.td-section-heading>div:first-child{display:flex;align-items:baseline;gap:15px;flex-wrap:wrap}.td-section-heading p{font-size:12px;color:var(--td-muted)}.td-segments{display:inline-flex;align-items:center;gap:2px;padding:3px;background:var(--td-soft);border-radius:9px;flex-shrink:0}.td-segments button{border:0!important;border-radius:6px;min-height:30px;padding:4px 11px;background:transparent;color:var(--td-muted);font:inherit;font-size:12px;white-space:nowrap;box-shadow:none}.td-segments button[aria-pressed=true]{background:var(--td-surface);color:var(--td-text);box-shadow:0 2px 5px #26313c0c;font-weight:500}.td-segments button:hover{color:var(--td-text)}.td-segments small{font-size:12px;margin-left:5px}
.td-tasks{margin-top:30px}.td-task-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.plane-shell .td-workspace .td-task-card.cs-surface-card{padding:21px 23px 18px;display:flex;flex-direction:column;min-height:268px;min-width:0;overflow-wrap:anywhere}.td-task-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:11px}.td-task-top>div{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--td-muted)}.td-task-top .cs-chip{font-size:12px;padding:2px 8px;line-height:18px;border-radius:7px}.td-state{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--td-muted);white-space:nowrap}.td-state[data-state=attention]{color:#8b6037}.td-state[data-state=running]{color:#346b7a}.td-state[data-state=done]{color:#436b53}.plane-shell .td-task-card h3{margin-bottom:7px!important}.td-task-why{font-size:12px;line-height:1.85;color:var(--td-muted);min-height:44px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.td-task-impact{display:flex;align-items:center;gap:10px;font-size:12px;padding:12px 0;margin-top:5px;border-bottom:1px solid var(--td-line);flex-wrap:wrap}.td-task-impact>span:first-child{font-size:12px;color:var(--td-muted)}.td-task-impact b{font-weight:500;color:var(--td-text)}.td-task-impact b small{font-size:12px;color:var(--td-muted);font-weight:400}.td-task-impact>span:last-child{margin-left:auto;white-space:nowrap;color:var(--cs-accent);font-size:12px}.td-task-bottom{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:auto;padding-top:13px}.td-task-bottom>div{min-width:0;font-size:12px;line-height:1.7;color:var(--td-muted)}.td-task-bottom strong{display:block;font-size:12px;font-weight:500;color:var(--td-text);margin-bottom:3px}.td-task-bottom small{font-size:12px}.td-task-bottom .btn{flex-shrink:0}.td-filter-note{display:flex;align-items:center;gap:12px;font-size:12px;color:var(--td-muted);margin:0 0 16px}.td-pagination{display:flex;justify-content:flex-end;gap:10px;align-items:center;margin-top:20px;font-size:12px;color:var(--td-muted)}.td-completed{margin-top:25px}.td-completed>button{display:flex;align-items:center;width:100%;gap:10px;padding:15px 0;background:none;border:0;border-block:1px solid var(--td-line);font:inherit;font-size:12px;color:var(--td-muted);text-align:left}.td-completed>button>.icon{width:17px;height:17px;color:#5e826b}.td-completed>button strong{font-size:13px;font-weight:500;color:var(--td-text)}.td-completed>button>span:last-child{margin-left:auto;display:flex;align-items:center;gap:7px;font-size:12px}.td-completed>button>span .icon{width:13px;height:13px}.td-completed>button[aria-expanded=true]>span .icon{transform:rotate(90deg)}.td-completed-row{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:15px 10px;font-size:12px;border-bottom:1px solid var(--td-line)}.td-completed-row strong{font-size:12px;font-weight:500;color:var(--td-text)}.td-completed-row small{display:block;font-size:12px;color:var(--td-muted);margin-top:4px}.td-footnote{font-size:12px;line-height:1.8;color:var(--td-muted);padding-top:17px}.td-empty{grid-column:1/-1;text-align:center;padding:44px 20px;border-radius:22px;background:var(--td-soft);color:var(--td-muted)}.td-empty p{margin:10px 0 16px!important;font-size:12px}.td-empty-small{padding:20px 0;color:var(--td-muted)}.td-error{padding:12px 16px;margin:18px 0!important;border-radius:9px;background:var(--td-soft);color:var(--td-muted);font-size:12px;line-height:1.8}.td-loading p{font-size:13px;color:var(--td-muted);padding-bottom:25px}.td-loading-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.td-loading-grid>div{height:205px;background:var(--td-soft);border-radius:22px}.plane-shell .plane-page .td-workspace .cs-surface-card{cursor:default;translate:none!important;transform:none!important;transition:box-shadow 140ms ease}
/* Use the native drawer lifecycle and focus behavior. */
dialog.context-drawer.td-task-drawer{width:min(650px,calc(100vw - 76px));max-width:100vw;color:var(--text,#202632)}.td-task-drawer .cx-body{padding:25px 28px!important}.td-drawer-meta{display:flex;justify-content:space-between;gap:15px;font-size:12px;color:var(--muted,#626d7d);margin-bottom:12px}.td-task-drawer .td-drawer-title{font-size:22px!important;line-height:1.6!important;margin:0 0 10px!important;font-weight:600!important}.td-drawer-summary{font-size:13px;line-height:1.9;color:var(--muted,#626d7d);margin:0}.td-drawer-properties{display:flex;gap:20px;flex-wrap:wrap;padding-bottom:20px;margin:18px 0 24px;border-bottom:1px solid var(--line,#e6e8ed);font-size:12px}.td-drawer-properties>div{display:flex;gap:7px}.td-drawer-properties dt{color:var(--muted,#626d7d)}.td-drawer-properties dd{margin:0}.td-drawer-section{margin-top:25px}.td-task-drawer .td-drawer-section>h3{font-size:16px!important;font-weight:600!important;margin:0 0 12px!important}.td-drawer-section>p,.td-drawer-section li{font-size:13px!important;line-height:1.9;color:var(--muted,#626d7d)}.td-task-drawer .td-drawer-effect{padding:20px 22px;margin-bottom:17px}.td-drawer-effect header{display:flex;align-items:center;justify-content:space-between;gap:12px}.td-task-drawer .td-drawer-effect h3{font-size:14px!important;font-weight:600!important;margin:0!important}.td-drawer-effect header>span{font-size:12px;color:var(--cs-accent,#916239)}.td-effect-values{display:flex;align-items:center;gap:18px;margin:16px 0}.td-effect-values>div{display:flex;flex-direction:column}.td-effect-values strong{font-size:29px;line-height:1.5;font-weight:550;white-space:nowrap}.td-effect-values small{font-size:12px;color:var(--cs-muted,#626d7d)}.td-effect-values>span{color:#929ca6;font-size:22px}.td-effect-delta{margin-left:auto;border-left:1px solid var(--cs-line,#e6e8ed);padding-left:20px}.td-effect-delta strong{color:var(--cs-accent,#916239)}.td-effect-delta strong small{margin-left:3px;font-size:12px}.td-task-drawer .td-drawer-effect p{font-size:12px!important;line-height:1.8!important;color:var(--cs-muted,#626d7d)!important;margin:0 0 7px}.td-drawer-effect details{font-size:12px;margin-top:12px;border-top:1px solid var(--cs-line,#e6e8ed);padding-top:10px}.td-drawer-effect details p{margin-top:10px!important}.td-criteria{list-style:none!important;padding:0!important;margin:0;display:grid;gap:12px}.td-criteria li{display:flex;align-items:flex-start;gap:10px}.td-criteria li>span{width:13px;height:13px;flex:none;border:1px solid #a5afb9;border-radius:3px;margin-top:5px}.td-detail-steps{display:flex;gap:8px;list-style:none;padding:0!important;margin:17px 0}.td-detail-steps li{flex:1;border-top:3px solid var(--line,#e6e8ed);padding-top:9px;font-size:12px!important;color:var(--muted,#626d7d)}.td-detail-steps li[data-state=done]{border-color:#92b09c}.td-detail-steps li[data-state=active]{border-color:#9ab8c5}.td-detail-steps small{display:block;font-size:12px}.td-advice-details{font-size:12px;border-top:1px solid var(--line,#e6e8ed);padding-top:16px;margin-top:24px}.td-task-drawer summary{cursor:pointer}.td-task-drawer .cx-footer{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.td-task-drawer .cx-footer .btn{font-size:12px!important;min-height:32px;border-radius:8px}.td-task-drawer .cx-footer .primary{background:#006399!important;color:#fff!important}.td-drawer-footnote{font-size:12px;color:var(--muted,#626d7d);margin-right:auto}body:has(.td-task-drawer[open]) .td-intro .primary{background:var(--td-soft)!important;color:var(--td-muted)!important;border-color:var(--td-line)!important}
html.dark .td-state[data-state=attention]{color:#ddbd91}html.dark .td-state[data-state=running]{color:#a2cbd2}html.dark .td-task-drawer{--text:#e7ebed;--muted:#aeb9c1;--line:#45494e;--cs-ink:#e7ebed;--cs-muted:#aeb9c1;--cs-line:#45494e;--cs-paper:#242627;--cs-low:#1b1d1e;--cs-shadow:0 20px 36px -24px #000b,0 8px 18px -12px #0009}html.dark .td-task-drawer .td-drawer-effect{background:linear-gradient(140deg,#272b2b,#202224)!important;box-shadow:inset 0 0 0 1px #ffffff16,var(--cs-shadow)!important}html.dark .td-task-drawer .td-effect-delta strong{color:#d5b999}
@media(max-width:1250px){.plane-shell .td-workspace{padding:24px!important}.td-section-heading>div:first-child{display:block}.td-section-heading p{margin-top:4px}.td-progress{gap:12px;flex-wrap:wrap}.td-progress-note{display:none}.td-task-grid{gap:16px}.td-task-impact>span:last-child{margin-left:0}}
@media(max-width:1000px){.td-task-grid{grid-template-columns:1fr}.td-task-why{min-height:0}.td-task-impact>span:last-child{margin-left:auto}.td-intro h2{font-size:20px!important}.td-section-heading{flex-wrap:wrap}}
@media(max-width:700px){.plane-shell .td-workspace{padding:22px 18px!important}.td-header-date{font-size:12px;gap:5px}.td-header-date .icon{width:13px;height:13px}.plane-shell [data-pa-route=task-overview] .pa-header{padding-inline:18px!important}.td-intro{display:block}.plane-shell .td-intro h2{font-size:20px!important}.td-intro p{font-size:12px}.td-intro>.btn{margin-top:17px;min-height:42px!important;width:100%}.td-progress{margin-top:21px;margin-bottom:24px;gap:12px;font-size:12px}.td-progress-track{width:100px}.td-progress strong{font-size:16px}.td-progress strong small{font-size:12px}.td-section-heading{flex-direction:column;align-items:flex-start;gap:13px;margin-bottom:16px}.plane-shell .td-section-heading h2{font-size:17px!important}.td-section-heading p{font-size:12px}.td-segments button{font-size:12px;min-height:32px;padding:4px 10px}.td-filters{width:100%;justify-content:space-between}.td-filters button{padding:4px 7px}.td-filters small{font-size:12px;margin-left:3px}.td-tasks{margin-top:26px}.plane-shell .td-workspace .td-task-card{padding:19px 18px;min-height:266px}.td-task-top{flex-wrap:wrap}.td-task-impact>span:last-child{margin-left:0;font-size:12px}.td-task-bottom{gap:12px;padding-top:16px}.td-task-bottom strong{font-size:12px}.td-task-bottom small{font-size:12px}.plane-shell .td-task-bottom .btn{font-size:12px!important;padding:7px 10px!important}.td-completed>button{flex-wrap:wrap;gap:6px}.td-completed>button>span{font-size:12px!important}.td-completed-row{padding:14px 0;gap:10px}.td-completed-row .btn{font-size:12px!important}.td-footnote{font-size:12px}.td-loading-grid{grid-template-columns:repeat(2,1fr)}dialog.context-drawer.td-task-drawer{width:100vw!important;max-width:100vw!important}.td-task-drawer .cx-body{padding:24px 20px!important}.td-task-drawer .td-drawer-title{font-size:20px!important}.td-task-drawer .td-drawer-effect{padding:18px}.td-effect-values{gap:12px;flex-wrap:wrap}.td-effect-values strong{font-size:25px}.td-effect-delta{padding-left:13px}.td-effect-delta strong{font-size:23px}.td-effect-delta strong small{font-size:12px}.td-drawer-footnote{width:100%}.td-drawer-properties{gap:12px;font-size:12px}.td-task-drawer .cx-footer{padding:12px 18px!important}.td-task-drawer .cx-footer .btn{font-size:12px!important}.td-task-drawer .td-drawer-effect header{flex-wrap:wrap}}
@media(prefers-reduced-motion:reduce){.td-workspace *, .td-task-drawer *{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
/* Drawer inherits the same material even though native dialogs live outside the shell. */
dialog.context-drawer.td-task-drawer[open]{width:min(650px,calc(100vw - 76px))!important;--cs-ink:#202632;--cs-muted:#626d7d;--cs-line:#e6e8ed;--cs-paper:#fff;--cs-low:#fafafa;--cs-shadow:0 20px 36px -24px #26374642,0 6px 12px -10px #26374620}
body:has(.td-task-drawer[open]) .plane-shell.plane-refresh .td-workspace .td-intro .btn.primary{background:var(--td-soft)!important;color:var(--td-muted)!important;border-color:var(--td-line)!important}
html.dark dialog.context-drawer.td-task-drawer[open]{--cs-ink:#e7ebed;--cs-muted:#aeb9c1;--cs-line:#45494e;--cs-paper:#242627;--cs-low:#1b1d1e;--cs-shadow:0 20px 36px -24px #000b,0 8px 18px -12px #0009}
@media(max-width:700px){dialog.context-drawer.td-task-drawer[open]{width:calc(100vw - 12px)!important}}
/* Match the specificity of the shared frame's #dialog rule for this drawer only. */
body:has(.plane-shell) dialog#td-task-drawer.td-task-drawer[open],html.dark body:has(.plane-shell) dialog#td-task-drawer.td-task-drawer[open]{width:min(650px,calc(100vw - 76px))!important}
@media(max-width:700px){body:has(.plane-shell) dialog#td-task-drawer.td-task-drawer[open],html.dark body:has(.plane-shell) dialog#td-task-drawer.td-task-drawer[open]{width:calc(100vw - 12px)!important}}