/* Eye-level generated artwork with physical inventory layered above it. */
#shift-scenes{--scene-paper:var(--shift-paper,#f0e1c6);--scene-ink:var(--text,#252620);--scene-rust:var(--shift-primary,#a44a2d);position:absolute;left:var(--shift-layout-left,24px);right:calc(var(--shift-layout-left,24px) + var(--shift-board-width,268px) + var(--shift-board-gap,20px));top:var(--shift-view-top,102px);bottom:var(--shift-view-bottom,20px);z-index:1;display:grid;grid-template-rows:auto minmax(0,1fr) auto;min-width:0;background:var(--scene-paper);color:var(--scene-ink);font-family:var(--font-body);touch-action:manipulation}
#shift-scenes button{min-height:44px;min-width:44px;border-radius:0;box-shadow:none;color:var(--scene-ink);background:transparent;border:1px solid var(--rule-strong);font-family:var(--font-mono);font-size:.6875rem}
#shift-scenes button:hover{color:var(--scene-paper);background:var(--scene-ink);border-color:var(--scene-ink)}
#shift-scenes button:focus-visible{outline:2px solid var(--scene-rust);outline-offset:3px}
#shift-scenes button:disabled{opacity:.4;cursor:default}
.scene-heading{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:60px;padding:0 0 12px}
.scene-heading>div:first-child{min-width:0}
.scene-heading h2{font:1.5625rem/1.1 var(--font-heading);letter-spacing:-.025em;margin:0 0 5px}
#scene-work{font:.6875rem/1.35 var(--font-body);color:var(--text-dim);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.scene-pages{display:flex;align-items:center;gap:8px;flex-shrink:0}
#shift-scenes .scene-pages button{padding:6px 8px;border-color:transparent}
#scene-page{font:.625rem var(--font-mono);white-space:nowrap}
.scene-stage{position:relative;min-width:0;min-height:0;overflow:hidden;background:var(--scene-paper)}
#scene-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:manipulation}
#scene-targets{position:absolute;inset:0;pointer-events:none}
#shift-scenes .scene-target{position:absolute;pointer-events:none;opacity:0;padding:0;border:0;min-height:44px;min-width:44px}
.scene-empty{position:absolute;left:18px;right:18px;bottom:14px;margin:0;text-align:center;font:italic 1rem/1.35 var(--font-heading);pointer-events:none}
#scene-loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px;background:var(--scene-paper);font:.8125rem/1.4 var(--font-mono);text-align:center;padding:20px}
#scene-loading p{margin:0}
.scene-label{position:absolute;right:14px;bottom:14px;width:248px;max-height:calc(100% - 28px);overflow:auto;overscroll-behavior:contain;padding:12px 16px 16px;background:var(--scene-paper);border:1px solid var(--scene-ink);touch-action:pan-y}
.scene-label-head{display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid var(--rule)}
.scene-label-head>span{font:.5625rem/1.3 var(--font-mono);letter-spacing:.1em}
#shift-scenes #scene-deselect{min-height:44px;border:0;padding:4px 0 4px 10px;font-size:.625rem}
.scene-label h3{font:1.5rem/1.15 var(--font-heading);letter-spacing:-.025em;margin:12px 0}
.scene-label dl{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;margin:0}
.scene-label dl div{min-width:0}
.scene-label dt{font:.5rem/1.4 var(--font-mono);letter-spacing:.1em;color:var(--text-dim)}
.scene-label dd{font:.6875rem/1.4 var(--font-mono);margin:4px 0 0;overflow-wrap:anywhere}
#scene-status{font:.75rem/1.4 var(--font-body);margin:12px 0}
#scene-barcode{width:100%;height:auto;display:block;padding-top:8px;border-top:1px solid var(--rule)}
.scene-nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:8px 0 0;border-top:1px solid var(--rule);margin-top:8px;min-height:60px}
#shift-scenes .scene-nav button{border:0;border-bottom:2px solid transparent;padding:6px 4px;line-height:1.25}
#shift-scenes .scene-nav button[aria-pressed="true"]{color:var(--scene-rust);background:transparent;border-bottom-color:var(--scene-rust)}
#shift-scenes .scene-nav button[aria-pressed="true"]:hover{color:var(--scene-paper);background:var(--scene-ink)}
@media(max-width:900px),(max-height:550px){
  .scene-heading{min-height:44px;padding:0 0 5px;gap:6px}
  .scene-heading h2{font-size:1.0625rem;margin-bottom:3px}
  #scene-work{font-size:.5625rem}
  .scene-pages{gap:2px}
  #shift-scenes .scene-pages button{font-size:.5625rem;padding:4px}
  #scene-page{font-size:.5rem}
  .scene-nav{min-height:50px;padding-top:3px;margin-top:3px;gap:2px}
  #shift-scenes .scene-nav button{font-size:.625rem;padding:3px 2px}
  .scene-empty{font-size:.8125rem;left:8px;right:8px;bottom:6px}
  .scene-label{right:6px;bottom:6px;width:210px;padding:4px 10px 10px;max-height:calc(100% - 12px)}
  .scene-label h3{font-size:1.125rem;margin:7px 0}
  .scene-label dl{gap:7px}
  .scene-label dd{font-size:.625rem;margin-top:2px}
  #scene-status{font-size:.6875rem;margin:8px 0}
  #scene-barcode{max-height:48px;padding-top:5px}
}
@media(max-width:700px){
  .scene-heading h2{font-size:.9375rem}
  .scene-pages{gap:0}
  #scene-page{width:29px;text-align:center}
  #shift-scenes .scene-nav button{font-size:.5625rem}
}
/* Direct handling controls share the scene's paper and ink. */
.shift-manual #shift-scenes{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto auto}
.shift-manual .hands-carry[hidden]{display:none}
.hands-carry{display:flex;align-items:center;gap:12px;min-height:60px;border-top:1px solid var(--rule);padding:5px 0}
.hands-carry canvas{width:52px;height:47px;flex-shrink:0}
.hands-carry>div{display:grid;gap:4px;min-width:0}
.hands-carry span{font:.5rem var(--font-mono);letter-spacing:.08em}
.hands-carry strong{font:.8125rem var(--font-body)}
.hands-carry p{margin:0 0 0 auto;font:.6875rem var(--font-body);max-width:240px}
.hands-carry button{margin-left:auto}
.hands-zones{position:absolute;inset:0;pointer-events:none}
.hands-position,.hands-door{position:absolute;display:flex;align-items:flex-end;justify-content:center;pointer-events:none}
#shift-scenes .hands-position button,#shift-scenes .hands-door button{pointer-events:auto;width:100%;min-height:44px;border:2px dashed var(--shift-primary);background:var(--shift-paper);padding:8px;color:var(--shift-primary);line-height:1.3;box-shadow:0 0 0 3px #f0e1c688}
#shift-scenes .hands-position button:hover,#shift-scenes .hands-door button:hover{background:var(--shift-primary);color:var(--shift-paper)}
.hands-tools{position:absolute;left:12px;bottom:12px;display:flex;gap:6px;flex-wrap:wrap;max-width:calc(100% - 24px);background:var(--shift-paper)}
#shift-scenes .hands-tools button{background:var(--shift-primary);border-color:var(--shift-primary);color:var(--shift-paper);padding:10px 16px}
.hands-actions{display:grid;gap:8px;margin:10px 0 14px}
.hands-actions p{font:.75rem var(--font-body);margin:0}
#shift-scenes .hands-actions button{width:100%;padding:10px;background:var(--shift-primary);color:var(--shift-paper);border-color:var(--shift-primary)}
#shift-scenes [data-hand="handWrap"]{background:linear-gradient(to right,var(--text) var(--wrap-progress,0%),var(--shift-primary) var(--wrap-progress,0%));touch-action:none;user-select:none;-webkit-user-select:none}
.shift-manual #scene-barcode{display:none}
.hands-release{padding:12px;border-bottom:1px solid var(--rule);font:.75rem var(--font-body)}
.hands-release p{margin:0 0 8px}
.hands-release button{width:100%}
.hands-pick-count{font:.75rem var(--font-mono)}
.shift-manual .shift-order-card>p{font-size:.8125rem;line-height:1.4}
.shift-manual .shift-order-card>button+button{margin-top:8px}
@media(max-width:900px),(max-height:550px){
 .hands-carry{min-height:48px;gap:8px;padding:2px 0}
 .hands-carry canvas{width:40px;height:38px}
 .hands-carry strong{font-size:.6875rem}
 .hands-carry p{display:none}
 .hands-carry span{font-size:.4375rem}
 #shift-scenes .hands-position button{font-size:.5rem;padding:3px}
 .hands-actions{margin:6px 0 8px}
 .hands-actions p{font-size:.625rem}
 .hands-tools{left:6px;bottom:6px}
 #shift-scenes .hands-tools button{padding:6px 10px;font-size:.625rem}
 .shift-manual .scene-label dl div:nth-child(n+3){display:none}
 .shift-manual #scene-status{font-size:.625rem}
}
