/* css.slopped.site exhibit: The stockroom maze. From css/exhibits/maze.mjs. */
.x-maze .maze { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px; align-items: start; max-width: 760px; margin: auto; }
.x-maze .room { min-height: 220px; padding: 22px; border: 1.5px solid var(--ink); border-radius: 14px; background: var(--paper); scroll-margin-top: 30vh; }
.x-maze .room h3 { font-size: 30px; letter-spacing: -1px; }
.x-maze .room p { max-width: 46ch; margin: 10px 0 18px; font-size: 17px; }
.x-maze .exits { display: flex; flex-wrap: wrap; gap: 8px; }
.x-maze .goal { background: var(--acid); color: var(--on-acid); }
.x-maze .goal .pill { border-color: var(--on-acid); color: var(--on-acid); }
.x-maze .map { display: none; grid-template-columns: repeat(3, 28px); grid-template-rows: repeat(3, 28px); gap: 4px; }
.x-maze .m { border: 1.5px solid var(--ink); border-radius: 4px; }
/* key */
/* only the room the URL names is shown */
.x-maze .room { display: none; }
.x-maze .room:target { display: block; }

/* the way in is the last room in the document: shown until any other room becomes the target */
.x-maze #room-door { display: block; }
.x-maze .room:target ~ #room-door { display: none; }

/* the map: where the target is (needs :has(); without it, there's no map) */
@supports selector(:has(*)) {
  .x-maze .map { display: grid; }
  .x-maze .maze:not(:has(.room:target)) .m-door { background: var(--ink); }
  .x-maze .maze:has(#room-door:target) .m-door,
  .x-maze .maze:has(#room-loading:target) .m-loading,
  .x-maze .maze:has(#room-returns:target) .m-returns,
  .x-maze .maze:has(#room-chairs:target) .m-chairs,
  .x-maze .maze:has(#room-lamps:target) .m-lamps,
  .x-maze .maze:has(#room-mirrors:target) .m-mirrors,
  .x-maze .maze:has(#room-staff:target) .m-staff,
  .x-maze .maze:has(#room-boxes:target) .m-boxes,
  .x-maze .maze:has(#room-glass:target) .m-glass { background: var(--ink); }
}
/* /key */
@media (max-width: 560px) { .x-maze .maze { grid-template-columns: minmax(0, 1fr); } .x-maze .map { order: -1; } }

/* live support notes (built from css/exhibits.js) */
.sup-target .sup-no { display: none; }
@supports not selector(:target) { .sup-target .sup-yes { display: none; } .sup-target .sup-no { display: inline; } .sup-target { --sup: var(--no); } }
.sup-has .sup-no { display: none; }
@supports not selector(:has(*)) { .sup-has .sup-yes { display: none; } .sup-has .sup-no { display: inline; } .sup-has { --sup: var(--no); } }