/* Each Safehouse destination has one purpose: loot, tools, or atmosphere. */
.sh-loot-layout {display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); gap: 24px; align-items: start;}
.sh-inventory,.sh-collection {min-width: 0;}
.sh-storage-heading {margin: 0 0 14px;}
.sh-storage-heading .sh-section-label {margin-bottom: 7px; color: var(--amber2);}
.sh-storage-heading p {margin: 0; color: var(--dim); font: 12px/1.55 var(--body);}
.sh-collection {padding-left: 24px;}
.sh-collection .trophy-case {margin: 0;}
#sh-panel-workbench .tool-grid {grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px;}
#sh-panel-workbench .tool-card {padding: 16px; gap: 10px;}
#sh-panel-workbench .tool-card .tn {font-size: 14px;}
#sh-panel-workbench .tool-card .td {font-size: 12px; line-height: 1.5; flex: 1;}
#sh-panel-workbench .tool-card>.btn {align-self: flex-start; margin-top: 4px;}
#sh-panel-workbench .wb-lock {padding: 18px; margin: 0;}
#sh-panel-workbench .wb-lock .wn {font-size: 20px;}
#sh-panel-workbench .wb-lock .wd {font-size: 12px; line-height: 1.55;}
@media(max-width:650px) {
  .sh-loot-layout {grid-template-columns: minmax(0,1fr); gap: 24px;}
  .sh-collection {padding: 0;}
  .sh-storage-heading {margin-bottom: 12px;}
  #sh-panel-workbench .tool-grid {gap: 8px;}
  #sh-panel-workbench .tool-card {padding: 12px;}
  #sh-panel-workbench .tool-card .tn {font-size: 12px;}
  #sh-panel-workbench .wb-lock {flex-wrap: wrap; padding: 16px;}
  #sh-panel-workbench .wb-lock>.btn {margin-left: auto;}
}

/* Atmosphere in rows of two compact cards; with an odd number the free original spans the top row.
   The copy unfolds into the card grid, so the ownership status shares the bottom row with the
   button. Phones keep the single column from heistle-lab.css. */
@media(min-width:651px) {
  #mLoot :is(.lab-scene-list,.sh-music-grid) {grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px;}
  #mLoot .lab-scene-list:has(> :last-child:nth-child(odd)) > .lab-scene-card[data-scene="classic"] {grid-column: 1 / -1;}
  #mLoot :is(.lab-scene-card,.sh-music-card) {grid-template: "art title" auto "art copy" minmax(0,1fr) "status actions" auto / 96px minmax(0,1fr); align-items: start; gap: 4px 14px; padding: 13px 14px 12px;}
  #mLoot :is(.lab-scene-card,.sh-music-card) :is(.lab-scene-copy,.sh-music-copy) {display: contents;}
  #mLoot :is(.lab-scene-card,.sh-music-card) :is(.lab-scene-art,.sh-music-art) {grid-area: art; width: 96px; height: 60px;}
  #mLoot :is(.lab-scene-card,.sh-music-card) :is(.lab-scene-copy h3,.sh-music-title) {grid-area: title; font-size: 20px;}
  #mLoot :is(.lab-scene-card,.sh-music-card) :is(.lab-scene-copy p,.sh-music-description) {grid-area: copy; margin: 0; font-size: 11.5px;}
  #mLoot :is(.lab-scene-card,.sh-music-card) .sh-item-status {grid-area: status; align-self: center; margin: 8px 0 0;}
  #mLoot :is(.lab-scene-card,.sh-music-card) :is(.lab-scene-actions,.sh-item-actions) {grid-area: actions; align-self: end; min-width: 0; margin-top: 8px;}
  #mLoot :is(.lab-scene-card,.sh-music-card) .sh-item-offer {justify-content: space-between;}
  #mLoot :is(.lab-scene-card,.sh-music-card) .sh-item-offer .btn:only-child {margin-left: auto;}
}

/* The page behind the Safehouse must not retain its own scrollbar.
   Keep the stable gutter so opening and closing does not shift the page. */
html:has(#mLoot.show) {overflow-y: hidden;}
/* Reserve the 12px entrance travel below the shelf. Its animation can then
   finish without briefly making a fitting list scrollable. */
#sh-panel-atmosphere {padding-bottom: 20px;}
/* Only the open list scrolls: the Safehouse title, funds and tabs (and the atmosphere's own
   tabs) stay in view. Very short screens keep one scrolling sheet. */
@media(min-height:560px) {
  #lootBody {display: flex; flex-direction: column; overflow: hidden; padding-right: 0; scrollbar-gutter: auto;}
  #lootBody > .sh-chrome {flex: none;}
  #lootBody > .sh-panel:not([hidden]), #sh-panel-atmosphere > .sh-shelf:not([hidden]) {flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-gutter: stable; padding-right: 5px;}
  #lootBody > #sh-panel-atmosphere:not([hidden]) {display: flex; flex-direction: column; overflow: hidden; padding-right: 0; scrollbar-gutter: auto;}
  #sh-panel-atmosphere > .sh-subtabs {flex: none;}
  #sh-panel-atmosphere > .sh-shelf:not([hidden]) {min-height: 0;}
}
/* Loot beside the special finds: each column scrolls by itself. The finds keep their heading in view
   and scroll inside their cabinet, so browsing the wall leaves the loot to sell in place. Phones keep
   the one list, with the finds below the loot. */
@media(min-width:651px) and (min-height:560px) {
  #lootBody > #sh-panel-loot:not([hidden]) {display: flex; flex-direction: column; overflow: hidden; padding-right: 0; scrollbar-gutter: auto;}
  #sh-panel-loot > .sh-loot-layout {flex: 1 1 auto; min-height: 0; grid-template-rows: minmax(0,1fr); align-items: stretch;}
  #sh-panel-loot .sh-inventory {min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding-bottom: 16px;}
  #sh-panel-loot .sh-collection {display: flex; flex-direction: column; min-height: 0;}
  #sh-panel-loot .sh-collection > .sh-storage-heading {flex: none;}
  #sh-panel-loot .sh-collection > .trophy-case {flex: 0 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
    scrollbar-width: thin; scrollbar-color: #8a6d1f transparent;}
}