/* Items use the available workspace. The toolbar and editor do not jump
   between modal and page layouts as images arrive. */
#drafts-page { position: relative; scroll-padding-top: var(--items-toolbar-height,200px); }
#drafts-page .items-viewport-toolbar {
  position: sticky; top: 0; z-index: 12; display: grid; gap: 8px;
  margin: -16px -20px 0; padding: 12px 20px 10px;
  background: var(--bg); border-bottom: 1px solid var(--line-soft);
}
#drafts-page .items-viewport-toolbar .drafts-header { position: static; }
#drafts-page .items-viewport-toolbar #drafts-batch-heading { margin: 0; }
#drafts-page .items-viewport-toolbar #drafts-browse-tools {
  display: flex; flex-wrap: wrap; align-items: end; gap: 8px; padding: 0;
}
#drafts-page #drafts-browse-tools .items-view-control { flex: 1 1 200px; max-width: 320px; }
#drafts-page #drafts-browse-tools #drafts-sort-control { flex: 0 1 200px; }
#drafts-page #drafts-browse-tools #items-mark-menu { flex: 0 0 auto; }
#drafts-page #items-search-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; min-height: 44px; padding: 0; }
#drafts-page #items-search-toggle[hidden] { display: none; }
#drafts-page #drafts-browse-tools .items-search-panel { flex: 1 0 100%; width: 100%; }
#drafts-page #drafts-browse-tools .items-search-panel[hidden] { display: none; }
#drafts-page #drafts-browse-tools .items-search-control { display: block; margin: 0; }
#drafts-page #drafts-browse-tools .items-search-control > span { display: none; }
#drafts-page #drafts-browse-tools #drafts-search { width: 100%; height: 44px; }
#drafts-page #drafts-grid {
  grid-template-columns: repeat(auto-fill,minmax(min(224px,100%),1fr)); gap: 12px;
}
#drafts-page .draft-card { min-width: 0; }
#drafts-page .draft-card img { height: clamp(150px,18dvh,210px); aspect-ratio: auto; object-fit: contain; }
#drafts-page .draft-card-title-open { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
#drafts-page .draft-card-content { padding: 12px; gap: 7px; }
#drafts-page .draft-card-open { position: relative; }
.viewport-photo-feedback {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px;
  background: var(--panel); color: var(--muted); font-size: 12px;
}
.viewport-photo-feedback button { min-height: 44px; padding: 6px 10px; }
img[data-viewport-photo="loading"] { background: var(--panel-2); }

#drafts-page > #draft-detail-dialog.viewport-editor[open] {
  position: absolute !important; inset: 0 !important; width: 100%; max-width: none;
  height: 100%; max-height: none; margin: 0; padding: 0;
  border: 0; border-radius: 0; box-shadow: none; overflow: hidden;
}
#draft-detail-dialog.viewport-editor #draft-detail-body {
  display: flex; flex-direction: column; height: 100%; min-height: 0;
  padding: 0; gap: 0; overflow: hidden;
}
#draft-detail-dialog.viewport-editor .draft-detail-header {
  position: static; margin: 0; padding: 10px 16px; flex: 0 0 auto;
}
#draft-detail-dialog.viewport-editor .draft-detail-header > div { flex-basis: auto; }
#draft-detail-dialog.viewport-editor .item-recall-tabs { flex: 0 0 auto; margin: 8px 16px; }
#draft-detail-dialog.viewport-editor .draft-group-members { flex: 0 0 auto; max-height: 100px; overflow: auto; margin: 0 16px; }
#draft-detail-dialog.viewport-editor .draft-review-fields { flex: 0 0 auto; margin: 8px 16px 12px; }
#draft-detail-dialog.viewport-editor .viewport-detail-content {
  display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr);
  flex: 1 1 0; min-height: 0; gap: 16px; padding: 0 16px;
}
#draft-detail-dialog.viewport-editor :is(.viewport-photo-pane,.viewport-listing-pane) {
  min-width: 0; min-height: 0; overflow: auto; overscroll-behavior: contain;
  padding-bottom: 12px; scrollbar-gutter: stable;
}
#draft-detail-dialog.viewport-editor .viewport-photo-pane { display: flex; flex-direction: column; gap: 12px; }
#draft-detail-dialog.viewport-editor .viewport-photo-pane > * { flex: 0 0 auto; }
#draft-detail-dialog.viewport-editor :is(.draft-photo-strip,.draft-evidence-grid) {
  grid-template-columns: repeat(auto-fill,minmax(min(144px,100%),1fr));
}
#draft-detail-dialog.viewport-editor :is(.draft-photo,.draft-evidence-photo) img {
  height: clamp(130px,16dvh,190px); aspect-ratio: auto; object-fit: contain;
}
#draft-detail-dialog.viewport-editor .draft-detail-actions {
  position: static; flex: 0 0 auto; margin: 0; padding: 10px 16px;
}
#draft-detail-dialog.viewport-editor > .draft-detail .item-history { flex: 0 0 auto; margin: 0 16px; max-height: 28dvh; overflow: auto; }
#draft-detail-dialog.viewport-editor .item-recalls-panel { flex: 1 1 0; min-height: 0; overflow: auto; margin: 0 16px; }
#draft-detail-dialog.viewport-editor [data-retained-inventory-forms] { max-height: 28dvh; overflow: auto; flex: 0 0 auto; }

@media(max-width:760px) {
  #drafts-page .items-viewport-toolbar { top: 0; margin: -12px -12px 0; padding: 8px 12px; }
  #drafts-page .items-viewport-toolbar .drafts-header { display: flex; flex-wrap: wrap; gap: 6px; }
  #drafts-page .items-viewport-toolbar .drafts-header > div:first-child { flex: 0 0 auto; }
  #drafts-page .items-viewport-toolbar .items-stage-tabs { margin: 0 0 0 auto; }
  #drafts-page .items-viewport-toolbar .items-header-actions { flex-basis: 100%; flex-wrap: wrap; justify-content: flex-start; gap: 6px; }
  #drafts-page .items-viewport-toolbar .items-header-actions :is(.button,summary) { font-size: 12px; padding-inline: 8px; }
  #drafts-page .items-viewport-toolbar #items-drafts-navigation { margin: 0; }
  #drafts-page #drafts-browse-tools .items-view-control { order: 1; flex: 1 1 calc(100% - 112px); max-width: none; }
  #drafts-page #drafts-browse-tools #items-search-toggle { order: 2; }
  #drafts-page #drafts-browse-tools #drafts-refresh { order: 3; }
  #drafts-page #drafts-browse-tools #items-mark-menu { order: 4; }
  #drafts-page #drafts-browse-tools #drafts-sort-control { order: 5; flex: 1 1 96px; min-width: 0; }
  #drafts-page #drafts-browse-tools #items-listing-issue-filter { order: 6; min-width: 0; font-size: 12px; }
  #drafts-page #drafts-browse-tools .items-search-panel { order: 7; }
  #drafts-page #drafts-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
  #drafts-page .draft-card img { height: 140px; }
  #drafts-page .draft-card-content { padding: 10px; }
  #draft-detail-dialog.viewport-editor .draft-detail-header { padding: 8px 12px; gap: 6px; }
  #draft-detail-dialog.viewport-editor .draft-detail-header > div { flex-basis: calc(100% - 50px); }
  #draft-detail-dialog.viewport-editor .draft-detail-header .button { min-height: 40px; padding: 6px 10px; font-size: 12px; }
  #draft-detail-dialog.viewport-editor .item-recall-tabs { margin: 6px 12px; }
  #draft-detail-dialog.viewport-editor .draft-review-fields { margin: 6px 12px 8px; }
  #draft-detail-dialog.viewport-editor .viewport-detail-content { display: block; overflow: auto; padding: 0 12px; }
  #draft-detail-dialog.viewport-editor :is(.viewport-photo-pane,.viewport-listing-pane) { overflow: visible; scrollbar-gutter: auto; }
  #draft-detail-dialog.viewport-editor .draft-photo-strip { display: flex; overflow-x: auto; gap: 8px; padding-bottom: 8px; }
  #draft-detail-dialog.viewport-editor .draft-photo { flex: 0 0 152px; min-width: 0; }
  #draft-detail-dialog.viewport-editor .photo-append { flex: 0 0 120px; }
  #draft-detail-dialog.viewport-editor .draft-detail-actions { padding: 8px 12px; flex-wrap: wrap; }
}
@media(prefers-reduced-motion:reduce) { #drafts-page * { scroll-behavior: auto; } }