/* Demo variables share the authenticated theme; cards deliberately retain their markup. */
body{--workspace-data:var(--surface-three);--workspace-surface:var(--surface-two);--quiet:var(--muted);--blue-bg:color-mix(in srgb,var(--blue) 12%,transparent);--yellow-bg:color-mix(in srgb,var(--yellow) 12%,transparent);--green-bg:color-mix(in srgb,var(--green) 12%,transparent)}
body .page-head.app-topbar{background:var(--surface-one);backdrop-filter:blur(12px);box-shadow:none;border-bottom-color:color-mix(in srgb,var(--line) 50%,transparent)}
body .app-topbar [data-notifications]{position:relative;flex:none}
body .app-topbar .notification-icon{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
body .app-topbar #notice-count{position:absolute;top:-4px;right:-4px;min-width:15px;height:15px;padding:0 4px;border-radius:8px;background:var(--red);color:#fff;font-size:10px;line-height:15px;text-align:center;pointer-events:none}
body .app-topbar #notice-count:empty{display:none}
body[data-page=tasks] #task-list .column{padding:0;border-color:color-mix(in srgb,var(--line) 55%,transparent);overflow:hidden;background:var(--surface-one);min-height:0}
body[data-page=tasks] #task-list .column-heading{flex:none;height:36px;min-height:36px}
body[data-page=tasks] #task-list .column-heading h2{font-size:13px;font-weight:600}
body[data-page=tasks] #task-list .cards{min-height:0;overflow:auto;flex:1;padding:10px;gap:9px}
.done-search-row{display:flex;align-items:center;gap:7px;padding:8px 10px;flex:none;min-width:0}
body #task-list .column-search{width:0;min-width:0;flex:1;margin:0;height:34px;padding:7px 9px}
.done-filter-button{display:grid;place-items:center;flex:none;width:34px;height:34px;min-height:34px;padding:7px;background:var(--field);border:1px solid var(--line);border-radius:6px;color:var(--muted)}
.done-filter-button:hover,.done-filter-button.filter-active{background:var(--hover);color:var(--text)}
.done-filter-button.filter-active{box-shadow:inset 0 -2px var(--muted)}
.column-add-task{flex:none;width:100%;min-height:38px;padding:9px 12px;text-align:left;font-size:12px;font-weight:500;border:1px dashed color-mix(in srgb,var(--blue) 30%,var(--line));border-radius:6px;background:transparent;color:var(--muted);transition:background .18s,color .18s}
.column-add-task:hover{background:var(--blue-bg);color:var(--blue)}
body .task-card{border-color:color-mix(in srgb,var(--line) 32%,transparent);box-shadow:0 1px 3px #00000008}
body .task-card.selected{border-color:color-mix(in srgb,var(--muted) 42%,transparent)}
body .task-card:hover{border-color:color-mix(in srgb,var(--muted) 35%,transparent)}
body.client-surface .task-card.selected{border-color:color-mix(in srgb,var(--muted) 42%,transparent);box-shadow:none}
.filter-date-pair{display:grid;grid-template-columns:1fr 1fr;gap:12px}.filter-actions{display:flex;flex-direction:column;gap:8px}.filter-actions button{width:100%;min-height:40px}
/* Exact demo board-display transitions, bound to the API-backed elements. */
body[data-page=tasks] .staff-main>#task-list{flex:0 1 var(--board-size,48%);min-height:0;overflow:hidden;opacity:1;transform:translateY(0);transition:none}
body[data-page=tasks] .staff-main>#task-stage{display:flex;flex:1 1 0%;height:auto;min-height:0;opacity:1;transform:translateY(0);transition:none}
body[data-page=tasks] .staff-main>.task-splitter{display:block;flex:0 0 14px;height:14px;min-height:14px;opacity:1;overflow:hidden;transition:none}
body[data-board=hidden] .staff-main>#task-list{flex:0 0 0%;opacity:0;transform:translateY(-24px);pointer-events:none}
body[data-board=full] .staff-main>#task-list{flex:1 1 100%}
body[data-board=full] .staff-main>#task-stage{flex:0 0 0%;height:0;min-height:0;padding-top:0;padding-bottom:0;border-width:0;opacity:0;transform:translateY(24px);overflow:hidden;pointer-events:none}
body[data-board=hidden] .staff-main>.task-splitter,body[data-board=full] .staff-main>.task-splitter{flex-basis:0;height:0;min-height:0;opacity:0;pointer-events:none}
body.board-mode-transition .staff-main:not(.resizing)>#task-list{transition:flex-basis .35s ease,opacity .25s ease,transform .35s ease}
body.board-mode-transition .staff-main:not(.resizing)>#task-stage{transition:flex .35s ease,min-height .35s ease,padding .35s ease,opacity .25s ease,transform .35s ease}
body.board-mode-transition .staff-main:not(.resizing)>.task-splitter{transition:flex-basis .35s ease,height .35s ease,min-height .35s ease,opacity .25s ease}
/* Customer geometry from demo client-compose.css; data remains server-backed. */
body.client-surface .client-space{grid-template-columns:280px minmax(0,1fr);column-gap:24px;align-items:stretch;max-width:none}
body.client-surface .client-center{max-width:1200px;width:100%;justify-self:center;min-height:0}
body.client-surface .client-request-sheet{background:var(--surface-two);border:1px solid var(--line);border-radius:10px;padding:24px;min-height:0;transition:background-color .28s ease}
body.client-surface .client-request-columns{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px}
body.client-surface .client-request-columns>section{min-width:0;padding:16px;background:var(--surface-three);border:1px solid color-mix(in srgb,var(--line) 65%,transparent);border-radius:7px}
body.client-surface .client-result-column{border-left:1px solid var(--line)}
body.client-surface .client-request-columns h2{font-size:17px;margin:0 0 14px}
body.client-surface .client-process{padding:16px;background:var(--surface-one);border:1px solid var(--line);border-radius:10px;min-height:0;overflow:hidden}
body.client-surface .client-process #task-panel{overflow:hidden;flex:1;min-height:0}
body.client-surface .rail-title{height:36px;padding:7px 12px;font-size:13px;border:1px solid var(--line);background:var(--workspace-surface)}
body.client-surface .rail-body{padding:10px;background:var(--workspace-surface);border:1px solid var(--line);border-top:0;gap:10px;flex:1;min-height:0}
body.client-surface .rail-collapsed .rail-body{padding-block:0;border:0;flex:0 0 0;visibility:hidden}
body.client-surface .rail-cards{overflow:auto;min-height:0;display:flex;flex-direction:column;padding:4px 3px 10px;gap:10px}
@media(max-width:1100px){body.client-surface .client-space{grid-template-columns:230px minmax(0,1fr);gap:16px}body.client-surface .client-request-columns{grid-template-columns:1fr}.client-result-column{border-left:0!important;border-top:1px solid var(--line)}}
@media(max-width:720px){body.client-surface .client-space{display:flex;flex-direction:column;gap:12px}body.client-surface .task-rail{max-height:240px;flex:none}body.client-surface .rail-body{max-height:204px}body.client-surface .rail-collapsed .rail-body{max-height:0}body.client-surface .rail-cards .task-card{width:100%;height:135px;min-height:135px}body.client-surface .client-request-sheet{padding:16px}}
@media(prefers-reduced-motion:reduce){body.board-mode-transition .staff-main>#task-list,body.board-mode-transition .staff-main>#task-stage,body.board-mode-transition .staff-main>.task-splitter{transition:none}}