/* Artwork aisle is a full-stage presentation of the current scope. */
.aisle-host { position:absolute; inset:0; overflow:hidden; min-width:0; background:#050510; color:#f3f3f7; isolation:isolate; }
.aisle-host[hidden] { display:none; }
.aisle-canvas { display:block; width:100%; height:100%; touch-action:none; cursor:grab; }
.aisle-canvas:focus-visible { outline:3px solid #aaffaa; outline-offset:-4px; }
.aisle-labels { position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.aisle-cohort-label { position:absolute; display:block; max-width:min(250px, calc(100% - 24px)); padding:6px 10px; border:1px solid #697476; border-radius:5px; background:rgba(5,5,16,.96); color:#f3f3f7; font:600 16px/1.35 system-ui,sans-serif; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.aisle-cohort-label[hidden] { display:none; }
.aisle-toolbar { position:absolute; bottom:34px; left:12px; right:12px; display:flex; align-items:end; gap:12px; max-width:820px; margin:auto; padding:10px 12px; border:1px solid #697476; border-radius:8px; background:rgba(5,5,16,.96); font:16px/1.3 system-ui,sans-serif; }
.aisle-toolbar label { display:flex; flex-direction:column; gap:4px; min-width:0; color:#f3f3f7; }
.aisle-travel { flex:1 1 180px; }
.aisle-toolbar input[type=range] { display:block; width:100%; min-width:0; min-height:44px; margin:0; accent-color:#aaffaa; touch-action:pan-y; }
.aisle-toolbar select,.aisle-toolbar button { box-sizing:border-box; min-height:44px; min-width:44px; border:1px solid #697476; border-radius:5px; padding:8px; background:#141421; color:#f3f3f7; font:16px/1.3 system-ui,sans-serif; }
.aisle-toolbar select { width:100%; text-overflow:ellipsis; }
.aisle-toolbar button { cursor:pointer; flex:0 0 auto; }
.aisle-toolbar :focus-visible { outline:3px solid #aaffaa; outline-offset:2px; }
.aisle-toolbar :disabled { color:#bcbcc9; cursor:default; }
.aisle-help { position:absolute; left:12px; right:12px; bottom:5px; margin:0; text-align:center; font:16px/1.3 system-ui,sans-serif; color:#f3f3f7; background:rgba(5,5,16,.96); pointer-events:none; }
.aisle-status { position:absolute; top:12px; left:12px; right:12px; z-index:1; margin:0; padding:12px; border:1px solid #697476; border-radius:6px; color:#f3f3f7; background:#141421; font:16px/1.45 system-ui,sans-serif; }
.aisle-status[hidden] { display:none; }
@media (max-width:600px) {
  .aisle-toolbar { left:8px; right:8px; bottom:8px; gap:6px 8px; padding:8px; flex-wrap:wrap; }
  .aisle-travel { flex:1 0 100%; flex-direction:row!important; align-items:center; gap:10px!important; white-space:nowrap; }
  .aisle-travel input { flex:1; }
  .aisle-help { display:none; }
}

/* The image warehouse (warehouse-show.mjs). Its caption is ink on an opaque
 * white plate, 20.3:1 whatever rack passes behind it. The aisle's own labels and
 * controls wait out the show and come up as the lights go down. */
.warehouse-caption { position:absolute; top:12%; left:6%; right:6%; z-index:2; display:grid; justify-items:center; margin:0; pointer-events:none; }
.warehouse-caption > span { grid-area:1/1; max-width:100%; padding:.12em .45em; background:#ffffff; color:#050510; text-align:center; text-wrap:balance;
  font:700 clamp(30px,6vw,84px)/1.08 system-ui,-apple-system,"Segoe UI",sans-serif; letter-spacing:-.015em; opacity:0; }
/* Hidden at once as the show starts; they fade back in only as it ends. */
.aisle-host:not(.warehouse-running) :is(.aisle-labels,.aisle-toolbar,.aisle-help) { transition:opacity .45s ease; }
.aisle-host.warehouse-running :is(.aisle-labels,.aisle-toolbar,.aisle-help,.aisle-callout) { opacity:0; pointer-events:none; }
@media (prefers-reduced-motion: reduce) { .aisle-host:not(.warehouse-running) :is(.aisle-labels,.aisle-toolbar,.aisle-help) { transition:none; } }