/* 桌面版三欄：把便利貼放在右側第三欄，減少來回上下捲動。 */
@media(min-width:1200px){
  .app{
    max-width:1800px;
    grid-template-columns:minmax(500px,1.3fr) minmax(250px,.56fr) minmax(470px,1.08fr)!important;
    align-items:start;
  }

  /* 日期欄多留一點寬度；快速新增現在有三個動作按鈕。 */
  .capture-row{grid-template-columns:minmax(260px,1fr) 150px 150px 175px auto auto auto!important}
  .capture-date-field input[type=date]{min-width:112px!important}

  .app-topbar,.capture{grid-column:1/-1!important}
  .focus-card{grid-column:1!important;grid-row:3!important;align-self:start}
  .today-completed-panel{grid-column:2!important;grid-row:3!important;align-self:start}
  .date-reminder-panel{grid-column:1/3!important;grid-row:4!important}
  .today-panel{grid-column:1/3!important;grid-row:5!important}
  .bottom-grid{grid-column:1/3!important;grid-row:6!important}

  .sticky-panel{
    grid-column:3!important;
    grid-row:3 / span 4!important;
    align-self:start;
    min-width:0;
    position:sticky;
    top:10px;
    max-height:none!important;
    overflow:visible!important;
  }
  .sticky-panel .sticky-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;align-items:start}
  /* 每一格便利貼都直接依內容往下長，不再出現格子內的捲軸。 */
  .sticky-panel .bucket{min-width:0;min-height:0;max-height:none!important;overflow:visible!important}
  .sticky-panel .sticky-item{grid-template-columns:7px 16px minmax(0,1fr)!important;align-items:start}
  .sticky-panel .sticky-item>.compact-actions{grid-column:3;display:flex;flex-wrap:wrap;justify-content:flex-start;margin-top:3px}
  .sticky-panel .inline-work-type,.sticky-panel .inline-work-type.compact{width:100%!important;max-width:100%}
  .sticky-panel .inline-date-editor,.sticky-panel .inline-date-editor.compact{flex-wrap:wrap;white-space:normal}
}

@media(min-width:1200px) and (max-width:1399px){
  .app{grid-template-columns:minmax(450px,1.2fr) minmax(230px,.55fr) minmax(410px,1fr)!important}
  .sticky-panel .sticky-grid{grid-template-columns:1fr!important}
}