/* shelfwalk - styles owned by core/qrscan.js (the camera box) and mod/shelfwalk.js (Stock a shelf, the new-location
   box, Move to a new home). Nothing here is told by colour alone: a found part and a part moved are said in words. */

/* ---- the camera box ---- */
.qr-frame{position:relative; width:100%; max-width:420px; margin:0 auto; aspect-ratio:1 / 1; background:#000;
  border-radius:var(--r-md); overflow:hidden;}
.qr-video{width:100%; height:100%; object-fit:cover; display:block;}
.qr-square{position:absolute; left:18%; top:18%; width:64%; height:64%; border:3px solid #fff; border-radius:var(--r-sm);
  box-shadow:0 0 0 2px #000, 0 0 0 999px rgba(0,0,0,.25); pointer-events:none;}
.qr-say{margin:10px 0 0; font-weight:700;}
.qr-typerow{display:flex; gap:8px; margin-top:10px;}
.qr-typerow input{flex:1; min-width:0; margin:0; text-transform:uppercase;}
.qr-typerow button{width:auto; flex:none;}

/* ---- the walk ---- */
.sw-shelf{font-size:15px; margin:0 0 8px; overflow-wrap:anywhere;}
.sw-shelf .sw-name{font-weight:700;}
.sw-shelf .mono, .sw-chips .mono, .sw-locno .mono, .sw-label .mono{font-family:var(--mono);}
.sw-done{display:flex; flex-direction:column;}
.sw-donerow{display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; padding:8px 0; border-bottom:1px solid var(--line);}
.sw-donerow:last-child{border-bottom:0;}
.sw-donerow b{flex:1 1 100%; overflow-wrap:anywhere;}
.sw-donerow .sub{flex:1; min-width:0; overflow-wrap:anywhere;}
.sw-donerow button{width:auto; flex:none;}

/* ---- the part's form ---- */
.sw-photo{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:0 0 8px;}
.sw-thumb{display:block; max-width:96px; max-height:96px; border-radius:var(--r-md); border:1px solid var(--line);}
.sw-hint{margin:4px 0 0;}
.sw-chips{display:flex; flex-wrap:wrap; gap:6px; margin:6px 0 0;}
.sw-chips button{max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.sw-found{margin:6px 0 0;}
.sw-exists{display:flex; flex-direction:column; gap:2px; border:2px solid currentColor; border-radius:var(--r-sm); padding:8px 10px; font-size:13.5px;}
.sw-two{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.sw-two input{width:100%; min-width:0;}
.sw-used{margin-top:8px; border:0; padding:4px 0;}
.sw-print{margin-top:4px; border:0;}
.sw-locno{margin:10px 0 0; overflow-wrap:anywhere;}

/* ---- where: the choice boxes ---- */
.sw-areas{display:flex; flex-direction:column; gap:8px;}
.sw-areas .sw-area{display:flex; align-items:center; gap:10px; min-height:52px; text-align:left; font-size:16px;}
.sw-areas .sw-area .code{margin-left:auto; font-family:var(--mono); font-size:12px; color:var(--muted);}
.sw-areas .sw-way{flex-direction:column; align-items:flex-start; gap:2px; padding-top:10px; padding-bottom:10px;}
.sw-areas .sw-way .sub{font-size:13px; font-weight:400;}
.sw-areas .sw-area:disabled{opacity:.6;}
.sw-areas .sw-up{align-self:flex-start; width:auto;}
.sw-trail{margin:0 0 2px; font-size:15px; overflow-wrap:anywhere;}

/* ---- a new location, made from a label ---- */
.sw-label{margin:0 0 10px; font-size:15px; overflow-wrap:anywhere;}
.sw-label b{font-size:17px;}
.sw-make select, .sw-newarea input{width:100%; min-width:0;}
.sw-levels{display:flex; flex-direction:column; gap:6px; margin:4px 0 6px;}
.sw-level{display:grid; grid-template-columns:1fr 1fr auto; gap:8px; align-items:center;}
.sw-level input{width:100%; min-width:0; margin:0;}
.sw-level button{width:auto;}
.sw-keeplevels{margin-top:8px;}
.sw-how{font-weight:700;}
.sw-willbe{margin:6px 0 0; overflow-wrap:anywhere;}