.gantt-piece.cancelled{background:var(--red)}
body .employee-space .demo-tree-point.status-cancelled{--node-color:var(--red)}
.card-cancelled-label,.request-cancelled-label{color:var(--red)!important;font-weight:600}.card-cancelled-label{font-size:10px;margin-left:7px}
body .client-detail-heading .client-cancel-request{align-self:flex-start;justify-self:start;width:max-content;margin-top:10px;padding:7px 12px;min-height:34px;border:1px solid color-mix(in srgb,var(--red) 38%,var(--line));border-radius:6px;background:color-mix(in srgb,var(--red) 6%,var(--panel));color:var(--red);font-size:12px;font-weight:550}
body .client-detail-heading .client-cancel-request:hover{background:color-mix(in srgb,var(--red) 12%,var(--panel))}
body .client-detail-heading .resume-request{color:var(--text);border-color:var(--line);background:var(--field)}
body .task-card>.card-trash{width:32px;height:32px;min-height:32px;padding:6px;color:var(--text);background:var(--surface-one);border:1px solid var(--line)}
body .task-card>.card-trash svg{width:19px;height:19px;stroke-width:1.9}
body .card-actions .back-new{display:flex;align-items:center;justify-content:center;gap:4px}
.card-direction{width:19px;height:19px;flex:none;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
/* Keep colored column titles legible independently of the wallpaper. */
body[data-page=tasks] #task-list .column-heading{background:color-mix(in srgb,var(--status) 12%,var(--panel));color:var(--status);opacity:1;min-height:38px;height:38px}
body[data-page=tasks] #task-list .column-heading h2{display:block!important;visibility:visible!important;color:inherit;font-size:14px;font-weight:650;line-height:1.25}
body .task-card .task-open h3{font-size:14px;font-weight:600;line-height:1.4;color:var(--text)}
body .task-card .task-open small{font-size:12px;font-weight:500;color:var(--muted);line-height:1.4}
.client-request-columns h2,.client-request-input .field-heading{color:var(--text);font-weight:600}
.client-request-columns .description{font-size:14px;line-height:1.65;color:var(--text);font-weight:450;padding:12px}
.message p{font-size:13px;line-height:1.55;color:var(--text)}
.message-delivery{display:inline-flex;align-items:center;letter-spacing:-2px;font-size:15px;font-weight:600;color:var(--muted);margin-left:7px;white-space:nowrap}
.message-delivery.viewed{color:var(--green)}
.message .author{font-size:13px;font-weight:650}
.structured-contacts{display:flex;flex-wrap:wrap;gap:7px 20px;margin:8px 0 0;font-size:12px;line-height:1.5;text-align:left}
.structured-contacts>div{min-width:0}.structured-contacts dt{font-size:12px;color:var(--text);font-weight:550}.structured-contacts dd{color:var(--text);margin:0;overflow-wrap:anywhere;font-weight:550}
.profile-contacts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.profile-contacts label:last-child{grid-column:1/-1}
.description-media-control{display:flex;align-self:flex-end;align-items:center;justify-content:center;margin:2px 0 4px auto;background:var(--field);color:var(--text);border:1px solid var(--line);border-radius:6px;font-size:12px;font-weight:500;padding:6px 13px;cursor:pointer;width:max-content}
.description-media-control:hover{background:var(--hover)}
.client-request-input>.field-heading:has(textarea){margin-bottom:0}.client-request-input:has(.description-media-control){gap:8px}
.composer .row .chat-file-count{margin-right:auto}.composer .row .media-button{margin-left:0}
body.light .employee-space .demo-tree-point.active{fill:color-mix(in srgb,var(--node-color) 60%,white);stroke:color-mix(in srgb,var(--node-color) 75%,white);filter:drop-shadow(0 0 5px var(--node-color)) drop-shadow(0 0 13px var(--node-color)) drop-shadow(0 0 26px color-mix(in srgb,var(--node-color) 65%,transparent))}
.gantt-dialog .gantt-axis,.gantt-dialog .gantt-person{grid-template-columns:130px minmax(0,1fr);gap:12px}.gantt-dialog .gantt-person{padding:9px 0}.gantt-dialog .gantt-person h3{font-size:12px;overflow-wrap:anywhere}.gantt-dialog .gantt-lane{height:31px;min-height:31px}.gantt-dialog .gantt-bar{height:31px}.gantt-dialog .gantt-bar-label{padding:5px 8px}.gantt-dialog .gantt-person-lanes{gap:5px}.gantt-dialog .gantt-axis{background:var(--panel)}
.gantt-period-picker{background:var(--panel);color:var(--text);border:1px solid var(--line);border-radius:10px;width:min(440px,calc(100vw - 24px))}.gantt-period-picker form{display:flex;flex-direction:column;gap:14px}.gantt-period-picker footer{display:flex;justify-content:flex-end;gap:8px}
.gantt-dialog .gantt-jog-thumb{background:var(--hover);border-color:var(--line);color:var(--text)}
@media(max-width:600px){.profile-contacts{grid-template-columns:1fr}.gantt-dialog .gantt-axis,.gantt-dialog .gantt-person{grid-template-columns:95px minmax(0,1fr);gap:8px}}
/* Animate the board reveal only on an explicit mode change. Dragging stays immediate. */
body[data-page=tasks] .staff-main>#task-list{flex-grow:0;flex-shrink:0}
body[data-board=full] .staff-main>#task-stage{flex:1 1 0%}
body.board-mode-transition .staff-main:not(.resizing)>#task-list{transition:flex-basis .36s cubic-bezier(.22,.61,.36,1),opacity .24s ease,transform .36s cubic-bezier(.22,.61,.36,1)}
body.board-mode-transition .staff-main:not(.resizing)>#task-stage{transition:padding .36s cubic-bezier(.22,.61,.36,1),opacity .24s ease,transform .36s cubic-bezier(.22,.61,.36,1)}
body .staff-main>.task-splitter,body.board-mode-transition .staff-main:not(.resizing)>.task-splitter,.client-splitter,.client-center>.client-request-sheet{transition:none!important}
@media(prefers-reduced-motion:reduce){body.board-mode-transition .staff-main:not(.resizing)>#task-list,body.board-mode-transition .staff-main:not(.resizing)>#task-stage{transition:none}}
body[data-page=tasks] #task-list .column-heading{background:color-mix(in srgb,var(--status) 19%,var(--panel));border-bottom-color:color-mix(in srgb,var(--status) 26%,var(--line))}
body[data-page=tasks] #task-list .column-heading h2{font-weight:650;text-shadow:none}
body[data-page=tasks] .column-add-task{background:var(--field);color:var(--text);border:1px solid var(--line);font-weight:550}
body[data-page=tasks] .column-add-task:hover{background:var(--hover);color:var(--text)}
body.light[data-page=tasks] #task-list .column-heading{background:color-mix(in srgb,var(--status) 16%,var(--panel))}
.employee-space>.structure-rail{bottom:auto}
.employee-space>.structure-rail>#structure-map{height:auto;max-height:calc(var(--side-body-height) + 17px);overflow:auto;padding-bottom:32px}
.employee-space .demo-tree-content{flex:none}
.client-team{position:relative}.client-team summary{align-items:center;gap:0;border:1px solid var(--line);background:var(--field);border-radius:7px;padding:5px 8px;min-height:36px}
.client-team summary .avatar+.avatar{margin-left:-6px;border:2px solid var(--field)}
.client-team .client-team-details{position:absolute;right:0;top:calc(100% + 7px);z-index:30;min-width:220px;max-width:320px;padding:14px;background:var(--panel);border:1px solid var(--line);border-radius:8px;box-shadow:var(--shadow);font-size:13px}
.client-team-details>strong{display:block;margin-bottom:10px;font-weight:600}.client-team-details>div{display:flex;align-items:center;gap:9px;padding:6px 0}.task-unassigned{font-size:12px;font-weight:500;line-height:1.4;color:var(--text);max-width:165px;padding:7px 10px;border:1px solid var(--line);border-radius:6px;background:var(--surface-three)}
@keyframes notice-arrival{0%,100%{transform:rotate(0)}25%{transform:rotate(-9deg)}75%{transform:rotate(9deg)}}
.notice-arrived .notification-icon{animation:notice-arrival .35s ease 2}
@media(prefers-reduced-motion:reduce){.notice-arrived .notification-icon{animation:none}}
body .task-card.dragging{opacity:.4;cursor:grabbing}
body .task-card[draggable=true] .task-open{cursor:grab}
body[data-page=tasks] #task-list .column.drag-over{outline:2px solid var(--status);outline-offset:-2px;background:color-mix(in srgb,var(--status) 12%,var(--surface-two))}
body[data-page=tasks] #task-list .column.drag-over .cards{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--status) 35%,transparent)}
.task-card[aria-busy=true]{opacity:.65;pointer-events:none}
.task-drag-ghost{position:fixed!important;z-index:9999;pointer-events:none!important;opacity:.9;box-shadow:0 8px 28px #0003!important;transform:rotate(1deg)}
body:has(.task-drag-ghost){user-select:none;cursor:grabbing}
fieldset.stack{border:0;padding:0;margin:0;min-width:0}.created-admin-space{display:flex;flex-direction:column;gap:10px;padding:15px;margin:14px 0;border:1px solid var(--line);border-radius:7px;background:var(--field)}.created-admin-space .workspace-url{overflow-wrap:anywhere;font-size:12px}
.admin-owner-options{border:1px solid var(--line);border-radius:6px;padding:9px 12px;background:var(--field);font-size:12px}.admin-owner-options>summary{cursor:pointer;color:var(--muted)}.admin-owner-options[open]{display:grid;gap:12px}.admin-owner-options[open]>summary{margin-bottom:10px}
body .task-card .task-open .card-identity{display:flex;flex-direction:column;align-items:stretch;gap:1px;min-height:17px;overflow:hidden;white-space:nowrap;font-size:12px;line-height:1.25}
.card-identity>span{min-width:0;overflow:hidden;text-overflow:ellipsis}.card-identity .card-company,.card-identity .card-contact{flex:none;color:var(--text);font-weight:550}
body .task-card .card-actions .join-task{background:color-mix(in srgb,var(--text) 8%,var(--field));color:var(--text);font-size:12px;font-weight:600;min-height:32px;opacity:1}
body .task-card .card-actions .join-task:hover{background:color-mix(in srgb,var(--yellow) 15%,var(--field));color:var(--text)}
.message-delivery,.message-delivery.viewed{color:var(--text)}
body .app-topbar .notification-icon{width:19px;height:19px}
.chat-pending-files{display:flex;flex-wrap:wrap;gap:6px}.chat-pending-files>span{display:inline-flex;align-items:center;gap:6px;max-width:100%;font-size:12px;background:var(--field);border:1px solid var(--line);border-radius:5px;padding:3px 4px 3px 9px;overflow-wrap:anywhere}.chat-pending-files button{padding:2px 6px;min-width:25px;min-height:25px;color:var(--text);background:var(--hover)}
.pending-attachment-names{display:grid;gap:4px;font-size:12px;color:var(--muted)}
#client-request-form[data-sending] .priority-switch,#client-request-form[data-sending] [contenteditable]{pointer-events:none;opacity:.7}
/* Clearer controls without adding extra visual elements. */
body[data-page=tasks] button,body[data-page=tasks] .media-button,body[data-page=tasks] .description-media-control,body[data-page=tasks] .priority-picker label{font-weight:600}
body .client-priority{display:grid;gap:6px}.client-priority-caption{font-size:13px;font-weight:600;color:var(--text)}
body .client-request-sheet>header p{font-weight:550;color:color-mix(in srgb,var(--text) 78%,var(--muted));line-height:1.5}
body[data-page=tasks] input::placeholder,body[data-page=tasks] textarea::placeholder{font-weight:550;color:var(--muted);opacity:1}
body .file-drop{border:1.5px dashed color-mix(in srgb,var(--text) 42%,var(--line));color:var(--text);font-weight:600}
body .file-drop:hover{border-color:color-mix(in srgb,var(--text) 65%,var(--line));color:var(--text)}
body.client-surface .task-rail>.rail-body{background:var(--surface-one)}
.task-filter-form .filter-search-field{position:relative}
.task-filter-form .filter-suggestions{position:absolute;z-index:40;top:100%;left:0;right:0;max-height:175px;overflow:auto;padding:4px;border:1px solid var(--line);border-radius:6px;background:var(--panel);box-shadow:0 6px 20px #0002}
.task-filter-form .filter-suggestions[hidden]{display:none!important}
.task-filter-form .filter-suggestions button{display:block;width:100%;padding:8px 10px;border:0;border-radius:4px;background:transparent;color:var(--text);font-size:12px;font-weight:500;text-align:left}
.task-filter-form .filter-suggestions button:hover,.task-filter-form .filter-suggestions button:focus-visible{background:var(--hover)}
body.client-surface .client-space{grid-template-columns:clamp(280px,25vw,330px) minmax(0,1fr);column-gap:clamp(36px,3.5vw,60px);padding-inline:24px}
body.client-surface .client-request-tabs{display:flex;gap:3px;padding:3px;background:var(--field);border-radius:6px;flex:none}
body.client-surface .client-request-tabs button{font-size:12px;white-space:nowrap;padding:8px 10px;border-radius:4px}
body.client-surface .client-request-tabs [aria-pressed=true]{background:var(--hover);color:var(--text);box-shadow:none}
body.client-has-selection[data-role=client][data-page=tasks] .app-topbar>.client-layout-views{display:flex}
body.client-surface .client-center[data-client-layout=side]:has(.client-process){flex-direction:row;max-width:none;align-items:stretch}
body.client-surface .client-center[data-client-layout=side]>.client-request-sheet{flex:0 0 calc(var(--client-sheet-width,52%) - 5px);min-width:0;width:auto;height:100%}
body.client-surface .client-center[data-client-layout=side]>.client-process{flex:1;min-width:0;width:auto;height:100%}
body.client-surface .client-center[data-client-layout=side] .client-request-columns{grid-template-columns:minmax(0,1fr)}
body.client-surface .client-center[data-client-layout=side] .client-result-column{border-left:0!important;border-top:1px solid var(--line)}
body.client-surface .client-center[data-client-layout=side] .client-detail-heading{flex-direction:column;gap:10px}
body.client-surface .client-center[data-client-layout=side] .client-detail-heading h1{font-size:19px;line-height:1.4}
body.client-surface .client-center[data-client-layout=side] .client-detail-heading>.row{align-self:flex-end}
body.client-surface .client-detail-heading{position:relative}
body.client-surface .client-detail-heading>div:first-child{width:100%;min-width:0;flex:1}
body.client-surface .client-detail-heading>div:first-child>small{display:block;min-height:38px;padding-right:160px;line-height:1.5}
body.client-surface .client-detail-heading>.row{position:absolute;right:0;top:0;display:flex;flex-wrap:nowrap;align-items:center;gap:8px;height:36px}
body.client-surface .client-detail-heading>.row>.badge{display:inline-flex;align-items:center;min-height:36px;margin:0}
body.client-surface .client-center[data-client-layout=side]>.client-splitter{height:auto;min-height:0;width:10px;flex:0 0 10px;cursor:col-resize}
body.client-surface .client-center[data-client-layout=side]>.client-splitter::after{left:3px;top:calc(50% - 30px);width:4px;height:60px}
@media(max-width:1050px){body.client-surface .client-space{grid-template-columns:260px minmax(0,1fr);column-gap:28px;padding-inline:16px}}
@media(max-width:720px){body.client-surface .client-space{display:flex;gap:22px;padding-inline:12px}.client-request-tabs{display:flex!important}body.client-has-selection .app-topbar .topbar-heading{display:none}}
.notice-actions{display:flex;justify-content:flex-end;margin:0 0 12px;padding-bottom:12px;border-bottom:1px solid var(--line)}.notice-actions .read-all-notices{background:var(--field);color:var(--text);border:1px solid var(--line);border-radius:7px;padding:8px 13px;font-size:13px;font-weight:500}.notice-actions .read-all-notices:hover{background:var(--hover)}.notice-actions .read-all-notices:disabled{opacity:.5;cursor:default}.notice-list{max-height:65dvh;overflow:auto}
.task-card:has(>.card-trash){position:relative}.task-card>.card-trash{position:absolute;right:6px;top:6px;display:flex;align-items:center;justify-content:center;width:28px;height:28px;min-height:28px;padding:5px;border:0;border-radius:5px;background:transparent;color:var(--muted);z-index:2;box-shadow:none}.task-card>.card-trash svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.task-card>.card-trash:hover{background:color-mix(in srgb,var(--red) 12%,transparent);color:var(--red)}.task-card>.card-trash:focus-visible{outline:2px solid var(--red);outline-offset:1px}.task-card:has(>.card-trash) .task-open>small:first-child{padding-right:28px}
/* The same appearance settings are available to every account role. */
.theme-schedule-settings{margin-top:22px;padding-top:20px;border-top:1px solid var(--line);display:grid;gap:16px}.theme-schedule-settings .appearance-setting{margin:0}.theme-schedule-times{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.theme-schedule-times label{display:grid;gap:8px;font-weight:550}.theme-schedule-times input{width:100%;min-width:0;color:var(--text);background:var(--field);border:1px solid var(--line);border-radius:8px;padding:10px;font:inherit;color-scheme:dark}body.light .theme-schedule-times input{color-scheme:light}.theme-schedule-times input:disabled{opacity:.5}.theme-schedule-settings p{margin:0;font-size:13px}.theme-schedule-error{color:#df6262}.theme-schedule-settings>button{justify-self:end}@media(max-width:420px){.theme-schedule-times{grid-template-columns:1fr}}
dialog:has(.theme-schedule-settings){width:min(650px,calc(100vw - 32px))}@media(max-height:800px){dialog:has(.theme-schedule-settings) .theme-sample{height:40px;margin-bottom:7px}dialog:has(.theme-schedule-settings) .theme-choice{padding:9px}.theme-schedule-settings{margin-top:16px;padding-top:14px;gap:12px}}
body .done-filter-button.filter-active{position:relative;color:var(--blue)!important;background:color-mix(in srgb,var(--blue) 14%,var(--field))!important;border-color:color-mix(in srgb,var(--blue) 65%,var(--line))!important;box-shadow:inset 0 -2px var(--blue)}
body .done-filter-button.filter-active::after{content:'';position:absolute;right:4px;top:4px;width:5px;height:5px;border-radius:50%;background:var(--blue)}
.task-status-text{font-weight:600}.task-status-text.status-new{color:var(--blue)!important}.task-status-text.status-in_progress{color:var(--yellow)!important}.task-status-text.status-done{color:var(--green)!important}.task-status-text.status-cancelled{color:var(--red)!important}
.task-card{position:relative}.task-activity-dot{position:absolute;right:10px;top:15px;width:7px;height:7px;border-radius:50%;background:var(--blue);box-shadow:0 0 7px color-mix(in srgb,var(--blue) 70%,transparent);pointer-events:none;z-index:1;animation:task-activity-glow 2.4s ease-in-out infinite}.task-card.has-task-activity .task-open>small:first-child{padding-right:16px}.task-card.has-task-activity:has(>.card-trash) .task-activity-dot{right:46px}.task-card.has-task-activity:has(>.card-trash) .task-open>small:first-child{padding-right:46px}
@keyframes task-activity-glow{0%,100%{opacity:.7;box-shadow:0 0 4px color-mix(in srgb,var(--blue) 45%,transparent)}50%{opacity:1;box-shadow:0 0 10px color-mix(in srgb,var(--blue) 90%,transparent)}}@media(prefers-reduced-motion:reduce){.task-activity-dot{animation:none}}
/* Keep task creation above the first board column, with search on the right. */
body[data-page=tasks]:not([data-role=client]) .task-search-row>.search-create-task{margin-right:auto}
iframe.demo-detail-frame[hidden]{display:none!important}
#toast{z-index:2147483647!important;top:auto;right:auto;margin:0;border:0;box-sizing:border-box;pointer-events:none}#toast::backdrop{background:transparent;pointer-events:none}

body .task-card .card-actions button{font-size:12px;font-weight:550}body .rail-cards .task-card .card-actions button{font-size:11px;font-weight:550}

body .task-card .card-actions button{display:flex;align-items:center;justify-content:center;gap:5px}body .task-card .card-actions .card-direction{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.profile-company{display:flex;flex-direction:column;gap:7px;padding:12px 14px;border:1px solid var(--line,rgba(128,128,128,.3));border-radius:9px;background:var(--surface-two,rgba(128,128,128,.08));color:var(--text);min-width:0}
.profile-company>span{font-size:13px;font-weight:600;color:inherit}
.profile-company>strong{font-size:15px;font-weight:600;line-height:1.5;overflow-wrap:anywhere}
.client-work-status{font-weight:650;white-space:nowrap}
.client-work-status.state-postponed{color:#af4c52}.client-work-status.state-waiting{color:#98630b}
body:not(.light):not([data-theme=light]) .client-work-status.state-postponed{color:#e29b9d}
body:not(.light):not([data-theme=light]) .client-work-status.state-waiting{color:#e5bd69}