/* Three translucent layers and the spatial layout established in the demo. */
.appearance-setting-disabled{opacity:.55}
dialog[open]:has(#appearance-options){display:flex;flex-direction:column;max-height:calc(100dvh - 32px);overflow:hidden}
dialog:has(#appearance-options)>*{flex-shrink:0}
dialog #appearance-options{flex:1 1 auto;min-height:100px;max-height:42dvh;margin:12px 0;overflow:auto;grid-auto-rows:max-content;align-content:start}
dialog:has(#appearance-options) .appearance-setting{padding:10px 0}
body{--surface-one:color-mix(in srgb,var(--bg) 69%,transparent);--surface-two:color-mix(in srgb,var(--panel) 82%,transparent);--surface-three:color-mix(in srgb,var(--field) 94%,transparent)}
body.light{--surface-one:color-mix(in srgb,var(--bg) 46%,transparent);--surface-two:color-mix(in srgb,var(--panel) 79%,transparent);--surface-three:color-mix(in srgb,var(--field) 93%,transparent)}
body::before{display:none!important}.appearance-layer{position:fixed;inset:-6px;z-index:-1;pointer-events:none;background-size:cover;background-position:center;filter:blur(3px);opacity:0;transition:opacity 5s ease}.appearance-layer.visible{opacity:1}.appearance-layer[data-kind=color],.appearance-layer[data-kind=vector]{filter:none}body:has(.landing) .appearance-layer{display:none}
.appearance-thumb{display:block;aspect-ratio:16/9;background-size:cover;background-position:center;border-radius:6px;margin-bottom:9px}.photo-choice[aria-pressed=true]{border-color:var(--muted);box-shadow:0 0 0 1px var(--muted)}.appearance-note{margin:15px 0;font-size:12px}.photo-grid{max-height:53dvh;overflow:auto;grid-template-columns:repeat(3,minmax(0,1fr));padding:3px}dialog:has(#appearance-options){width:730px}
.app-shell{grid-template-columns:190px minmax(0,1fr);transition:grid-template-columns .2s}.sidebar{background:var(--surface-two);gap:20px;padding:22px 15px}.sidebar .eyebrow{display:none}.sidebar nav button,.sidebar-bottom>button{display:flex;align-items:center;gap:10px;min-height:37px;text-align:left}.nav-mark{width:20px;flex:none;text-align:center}.nav-mark svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.6}.nav-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.nav-collapsed .app-shell{grid-template-columns:62px minmax(0,1fr)}.nav-collapsed .sidebar{padding:20px 8px}.nav-collapsed .nav-label,.nav-collapsed .sidebar .brand,.nav-collapsed .sidebar .account,.nav-collapsed .sidebar .workspace-name,.nav-collapsed .sidebar .desktop-download,.nav-collapsed .sidebar .platform-back{display:none}.nav-collapsed .sidebar button{justify-content:center;padding:9px}.nav-collapsed .sidebar nav{margin-top:7px}.workspace{background:var(--surface-one);max-width:none!important;padding:16px 22px}.page-head{height:44px;display:grid;grid-template-columns:36px minmax(110px,1fr) 1fr auto 38px;position:relative;margin-bottom:16px;gap:12px}.page-head>div:first-of-type{grid-column:2;grid-row:1}.page-head h1{font-size:17px;font-weight:550;letter-spacing:0}.page-head .eyebrow{display:none}.page-head>[data-collapse]{grid-column:1;grid-row:1}.page-head>[data-notifications]{grid-column:5;grid-row:1}.signed-role{grid-column:4;grid-row:1;font-size:12px;color:var(--muted)}.workspace-views{position:absolute;left:50%;transform:translateX(-50%);display:flex;gap:3px;padding:4px;border-radius:9px;background:var(--surface-two);border:1px solid var(--line)}.icon-button{width:36px;min-width:36px;height:36px;padding:7px;display:inline-flex;align-items:center;justify-content:center;gap:5px}.icon-button svg,.client-team svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.workspace-views button{border:0;background:none;width:36px;height:30px}.workspace-views [aria-pressed=true]{background:var(--hover)}body:not([data-page=tasks]) .workspace-views,body[data-role=client] .workspace-views{display:none}body:not([data-page=tasks]) .workspace{min-height:100dvh}.panel,.column,.table-wrap{background:var(--surface-two)}
body[data-page=tasks] .workspace{height:100dvh;display:flex;flex-direction:column;overflow:hidden}body[data-page=tasks] #content{flex:1;min-height:0;display:flex;flex-direction:column;position:relative}.task-search-row{margin:0 0 12px;flex:none;gap:8px}.task-search-row input{height:38px}.task-search-row>button{height:38px;white-space:nowrap}.employee-space{display:grid;grid-template-columns:235px minmax(0,1fr) 250px;gap:22px;flex:1;min-height:0}.staff-main{min-width:0;min-height:0;display:flex;flex-direction:column;--board-size:40%;gap:0}#task-list{flex:0 0 var(--board-size);overflow:auto;min-height:130px;transition:flex-basis .28s,opacity .2s}#task-list .board{height:100%;gap:12px;min-width:600px}#task-list .column{display:flex;flex-direction:column;min-height:0;padding:10px;background:var(--surface-three)}.column-head{padding:0 3px 9px;align-items:center}.column-head h2{font-size:16px}.column-search{font-size:12px;padding:7px 9px;margin-bottom:8px;height:31px}.cards{display:flex;flex-direction:column;gap:9px;overflow:auto;min-height:0;padding:3px 2px 9px}.cards>.task-card{flex:none}.task-card{height:158px;min-height:158px;background:var(--surface-three);border:1px solid var(--line);box-shadow:0 1px 4px #00000008}.task-card.selected{border-color:var(--muted)}.task-open{padding:10px 12px;min-height:0;display:flex;flex-direction:column}.task-open h3{font-size:13px;font-weight:550;line-height:1.35;min-height:35px;margin:5px 0;display:-webkit-box;text-align:left}.task-open small{font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}.task-open small:last-child{margin-top:auto}.priority-shape{display:inline-block;width:8px;height:8px;margin-right:7px;border-radius:1px;background:currentColor;vertical-align:1px}.card-actions{border:0;height:33px;flex:none}.card-actions button{font-size:11px;font-weight:500;white-space:nowrap;background:transparent;padding:6px 3px;border:0!important}.card-actions .take:hover{background:color-mix(in srgb,var(--yellow) 16%,transparent);color:var(--yellow)}.card-actions .finish:hover{background:color-mix(in srgb,var(--green) 16%,transparent);color:var(--green)}.card-actions .back-new:hover{background:color-mix(in srgb,var(--blue) 16%,transparent);color:var(--blue)}.resume{color:var(--green)}.pause{color:var(--red)}.card-actions .pause:hover{background:color-mix(in srgb,var(--red) 12%,transparent)}.card-actions .resume:hover{background:color-mix(in srgb,var(--green) 12%,transparent)}
.task-rail,.structure-rail{min-width:0;min-height:0;display:flex;flex-direction:column}.rail-title{background:var(--surface-two);font-size:13px;font-weight:550;border:0;border-radius:10px 10px 0 0;padding:13px 14px;display:flex;justify-content:center;gap:12px;width:100%;flex:none}.rail-body{display:flex;flex-direction:column;gap:12px;overflow:hidden;min-height:0;background:var(--surface-two);border-radius:0 0 10px 10px;padding:12px;max-height:100%;transition:max-height .28s,padding .28s,opacity .2s}.rail-collapsed .rail-body{max-height:0;padding-top:0;padding-bottom:0;opacity:0;pointer-events:none}.rail-collapsed .rail-title{border-radius:10px}.rail-collapsed .rail-title>span{transform:rotate(180deg)}.rail-tabs{display:flex;gap:5px}.rail-tabs button{flex:1;padding:8px 5px;font-size:12px;border:0;background:none}.rail-tabs [aria-pressed=true]{background:var(--surface-three)}.rail-search{display:flex;gap:6px}.rail-search input{width:0;flex:1;font-size:12px;height:36px;padding:8px}.rail-cards{overflow:auto;min-height:0;display:flex;flex-direction:column;gap:10px;padding:4px 2px 12px}.rail-cards .task-card{flex:none}.rail-cards .card-actions button{font-size:10px}.rail-cards .card-actions .pause,.rail-cards .card-actions .resume{flex:1.2}.structure-rail{background:transparent}#structure-map{position:relative;background:var(--surface-two);border-radius:0 0 12px 12px;overflow:auto;flex:1;padding:0 0 30px;opacity:1;transition:opacity .3s;min-height:0}#structure-map.tree-hidden{opacity:0;pointer-events:none}.structure-paths{position:absolute;top:0;left:0;width:100%;fill:none;stroke:color-mix(in srgb,var(--text) 32%,transparent);stroke-width:4;stroke-linecap:round;stroke-linejoin:round}.structure-nodes{position:relative;padding-top:4px}.tree-node{display:flex;align-items:center;gap:10px;position:relative;height:64px;width:100%;background:none;border:0;text-align:left;padding-right:10px;font-size:10px}.tree-node:hover{background:color-mix(in srgb,var(--field) 25%,transparent)}.tree-node strong{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:var(--text);font-size:12px;font-weight:550;line-height:1.45}.tree-light{width:11px;height:11px;border-radius:50%;background:currentColor;flex:none;margin-left:-5px;opacity:.7}.tree-node.active .tree-light{opacity:1;box-shadow:0 0 10px 4px currentColor,0 0 32px 8px currentColor}.tree-node>span:last-child{min-width:0}
.task-splitter{flex:none;height:10px;cursor:row-resize;position:relative;touch-action:none}.task-splitter::after{content:'';position:absolute;left:calc(50% - 30px);top:3px;width:60px;height:4px;background:var(--line);border-radius:4px}.task-splitter:hover::after{background:var(--muted)}#task-stage{display:flex;flex-direction:column;flex:1;min-height:0;background:var(--surface-two);border:1px solid color-mix(in srgb,var(--line) 55%,transparent);border-radius:11px;padding:13px 15px;overflow:hidden}.task-caption{display:flex;justify-content:space-between;color:var(--muted);font-size:10px;gap:10px;margin-bottom:9px}.task-caption small{font-size:10px}.task-stage-head{display:grid;grid-template-columns:minmax(125px,1fr) auto minmax(85px,1fr);align-items:center;gap:8px;margin-bottom:12px}.task-stage-head .tabs{margin:0;gap:3px;background:var(--surface-three);padding:3px}.task-stage-head .tabs button{padding:8px 17px;font-size:14px;min-width:90px}.task-work-state button{font-size:12px;padding:9px 17px;background:var(--surface-three);border:0}.task-team{display:flex;justify-content:flex-end;gap:6px}.task-team button:first-child{width:auto;min-width:43px}.task-team button span{font-size:11px}.workspace-viewport{display:flex;min-height:0;flex:1;background:var(--surface-three);border-radius:8px;padding:12px;overflow:hidden;gap:14px}#task-panel{flex:1;min-height:0;min-width:0;overflow:auto}#task-panel>.stack{display:grid;grid-template-columns:minmax(0,1fr) minmax(195px,31%);height:100%;gap:18px;align-items:start}#task-panel>.stack>form{min-height:0;height:100%;display:flex;flex-direction:column;gap:12px;overflow:auto}#task-panel>.stack>form>.form-grid{grid-template-columns:1fr 1fr;gap:10px}#task-panel>.stack>form>.field-heading:has(textarea){flex:1;display:flex;flex-direction:column;min-height:130px}#task-panel textarea.editor{flex:1;min-height:125px;resize:none}#task-panel>.stack>div:last-child{height:100%;overflow:hidden;display:flex;flex-direction:column;min-height:0}#task-panel>.stack>h2{grid-column:1;font-size:15px}#task-panel>.stack>.description{grid-column:1;overflow:auto;max-height:100%}#task-panel>.stack>h2~div:last-child{grid-column:2;grid-row:1 / span 2}#task-files{display:flex;flex-direction:column;min-height:0;flex:1;padding-top:10px}.file-drop{flex:none;margin:0 0 14px;padding:12px;font-size:12px}.files{flex:1;min-height:0;overflow:auto;max-height:none;padding:3px 2px}.file-row{font-size:12px;gap:7px;padding:8px}.file-row button{min-width:30px;min-height:30px}.file-row small{font-size:10px}.file-row a{min-width:0}.priority-picker label{padding:8px 6px;transition:background .2s,color .2s;border:0;font-size:12px}.priority-picker label:has(:checked){background:color-mix(in srgb,currentColor 12%,var(--field));border:0}.priority-picker label:hover{background:var(--hover)}.description{background:var(--field);border:0;border-radius:6px;padding:14px}.work-viewport #task-panel{flex:1}.work-viewport #work-tools{flex:0 0 29%;overflow:auto;min-width:190px;border-left:1px solid var(--line);padding-left:14px}.work-viewport #work-tools h3{font-size:13px;margin-bottom:12px}.subtask{background:var(--field);border:1px solid var(--line);font-size:12px}.trash-launch{position:fixed;bottom:16px;right:18px;z-index:10;font-size:19px;width:40px;height:40px;padding:5px;background:var(--surface-two)}body[data-board=hidden] #task-list{flex-basis:0;min-height:0;opacity:0;pointer-events:none}body[data-board=hidden] .staff-main>.task-splitter{height:0;overflow:hidden}body[data-board=full] #task-stage,body[data-board=full] .staff-main>.task-splitter{display:none}body[data-board=full] #task-list{flex:1}
.client-space{display:grid;grid-template-columns:285px minmax(0,1fr);gap:26px;min-height:0;flex:1;max-width:1540px;width:100%;margin:0 auto}.client-center{display:flex;flex-direction:column;min-height:0;--client-sheet-size:52%}.client-request-sheet{flex:0 0 var(--client-sheet-size);background:var(--surface-two);border:1px solid color-mix(in srgb,var(--line) 60%,transparent);border-radius:12px;padding:20px;min-height:170px;overflow:auto}.client-center:has(#client-request-form) .client-request-sheet{flex:1}.client-request-sheet>header{margin-bottom:16px}.client-request-sheet header p{font-size:12px;margin-top:6px}.client-request-columns{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px}.client-request-columns>section{min-width:0;display:flex;flex-direction:column;gap:14px}.client-result-column{border-left:1px solid var(--line);padding-left:22px}.client-request-columns h2{font-size:16px;font-weight:550}.client-request-columns .description{min-height:110px;max-height:230px;overflow:auto;background:var(--surface-three)}.client-request-input>.field-heading>textarea{min-height:190px}.client-priority{max-width:350px}.client-detail-heading{display:flex;justify-content:space-between;gap:20px}.client-detail-heading h1{font-size:21px;margin-top:8px}.client-detail-heading>.row{align-self:flex-start;flex-wrap:nowrap}.client-team summary{display:flex;cursor:pointer;list-style:none}.client-team p{position:absolute;right:12px;background:var(--panel);padding:15px;border:1px solid var(--line);border-radius:8px;z-index:5}.client-create-footer{display:flex;justify-content:center;padding-top:22px}.client-create-footer button{min-width:260px;padding:14px 30px;background:var(--field);font-weight:500}.client-process{display:flex;flex-direction:column;flex:1;min-height:0;background:var(--surface-two);border:1px solid color-mix(in srgb,var(--line) 60%,transparent);border-radius:12px;padding:15px 20px}.client-process>h2{font-size:16px;margin-bottom:10px}.client-process #task-panel{display:flex;flex-direction:column;overflow:hidden}.client-media{display:flex;gap:8px;flex-wrap:wrap}.client-media img,.client-media video{max-height:130px;max-width:48%;object-fit:contain}.client-request-columns .files{max-height:200px;flex:auto}.client-surface .rail-cards .task-card{height:135px;min-height:135px}
.chat-panel{min-height:0;height:100%;display:flex;flex-direction:column}.chat-audience{margin-bottom:9px;flex:none;gap:4px}.chat-audience button{border:0;font-size:12px;padding:7px 13px}.messages-wrap{flex:1;min-height:70px;display:flex;flex-direction:column}.messages{height:auto;flex:1;min-height:0;border-radius:6px;background:color-mix(in srgb,var(--yellow) 3%,transparent);padding:12px 8px;gap:9px}.messages.public{background:color-mix(in srgb,var(--green) 3%,transparent)}.message{max-width:85%;min-width:100px;padding:9px 12px;background:var(--surface-three);font-size:12px}.message .author{font-weight:600}.message time{font-size:10px}.message p{line-height:1.6}.composer{flex:none;margin-top:10px}.composer textarea{min-height:56px;height:60px;resize:vertical;max-height:110px}.composer .row{margin-top:7px;gap:8px}.composer button[type=submit],.media-button{font-size:12px;padding:7px 13px;background:var(--field);border:1px solid var(--line);border-radius:7px;color:var(--text);cursor:pointer}.media-button:hover{background:var(--hover)}.message .attachment-preview{max-height:190px}.client-process .messages{border-top:0}.jump{font-size:11px;padding:7px 12px}.client-process .chat-panel{background:none}.client-process .message{backdrop-filter:none}
@media(max-width:1700px){.employee-space{grid-template-columns:210px minmax(0,1fr) 210px;gap:16px}.task-stage-head .tabs button{min-width:70px;padding:8px 10px}.workspace{padding:14px 17px}.task-stage-head{grid-template-columns:1fr auto auto}.task-work-state button{padding:8px 10px}.work-viewport #work-tools{min-width:150px}.rail-cards .card-actions{height:auto;flex-wrap:wrap}.rail-cards .card-actions button{font-size:10px;min-height:29px}.rail-cards .card-actions .pause,.rail-cards .card-actions .resume{order:3;flex-basis:100%}}
@media(max-width:1450px){.employee-space{grid-template-columns:195px minmax(0,1fr);gap:15px}.structure-rail{display:none}.structure-mobile-open .structure-rail{display:flex;position:fixed;right:18px;top:100px;bottom:70px;width:250px;z-index:20;border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow)}.structure-mobile-open #structure-map{background:var(--panel)}[data-mobile-tree]{display:inline-flex!important}.client-space{grid-template-columns:240px minmax(0,1fr);gap:18px}.task-stage-head .tabs button{min-width:75px}.work-viewport #work-tools{flex-basis:30%;min-width:170px}}
@media(max-width:1100px){.app-shell{grid-template-columns:62px minmax(0,1fr)}.sidebar{padding:20px 8px}.sidebar .nav-label,.sidebar .brand,.sidebar .account,.sidebar .workspace-name,.sidebar .desktop-download,.sidebar .platform-back{display:none}.sidebar button{justify-content:center;padding:9px}.employee-space{grid-template-columns:180px minmax(0,1fr);gap:12px}.task-stage-head{grid-template-columns:1fr auto}.task-stage-head .tabs{grid-column:1 / -1;grid-row:1}.task-team{grid-row:2}.task-work-state{grid-row:2}.workspace-viewport{padding:9px}#task-panel>.stack{grid-template-columns:1fr}#task-panel>.stack>div:last-child{height:auto;min-height:140px}#task-panel>.stack>h2~div:last-child{grid-column:1;grid-row:auto}#task-panel>.stack>form{height:auto;min-height:250px}.work-viewport{flex-direction:column}.work-viewport #work-tools{flex:0 0 120px;min-width:0;border-left:0;border-top:1px solid var(--line);padding:10px 0 0}.work-viewport #task-panel{min-height:200px}.client-space{grid-template-columns:195px minmax(0,1fr);gap:12px}.client-request-columns{gap:14px}.client-result-column{padding-left:14px}.client-request-sheet{padding:15px}.signed-role{display:none}.page-head{grid-template-columns:36px 1fr 1fr 0 38px}.client-detail-heading{flex-wrap:wrap}}
@media(max-width:760px){.workspace{padding:12px}.app-shell{display:grid;grid-template-columns:50px minmax(0,1fr)}.sidebar{height:100dvh;position:sticky;top:0;border-right:1px solid var(--line);border-bottom:0;padding:12px 4px}.sidebar nav,.sidebar-bottom{display:flex;flex-direction:column;align-items:stretch;gap:5px;overflow:visible}.sidebar .nav-mark{width:18px}.nav-collapsed .app-shell{grid-template-columns:0 minmax(0,1fr)}.nav-collapsed .sidebar{visibility:hidden;overflow:hidden;padding:0}.employee-space{display:flex;flex-direction:column;gap:12px}.task-rail{flex:none;max-height:185px}.task-rail .rail-body{max-height:145px;gap:7px;padding:7px}.task-rail.rail-collapsed .rail-body{max-height:0;padding:0}.rail-title{padding:8px}.rail-tabs{display:none}.rail-cards{flex-direction:row;overflow:auto;padding:0 0 5px}.rail-cards .task-card{width:220px;height:100px;min-height:100px}.rail-cards .card-actions{display:none}.rail-cards .task-card h3{min-height:26px}.staff-main{flex:1;min-height:0}#task-list .board{min-width:600px}.task-stage-head{gap:5px}.task-stage-head .tabs button{font-size:12px;min-width:0}#task-stage{padding:10px}.task-caption small{display:none}.task-search-row>button[data-create]{font-size:0;width:36px;padding:5px}.task-search-row>button[data-create]::before{content:'＋';font-size:20px}.task-search-row input{min-width:100px}.workspace-views{position:static;transform:none;grid-column:3;grid-row:1;justify-self:end}.page-head h1{font-size:14px}.page-head{gap:5px;margin-bottom:10px}.page-head .workspace-views button{width:27px;min-width:27px;padding:5px}.client-space{display:flex;flex-direction:column;gap:12px}.client-center{flex:1}.client-request-columns{grid-template-columns:1fr}.client-result-column{border-left:0;border-top:1px solid var(--line);padding:16px 0 0}.client-request-sheet{min-height:150px}.client-request-sheet:has(#client-request-form) .client-result-column{display:none}.client-detail-heading h1{font-size:18px}.client-detail-heading>.row{gap:7px}.client-process{padding:12px}.client-create-footer button{min-width:0;width:100%}.client-priority{max-width:none}.client-process .message{max-width:95%}.composer .media-button{font-size:10px;padding:8px}.photo-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.task-search-row .icon-button{flex:0 0 36px}body:not([data-page=tasks]) .workspace{height:auto}.signed-role{display:none}.trash-launch{bottom:8px;right:8px}}
@media(prefers-reduced-motion:reduce){.appearance-layer,.app-shell,.rail-body,#structure-map,#task-list{transition:none}}
.mobile-tree-launch{display:none;position:fixed;bottom:16px;right:68px;width:40px;height:40px;padding:5px;background:var(--surface-two);z-index:21}
.task-stage-head{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}
@media(min-width:761px) and (max-width:1100px){.nav-expanded-small .app-shell{grid-template-columns:190px minmax(0,1fr)}.nav-expanded-small .sidebar .nav-label,.nav-expanded-small .sidebar .brand,.nav-expanded-small .sidebar .account{display:block}.nav-expanded-small .sidebar button{justify-content:flex-start}}
@media(min-width:1101px){.task-stage-head{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}}
.resizing #task-list{transition:none}.task-caption #task-purpose{margin-left:auto}.task-trash{border:0;background:none;padding:0 3px;color:var(--muted);font-size:13px}
@media(max-width:760px){#task-list .board{grid-template-columns:repeat(3,minmax(210px,1fr));min-width:660px;grid-template-rows:minmax(0,1fr)}.task-search-row>button[data-create]{flex:0 0 36px}.page-head h1{font-size:12px}.workspace-views{gap:0}}@media(max-width:480px){body:not([data-role=client]) .page-head h1{display:none}}::-webkit-scrollbar-corner{background:transparent}