/* Compact shared hierarchy. Control sizes and data behavior remain independent. */
html:root {
  --page-inset-block: 16px;
  --page-inset-inline: 20px;
  --page-section-gap: 12px;
}
@media (min-width: 761px) {
  body #app { grid-template-rows: calc(56px + var(--safe-top)) minmax(0,1fr); }
  body #app > .topbar { height: calc(56px + var(--safe-top)); padding-top: var(--safe-top); }
  #app .top-actions { padding-top: 14px; gap: 2px; }
  #app .navigation-tools-caption { margin-top: 16px; }
}
#app > :is(.home-page,.labels-page,.intake-page,.drafts-page,.inventory-page,.sourcing-page,.shipping-page,.remotes-page,.return-page,.change-requests-page,.business-page) {
  padding: var(--page-inset-block) var(--page-inset-inline) 32px;
  scroll-padding-block: var(--page-inset-block) 88px;
}
#app :is(.home-heading,.intake-header,.shipping-header,.sourcing-header,.return-header,.supplies-header,.remotes-header,.labels-heading,.business-heading,.change-requests-shell > header) {
  gap: 10px; margin-bottom: var(--page-section-gap); align-items: center;
}
#app :is(.home-heading,.intake-header,.drafts-header,.shipping-header,.sourcing-header,.return-header,.supplies-header,.remotes-header,.labels-heading,.business-heading,.change-requests-shell > header,.supplies-catalog-header) h1 {
  margin: 0; font-size: 26px; line-height: 1.25;
}
#app :is(.labels-heading,.business-heading) p { margin: 4px 0 0; }
#app :is(.home-heading,.intake-header,.shipping-header,.sourcing-header,.return-header,.supplies-header,.remotes-header,.labels-heading,.business-heading,.change-requests-shell > header) .button { min-height: 44px; }
#app :is(.workspace-subtabs,.drafts-tabs,.sourcing-tabs,.shipping-view-tabs) {
  margin-block: 0 var(--page-section-gap); padding: 3px;
}
#app :is(.workspace-subtabs,.drafts-tabs,.sourcing-tabs,.shipping-view-tabs) button { min-height: 44px; padding-block: 8px; }
#app :is(.supplies-header-actions,.remotes-header-actions,.home-heading-actions,.supplies-catalog-actions) { gap: 8px; flex-wrap: wrap; }
#app .shipping-toolbar { gap: 10px; margin-bottom: var(--page-section-gap); }
#app .sourcing-shell > .sourcing-quick-card { margin-bottom: var(--page-section-gap); padding: 16px; }
#app .home-shortcuts { margin-bottom: var(--page-section-gap); }
#app .home-work > header { gap: 10px; margin-bottom: var(--page-section-gap); }
#app .business-controls { gap: 10px; margin-block: var(--page-section-gap); }
#app .business-controls :is(input:not([type="checkbox"]),select) { min-height: 44px; }
#app .business-heading .button { min-height: 44px; }
#app .inventory-page .browser-header { padding-bottom: 10px; }
#app .inventory-page .browser-controls { padding-block: 8px; gap: 10px; }
#app .supplies-catalog { padding: var(--page-inset-block) var(--page-inset-inline) 32px; }
#app .supplies-catalog-header { gap: 10px; margin-bottom: var(--page-section-gap); }
#app .supplies-catalog-toolbar { gap: 8px; }
#app #supplies-summary { margin-block: 10px; }
#app .message-inbox-heading { padding: 12px 14px 8px; }
#app .message-filter-row { margin-block: 8px; }
#app .message-inbox :is(input[type="search"],select,.button) { min-height: 44px; }
#app .message-filter-row select { font-size: 14px; }
#app .message-more-filters > summary { min-height: 44px; padding-block: 10px; }

/* Items: one page/stage header, a contextual batch row, then browse and selection. */
#drafts-page .drafts-shell { max-width: none; gap: 10px; }
#drafts-page .drafts-header { position: static; margin: 0; padding: 0; gap: 10px; align-items: center; }
#drafts-page .items-eyebrow { display: none; }
#drafts-page .items-stage-tabs { margin: 0 auto 0 4px; padding: 3px; flex-basis: auto; }
#drafts-page .items-stage-tabs button { min-height: 44px; padding: 8px 16px; }
.items-header-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
#drafts-page .items-add-item { white-space: nowrap; }
#drafts-page:not(:has(#drafts-batch-heading:not([hidden]))):not(:has(#drafts-selection-tools:not([hidden]))) .items-add-item {
  background: var(--action); border-color: var(--action); color: #fff;
}
#drafts-page:has(#drafts-batch-heading:not([hidden])) #items-pricing-queue { display: none; }
#drafts-page .drafts-inventory-menu > summary { min-height: 44px; padding: 10px; }
#drafts-page .drafts-inventory-menu > div { max-height: min(60dvh,420px); overflow: auto; z-index: 35; }
.items-batch-context { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 6px 12px; padding-block: 4px 10px; border-bottom: 1px solid var(--line-soft); min-width: 0; }
.items-batch-context:not(:has(> :not([hidden]))) { display: none; }
#drafts-page .drafts-batch-heading { gap: 10px; min-width: 0; }
#drafts-page .drafts-batch-heading button { min-height: 44px; padding: 8px 0; font-size: 13px; }
#drafts-page .drafts-batch-heading h2 { margin: 0; font-size: 18px; line-height: 1.3; overflow-wrap: anywhere; }
#drafts-page #drafts-batch-history { position: relative; margin: 0; padding: 0; border: 0; }
#drafts-page #drafts-batch-history > summary { min-height: 44px; padding: 10px; font-size: 13px; cursor: pointer; }
#drafts-page #drafts-batch-history-items { position: absolute; top: calc(100% + 4px); right: 0; z-index: 35; width: min(600px,calc(100vw - 40px)); max-height: 50dvh; overflow: auto; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); box-shadow: 0 12px 32px #0003; }
#drafts-page .drafts-batch-actions { grid-column: 1 / -1; gap: 8px; padding: 0; border: 0; border-radius: 0; background: transparent; flex-wrap: wrap; }
#drafts-page .drafts-batch-actions > div { flex: 1 1 240px; min-width: 0; }
#drafts-page .drafts-batch-actions strong { margin-bottom: 2px; }
#drafts-page .drafts-batch-actions p { font-size: 13px; }
#drafts-page .drafts-batch-actions .button { min-height: 44px; }

/* Labels and natural select widths keep the current view and sort legible. */
#drafts-page #drafts-browse-tools {
  grid-template-columns: minmax(190px,220px) minmax(220px,1fr) minmax(190px,220px) 106px 44px;
  gap: 8px 10px; padding: 10px 0; border: 0; border-radius: 0; background: transparent; align-items: end;
}
#drafts-page #drafts-browse-tools :is(.items-view-control,.items-search-control,#drafts-sort-control) {
  display: grid; gap: 4px; min-width: 0; margin: 0; font-size: 12px; font-weight: 600; color: var(--muted);
}
#drafts-page #drafts-browse-tools .items-view-control { grid-column: 1; grid-row: 1; }
#drafts-page #drafts-browse-tools .items-search-control { grid-column: 2; grid-row: 1; }
#drafts-page #drafts-browse-tools .items-search-control > span { display: block; }
#drafts-page #drafts-browse-tools .items-search-control:has(#drafts-search[hidden]) { display: none; }
#drafts-page #drafts-browse-tools #drafts-search { grid-area: auto; height: 44px; min-height: 44px; font-size: 16px; font-weight: 400; color: var(--text); }
#drafts-page #drafts-browse-tools #drafts-sort-control { grid-column: 3; grid-row: 1; white-space: normal; }
#drafts-page #drafts-browse-tools #items-mark-menu { grid-column: 4; grid-row: 1; min-height: 44px; }
#drafts-page #items-mark-menu::before { content: none; }
#drafts-page #items-mark-menu > summary { min-height: 44px; justify-content: flex-start; gap: 6px; padding: 8px 10px; }
#drafts-page #items-mark-menu > summary::after { content: "▾"; margin-left: auto; }
#drafts-page #items-mark-menu[open] > summary::after { content: "▴"; }
#drafts-page #drafts-browse-tools #drafts-refresh { grid-column: 5; grid-row: 1; width: 44px; height: 44px; padding: 0; }
#drafts-page :is(#drafts-view-select,#drafts-sort) { width: 100%; max-width: none; height: 44px; min-height: 44px; margin: 0; padding: 8px 28px 8px 10px; font-size: 16px; font-weight: 400; color: var(--text); background: var(--panel); }
#drafts-page #drafts-status-filter { top: calc(100% + 6px); right: 0; left: auto; bottom: auto; width: min(360px,calc(100vw - 32px)); max-height: min(55dvh,440px); overflow: auto; }
#drafts-page #drafts-status-filter .draft-mark-filters { grid-template-columns: minmax(0,1fr); gap: 2px; }
#drafts-page #drafts-status-filter .draft-mark-filters label { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px; font-size: 14px; cursor: pointer; }
#drafts-page #drafts-status-filter .draft-mark-filters input { flex: 0 0 18px; width: 18px; height: 18px; min-height: 18px; margin: 0; }

/* Selection tools operate on the same nodes and IDs as the existing application. */
#drafts-page .drafts-results-bar { min-height: 44px; gap: 8px; }
#drafts-page .drafts-select-shown { min-height: 44px; font-size: 13px; }
#drafts-page .drafts-select-shown input { accent-color: var(--action); }
#drafts-page #drafts-pick-tools > summary { min-height: 44px; padding: 10px; font-size: 13px; }
#drafts-page .drafts-pick-shortcut { align-items: end; max-width: calc(100vw - 32px); }
.items-count-control { display: grid; gap: 4px; font-size: 12px; color: var(--muted); }
#drafts-page #drafts-select-count { width: 100%; min-width: 84px; }
#drafts-page #drafts-clear-filter { min-height: 44px; }
#drafts-page #drafts-selection-tools { position: sticky; top: 0; z-index: 12; padding: 8px 0; border: 0; border-block: 1px solid var(--line-soft); border-radius: 0; background: var(--bg); }
#drafts-page #drafts-selection-tools .inventory-selection { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
#drafts-page #drafts-selection-tools .inventory-selection > div { flex: 1 1 180px; min-width: 0; }
#drafts-page #drafts-selection-tools .inventory-selection > .button { flex: 0 1 auto; min-height: 44px; }
#drafts-page #drafts-selection-tools .inventory-selection:has(#drafts-stage[hidden]) #drafts-move-selected { background: var(--action); border-color: var(--action); color: #fff; }
.items-selection-more { position: relative; }
.items-selection-more > summary { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2); font-size: 14px; list-style: none; }
.items-selection-more > summary::-webkit-details-marker { display: none; }
.items-selection-more > summary::after { content: "▾"; padding-left: 8px; }
.items-selection-more[open] > summary::after { content: "▴"; }
.items-selected-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 35; display: grid; gap: 4px; width: min(290px,calc(100vw - 32px)); max-height: min(55dvh,420px); overflow: auto; padding: 6px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); box-shadow: 0 12px 32px #0003; }
.items-selected-menu .button { justify-content: flex-start; width: 100%; min-height: 44px; white-space: normal; text-align: left; }
.items-selection-more:not(:has(.items-selected-menu > button:not([hidden]))) { display: none; }
#drafts-page :is(button,summary,input,select):focus-visible { outline: 2px solid var(--action); outline-offset: 3px; }

@media (min-width: 761px) and (max-width: 1180px) {
  #drafts-page #drafts-browse-tools { grid-template-columns: minmax(190px,1fr) minmax(190px,1fr) 106px 44px; }
  #drafts-page #drafts-browse-tools .items-search-control { grid-column: 1 / 4; grid-row: 1; }
  #drafts-page #drafts-browse-tools #drafts-refresh { grid-column: 4; grid-row: 1; }
  #drafts-page #drafts-browse-tools .items-view-control { grid-column: 1; grid-row: 2; }
  #drafts-page #drafts-browse-tools #drafts-sort-control { grid-column: 2; grid-row: 2; }
  #drafts-page #drafts-browse-tools #items-mark-menu { grid-column: 3 / 5; grid-row: 2; }
}
@media (max-width: 760px) {
  html:root { --page-inset-block: 12px; --page-inset-inline: 12px; --page-section-gap: 10px; --mobile-header-height: calc(56px + var(--safe-top)); }
  #app > :is(.home-page,.labels-page,.intake-page,.drafts-page,.inventory-page,.sourcing-page,.shipping-page,.remotes-page,.return-page,.change-requests-page,.business-page) { padding-inline: calc(var(--page-inset-inline) + var(--safe-left)) calc(var(--page-inset-inline) + var(--safe-right)); }
  #app :is(.home-heading,.intake-header,.drafts-header,.shipping-header,.sourcing-header,.return-header,.supplies-header,.remotes-header,.labels-heading,.business-heading,.change-requests-shell > header,.supplies-catalog-header) h1 { font-size: 23px; }
  #app .supplies-catalog { padding-inline: calc(var(--page-inset-inline) + var(--safe-left)) calc(var(--page-inset-inline) + var(--safe-right)); }
  #app .home-work > header, .change-requests-shell > header { top: -12px; }
  #app .home-work-controls { top: -12px; padding-block: 8px; }
  #app .message-inbox :is(input[type="search"],select) { font-size: 16px; }
  #drafts-page .drafts-header { flex-wrap: wrap; gap: 8px; }
  #drafts-page .drafts-header > div:first-child { flex: 0 0 auto; }
  #drafts-page .items-stage-tabs { margin: 0 0 0 auto; order: 0; flex-basis: auto; min-width: 0; }
  #drafts-page .items-stage-tabs button { flex: 1 1 auto; min-width: 0; padding-inline: 10px; font-size: 13px; }
  .items-header-actions { flex: 1 0 100%; justify-content: flex-start; }
  #drafts-page .drafts-inventory-menu { margin-left: auto; }
  #drafts-page .drafts-inventory-menu > summary { font-size: 13px; }
  #drafts-page #items-pricing-queue { font-size: 13px; }
  .items-batch-context { gap: 4px 8px; }
  #drafts-page .drafts-batch-heading { gap: 8px; }
  #drafts-page .drafts-batch-heading h2 { font-size: 16px; }
  #drafts-page #drafts-batch-history > summary { padding-inline: 0; font-size: 12px; }
  #drafts-page .drafts-batch-actions > div { flex-basis: 100%; }
  #drafts-page .drafts-batch-actions > .button { flex: 1 1 120px; padding-inline: 10px; font-size: 13px; }
  #drafts-page #drafts-browse-tools { grid-template-columns: minmax(0,1fr) 86px; padding-block: 4px; gap: 8px; }
  #drafts-page #drafts-browse-tools .items-search-control { grid-column: 1; grid-row: 1; }
  #drafts-page #drafts-browse-tools .items-search-control > span { display: none; }
  #drafts-page #drafts-browse-tools #drafts-refresh { grid-column: 2; grid-row: 1; justify-self: end; }
  #drafts-page #drafts-browse-tools .items-view-control { grid-column: 1 / -1; grid-row: 2; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: 8px; }
  #drafts-page #drafts-browse-tools #drafts-sort-control { grid-column: 1; grid-row: 3; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: 8px; }
  #drafts-page #drafts-browse-tools #items-mark-menu { grid-column: 2; grid-row: 3; }
  #drafts-page #drafts-status-filter { position: fixed; top: auto; bottom: calc(var(--mobile-nav-height) + 12px); left: calc(12px + var(--safe-left)); right: calc(12px + var(--safe-right)); width: auto; max-height: calc(100dvh - var(--mobile-header-height) - var(--mobile-nav-height) - 92px); }
  #drafts-page #drafts-batch-history-items, .items-selected-menu { position: fixed; top: auto; bottom: calc(var(--mobile-nav-height) + 12px); left: calc(12px + var(--safe-left)); right: calc(12px + var(--safe-right)); width: auto; max-height: calc(100dvh - var(--mobile-header-height) - var(--mobile-nav-height) - 92px); }
  #drafts-page #drafts-selection-tools .inventory-selection > div { flex-basis: calc(100% - 120px); }
  #drafts-page #drafts-selection-tools .items-clear-selection { order: -1; }
  #drafts-page #drafts-selection-tools .inventory-selection > div { order: -2; }
  #drafts-page #drafts-selection-tools .inventory-selection > .button:not(.items-clear-selection), .items-selection-more { flex: 1 1 90px; }
  #drafts-page #drafts-selection-tools .inventory-selection > .button { padding-inline: 10px; font-size: 13px; }
}
@media (max-width: 380px) {
  #drafts-page .drafts-batch-heading { flex-wrap: wrap; gap: 0 8px; }
  #drafts-page .drafts-batch-heading h2 { flex: 1 0 100%; }
  #drafts-page #drafts-selection-tools .inventory-selection > div { flex-basis: 100%; }
  #drafts-page #drafts-selection-tools .items-clear-selection { order: 0; flex: 1 1 90px; }
}

#drafts-page .drafts-pick-shortcut .items-count-control { min-width: 0; flex: 1; }
#drafts-page #drafts-select-number { white-space: normal; min-height: 44px; }