main{grid-template-columns:300px minmax(0,1fr)}
.mobile-project-bar{display:none}
.phase-order-bar{display:grid;grid-template-columns:32px minmax(0,max-content) 32px;align-items:center;justify-content:center;gap:5px;margin-bottom:10px;padding:2px 0 5px}.phase-order-strip{display:flex;justify-content:center;gap:5px;min-width:0;overflow-x:auto;padding:1px}.phase-order-chip{flex:none;padding:5px 8px;border:1px solid var(--line);border-radius:7px;background:#fff;color:var(--blue-dark);font-size:12px;cursor:grab}.phase-order-chip.active{background:var(--blue);border-color:var(--blue);color:#fff;font-weight:800;box-shadow:0 2px 7px #0b67b240}.phase-order-arrow{width:32px;height:30px;padding:0;border:1px solid var(--line);border-radius:7px;background:#fff;color:var(--blue-dark);font-size:22px;line-height:1;cursor:pointer}.phase-order-arrow:disabled{opacity:.3;cursor:default}.phase-order-bar[aria-busy=true]{opacity:.5;pointer-events:none}.phase-title[draggable=true]{cursor:grab}.phase-navigation-hidden{display:none}
@media(max-width:800px){.phase-order-bar{grid-template-columns:32px minmax(0,1fr) 32px;justify-content:stretch}.phase-order-strip{justify-content:flex-start}}
.phase-title .add-phase-icon{margin-left:auto;flex:none;border:1px solid #bedaf0;border-radius:7px;background:#eef7ff;color:var(--blue);width:28px;height:28px;padding:0;font-size:20px;line-height:1;cursor:pointer}
.phase-before .add-phase-icon,.phase-after .add-phase-icon{display:none}
.add-phase-dialog .add-phase{display:flex;flex-direction:column;gap:14px;border:0;margin:0;padding:30px 24px 24px;background:#fff}
.add-phase-dialog .add-phase label{width:100%;margin:10px 0 0}.add-phase-dialog .add-phase input{width:100%;padding:10px}
.add-phase-dialog .add-phase .dialog-close{padding:0;width:28px;height:28px;top:5px;right:7px;background:transparent;color:var(--muted)}
.content{min-width:0;padding:18px 18px 28px}
.project-head{margin-bottom:14px}.project-head h1{font-size:24px}
.phase-navigation{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.phase-navigation button{border:1px solid var(--line);background:#fff;color:var(--blue-dark);padding:7px 12px;border-radius:8px;cursor:pointer;font-size:14px}
.phase-navigation button:disabled{opacity:.35;cursor:default}
.phase-navigation strong{font-size:15px;text-align:center}
.phase-navigation.phase-navigation-hidden{display:none}
.view-save-notice{display:block;color:#a52f38;margin-bottom:6px}.view-save-notice:empty{display:none}
.project-workspace{display:grid;grid-template-columns:minmax(190px,1fr) minmax(0,4fr);gap:12px;align-items:start}.tasks-column{grid-column:2;min-width:0}.documents-panel{grid-column:1;height:clamp(280px,62vh,760px);overflow:auto;border:1px solid var(--line);border-radius:12px;background:#e9eef2;filter:saturate(.7);padding:0 8px}.documents-title{position:sticky;top:0;z-index:1;margin:0 -8px 8px;padding:12px;font-weight:800;color:#486274;background:#dde5eb;border-bottom:1px solid #cbd6de}.documents-panel .position-list{overflow:visible}.documents-panel .document-storage{display:block;padding:0;border:0;background:transparent;min-height:0}.documents-panel .position-name{display:none}.documents-panel .task-files{padding:0}.documents-panel .task-file-list{flex-wrap:wrap;overflow:visible}.documents-panel .task-file-tile{flex-basis:82px;width:82px}
.phase-rail{display:grid;grid-template-columns:minmax(0,1fr);gap:0;align-items:start}
.phase-rail>.phase{position:relative;min-width:0;margin:0;height:clamp(280px,62vh,760px);display:flex;flex-direction:column;overflow:hidden}
.phase-rail>.phase-before{grid-column:1;grid-row:1;cursor:pointer}
.phase-rail>.phase-current{grid-column:1;grid-row:1;box-shadow:0 5px 20px #12334815}
.phase-rail>.phase-after{grid-column:3;grid-row:1;cursor:pointer}
.phase-rail>.phase-before::after,.phase-rail>.phase-after::after{content:'';position:absolute;inset:0;background:rgba(23,32,44,.62);z-index:2}
.phase-rail>.phase-before,.phase-rail>.phase-after{filter:grayscale(1);transform:scaleY(.96)}
.phase-rail .phase-title{flex:none;padding:10px 12px;overflow:hidden;min-height:44px}
.phase-rail .phase-title h2{font-size:15px;white-space:nowrap}
.phase-rail .position-list{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain}
.phase-rail .position{grid-template-columns:16px 24px minmax(0,1fr) 214px 24px;min-height:38px;padding:5px 8px;gap:3px}
.phase-rail .position-main{min-width:0;overflow-wrap:anywhere}
.phase-rail .position-name{font-size:14px}
.phase-rail .date{display:flex;gap:5px;align-items:center;grid-column:auto;grid-row:auto;width:auto;margin:0;min-width:0}
.phase-rail .date input{padding:3px 4px;font-size:12px;min-width:0;width:0;flex:1}
.phase-rail .date input[type=date]{flex:1.45}
.phase-rail .position.done .date{display:none}
.phase-rail .delete-position{grid-column:auto;grid-row:auto}
.phase-rail .toggle input{width:16px;height:16px;margin:0}
.phase-rail .position.done{grid-template-columns:14px 18px minmax(0,1fr);min-height:22px;padding-top:1px;padding-bottom:1px}
.phase-rail .position.done .position-name{font-size:11px}
.phase-rail .position.done .position-name{text-decoration:none}
.phase-rail .position.done .toggle input{width:13px;height:13px}
.phase-rail .add-position{flex:none;margin:0;padding:6px 8px;min-width:0}
.phase-rail .add-position input{min-width:0;font-size:13px;padding:5px}
.phase-rail .phase-before .position,.phase-rail .phase-after .position{width:440px}
.phase-rail .phase-before:focus-visible,.phase-rail .phase-after:focus-visible{outline:3px solid var(--blue)}
.add-phase{margin-top:14px;padding:10px}.add-phase input{padding:7px}.add-phase button{padding:9px 12px}
@media(max-width:1000px){.project-workspace{grid-template-columns:minmax(165px,1fr) minmax(0,3fr);gap:6px}.phase-rail{grid-template-columns:minmax(0,1fr);gap:0}.phase-rail .position{grid-template-columns:14px 22px minmax(0,1fr) 24px}.phase-rail .date{grid-column:3;grid-row:2;width:214px;max-width:100%}.phase-rail .delete-position{grid-column:4;grid-row:1}}
@media(max-width:800px){main{grid-template-columns:1fr}.content{padding:14px 6px}.phase-navigation button{font-size:12px;padding:7px}.phase-navigation strong{font-size:14px}}
@media(max-width:800px){
 body.mobile-project-open{overflow:hidden}
 .content{display:none}
 .mobile-project-open .content:not([hidden]){display:block;position:fixed;inset:0;z-index:50;width:100%;height:100dvh;max-height:none;overflow-y:auto;overflow-x:hidden;overscroll-behavior-y:contain;padding:0 4px 24px;background:#f3f7fa;-webkit-overflow-scrolling:touch}
 .mobile-project-open .mobile-project-bar{display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:5;background:#f3f7fa;border-bottom:1px solid var(--line);padding:calc(6px + env(safe-area-inset-top)) 8px 6px;font-size:13px;color:var(--blue-dark)}
 .mobile-project-bar button{border:1px solid var(--line);background:white;color:var(--blue-dark);border-radius:7px;width:36px;height:36px;padding:0;font-size:26px}
 .mobile-project-open .project-head{margin-top:12px}
 .mobile-project-open .phase-rail>.phase{height:auto;min-height:0;max-height:none;overflow:visible}
 .mobile-project-open .phase-rail .position-list{flex:none;height:auto;max-height:none;overflow:visible;overscroll-behavior:auto}
 .project-workspace{display:block}.tasks-column{min-width:0}.documents-panel{height:auto;max-height:none;margin-bottom:10px;filter:none}.documents-panel .task-file-list{flex-wrap:nowrap;overflow-x:auto}
 .content{padding-left:3px;padding-right:3px}
 .phase-rail{grid-template-columns:minmax(0,1fr);gap:0;touch-action:pan-y pinch-zoom}
 .phase-rail>.phase-current{grid-column:1;width:100%}
 .phase-rail>.phase-before,.phase-rail>.phase-after{display:none}
 .phase-navigation{gap:5px;padding:0 3px}
 .phase-navigation button{max-width:29%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .phase-navigation strong{min-width:0;flex:1}
 .project-head{padding:0 5px;flex-wrap:wrap}
}

/* One task-row layout for every user; only the allowed action differs. */
.phase-rail .position-delete-request{grid-column:5;grid-row:1;align-self:center;color:#be263c;border:1px solid #efb6c0;border-radius:50%;width:22px;height:22px;padding:0;background:#fff3f5}
@media(max-width:1000px){.phase-rail .position-delete-request{grid-column:4}}