/* P22e retains the existing Archivo/paper/terracotta controls, not the shell. */
.sync-slot{display:inline-flex;align-items:center;flex:0 1 auto;min-width:0;max-width:160px}
.sync-slot:has([hidden]){display:none}
.pc-head>.sync-slot{flex-shrink:0}
#filters{position:relative}
#filters:has(#syncState[data-sync="saving"]:not([hidden])){padding-right:32px}
#filters>.sync-slot{position:absolute;right:0;top:50%;translate:0 -50%;width:24px;max-width:24px;justify-content:flex-end;z-index:2}
#syncBanner:empty,#syncBanner:has([hidden]){display:none}
#syncBanner{width:100%;flex:none;position:relative;z-index:20;background:var(--surface)}
#syncBanner>.sync-slot{display:flex;width:100%;max-width:none}
#syncState{position:static;min-width:0;max-width:100%;padding:4px;border:0;background:transparent;color:var(--ink);font:12px var(--font-ui);white-space:normal;overflow-wrap:anywhere}
#syncState[data-sync="saving"]{width:24px;height:24px;flex:none;display:inline-grid;place-items:center}
#syncState[data-sync="saving"][hidden]{display:none}
#syncState[data-sync="saving"]::before{content:"";width:12px;height:12px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:shelf-sync-spin .8s linear infinite}
@keyframes shelf-sync-spin{to{rotate:360deg}}
#syncState[data-sync="offline"],#syncState[data-sync="updated"]{width:100%;height:44px;flex:1;white-space:nowrap;cursor:pointer;text-decoration:underline;background:var(--surface);border-radius:4px;font-size:14px}
.field-item-overlay>.sync-slot{order:-1;flex:none;align-self:flex-end;padding:4px 16px}
.shelf-filter-toggle{position:relative;min-height:44px;gap:8px}
.shelf-filter-toggle input{width:22px;height:22px;min-width:22px;min-height:22px;margin:11px;flex:none}
body[data-theme="workshop"] #shelfSelectBtn{background:var(--surface);color:var(--ink)}
.os-ctx-menu.shelf-filter-sheet{--filter-footer-height:64px;bottom:var(--dock-clear,0px);display:flex;flex-direction:column;overflow:hidden;padding:0}
.shelf-filter-scroll{min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:12px 12px var(--filter-footer-height);scroll-padding-bottom:var(--filter-footer-height)}
.shelf-filter-sheet .shelf-filter-footer{position:relative;bottom:auto;flex:0 0 var(--filter-footer-height);height:var(--filter-footer-height);box-sizing:border-box;margin:0;padding:10px 12px;background:var(--surface)}
body .field-item-overlay{bottom:var(--dock-clear,0px);--field-footer-height:calc(128px + env(safe-area-inset-bottom,0px))}
.field-item-overlay .field-item-footer{box-sizing:border-box;flex-shrink:0}
.field-item-overlay .field-item-scroll{padding-bottom:var(--field-footer-height);scroll-padding-bottom:var(--field-footer-height)}
.shelf-filter-section [hidden]{display:none!important}
.shelf-filter-section h3.shelf-filter-heading{margin:0;background:var(--surface)}
.shelf-filter-section[aria-label="Location"]>h3.shelf-filter-heading{position:sticky;top:-8px;z-index:2}
.shelf-filter-sheet .shelf-filter-footer{z-index:3}
.shelf-filter-heading>button{display:flex!important;align-items:center;justify-content:space-between;width:100%;min-height:44px;padding:8px!important;color:var(--muted);font:inherit;letter-spacing:inherit;text-transform:inherit;text-align:left;border-radius:0!important;background:var(--surface)!important}
.shelf-filter-heading>button::after{content:"›";font-size:18px;transform:rotate(0deg)}
.shelf-filter-heading>button[aria-expanded="true"]::after{transform:rotate(90deg)}
.shelf-location-tree{min-width:0}
.shelf-location-row{display:flex;align-items:stretch;gap:8px;min-width:0;padding-left:calc(var(--location-depth,0)*16px)}
.shelf-filter-section button.shelf-location-chevron,.shelf-location-spacer{box-sizing:border-box;flex:0 0 44px;width:44px;min-height:44px;padding:0!important;display:flex!important;align-items:center;justify-content:center}
.shelf-location-chevron span{display:block;font-size:20px}
.shelf-location-chevron[aria-expanded="true"] span{transform:rotate(90deg)}
.shelf-filter-section button.shelf-location-select{flex:1 1 0;min-width:0;min-height:44px;padding:6px 8px 6px 0;gap:6px}
.shelf-filter-section .shelf-location-select .shelf-category-name{display:flex;align-items:center;gap:7px;min-width:0;overflow:visible}
.shelf-filter-section .shelf-location-select .shelf-category-check{flex:0 0 16px}
.shelf-filter-section .shelf-location-select .shelf-option-label{display:block;white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere;line-height:1.4}
.shelf-location-copy{min-width:0}
.shelf-location-path{display:block;color:var(--muted);font-size:10px;line-height:1.4;overflow-wrap:anywhere;margin-top:2px}
.shelf-location-row.is-empty .shelf-location-select{color:var(--muted)}
.shelf-location-row.is-empty .shelf-location-select.ctx-on{color:var(--on-accent)}
.shelf-location-row.is-included .shelf-category-check{opacity:.4;color:var(--accent-strong)}
.shelf-filter-section button.shelf-location-empty-toggle{display:block;width:100%;min-height:44px;padding-left:calc(8px + var(--location-depth,0)*16px);text-align:left;color:var(--muted);font-size:12px}
.shelf-filter-section{margin:6px 0 12px;min-width:0}
.shelf-filter-section h3{margin:10px 8px 5px;color:var(--muted);font:600 11px/1.4 var(--font-ui);letter-spacing:.06em;text-transform:uppercase}
.shelf-filter-section .shelf-category-search{box-sizing:border-box;width:100%;min-width:0;margin:4px 0 8px}
.shelf-filter-section button.shelf-category-option{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:40px;text-align:left}
.shelf-filter-section .shelf-category-name{min-width:0;overflow:hidden}
.shelf-filter-section .shelf-option-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.shelf-filter-section .shelf-option-count{flex:0 0 auto;color:inherit;font-size:11px;font-variant-numeric:tabular-nums}
.shelf-filter-section button[hidden],.shelf-filter-empty[hidden]{display:none!important}
.shelf-filter-section .shelf-location-option{padding-left:calc(8px + min(var(--location-depth,0),5)*12px)}
.shelf-filter-toggle{display:flex;align-items:center;gap:8px;min-height:40px;padding:0 8px;font-size:12px}
.shelf-filter-toggle input{accent-color:var(--accent-strong)}
.shelf-filter-empty{padding:8px;color:var(--muted);font-size:12px}
.shelf-filter-menu:not(.shelf-filter-sheet){width:min(360px,calc(100vw - 16px));box-sizing:border-box}
.shelf-filter-search-header{display:flex;align-items:center;justify-content:space-between;gap:10px}
.shelf-filter-search-header strong{padding-left:8px}
.shelf-active-filter-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.shelf-active-filter-count{flex:0 0 auto;font-variant-numeric:tabular-nums}
dialog.shelf-active-filters{box-sizing:border-box;width:min(420px,calc(100vw - 24px));max-height:min(70dvh,560px);padding:16px;border:1px solid var(--line);border-radius:var(--r-lg,16px);background:var(--surface);color:var(--ink);box-shadow:var(--shadow-lg);overflow-y:auto}
dialog.shelf-active-filters::backdrop{background:var(--scrim)}
.shelf-active-filters header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}
.shelf-active-filters h2{margin:0;font:600 17px/1.3 var(--font-ui)}
.shelf-active-filter-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:7px 0;border-top:1px solid var(--line)}
.shelf-active-filter-row>span{min-width:0;overflow-wrap:anywhere;font-size:13px}
.shelf-active-filter-row button{flex:0 0 auto;min-height:40px}
.shelf-active-filters footer{position:sticky;bottom:-16px;margin-top:8px;padding:12px 0 0;background:var(--surface)}
.shelf-active-filters footer button{width:100%;min-height:44px}
/* P22 phone contract. Preserve the existing Archivo/paper/terracotta system.
   Strips own overflow; never mask a shell sizing bug at html/body. */
@media(max-width:700px){
  body{--shelf-safe-top:env(safe-area-inset-top,0px);padding-top:var(--shelf-safe-top)}
  #spacebar,.subbar,#shelfCategoryChips,header.topbar,#stage{flex-shrink:0}
  #stage{flex:1 1 auto;min-height:0}
  header.topbar{position:relative;z-index:31}
  .topbar #mLayoutBtn{padding-inline:5px;gap:3px;font-size:12px}
  .topbar .actions #mVFBtn,.topbar .actions #shelfSelectBtn{padding-inline:5px;font-size:12px}
  .topbar .search.shelfy-search-host{overflow:hidden}
  .topbar .search.shelfy-search-host input{padding-inline:8px var(--sync-search-padding,0px)!important;text-indent:0}
  .topbar .search.shelfy-search-host>.shelfy-search-chip{flex:0 0 58px;min-width:0;width:58px;padding-inline:3px;font-size:11px;margin-right:2px}
  .topbar #mLayoutBtn .shelf-view-prefix{color:inherit;font-weight:600;margin:0}
  .topbar #mLayoutBtn .mh-l{display:none}
  #layoutMenuPop.shelf-phone-view{min-width:220px;max-height:calc(100dvh - 90px);overflow-y:auto}
  #layoutMenuPop.shelf-phone-view .shelf-view-utilities{border-top:1px solid var(--line);margin-top:6px;padding-top:6px}
  #layoutMenuPop.shelf-phone-view .shelf-view-utilities>button{display:block;width:100%;min-height:44px;text-align:left}
  #layoutMenuPop.shelf-phone-view [aria-pressed="true"]{color:var(--accent-ink)}
  .grid-workspace,.grid-tools,.grid-chips{min-width:0;max-width:100%}
  .grid-tools .grid-chips{overflow-x:auto;flex:1 1 0}
  .grid-tools .grid-chips>*{flex:0 0 auto}
  .grid-tools>.grid-actions{display:none}
  .shelf-phone-utilities,.grid-tools:has(>.grid-actions):not(:has(>.grid-chips)){display:none}
  /* List is a real row, not a clipped wide desktop table. */
  body:not(.shelf-phone-table) .grid-workspace[data-grid-text] .grid-table-wrap>.grid-table{display:block;width:100%;min-width:0}
  body:not(.shelf-phone-table) .grid-workspace .grid-table>colgroup,body:not(.shelf-phone-table) .grid-workspace .grid-table>thead{display:none}
  body:not(.shelf-phone-table) .grid-workspace .grid-table>tbody{display:block;width:100%}
  body:not(.shelf-phone-table) .grid-workspace .grid-table tr.grid-row{display:grid;grid-template-columns:48px minmax(0,1fr);column-gap:10px;align-items:center;min-height:69px;padding:10px;border-bottom:1px solid var(--line)}
  body:not(.shelf-phone-table) .grid-workspace .grid-table tr.grid-row>td{display:none;position:static;height:auto;width:auto;min-width:0;padding:0;border:0;background:transparent}
  body:not(.shelf-phone-table) .grid-workspace .grid-table tr.grid-row>.grid-thumb-cell{display:block;grid-column:1;grid-row:1}
  body:not(.shelf-phone-table) .grid-workspace[data-grid-text] .grid-table .grid-thumb{width:48px;height:48px}
  body:not(.shelf-phone-table) .grid-workspace .grid-table tr.grid-row>.grid-name{display:block;position:relative;grid-column:2;max-width:none;font-size:14px;line-height:18px;white-space:normal}
   body:not(.shelf-phone-table) .grid-workspace .grid-name-text{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;overflow-wrap:normal}
  body:not(.shelf-phone-table) .grid-workspace .grid-name-meta{display:flex;gap:4px;align-items:center;font-size:11px;line-height:14px;font-weight:400;margin-top:3px;white-space:nowrap}
  body:not(.shelf-phone-table) .grid-workspace .grid-name-meta-copy{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  body:not(.shelf-phone-table) .grid-workspace .grid-name-meta-dot{flex:0 0 7px;height:7px;border-radius:50%}
  body:not(.shelf-phone-table) .grid-workspace .grid-table tr.grid-row>.grid-quantity-multiple{display:none}
  .grid-phone-quantity{flex:none;white-space:nowrap}
  body:not(.shelf-phone-table) .grid-workspace .grid-name-icons{position:absolute;right:0;bottom:0;margin:0;height:14px}
  body:not(.shelf-phone-table) .grid-workspace .grid-name:has(.grid-name-icons) .grid-name-meta{padding-right:19px}
  /* A failed save replaces the metadata line rather than being hidden or
     increasing row density. Keep the full message available on the element. */
  body:not(.shelf-phone-table) .grid-workspace .grid-name:has(.grid-row-message) .grid-name-meta{display:none}
  body:not(.shelf-phone-table) .grid-workspace .grid-row-message{display:block;font-size:11px;line-height:14px;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  body.sel-mode:not(.shelf-phone-table) .grid-workspace .grid-table tr.grid-row{grid-template-columns:30px 48px minmax(0,1fr);gap:0 8px}
  body.sel-mode:not(.shelf-phone-table) .grid-workspace .grid-table tr.grid-row>.grid-check{display:block;grid-column:1;grid-row:1}
  body.sel-mode:not(.shelf-phone-table) .grid-workspace .grid-table tr.grid-row>.grid-thumb-cell{grid-column:2}
  body.sel-mode:not(.shelf-phone-table) .grid-workspace .grid-table tr.grid-row>.grid-name,
  body.sel-mode:not(.shelf-phone-table) .grid-workspace .grid-table tr.grid-row>.grid-quantity-multiple{grid-column:3}
  /* Phone Table reuses the sortable rows with compact, centred cells. */
  body.shelf-phone-table .grid-workspace[data-grid-text] .grid-table{display:block;width:100%;min-width:0;max-width:100%}
  body.shelf-phone-table .grid-workspace .grid-table colgroup{display:none}
  body.shelf-phone-table .grid-workspace .grid-table :is(thead,tbody){display:block;width:100%}
  body.shelf-phone-table .grid-workspace .grid-table tr{display:flex;width:100%}
  body.shelf-phone-table .grid-workspace .grid-table :is(th,td){display:none;box-sizing:border-box;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  body.shelf-phone-table .grid-workspace .grid-table :is(th,td):nth-child(3){display:block;flex:1 1 55%;width:auto;min-width:55%;max-width:none}
  body.shelf-phone-table .grid-workspace .grid-table :is(th,td):nth-child(4){display:block;flex:0 1 auto;width:max-content;max-width:35%}
  body.shelf-phone-table .grid-workspace .grid-table.grid-phone-category-groups :is(th,td):nth-child(4){display:none}
  body.shelf-phone-table .grid-workspace[data-grid-text] .grid-table tr.grid-row>td{height:56px;padding-top:0;padding-bottom:0;align-content:center}
  body.shelf-phone-table .grid-workspace[data-grid-text] .grid-table .grid-thumb-cell{display:block;flex:0 0 52px;width:52px;padding-left:6px;padding-right:6px}
  body.shelf-phone-table .grid-workspace[data-grid-text] .grid-thumb{box-sizing:border-box;width:40px;height:40px}
  body.shelf-phone-table .grid-workspace .grid-table .grid-group-row td{display:block;width:100%;max-width:none;flex:1}
  body.shelf-phone-table.sel-mode .grid-workspace .grid-table .grid-check{display:block;flex:0 0 var(--target-min);width:var(--target-min)}
  body.shelf-phone-table:not(.sel-mode) .grid-workspace .grid-table .grid-check{display:none}
  body.shelf-phone-table .grid-workspace .grid-name-meta{display:none}
  /* Overlay contract: the main scroller ALWAYS occupies the same rectangle
     below the collapsed toolbar. Its permanent leading padding accounts for
     the expanded strips. Scrolling consumes that padding naturally; collapsing
     changes only the chrome's paint, never scrollHeight or the content anchor. */
  body.shelf-inventory-view #stage{position:absolute;top:calc(var(--shelf-safe-top) + var(--shelf-toolbar-h,56px));bottom:0;left:0;z-index:0}
  body.shelf-inventory-view #stage>.scroller{padding-top:calc(var(--shelf-strips-h,0px) + 16px)}
  #spacebar,.subbar{position:relative;z-index:20;background:var(--surface)}
  #spacebar,header.topbar,.subbar{transition:transform .18s ease,opacity .18s ease}
  body.shelf-phone-collapsed #spacebar{transform:translateY(-100%);opacity:0;pointer-events:none}
  body.shelf-phone-collapsed header.topbar{transform:translateY(calc(-1 * var(--shelf-tabs-h,0px)))}
  body.shelf-phone-collapsed .subbar{transform:translateY(calc(-1 * var(--shelf-strips-h,0px)));opacity:0;pointer-events:none}
}
@media(max-width:700px){
  .grid-tools>.grid-chips{display:none}
  .grid-tools:has(>.grid-chips){display:none}
  dialog.shelf-active-filters{position:fixed;inset:auto 0 0;margin:0;width:100%;max-width:none;padding:16px 16px calc(16px + env(safe-area-inset-bottom));border-radius:var(--r-xl,20px) var(--r-xl,20px) 0 0}
  .shelf-active-filters footer{bottom:calc(-16px - env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom)}
}
@media(min-width:601px){
  .grid-tools>.grid-chips{display:none}
  .grid-tools:has(>.grid-chips):not(:has(>.grid-actions,>.shelf-table-tools)){display:none}
}
@media(prefers-reduced-motion:reduce){
  #spacebar,header.topbar,.subbar,#shelfCategoryChips,#stage{transition:none}
}