/* work-surface 캐스케이드 4/7 — 셸·툴바·레이아웃·사이드패널의 공유 반응형 오버라이드.
   원본 시트에서 캘린더 뒤·SPA 셸 앞에 놓여 있던 위치를 그대로 지킨다.
   ax-work-surface-timeline-calendar.css 바로 다음에 로드된다. 로드 순서가 곧 캐스케이드다. */

@container work-review (max-width: 760px) {
  .work-review-header {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

  .work-review-toolbar {
    width: 100%;
    gap: 6px;
  }

  .work-filter-row {
    gap: 8px;
  }

  .work-filter-field,
  .work-toolbar-actions {
    gap: 6px;
  }
}

@media (max-width: 1080px) {
  .ax-layout--list-detail,
  .ax-layout--board-detail,
  .ax-layout--rail {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 720px) {
  .ax-page {
    padding: 20px 16px;
  }

  .ax-page-header,
  .ax-toolbar,
  .ax-action-row,
  .ax-panel-header {
    flex-direction: column;
    align-items: stretch;
  }

  .ax-action-row {
    justify-content: flex-start;
  }

  .work-review-toolbar,
  .work-filter-row,
  .work-toolbar-actions {
    width: 100%;
    justify-items: stretch;
    justify-content: stretch;
  }

  .work-review-header {
    grid-template-columns: minmax(0, 1fr);
  }

  .work-review-toolbar {
    align-items: stretch;
  }

  .work-filter-row {
    flex-wrap: wrap;
  }

  .work-filter-field {
    display: grid;
  }

  .work-filter-field,
  .work-filter-field > *,
  .work-lifecycle-switch,
  .scope-switch--single {
    width: 100%;
  }

  .work-lifecycle-option,
  .scope-switch--single .scope-chip {
    flex: 1 1 0;
    justify-content: center;
  }

  .ax-action-row > * {
    flex: 1 1 auto;
  }

  .ax-button,
  .ax-button:visited {
    width: 100%;
  }

  .ax-button--link,
  .ax-button--link:visited {
    justify-content: center;
  }

  .ax-panel-header,
  .ax-panel-body {
    padding-left: 16px;
    padding-right: 16px;
  }

  .ax-detail-sidepanel {
    width: 100vw;
    border-left: none;
  }

  .ax-detail-sidepanel-header,
  .ax-detail-sidepanel-body {
    padding-left: 16px;
    padding-right: 16px;
  }
}